Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Membuat Bootstrap Kontak Form Menggunakan PHP dan AJAX

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial ini saya akan membahas langkah-langkah untuk membuat form kontak yang berfungsi, memanfaatkan kerangka Bootstrap front-end yang sedang populer, dalam kombinasinya dengan AJAX dan PHP. Dari sana kita dapat menjelajahi beberapa fitur tambahan seperti beberapa animasi CSS mewah dengan animate.css, validasi lebih lanjut di JavaScript dan menyempurnakan pengalaman pengguna dengan konten asinkron.

Pada saat penulisan ini Bootstrap 3.3.5 adalah versi yang paling baru, dan layak disebutkan bahwa kita menggunakan build default dari Bootstrap (dengan layout 12 kolom) untuk tutorial ini. Saat mengikuti bersama pastikan Anda menggunakan potongan terbaru dan struktur kode seperti yang diuraikan oleh dokumentasi Bootstrap.

Struktur File dan Folder

Pertama-tama, kita ingin membuat sebuah direktori root dan memasukkan file dan folder berikut ini:

Kita akan perlu memasukkan beberapa library front-end agar dapat membantu kita, jadi langsung pergi dan download (atau mereferensikan secara eksternal) berikut:

Masukkan library tersebut, sehingga struktur file menjadi:

Membangun Dasar-dasar dari Form

Bukalah file index.html, copy struktur dasar HTML berikut ini:

Ini adalah template html dasar kita di mana kita akan membangun isinya untuk form. Anda dapat melihat kami telah menghubungkan semua file CSS dan JavaScript yang diperlukan (perhatikan kita tidak benar-benar memerlukan bootstrap.js pada contoh khusus ini). Kami telah menyertakan tag meta viewport untuk membantu dengan media queries kita di dalam Bootstrap. JavaScript diletakkan di bagian bawah dari file agar membantu menyampaikan konten inti pertama kalinya.

Di dalam tag body, kita memasukkan sebuah div dengan kelas col-sm-6 col-sm-offset-3. Ini pada dasarnya berarti dalam viewport sm (kecil) dan di atasnya kita ingin menampilkan kolom dengan lebar 50% (maksimal ada 12 kolom). Kelas col-sm-offset-3 menerangkan sebuah margin kiri sebesar 25%, sehingga menghasilkan sebuah tata letak setengah dari viewport layar yang tersedia dan ditengahkan secara horizontal. Dari sini kami menyertakan sebuah h3 dan memulai dasar-dasar form kita. Pastikan untuk menerapkan sebuah ID ke form ini sehingga kita dapat melampirkan event jQuery kepadanya kemudian.

the offset will push our DIV 25 from the right

Tidak ada Keberanian, Tidak ada Kemenangan

Membangun keberanian dari form dimana kita dapat copy/paste atau menulis kode berikut di dalam tag <form></form>:

Ini adalah semua field-field input dan tombol-tombol dimana pengguna akan berinteraksi dengannya. div permulaan dengan kelas row yang ditujukan kepadanya adalah sintaks Bootstrap klasik, mewakili sebuah pengelompokan horizontal dari elemen-elemen col. Kolom dalam Bootstrap membuat padding atau pemisah–menambahkan sebuah baris di sekitarnya akan menghapus padding di kiri dan kanan yang membuat mereka sesuai sempurna di dalam kontainer mereka.

Kami telah membuat dua kolom dengan kelas col-sm-6 (50%) yang mana kita akan menggunakannya untuk memisahkan form kita. Di dalam col-sm-6 yang pertama kami telah membuat sebuah label dan field untuk nama, yang kedua adalah untuk email. Masing-masing termasuk sebuah label dengan atribut for yang sesuai sehingga ia dapat mentarget field yang terkait. Masing-masing kolom ini termasuk form-group yang secara semantik mengelompokkan label dan field bersama-sama dan memberlakukan margin kecil ke bawahnya.

Displaying two fields inline

Tipografi

Bootstrap memungkinkan Anda menggunakan kelas tipografi dari H1-H6. Kelas-kelas ini membantu kita men-style elemen-elemen yang berjajar tanpa menambahkan margin tambahan atau menciptakan elemen-elemen blok. Kita memanfaatkan sebuah H4 agar dengan cepat men-style label-label ini membuatnya menjadi besar dan jelas.

Kelas form-control diterapkan ke setiap input memungkinkan untuk menjangkau seluruh panjang kontainer (100% lebar). Ini juga berlaku berbagai gaya untuk membantu membangun mudah dibaca elemen form (lebih besar ketinggian, datar perbatasan dll).

Setelah kolom ini kami memasukkan body pesan. Sekali lagi, kami bungkusnya di dalam form-group dan menerapkan gaya yang serupa ke label dan area teks seperti yang kita lakukan sebelumnya.

Panggilan untuk bertindak

Akhirnya kami menyertakan tombol submit. Bootstrap memiliki sejumlah kelas untuk berbagai warna/status tombol dan tipografi. Kami telah memilih untuk menggunakan tombol "success" (btn-success) yang, secara default, hijau. Selain itu kita perlu menerapkan kelas dasar btn untuk me-reset dasar fitur tombol (border, padding, text-align, font-weight). Kami menerapkan kelas btn-lg yang menjadikannya tombol besar dan akhirnya kelas pull-right yang mem-float tombol ini ke kanan.

Setelah tombol yang kami masukkan div dengan id dari #msgSubmit dan diterapkan kelas berikut: "h3 text-center hidden". H3 membantu membuat heading yang lebih besar, text-center (coba tebak) menetapkan teks-penyelarasan ke tengah, dan akhirnya kami telah menetapkan kelas hidden yang menetapkan semua display ke none dan visibility ke hidden.

Completed Form

Menambahkan Fungsi Submission

Seperti yang Anda ketahui dari melihatnya di browser yang Anda inginkan, kami telah menciptakan sebuah form dasar Bootstrap. Namun itu benar-benar belum dapat melakukan apa-apa. Langkah berikutnya akan membuat fungsi yang dibutuhkan pengguna untuk input dan mengirimkannya secara asinkron ke PHP mailer kami.

Buka scripts.js copy kode berikut:

Sedikit kode ini adalah potongan jQuery yang me-listen sebuah fungsi submit pada id #contactForm kami (sebagaimana sebelumnya). Berdasarkan fungsi ini kami mengurai variabel event yang menyimpan action form submit ke fungsi. event.preventDeafult(); berhenti mengirimkan form karena akan biasanya, akan me-refresh halaman seperti tidak ada action form yang ditetapkan. Akhirnya, ia me-request fungsi submitForm();.

submitForm();

Selanjutnya kita membangun fungsi submitForm(); sebagai berikut:

Tiga variabel yang ditetapkan adalah mengambil nilai-nilai dari setiap input dari form dan menetapkan mereka ke variabel JavaScript yang akan digunakan nantinya.

Kami memulai sebuah objek AJAX dalam jQuery dan mengatur parameter dari jenis post, URL ke lokasi file PHP, data yang ingin kita kirim dan fungsi panggilan kembali keberhasilan. Data termasuk semua tiga variabel yang digabungkan dengan label/id terkait. Fungsi panggilan kembali keberhasilan dipanggil ketika objek AJAX berhasil menerima informasi kembali dari skrip PHP. Fungsi tersebut mengambil teks yang dikembalikan dan memeriksa untuk melihat apakah itu sama dengan string "success". Jika demikian, ini mengaktifkan fungsi final dari formSuccess.

Fungsi formSuccess menghapus kelas tersembunyi dari div #msgSubmit yang kita terapkan sebelumnya, dengan demikian mengungkapkan teksnya.

Mengaitkannya ke Fungsi PHP Mail

Akhirnya, kita perlu menulis skrip PHP untuk menerima data dan mengirimkan konten kami melalui fungsi built-in php mail. Buka process.php dan masukkan kode berikut:

