Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Asyiknya Menerapkan Kotak Dialog AlertifyJS di Aplikasi Web dari PHPMaker
Bagaimana Cara Mengetahui Class dan Object di PHPMaker?
Cantiknya Memakai AlertifyJS di Aplikasi Web yang Dihasilkan oleh PHPMaker

Asyiknya Menerapkan Kotak Dialog AlertifyJS di Aplikasi Web dari PHPMaker

Kam, 28 Mei 2015 oleh Masino Sinaga Tinggalkan Komentar

Saya yakin bahwa bukan hanya saya saja yang menginginkan fitur Modal (kotak dialog) di Twitter Bootstrap 3 bisa digeser letaknya maupun diperbesar ukuran jendelanya. Banyak Web Developer yang sudah lama berharap agar kotak dialog Modal di Twitter Bootstrap memiliki kemampuan tadi. Tapi sayang, sampai dengan versi 3.3.4 hari ini, Twitter Bootstrap belum memiliki kemampuan itu. Padahal, Aplikasi Web yang dihasilkan oleh PHPMaker pun sudah lama menggunakan CSS Framework yang satu ini.

Penasaran akan hal ini, akhirnya dalam dua hari terakhir ini saya bereksperimen untuk mengoptimalkan penggunaan AlertifyJS di Aplikasi Web yang dihasilkan oleh PHPMaker. Cukup menantang memang, apalagi sejak mengetahui fitur-fiturnya yang sangat powerful dan flexible. Tidak hanya itu saja, pengalaman mengintegrasikan Javascript Framework (begitu kata web-nya) yang satu ini ke dalam Masino Extensions pun sangat mengasyikkan.

Beberapa perbandingan antara kotak dialog Modal di Twitter Bootstrap 3 dan AlertifyJS dapat saya jelaskan sebagai berikut.

Pertama, kalau di Modal bawaan Twitter Bootstrap 3, semua konten akan ditampilkan di atas permukaan kotak dialog itu sendiri. Akibatnya jika kontennya lebih banyak dari yang bisa ditampilkan dalam satu layar, akan muncul scroll di jendela browser. Pengguna harus melakukan scroll melalui browser. Sedangkan jika menggunakan AlertifyJS, maka kita dapat membuat supaya scroll ditampilkan di sisi kotak dialog, dan bukan di browser. Hal ini tentu saja lebih nyaman bagi Pengguna, karena tinggi jendela kotak dialog masih lebih kecil dari tinggi jendela browser.

Kedua, kalau di Modal bawaan Twitter Bootstrap 3, jendela dialog tidak dapat digeser, sehingga jika seandainya kita menampilkan lebih dari satu Modal, maka akan terlihat menumpuk di satu titik posisi yang sama. Ini tentu saja terlihat kurang profesional, karena kita harus menutup kotak dialog yang satu agar dapat melihat kotak dialog yang lainnya. Solusinya, maka di AlertifyJS dapat diatasi dengan membuat kotak dialog yang dapat digeser, sehingga antara kotak dialog yang satu dengan lainnya bisa tetap ditampilkan, dan Pengguna dapat membuat kotak dialog tertentu yang diinginkan berada paling atas secara bergantian. Keren, kan? 🙂

Untuk kondisi yang kedua tadi, saya pun jadi teringat kembali dengan kotak dialog milik YUI (Yahoo User Interface) yang pernah digunakan oleh PHPMaker versi 9 dan sebelumnya, di mana di YUI kotak dialog-nya bisa digeser dan ditampilkan lebih dari satu, tanpa harus menutup kotak dialog yang dibuka sebelumnya. Meskipun demikian, tentu ada perbedaan antara AlertifyJS dengan kotak dialog bawaan YUI. Kalau AlertifyJS memiliki kemampuan untuk membuat posisi kotak dialog manapun yang berada di posisi paling atas secara bergantian, sedangkan kalau di YUI tidak bisa. Selain itu, AlertifyJS sifatnya responsif di perangkat mobile seperti Handphone atau Tablet, sedangkan YUI tidak.

Puji Tuhan, hari ini saya sudah berhasil menerapkan AlertifyJS untuk menampilkan kotak dialog Help Online, Terms and Conditions, maupun About Us di Aplikasi Web yang dihasilkan oleh PHPMaker. Kalau dua hari yang lalu saya sudah berhasil menerapkannya untuk menampilkan kotak dialog hanya sebatas untuk Alert dan Confirm, maka hari ini saya berhasil mengembangkannya lagi menggantikan kotak dialog Modal bawaan Twitter Bootstrap 3 untuk ketiga fungsi kotak dialog di atas tadi.

