Dalam ilmu web pada umumnya, dengan PHP-MySQL pada khususnya, sebuah proses Post Form, akan selalu mengarah ke suatu halaman yang ditandai dengan method dan action sebagai properti Formnya. Contoh:
Ketika tombol submit ditekan, maka halaman tujuan (action) akan dijalankan. Jika halaman adalah halaman itu sendiri, maka akan ter-refresh (terambil ulang dengan sudah membawa perubahan post) dan jika halaman lain sebagai action, akan masuk ke halaman tujuan itu. Hal ini akan menjadi tidak nyaman bagi sebuah web yang memiliki desain gambar cukup besar, sedangkan diperkirakan client akan membuka dengan bandwidth yang minim.
Ada beberapa cara untuk mensiasati hal ini, adalah dengan memanfaatkan framework Javascript berupa Ajax ataupun JQuery. Dalam posting ini akan dicoba menggunakan JQuery sebagai pembantu posting, agar ketika proses Posting, tidak lagi perlu terbuka ulang seluruhnya, hanya bagian tertentu saja.
Langkah pertama yang harus dilakukan adalah lebih dulu halaman harus memuat JQuery library, dengan cara mengambil baik dari host sendiri atapun menggunakan global host, seperti google host misalnya.
Selanjutnya kita tinggal memanfaatkan tiga hal, dalam satu script:
-
Mengambil value dari ID input form, misal :
var judul = $("#id_yang_diambil_sebagai_judul").val(); var isi = $("#id_yang_diambil_sebagai_isi").val(); -
Memanfaatkan fungsi POST dari JQuery dengan melakukannya ditujukan ke suatu file tujuan, dengan value parameter yang telah diambil seperti pada point diatas, contoh:
$.post("submit.php", { judul: judul, isi: isi});Pada proses ini, dimaksudkan agar jquery melakukan proses post pada submit.php, dengan isi value POST[‘judul’] dengan variabel judul, dan POST[‘isi’] dengan variabel isi
- Melakukan penambahan reset form
$("form#postForm")[0].reset();
atau contoh dengan googlehost
Langkah kedua adalah membuat form post seperti biasa, namun dengan seluruh komponen input diberikan id agar dapat diterima browser sebagai variabel yang berbeda, dan diberikan arah action yang berbeda dengan halaman pemuat form. Berikan juga fungsi javascript untuk Button pemicu submit form. Contoh:
Langkah berikutnya adalah menyisipkan script javascript yang ada di bawah ini diantara load JQuery dan Form. Script ini berupa fungsi yang dipanggil oleh button ketika diklik
Untuk menampung hasil kiriman POST, maka kita perlu membuat file submit.php yang isinya antara lain adalah file PHP biasa yang isinya adalah sebagai berikut:
Asumsi tambahan:
Dalam database terdapat sebuah tabel post, yang berisi empat field, dengan field: id, judul, isi, timestamp. Dengan `id` adalah autoincrement, dan timestamp not Null. Asumsi juga bahwa di buat sebuah file database.php yang berisi koneksi database.
File submit.php ini tidak akan muncul di browser, karena prosesnya telah ditahan oleh JQuery.
Selanjutnya tinggal membuat halaman untuk memuat tampilan dari isi tabel post dengan menggunakan jquery juga, yang akan dipost pada posting berikutnya 🙂