Mirip dengan potongan jQuery sebelumnya, kita perlu untuk mengumpulkan dan menyimpan variabel-variabel yang ingin kita gunakan. Dari fungsi post, kami dapat mengumpulkan tiga variabel input dan menetapkan mereka ke nama-nama variabel yang serupa di dalam PHP. Variabel $EmailTo adalah alamat email yang sudah ditentukan sebelumnya yang dapat diatur dalam skrip untuk mengirim ke email Anda setelah pengiriman form. $Subject adalah string yang ingin Anda gunakan sebagai subjek email.

Body email dibangun secara longgar disekitar ketiga variabel yang ditetapkan. Pertama-tama menetapkan beberapa teks deskriptif seperti "Name:", kemudian variabelnya, kemudian baris baru seperti yang ditentukan oleh /n (new line/line break). Ini adalah berulang-ulang dan digabungkan ke variabel $body.

Akhirnya mengirim email ini, kami lampirkan dalam fungsi mail. Menetapkan variabel $success kami menyertakan alamat email yang akan dikirim, subjek, body dan pengirim email.

Untuk memulai proses mengirimkan email kita bisa memanggilnya dalam sebuah pernyataan if. Ini juga membantu memeriksa untuk melihat apakah itu berhasil atau tidak. Jika fungsi mail mengembalikan "true" skrip akan mengembalikan "success", jika gagal maka akan mengembalikan "invalid".

Hasil ini akan dikembalikan ke objek AJAX dan ditangani kembali pada sisi klien. Keindahan dari AJAX adalah bahwa semua ini dilakukan secara asinkron pada sisi klien, memungkinkan pengguna untuk terus menggunakan situs ini ketika sedang dikirim.

Meludah dan Menyemir

Setelah membahas struktur dasar dan fungsi dari form kami di bagian pertama dari tutorial ini, sekarang kita akan masuk ke seluk beluk dari memberikan umpan balik pengguna melalui berbagai fitur tambahan yang bisa kita sertakan. Khususnya, kita akan membahas umpan balik form melalui penanganan kesalahan baik pada sisi klien dan sisi server.

Sekali lagi, untuk membantu dengan proses pembentukan validasi form, kita akan menggunakan beberapa alat. Ini termasuk:

Tambahkan ini ke dalam proyek seperti yang kita lakukan dengan Bootstrap dan jQuery sebelumnya. Alat-alat ini akan membantu memberikan umpan balik kepada pengguna ketika mereka men-submit form. Ada banyak alat-alat validator form dan kerangka di luar sana (termasuk validasi HTML5 native), tapi saya menggunakan "Bootstrap Validator" yang itu terintegrasi baik dengan form kami saat ini.

Struktur proyek sekarang harus terlihat seperti ini:

Mem-validasi Form Kami

Mari kita mulai dengan memulai validator untuk memeriksa form setelah kita submit. Kembali ke file scripts.js kita butuh untuk mengedit potongan kode pertama yang memanggil fungsi submitForm() ketika form di-submit.

Kita perlu memperbarui kode berikut:

Sedikit kode baru memeriksa untuk melihat apakah Bootstrap Validator telah menemukan masalah dan berhenti dari pengolahannya. Jika tidak, kami lanjutkan seperti biasa. Kita masih perlu untuk mencegah aksi default (reload halaman) pada penyerahan form yang sukses, jadi ingatlah.

Meng-klik submit pada form ketika ia tidak benar-benar diisi dengan lengkap sekarang akan menyebabkan field yang kosong untuk disorot warna merah menunjukkan apa yang harus dimasukkan, semudah itu!

Dalam proses menambahkan validasi ini kami telah menghapus atau mencegah validasi HTML5 native dari mengambil alih. Kita dapat menambahkan konteks lebih lanjut ke validasi kami dengan memasukkan pesan kesalahan. Bootstrap Validator memiliki fitur bagus yang memungkinkan pesan kesalahan untuk setiap input agar ditampilkan cukup mulus. Untuk menambahkan ini kita perlu menambahkan beberapa HTML lebih lanjut untuk menyediakan tempat bagi mereka agar tampil.

Dalam setiap form-group di bawah input kita harus menempatkan kode html berikut:

