Membuat Update Content Dengan Plugin Flippant jQuery

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

Membuat Update Content Dengan Plugin Flippant jQuery

Jika di klik tombol ubah maka akan menampilkan deskripsi nya

Membuat Update Content Dengan Plugin Flippant jQuery

Kita bisa update setiap form nya

Membuat Update Content Dengan Plugin Flippant jQuery

Kemudian ketika di klik tombol update maka content akan flip dan di update

Membuat Update Content Dengan Plugin Flippant jQuery

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.

Membuat Update Content Dengan Plugin Flippant jQuery

Save dengan nama index.html, disini saya menggunakan bootstrap. Langkah selanjutnya kita panggil plugin nya

Membuat Update Content Dengan Plugin Flippant jQuery

<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

Membuat Update Content Dengan Plugin Flippant jQuery

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.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *