Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Mengirim Formulir Tanpa Refresh Halaman Menggunakan jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Sebelumnya di Nettuts+, Philo menunjukkan bagaimana Anda bisa menggunakan jQuery untuk menambahkan validasi formulir ke komentar wordpress yang bekerja tanpa pemuatan ulang halaman. Cara lain yang bagus untuk menerapkan jQuery untuk meningkatkan pengalaman pengguna adalah dengan tidak hanya memvalidasi, namun mengirimkan formulir sepenuhnya tanpa refresh halaman.

Dalam tutorial ini saya akan menunjukkan betapa mudahnya melakukan hal itu -- mengirimkan formulir kontak yang mengirim email, tanpa refresh halaman menggunakan jQuery! (Email sebenarnya dikirim dengan skrip php yang memproses di latar belakang). Mari kita mulai.


Apa yang Kita Bangun

Dalam contoh ini, kita memiliki formulir kontak sederhana dengan nama, email, dan nomor telepon. Formulir mengirimkan semua field ke skrip php tanpa refresh halaman, menggunakan fungsi jQuery asli (artinya asli, Anda tidak perlu mengunduh plugin tambahan agar bisa bekerja.

Jika Anda telah menemukan artikel ini tanpa keakraban sebelumnya dengan jQuery, tempat yang bagus untuk memulai adalah artikel Jeffrey Way di 15 Sumber untuk Anda Memulai dengan jQuery dari Awal.


Langkah 1 - Membangun Formulir HTML

Mari kita lihat markup html kita. Kita mulai dengan formulir html dasar kita:

Anda mungkin memperhatikan bahwa saya telah menyertakan div dengan id contact_form yang membungkus keseluruhan formulir.
Pastikan untuk tidak melewatkan div itu dalam formulir Anda sendiri karena kita akan membutuhkan div pembungkus ini nanti. Anda
mungkin juga memperhatikan bahwa saya telah meninggalkan kedua bagian action dan method dari tag formulir kosong. Kita
sebenarnya tidak perlu salah satu dari ini di sini, karena jQuery menangani semuanya nanti.

Hal penting lain yang harus dipastikan adalah nilai id untuk setiap field masukan. Nilai id
adalah apa yang akan dicari skrip jQuery Anda untuk memproses formulir dengannya.

Saya telah menambahkan beberapa gaya css dan gambar latar belakang di Photoshop untuk menghasilkan formulir berikut:


Langkah 2 - Mulai Menambahkan jQuery

Langkah selanjutnya dalam proses ini adalah menambahkan beberapa kode jQuery. Saya akan berasumsi bahwa Anda telah mengunduh jQuery, mengunggah ke server Anda, dan mereferensikannya di halaman web Anda.

Selanjutnya, buka file javascript baru lainnya, rujuk ke html Anda seperti file javascript biasa lainnya,
dan tambahkan yang berikut ini:

Apa yang function() pertama lakukan adalah, memuat event di dalamnya, segera setelah dokumen html siap. Jika Anda pernah melakukan pekerjaan di jQuery sebelumnya, fungsinya sama dengan fungsi document.ready jQuery. Jadi kita mulai dengan itu, dan di dalamnya kita memiliki fungsi click kita yang mengeksekusi pada mengklik tombol submit dengan nama kelas "button". Akhirnya apa yang telah kita capai dengan baris kode ini sama seperti jika kita menambahkan event onclick ke tombol submit di html. Alasan kita melakukannya dengan jQuery adalah pemisahan yang bersih dari presentasi kita dari skrip kita.


Langkah 3 - Menulis Beberapa Validasi Formulir

Di dalam fungsi kita yang dimuat saat halaman sudah siap, kita menambahkan beberapa validasi formulir. Tapi hal pertama yang Anda lihat yang ditambahkan adalah $('.error').hide();. Apa yang dilakukan adalah menyembunyikan 3 label dengan nama kelas "error" kita. Kita ingin label ini disembunyikan tidak hanya saat
halaman pertama memuat, tapi juga saat Anda mengklik submit, jika salah satu pesan ditunjukkan kepada pengguna sebelumnya. Setiap pesan kesalahan seharusnya hanya muncul jika validasi tidak berhasil.

Kita memvalidasi dengan terlebih dahulu memeriksa apakah field name dibiarkan kosong oleh pengguna, dan jika ya, kita kemudian menunjukkan label dengan id name_error. Kita kemudian menempatkan fokus pada field masukan name, jika pengguna
sama sekali bingung tentang apa yang harus dilakukan selanjutnya! (Saya telah belajar untuk tidak pernah terlalu banyak memikirkan ketika mengenai formulir pengguna).

Untuk menjelaskan secara lebih rinci bagaimana kita membuat ini terjadi, kita tetapkan variabel 'name' ke nilai field input dengan id "name" -- semua dengan satu baris jQuery:

Kita kemudian memeriksa apakah nilai itu kosong, dan jika memang demikian, kita menggunakan metode show() jQuery untuk menunjukkan labelnya dengan
id "name_error":

Selanjutnya, kita menempatkan fokus formulir kembali pada field input dengan id "name", dan akhirnya mengembalikan false:

Pastikan untuk mengembalikan false dalam kode Anda, jika tidak seluruh formulir akan dikirim (yang mengalahkan
tujuan dari tutorial ini)! Yang dilakukan return false adalah mencegah pengguna untuk melanjutkan lebih jauh
tanpa mengisi field yang diperlukan.


Langkah 4 - Proses Penyampaian Formulir Kita dengan Fungsi AJAX jQuery

Sekarang kita sampai ke inti tutorial -- mengirimkan formulir tanpa refresh halaman, yang mengirimkan nilai formulir ke skrip php di latar belakang. Mari kita lihat semua kode terlebih dahulu, kemudian saya akan merinci lebih detail selanjutnya. Tambahkan kode berikut tepat di bawah cuplikan validasi yang telah kita tambahkan sebelumnya (dan sebelum fungsi click tombol ditutup):

Kita memiliki banyak hal terjadi di sini! Mari kita rinci semuanya - sangat sederhana dan mudah digunakan begitu Anda memahami prosesnya. Kita pertama kali membuat string dari nilai, yaitu semua nilai formulir yang ingin kita kirimkan ke skrip yang mengirim email.

Ingat sebelumnya, kita telah menetapkan variabel 'name' dengan nilai field masukan dengan id "name", seperti:

Kita bisa menggunakan nilai 'name' itu lagi, begitu juga nilai 'email' dan 'phone', untuk membuat dataString kita:

Saya telah memberi komentar sebuah peringatan bahwa saya kadang-kadang harus memastikan bahwa saya meraih nilai yang benar, yang mungkin berguna bagi Anda dalam prosesnya. Jika Anda menghapus komentar peringatan tersebut dan menguji formulir Anda, dengan asumsi semuanya telah berjalan dengan baik sejauh ini, Anda akan mendapatkan pesan yang serupa dengan yang berikut:

Sekarang kita sampai pada fungsi ajax utama kita, bintang pertunjukan hari ini. Di sinilah semua tindakan terjadi, jadi
perhatikan baik-baik!

Pada dasarnya apa yang terjadi dalam kode adalah: Fungsi .ajax() memproses nilai dari string kita yang disebut dataString (data:dataString) dengan skrip php yang disebut process.php (url:"bin/process.php"), menggunakan metode 'POST' (type:"POST"). Jika skrip kita diproses dengan sukses, kita kemudian dapat menampilkan pesan kembali ke pengguna, dan akhirnya mengembalikan false sehingga halaman tidak memuat ulang. Itu saja! Seluruh proses ditangani di sana dalam beberapa baris ini!

Ada hal-hal yang lebih lanjut yang dapat Anda lakukan di sini, selain mengirim email dan memberikan pesan sukses. Misalnya Anda bisa mengirim nilai Anda ke database, mengolahnya, lalu menampilkan hasilnya kembali ke pengguna. Jadi jika Anda mengirimkan polling kepada pengguna, Anda bisa memproses suara mereka, kemudian mengembalikan hasil pemungutan suara, semua tanpa penyegaran halaman yang diperlukan.

Mari kita meringkas apa yang terjadi dalam contoh kita, untuk memastikan kita telah membahas semuanya. Kita meraih nilai formulir kita dengan jQuery, dan kemudian menempatkannya ke dalam string seperti ini:

Kemudian kita menggunakan fungsi ajax jQuery untuk mengolah nilai dalam dataString. Setelah
proses itu selesai dengan sukses, kita menampilkan pesan kembali ke pengguna dan menambahkan return false sehingga halaman kita tidak refresh:

Bagian keberhasilan skrip telah diisi dengan beberapa konten spesifik yang bisa ditampilkan kembali ke pengguna. Tapi sejauh fungsi ajax kita berjalan, itu saja yang ada untuk itu. Untuk lebih banyak pilihan dan pengaturan, pastikan untuk memeriksa dokumentasi jQuery pada fungsi ajax. Contoh di sini adalah salah satu implementasi yang lebih sederhana, namun demikian, sangat kuat seperti yang Anda lihat.


Langkah 5 - Menampilkan Pesan Kembali ke Pengguna

Mari kita lihat bagian kode yang menampilkan pesan kita kembali kepada pengguna, untuk menyelesaikan tutorialnya.

Pertama, kita ubah keseluruhan isi div contact_form (ingat saya bilang kita akan membutuhkan div itu) dengan baris berikut:

Apa yang telah dilakukan adalah mengganti semua konten di dalam div contact_form, menggunakan fungsi html() jQuery. Jadi, bukannya sebuah formulir, sekarang kita hanya memiliki div baru di dalamnya, dengan id 'message'. Selanjutnya, kita isi div itu dengan pesan yang sebenarnya -- sebuah h2 mengatakan "Contact Form Submitted":

Kita selanjutnya menambahkan lebih banyak konten ke div pesan dengan fungsi append() jQuery, dan untuk melengkapi semuanya, kita menambahkan efek keren dengan menyembunyikan div pesan dengan fungsi jQuery hide(), lalu memudarkan semuanya dengan fungsi fadeIn():

Jadi pengguna akhirnya melihat berikut setelah mereka mengirimkan formulir:

Sekarang, saya pikir Anda harus setuju bahwa itu sangat mudah untuk mengirimkan formulir tanpa refresh halaman menggunakan fungsi ajax yang bagus dari jQuery. Hanya dapatkan nilai-nilai dalam file javascript Anda, proses mereka dengan fungsi ajax dan mengembalikan false, dan Anda baik untuk pergi. Anda dapat memproses nilai-nilai dalam skrip php Anda seperti file php lainnya, satu-satunya perbedaan adalah bahwa pengguna tidak perlu menunggu refresh halaman - semuanya terjadi diam-diam di latar belakang.

Jadi jika Anda memiliki formulir kontak di situs web Anda, formulir login, atau bahkan formulir yang lebih maju yang memproses nilai melalui database dan mengembalikan hasilnya kembali, Anda dapat melakukannya dengan mudah dan efisien, dan mungkin yang terpenting, Anda meningkatkan pengalaman pengguna akhir pada situs web Anda dengan memberikan interaktivitas tanpa harus menunggu halaman dimuat ulang.

Kesimpulan

Saya ingin menambahkan beberapa kata terakhir tentang contoh demo yang diberikan. Dalam demo, Anda mungkin memperhatikan bahwa sebenarnya ada satu plugin yang digunakan - file runonload.js. Saya menyatakan pada awal tutorial bahwa kita tidak akan menggunakan plugin apapun, dan kemudian Anda temukan di demo ada skrip runonload tambahan, jadi beberapa penjelasan mungkin diperlukan! Bagi siapa saja yang tertarik untuk melihat demo yang bekerja nyata, Anda dapat melihat formulir konsultasi SEO situs web saya.

Penggunaan satu-satunya yang saya buat dengan runonload sebenarnya tidak ada hubungannya dengan pemrosesan formulir. Jadi Anda bisa menyelesaikan fungsi ajax sepenuhnya tanpa plugin tambahan. Saya hanya menggunakan runonload untuk memfokuskan field masukan nama pada pemuatan halaman. Sudah pengalaman saya bahwa memanggil runonload kadang-kadang bisa menjadi pengganti yang lebih baik untuk fungsi document ready asli jQuery, dan saya merasa cocok saat menyusun tutorial ini. Untuk beberapa alasan fungsi focus() tidak akan bekerja pada pemuatan halaman menggunakan fungsi document ready asli jQuery -- tapi fungsinya bekerja dengan runonload, dan karena itulah Anda menemukannya sebagai bagian dari contoh. Jadi jika Anda tahu cara untuk mencapainya tanpa menggunakan runonload, saya akan dengan senang hati mendengar kabar tentang hal itu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.