Sebagai contoh, berikut ini adalah div ekstra yang ditambahkan ke field Nama dan Email:

Mengirimkan ulang form sekarang seharusnya menunjukkan pesan kesalahan default ketika field dibiarkan kosong "Silahkan mengisi field ini.". Dengan menambahkan data-attribute ke input yang disebut "data-error" Anda dapat menyertakan pesan kesalahan kustom. Sebagai contoh:

Ada seluruh host dari fitur lain seperti pola regular expression yang dapat diterima Bootstrap Validator. Anda bisa lihat lebih lanjut di Github.

Menambahkan Animasi Umpan Balik

Validasi sisi klien kami terlihat baik; kami memiliki beberapa highlights bagus yang terjadi pada field-field yang kosong. Namun, itu akan baik untuk menambahkan animasi lebih lanjut ke form dan menambahkan pesan lebih lanjut membiarkan pengguna mengetahui apa yang terjadi. Saat ini kami memiliki pesan "Pesan Dikirim!" muncul saat sukses, tetapi bagaimana tentang kesalahan?

Untuk memanfaatkan kode yang ada dan membuat skrip kami sedikit lebih dapat digunakan kembali kita akan memodifikasi pesan sukses yang sudah ada untuk menerima kesalahan juga.

Hal yang pertama kali, mari kita hapus teks "Pesan Dikirim!" dari HTML dan hanya meninggalkan div kosong:

Kita sekarang akan perlu membuat fungsi baru untuk menangani status pesan. Tambahkan fungsi ini ke bagian bawah scripts.js

Fungsi ini mengambil dua argumen. valid akan menjadi variabel Boolean: jika itu true, itu akan menjadi pesan sukses, false akan menjadi pesan kesalahan. msg akan menjadi pesan yang akan kami tampilkan dalam div pada layar.

Pertama fungsi memeriksa untuk melihat jika itu berurusan dengan pesan sukses atau kesalahan dengan memeriksa nilai yang valid. Dalam semua kasus ini menetapkan variabel kelas dengan kelas CSS yang sesuai (kita perlu menyertakan ulang h3 dan text-center karena kami akan menghapusnya secara default di kemudian dalam fungsi.)

Catatan: kami menggunakan beberapa kelas animate.css untuk kelas pesan sukses. Animasi tada akan dimainkan pada sukses.

Akhirnya, fungsi menghapus semua kelas dari #msgSubmit (menghindari bentrokan kelas), kemudian menambahkan kelas yang ditetapkan sebelumnya, dan kemudian menambahkan pesan teks di dalam div.

Dalam validator inisiasi kita memperbarui di mulai dari bagian ini kita dapat menambahkan paggilan fungsi berikut di dalam pernyataan if ketika itu sama dengan true.

submitMSG(false, "Apakah Anda mengisi form dengan benar?"

Satu langkah terakhir untuk fungsi submitMSG yang baru adalah memanggilnya ketika form kami adalah sukses. Perbarui fungsi formSuccess() berikut:

Pertama-tama kami ingin me-reset form dan membersihkan nilai-nilai saat sukses, maka kita panggil fungsi submitMSG kami seperti sebelumnya dengan pesan sukses. Berhasil mengirimkan form seharusnya sudah menampilkan pesan sukses dengan efek animasi mewah tada animate.css.

Menggoyang

Apa itu satu lagi animasi, benar? Mari kita menambahkan animasi yang lain untuk seluruh form saat kesalahan, animasi universal "gemetar" seharusnya bagus!

Buat fungsi baru setelah formSuccess() dan namakan formError()

Fungsi ini menggunakan pendekatan yang ditemukan di halaman demo animate.css yang memungkinkan kita untuk menambahkan animasi ke elemen dan kemudian memanggil-ulang/menambahkan itu lagi dan lagi. Animasi CSS memiliki masalah sial di mana setelah mereka dimainkan sekali mereka cenderung untuk tidak bermain lagi, bahkan ketika kelas dihapus dan kembali ditambahkan. Fungsi ini membantu me-reset kelas pada saat animasi berakhir, memungkinkan anda untuk menambahkannya kembali. Ketika pengguna meng-klik submit pada form yang tidak lengkap kami ingin animasi shake dimainkan. Dan jika mereka men-submit lagi ketika masih salah ia perlu untuk dimainkan lagi.

Kita dapat menyebut ini fungsi formError() di atas fungsi submitMSG() yang kita buat untuk pesan kesalahan. Sebagai contoh:

Sekarang ketika kita men-submit form kosong itu akan bergoyang untuk membiarkan pengguna tahu ada sesuatu yang tidak beres.

Validasi Lebih

Semua validasi sisi klien ini adalah baik, namun setiap pengguna bisa menonaktifkan tindakan ini dan men-submit form dengan field-field kosong dengan mengedit kode di dalam browser mereka. Itu selalu merupakan ukuran yang baik untuk melakukan beberapa validasi sisi server, untuk menangkap apa-apa yang terlewat.

Buka file process.php kita perlu membuat beberapa perubahan untuk memeriksa apakah field kosong; jika tidak, kirim kembali pesan ke front-end. Kita akan membuat sebuah variabel yang disebut $errorMSG untuk menangkap pesan kesalahan kita dan kemudian lebih lanjut memasukkan validasi $_POST.

PHP ini akan memeriksa untuk melihat apakah mereka kosong sebelum menetapkan mereka sebagai variabel yang sesuai (menggantikan kode yang sudah ada yang menetapkan variabel dari $_POST). Jika mereka kosong kami kemudian menetapkan pesan dasar untuk dikirim ke klien. Kita bisa melakukan lebih banyak dari hanya mem-validasi terhadap field yang kosong (jika terlalu pendek/panjang periksa terhadap regular expressions dll.) dalam PHP dan JavaScript. Namun, demi kesederhanaan, kita akan membatasi hanya untuk field kosong untuk saat ini.

Kita perlu mengirim kembali pesan kesalahan ke awal panggilan AJAX yang akan ditampilkan dalam browser. Kita akan mengedit pernyataan if yang kita buat sebelumnya di bagian bawah file PHP.

Dalam pernyataan if kami juga memeriksa untuk melihat apakah $errorMSG kosong ( "" ) bersamaan dengan status fungsi mail built-in yang kami gunakan di variabel $success. Dalam kondisi else kami telah menyertakan pemeriksaan lebih lanjut. Ini hanya memeriksa untuk melihat apakah kesalahan itu akibat dari $success yang gagal, jika demikian mengirim kembali "Ada sesuatu yang tidak beres :(". Yang lainnya kami tampilkan pesan yang telah disusun ketika kita memeriksa untuk nilai yang kosong.

Satu langkah terakhir adalah untuk menerima pesan baru di AJAX dan menampilkannya pada form. Kita perlu memperbarui objek AJAX di dalam file scripts.js sebagai berikut:

Kami hanya memperbarui kondisi else yang memeriksa untuk melihat jika text == success. Dalam else kami memeanggil fungsi formError() yang akan menerapkan animasi goyang dan kami meminta fungsi submitMSG() untuk menampilkan teks yang dikembalikan dari PHP. Teks yang dikembalikan baik akan berupa "Ada sesuatu yang tidak beres: (" atau field ini menerima kekosongan.

Kesimpulan

Pergi ke Github untuk melihat kode secara keseluruhan-kita telah melakukan banyak!

Form kita sekarang seharusnya menyediakan pengguna dengan beberapa umpan balik pada field-field apa yang salah melalui validasi yang solid. Kami menyediakan pesan kontekstual berdasarkan statusnya dan pengembalian pesan dari PHP, dan menerapkan lapisan validasi tambahan di server untuk menangkap orang-orang yang memotong validasi front-end.

Secara keseluruhan, Anda sekarang seharusnya memiliki form kontak yang sangat bersuara siap untuk ditata dan diintegrasikan ke situs web Anda. Saya harap Anda menikmati tutorial ini, silahkan jangan ragu meninggalkan pertanyaan atau pemikiran di komentar di bawah ini!

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.