Halo selamat datang di website tips dan trik Dumet School, kembali lagi dengan saya yang tiada bosannya memberikan tips dan trik seputar dunia website. Khususnya untuk teman – teman yang saat ini sedang belajar ngoding membuat website, pada kesempayan kali ini saya akan memberikan tips tentang Membuat Update Content Dengan Plugin Flippant jQuery dimana hasil dari latihan kali ini nanti dapat mengupdate content atau isi artikel. Biasa kita buat Update dengan menggunakan PHP tetapi dengan menggunakan Flippant ini kita juga dapat mengupdate content tanpa harus menggunakan database, namun jika di refresh content kembali seperti semula. Nanti dari hasil latihan kali ini teman – teman bisa di kombinasikan dengan PHP agar jika update masuk kedalam database dan tampilannya menjadi flip (memutar) jika di klik update. Bisa lihat gambar di bawah ini
Jika di klik tombol ubah maka akan menampilkan deskripsi nya
Kita bisa update setiap form nya
Kemudian ketika di klik tombol update maka content akan flip dan di update
Oke langsung saja kita praktekkan Membuat Update Content Dengan Plugin Flippant jQuery teman – teman siapkan text editornya dan download plugin Flippant nya di link ini, kemudian extract dalam satu folder lalu ketikkan script html nya seperti gambar di bawah ini.
Save dengan nama index.html, disini saya menggunakan bootstrap. Langkah selanjutnya kita panggil plugin nya
<link rel="stylesheet" type="text/css" href="flippant.css"> <script type="text/javascript" src="flippant.js"></script> <script type="text/javascript" src="browsery.js"></script
Penjelasannya:
Pada button ubah memiliki class btnflip dan ubah kemudian akan di direct kehalaman flippant.js dan browsery.js, class btnflip akan di proses di halaman browsery.js
Lalu class ubah juga di proses di flippant.js, jadi secara bersamaan class masing – masing akan di eksekusi sehingga menghasilkan tampilan flip dan tidak ada loading sama sekali. Jika teman – teman ingin mengkombinasikan dengan php prosesnya ada di browsery.js.
Maka Membuat Update Content Dengan Plugin Flippant jQuery berhasil di buat, sekian pada tips kali ini. Kita berjumpa kembali pada artikel yang akan datang, semoga bermanfaat.
Terimakasih dan Sampai Jumpa.