Berikut ini beberapa fitur yang sudah dibuktikan oleh kotak dialog AlertifyJS di Aplikasi Web yang dihasilkan oleh PHPMaker:

  1. Bisa digeser, dengan menyeret pada bagian header/title-nya.
  2. Bisa dilengketkan (Pin) atau dilepas lengketannya (Unpin), dengan mengklik icon Pin atau Unpin di bagian header/title-nya.
  3. Bisa di-maximize dan di-restore, dengan mengklik icon Maximize atau Restore di bagian header/title-nya.
  4. Bisa di-resize, dengan menyeret pojok sebelah kanan bawah dari jendela kotak dialog-nya ke arah luar atau dalam.
  5. Mobile responsive, artinya jika sebelumnya ukuran kotak dialog-nya sudah berubah maupun letaknya pun sudah berubah dari letak semula, ketika jendela browser di-resize, maka ukuran kotak dialog dan posisinya akan otomatis menyesuaikan dengan ukuran jendela browser. Artinya, analog dari kemampuan ini bisa ditampilkan dengan nyaman di perangkat mobile (HP, Tablet, IPhone, dsb).
  6. Transition Effects, ada beberapa pilihan efek transisi pemunculannya di layar, yaitu: pulse, slide, zoom, fade, flipx, dan flipy.

Semua fitur di atas sudah berhasil dibungkus dalam Masino Extensions. Jika Anda sudah menjadi Member, maka bisa men-download-nya melalui situs I Love PHPMaker. Pastikan Anda sudah men-download ulang semua Extensions untuk PHPMaker yang terakhir saya perbarui hari ini. Supaya lebih aman, download ulang semua file Masino Extensions untuk PHPMaker versi 11.

Dengan diterapkannya fitur ini di Aplikasi Web yang dihasilkan oleh PHPMaker, maka semakin naik kelas pula Aplikasi Web yang Anda bikin dengan menggunakan PHPMaker. Tampilannya pun cantik, enak dan nyaman dilihat, serta sangat responsif dengan aksi dari Pengguna maupun ketika diakses dari perangkat yang lebar layarnya sempit. Kita sebagai Web Developer bahkan dapat menerapkannya di semua Aplikasi Web yang dihasilkan oleh PHPMaker dengan sangat mudah, cepat, dan lagi-lagi… menyenangkan! 🙂

Penasaran ingin melihat demonya? Silahkan klik di sini. Klik icon Tanda Tanya (?) untuk menampilkan jendela dialog Help Online, klik juga link Terms and Conditions, dan About Us untuk mencoba tiga jendela kotak dialog AlertifyJS ditampilkan. Cobalah bermain-main dengan menggeser, me-resize, me-maximize/restore, dan mengubah posisi jendela dialog berada pada posisi paling atas.

Menutup tulisan ini dan berharap dapat membantu para Web Developer yang sedang mencari-cari fitur seperti ini, berikut beberapa kata kunci untuk menerapkan Kotak Dialog yang memiliki kemampuan untuk digeser, diubah ukuran jendelanya, dilengketkan, dan diperbesar jendelanya:
– twitter bootstrap 3 modal yang bisa digeser
– twitter bootstrap 3 modal yang bisa diperbesar
– twitter bootstrap 3 modal yang bisa lengket
– twitter bootstrap 3 modal draggable
– twitter bootstrap 3 modal position
– twitter bootstrap 3 modal resizable
– twitter bootstrap 3 modal pin/unpin

Semoga bermanfaat, yaaaa… PHPMaker, gitu lho! 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:AlertifyJS, Belajar PHPMaker, javascript dialog notification, Javascript Message Box, jQuery dialog, modal pin, modal unpin, PHPMaker Alertify, PHPMaker Indonesia, Tutorial PHPMaker, Twitter Bootstrap 3

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Bagaimana Cara Mengetahui Class dan Object di PHPMaker?
Cantiknya Memakai AlertifyJS di Aplikasi Web yang Dihasilkan oleh PHPMaker

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Pos-pos Terbaru

  • ReadOnly vs Disabled, Sebaiknya Pilih yang Mana?
  • Mudahnya Menghilangkan Search Operator pada Extended dan Advanced Search di PHPMaker 2024
  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download!
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Review PHPMaker 2024

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • achmad pada Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Masino Sinaga pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker
  • Shandy pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker
  • Masino Sinaga pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2023 | WordPress | Catat masuk | Kembali ke atas