Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini kita akan membahas library yang cukup populer digunakan, yaitu sweet alert, kita akan membahasnya dalam tutorial "Cara Menggunakan Sweet Alert dan Modal pada Proses Insert Data Php". Bagaimana cara menggunakan library sweet alert?, ayo ikuti tutorialnya berikut ini!. Sweet alert adalah salah satu plugin atau library yang cukup banyak digunakan untuk membuat alert atau pesan notifikasi. Ciri khas dari sweet alert sendiri adalah kotak popup yang berada di tengah layar dengan efek animasi saat muncul dan menghilang. Kali ini kita tidak hanya menggunakan sweet alert, tapi juga akan di-combine dengan modal bootstrap sebagai formnya agar tampilannya lebih keren dan menarik. Tapi pada tutorial kali ini, kita akan lebih fokus kepada sweet alertnya saja. Bagi kalian yang ingin melihat model-model lain dari sweet alert, bisa mengunjungi laman berikut ini https://sweetalert.js.org/guides Konsep integrasi sweet alert dengan php cukup sederhana, dimana kita akan memanfaatkan fungsi session, nantinya session akan ditampilkan dengan sweet alert saat di-redirect ke halaman yang dituju. Gampang kan? 😁. Ayo langsung saja kita mulai praktek mamang!. Buatlah sebuah database baru dengan nama latihan di dalam phpmyadmin. Lalu buatlah sebuah tabel baru dengan nama post. Untuk struktur tabelnya sangat sederhana, kalian bisa melihat struktur tabelnya seperti gambar di bawah ini. 2. Membuat Folder dan File index.php Selanjutnya buatlah sebuah folder baru di dalam htdocs dengan nama sweetalert, lalu buatlah sebuah file baru di dalamnya dengan nama index.php. Silahkan copy script di bawah ini dan pastekan ke dalam file tersebut. Untuk penjelasan tambahan sudah saya sertakan di dalam script di bawah ini ya :).
Penjelasan:Sedikit penjelasan, script di atas adalah halaman yang akan menampilkan data dan dipresentasikan dalam bentuk tabel. Selain tabel, kita juga menambahkan script modal yang berisi form tambah. Modal akan muncul saat tombol tambah diklik. Jadi konsepnya kita membuat 1 halaman untuk tampil dan menambah data. Logika prosesnya sama dengan saat kalian menggunakan halaman form tambah dan halaman tampil data yang terpisah. Dan script di atas bisa kalian jalankan untuk melihat hasilnya tanpa ada error. 3. Membuat File proses.php Setelah membuat file index.php, selanjutnya buatlah sebuah file baru dengan nama proses.php. Lalu copy script di bawah ini dan pastekan ke dalam file tersebut. Untuk penjelasan tambahan sudah saya sisipkan di dalam scriptnya.
Penjelasan:Tidak ada yang berbeda saat kalian membuat crud pada php. Hanya saja kita menggunakan fungsi session saat data berhasil diinput. Setelah input data berhasil, maka akan otomatis diredirect ke halaman index.php dengan menampilkan pesan session yang telah diset sebelumnya. Perhatikan juga session yang ada pada bagian paling bawah file index.php. Intinya "jika session sukses ada maka tampilkan sweetalert dengan pesan sesion yang telah diset, lalu unset session tersebut". Unset berfungsi untuk menghilangkan pesan sweet alert saat kalian merefresh halaman index.php. Jadi unset sangat penting ya!. Jalankan project yang telah kita buat dan hasilnya akan tampak seperti gambar di bawah ini. Wah keren kan ada efek-efek animasi :) Kalian juga bisa menggunakan sweet alert pada proses update dan delete data dengan konsep atau step yang sama dengan cara di atas. Dan bagi kalian yang ingin belajar modal edit bisa mengikuti tutorialnya di link berikut ini http://www.sahretech.com/2020/12/membuat-modalpop-up-edit-data-dengan.html. Sekian tutorial cara menggunakan sweet alert dan modal pada proses insert data php. Semoga tulisan ini bermanfaat, jika ada yang ingin ditanyakan silahkan tinggalakan pesan kalian di kolom komentar di bawah ini. Sampai jumpa di tutorial libaray keren lainnya. |