Cara Buat Borang Hubungan HTML5 / CSS3 Berbasis Ajax
Borang hubungan adalah sangat penting untuk mana-mana laman web, kerana ia bertindak sebagai utusan yang melepasi pendapat atau pertanyaan pengunjung ke webmaster. Terdapat banyak bentuk hubungan di web tetapi malangnya kebanyakan mereka tidak menjelaskan kepada anda bahagian kerja dalam, jadi di sini datang tutorial terperinci untuk mengajar anda untuk membina borang hubungan maju dari awal berdasarkan teknologi pop, HTML5 dan CSS3.
Memandangkan sifat borang hubungan e-mel berasaskan web, kami juga dikehendaki menyelam ke dalam dua bidang aplikasi berasingan, iaitu kod backend PHP untuk menghantar e-mel dan fungsi jQuery untuk antara muka pengguna yang kaya. Akhirnya kami akan dibiarkan dengan sentuhan penuh dinamik dan fungsian yang ditulis dengan penyesuaian kemudian dalam fikiran.
Bermula sekarang untuk membina borang hubungan maju anda sendiri!
Jalan pintas ke:
- Demo - Dapatkan pratonton apa yang anda sedang bina
- Muat turun - Muat turun semua fail (php + css)
Penstrukturan Permohonan
Untuk memulakan, anda memerlukan beberapa jenis pelayan web untuk berfungsi. Jika anda menjalankan mesin Windows WAMP mungkin pilihan terbaik anda. Pengguna Mac mempunyai program yang sama bernama MAMP yang sama mudahnya dipasang.
Pakej-pakej ini akan menyediakan pelayan tempatan pada mesin anda dengan akses penuh ke PHP. Sebagai alternatif jika anda memiliki ruang pelayan atau mempunyai akses pelayan penuh ke lokasi terpencil, anda boleh menggunakannya. Kami tidak akan memerlukan sebarang pangkalan data MySQL, yang sepatutnya memudahkan perkara sedikit.
Setelah pelayan anda disiapkan buat folder baru untuk menempatkan aplikasi itu. Anda boleh namakan ini apa sahaja yang anda suka kerana ia tidak merosakkan atau bahkan berkaitan dengan produk akhir. Struktur folder akan digunakan apabila anda mengakses fail anda dalam penyemak imbas web. Contoh mudah ialah http: //localhost/ajaxcontact/contact.php
Mari Membina Fail kami!
Kami hanya akan bekerja dalam 2 fail teras. Kita perlu terlebih dahulu teras .php fail ke rumah bukan sahaja logik aplikasi kami, tetapi juga markup HTML frontend. Berikut ialah kod sampel yang diambil dari fail permulaan kami.
Borang Hubungan Ajax HTML5 / CSS dengan jQuery
Untuk memulakan, kami telah menulis seksyen tajuk mudah ke dokumen kami. Ini termasuk umum Pernyataan dokumentasi untuk HTML5 dan beberapa elemen dokumen HTML / XML. Ini tidak diperlukan, tetapi akan memudahkan proses rendering pada pelayar yang lebih tua (dan lebih baru). Juga tidak menyakitkan untuk menawarkan lebih banyak maklumat.
Sedikit jauh ke bawah kita dapat melihat 2 baris sebelum tag tajuk penutupan. Yang pertama termasuk kami Skrip jQuery dari Repositori Kod Google dalam talian. Ini diperlukan untuk ralat laman dinamik untuk berfungsi. Secara langsung di bawah ini kita mempunyai kemasukan asas Dokumen CSS yang mengandungi semua gaya halaman kami.
Di dalam badan dokumen kami ada beberapa mengandungi bahagian menahan borang hubungan utama. Ini menempatkan 3 elemen input untuk nama pengguna, alamat emel, dan mesej peribadi. Penanda HTML cukup standard dan tidak boleh membayangkan pemikiran mana-mana pemaju perantaraan.
E-mel anda telah dihantar. Huzzah!
Di sini kita mempunyai asas Kod bersyarat PHP bersarang dalam bekas beberapa halaman. Semak ini untuk nilai set pembolehubah bernama
$ emailSentdan jika sama dengan benar, ia akan memaparkan mesej berjaya.Di dalam Borang HTML kami
The lain pernyataannya ialah apa yang akan dijalankan pada muatan halaman pertama kerana tidak akan ada apa-apa kandungan untuk dihantar pada mulanya. Di dalam sini kita akan menyertakan a koleksi ringkas elemen bentuk dan a Hantar butang.
Kesalahan menyerahkan borang
Anda mungkin perasan ada yang lain blok bersyarat terus selepas borang permulaan. Semak ini untuk pembolehubah bernama $ hasError dan akan memaparkan mesej ralat semasa pengesahan. Kaedah pemulihan ini adalah hanya digunakan jika JavaScript dinyahdayakan dalam pelayar dan dengan itu tidak dapat menghasilkan ralat dinamik.
Sepanjang jalan kita dapat mencari pembolehubah PHP individu sedang diperiksa. Pernyataan tersebut mengawal selia jika borang telah dihantar dengan hanya sebahagian daripada data yang diisi. Ini adalah satu lagi sistem sandaran yang memaparkan kandungan medan yang telah diisi - satu helah yang bagus untuk pengalaman pengguna yang tepat!
Secara langsung selepas penyempurnaan borang kami adalah beberapa fungsi jQuery kami telah menulis. Kami akan membincangkannya terlebih dahulu kerana ia adalah pelaksanaan default pada pageload. Walau bagaimanapun jika penyemak imbas tidak menerima JavaScript maka secara lalai kita boleh bergantung kepada kod PHP kami.
Pembukaan kepada jQuery
Cara paling mudah untuk memulakan bercakap mengenai topik ini adalah untuk menyelam masuk. Saya akan memecahkan blok individu selari demi baris supaya anda dapat melihat apa skrip sebenarnya sedang memeriksa.
Bagaimanapun, jika anda tersesat hanya semak fail kod projek. Semua blok penuh ditulis sebelum dan didokumentasikan dengan baik di laman web jQuery. Untuk memulakan kami membuka kod kami sama seperti yang lain:
Sekiranya anda sudah biasa panggilan balik anda mungkin melihatnya jawatan () fungsi mempunyai set parameter terbina dalam. Panggilan balik adalah fungsi yang lebih kecil yang dipanggil apabila respons data daripada fungsi lain.
Jadi, contohnya, ketika kami jQuery.post () fungsi berjaya menembak e-mel ia akan memanggil fungsi dalamannya sendiri untuk memaparkan animasi gelongsor. Semua kod ini boleh ditulis di blok sendiri dan berpindah ke tempat lain. Bagaimanapun demi tutorial ini, lebih mudah menulis panggilan balik sebagai fungsi inline.
Memecah masa lalu PHP kami
Halangan terakhir yang disebutkan ialah logik di belakang pemproses PHP kami. Ini adalah sistem backend yang sebenarnya memanggil fungsi mel dan hantar mesej. Semua kod yang digunakan dalam contoh di bawah boleh didapati terus di bahagian atas utama kami .php fail sebelum sebarang output HTML.
Terdapat juga beberapa gaya dalaman yang menyegarkan halaman. Tidak ada apa-apa yang khusus baru di sini supaya kami tidak akan pergi ke mana-mana butiran. Walau bagaimanapun styles.css dokumen dimasukkan dalam kod projek dan mengandungi teknik CSS3 asas.
Untuk memulakan kami membuka klausa PHP dan semak jika borang tersebut telah pun diserahkan. The POST pembolehubah “dihantar” sebenarnya merupakan medan input tersembunyi yang ditambah pada akhir dari bentuk kami. Ini cara yang berguna untuk semak jika pengguna telah menyerahkan apa-apa namun demikian, kita tidak membuang sumber-sumber pelayan.
Selepas ini kita mempunyai 3 berasingan jika tidak pernyataan menyemak untuk melihat jika setiap medan input telah diisi. Saya tidak akan memasukkan setiap bit logik di sini kerana semuanya bersifat berulang-ulang. Walau bagaimanapun, untuk memberi anda contoh ringkas saya telah memasukkan klausa pengesahan e-mel di bawah:
// memerlukan email yang sah jika (trim ($ _ POST ['email']) === ") $ emailError = 'Lupa masukkan alamat e-mel anda'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ $ EmailError = 'Anda memasukkan alamat e-mel yang tidak sah.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP akan memotong semua ruang kosong dari nilai dan semak untuk melihat apakah ada yang tersisa. Sekiranya kita mempunyai maklumat terperinci Expression Regular (Regex) untuk melihat jika rentetan input pengguna kami sepadan dengan corak e-mel.
Anda pastinya tidak perlu memahami bagaimana
preg_match ()berfungsi untuk membina skrip ini. Ia berfungsi sebagai fungsi menentukan peraturan dan keperluan bagi jenis data yang berjaya, tetapi memerintahkan pengetahuan pengaturcaraan lanjutan untuk benar-benar memahami. Dalam senario ini kita memastikan pengguna hanya memasukkan beberapa aksara pilih, termasuk satu @ simbol diikuti oleh 2-4 aksara mewakili a Domain Tahap Tertinggi.Selepas semua logik kami berlalu dan kami tidak mengembalikan kesilapan sudah tiba masanya untuk menghantar mesej kami! Bit kod ini akan menetapkan pembolehubah individu untuk menyesuaikan mesej e-mel dan persediaan kami tajuk surat untuk proses itu.
/ / Jika tiada kesilapan kegagalan mari kita e-mel sekarang! jika (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Dihantar mesej dari'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Name: $ name \ n \ nEmail: $ email \ n \ nComments: $ comments"; $ headers = 'Dari:'. ' <'.$emailTo.'>'. "\ r \ n". 'Balas kepada: ' . $ email; mel ($ emailTo, $ subject, $ body, $ header); // tetapkan nilai penyelesaian boolean kami kepada TRUE $ emailSent = true;Jika anda tertanya-tanya bagaimana kod itu akan memikirkan alamat e-mel anda, ini adalah bahagian yang harus diisi. Pembolehubah pertama dalam set kami bertajuk
$ emailTodan hendaklah mengandungi apa sahaja alamat e-mel, yang akan menerima mesej tersebut.Di dalam kami
badan $pembolehubah kita mengambil kesempatan daripada\ npemisah untuk menambah baris baru ke dalam mesej. Ini menambah penempatan kecil untuk nama penghantar, alamat emel, diikuti dengan rehat untuk mereka kandungan mesej. Sudah tentu anda boleh meluangkan masa untuk mempamerkan paparan, tetapi struktur ini berfungsi dengan baik.Kesimpulannya
Ini menutup tutorial kami untuk mendapatkan borang hubungan lanjut. Jika anda ingin gaya anda berhubung dengan saya, anda boleh menyemak contoh saya styles.css dalam kod projek. Walau bagaimanapun, halaman itu berstruktur dengan cukup baik agar anda dapat merancang rupa anda sendiri & berasa sangat mudah.
Jangan ragu untuk memuat turun kod sumber dan periksa apa yang saya lakukan sedikit lebih dekat. Adalah baik untuk mengikuti tutorial tetapi mempunyai akses terus ke sumber projek boleh menjadi tidak ternilai. Saya juga memasukkan lembaran gaya ringkas untuk membuat penyesuaian mudah, terima kasih atas pandangan anda!
