Pop Up Form Using Bootstrap

Aku pernah nulis tentang membuat Pop Up form seperti yang ada di postingan PHP – Pop Up form untuk edit, delete, dan add. Ternyata lumayan banyak yang comment dan minta untuk dikirimkan scriptnya. Sampai sekarang juga masih ada beberapa yang comment disana.

Nah, di postingan ini aku mau ngasih tau bagi adek-adek yang mungkin baru belajar programming, bahwa ada cara baru yang lebih mudah untuk membuat Pop Up form yaitu menggunakan Bootstrap template.

Caranya, kalian tinggal download saja Bootstrap Template dari Google, banyak kok pilihannya dan itu free. Kalau kalian udah download, disana banyak banget contoh penggunaan bootstrap mulai dari Responsive Table, yaitu tabel dengan filter dan paging otomatis  langsung bisa dipakai jadi kalian ga perlu repot-repot lagi nyari cara buat bikin paging di tabel.

Selain itu, ada juga yang namanya “Modal”, nah “Modal” ini lah yang bisa kalian gunakan untuk membuat Pop Up form. Kalian gak perlu otak-atik jquery nya atau download jquery tertentu seperti yang aku lakukan di postingan ini. Kalian cukup panggil modal-nya aja sesuai dengan yang kalian inginkan.

Ini aku kasih contoh penggunaannya :

Bootstrap

Contoh form menggunakan bootstrap. Ini halaman utamanya ya, nah pas di klik icon search (Allocation) akan menampilkan Pop Up Form, atau biasa disebut Modal kalau di bootstrap, seperti ini :

Bootstrap2

Nah, di Modal ini kalian bebas mau buat fungsi apa aja. Bisa cuma view, bisa juga add/edit  transaksi.

Bootstrap ini lebih mudah dipelajari dan tampilannya lebih bagus dibandingkan cara yang dahulu kala. Jadi sangat saya sarankan buat adek-adek yang baru kuliah atau masuk ke dunia programming, agar belajar tentang Bootstrap ini.

Selamat mencoba ^^ . Silahkan bertanya kalau ada yang mau ditanyakan ya adek-adek 🙂

3 thoughts on “Pop Up Form Using Bootstrap

Leave a Reply to Winny Marlina Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: