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

Memproses Borang Dengan phpPress, goPress, rubyPress, dan nodePress

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Meyria (you can also view the original English article)

Sekarang bahawa anda mempunyai laman web menggunakan sistem fail rata, anda ingin mendapat maklum balas daripada pengguna anda. Menambah Disqus adalah mudah kerana semua kod JavaScript ditambahkan pada halaman, tetapi itu bukan apa yang anda mahukan. Anda mahu mereka dapat menghantar e-mel kepada anda secara langsung supaya anda boleh membalas hanya kepada mereka.

Anda boleh membuat semua sistem JavaScript untuk menghantar e-mel terus dari komputer pengguna, tetapi meninggalkan e-mel anda terbuka kepada spammer dapat mengambilnya dari kod anda dan menjualnya kepada spammer lain. Oleh itu, anda perlu menyembunyikan alamat e-mel anda di pelayan.

Tutorial ini adalah mengenai penambahan sistem mesej e-mel ke PressCMS baru anda (iaitu phpPress, rubyPress, nodePress dan goPress). Saya bermula dengan dalam front-end dan kemudian menangani ke back-end bagi setiap sistem. Saya menganggap anda sudah mempunyai pelayan-pelayan ini pada sistem anda.

Cara Mencipta Borang dalam Penyemak Imbas

Oleh kerana kod front-end akan sama untuk setiap pelayan, anda perlu menyalin fail-fail baru ini ke setiap direktori pelayan. Oleh itu, saya akan membincangkan fail-fail dalam laluan seperti yang dirujuk dari direktori pelayan.

Bukan menambah borang khusus styling tema, skrip borang ini mempunyai segala-galanya di satu tempat. Mencipta questions.html fail dalam direktori laman web/bahagian untuk laman web dengan kandungan yang berikut:

Ini mewujudkan satu bentuk asas yang meminta nama penuh (nama pertama dan nama akhir), e-mel, dan mesej. Borang ini menggunakan ungkapan biasa untuk memastikan nama dan alamat e-mel sah. Jika apa-apa input pengguna ke dalam bidang tersebut tidak sepadan dengan ungkapan biasa dalam arahan corak, maka borang itu tidak akan dihantar. Popup akan meminta pengguna mengisi ruang dengan betul dengan mesej dalam parameter tajuk. Setiap bidang input telah primitif diperlukan juga. Ini menyimpan borang kosong dari diserah. Ini adalah pengesahan data minimum terdedah yang patut anda gunakan di dalam front-end.

Arahan tindakan dalam elemen bentuk memberitahu penyemak imbas web alamat yang hendak diserahkan kepada data borang. Arahan kaedah memberitahu pelayar untuk menghantar sebagai kaedah pos. Borang data akan ditempatkan ke dalam URL post permintaan ke pelayan. Inilah Rentetan Pertanyaan. Pelayan kemudian memproses maklumat dalam rentetan pertanyaan.

Di dalam direktori laman web/laman, membuat contact.md fail dan letakkan Kod ini:

Setelah disimpan, anda boleh cuba halaman di dalam pelayan. Dalam pelayar anda, buka Laman http://localhost:8081/hubungi.

Contact Form Page
Halaman Borang Hubungi

Halaman Hubungi Kami akan kelihatan seperti gambar di atas. Perhatikan penonjolan medan Nama secara langsung apabila dimuatkan. Arahan autofokus mencipta tingkah laku yang dikehendaki ini. Ia sentiasa reka bentuk yang baik untuk mempunyai bidang pertama pengguna perlu menaip ke dalam fokus secara automatik.

Selepas menghantar mesej, mesej pengesahan kepada pengguna akan lebih baik. Di dalam direktori Laman web/laman, membuat messagesent.md fail dan letakkan Kod ini:

Hanya mesej mudah supaya pengguna tahu mesej itu dihantar dengan betul. Anda boleh mengembangkannya selagi anda suka.

Message Sent Confirmation Page
Mesej Dihantar Laman Pengesahan

Memproses Borang Dengan goPress

Untuk membersihkan mesej yang diberikan oleh pengguna, saya menggunakan perpustakaan Blue Monday. Untuk memuatkan perpustakaan itu pada sistem anda, anda perlu menjalankan baris arahan ini:

Dalam perbincangan dengan Penasihat saya, kami menyedari bahawa bakal pelabur akan mahu tahu bagaimana orang akan bertindak balas kepada tapak.

Buka fail goPressServer.go dan menambah ini ke atas fail tersebut di dalam penyata() import:

Menghantar mesej dari pelayan memerlukan perpustakaan ini. Selepas garisan yang mempunyai goPress.DefaultRoutes (fungsi panggilan, tambahkan kod berikut:

Ini menetapkan laluan post /api/message untuk menjalankan postMessage() fungsi. Penghujung fail, tambah Kod ini:

Kedua-dua fungsi ini membentuk pengendali untuk memproses e-mel yang dihantar dari penyemak imbas. Laluan /api/mesej memanggil fungsi postMessage(). Ia cuba mengambil maklumat yang dihantar dari borang yang diisi oleh pengguna, sanitizes mesej dengan Perpustakaan BlueMonday dan menghantar e-mel kepada pemilik laman web yang menggunakan fungsi sendEmail(). Anda perlu meletakkan alamat Gmail anda place of dalam <alamat e-mel> pemegang dan <kata laluan> dalam pemegang .

Dalam fail goPress.go, tambahkan fungsi ini selepas fungsi SetGetRoute():

Fungsi ini sama seperti fungsi SetGetRoute(). Satu-satunya perbezaan menggunakan fungsi web.Post().

Dengan perubahan ini, pelayan goPress anda kini boleh menghantar e-mel anda dari pengguna.

Memproses Borang Dengan nodePress

Untuk menghantar e-mel daripada nod, anda perlu memasang perpustakaan nodemailer dan perpustakaan badan-penghurai terlebih dahulu dengan baris arahan berikut:

Kemudian anda perlu memuatkan perpustakaan baru dan mengkonfigurasi objek pengirim. Di bahagian atas fail nodePress.js, selepas pustaka terakhir dimuatkan, tambahkan baris ini:

Ini akan memuatkan perpustakaan nodemailer dan menyediakan komponen yang boleh diguna semula untuk menghantar e-mel. Anda perlu menggantikan <your email name> dengan nama alamat e-mel anda (iaitu sebelum @simbol), <your email domain> adalah domain untuk alamat e-mel anda (iaitu gmail.com untuk gmail biasa atau nama domain anda jika anda mempunyai gmail yang disediakan pada nama domain anda), dan <your password> dengan kata laluan untuk akaun e-mel anda.

Selepas garisan yang memulakan pembolehubah nodePress, tambahkan kod ini:

Sekarang, selepas fungsi nodePress.get() lepas panggilan, tambah Kod ini:

Ini adalah pengendali untuk alamat /api/mesej. Fungsi ini mendapat maklumat yang dihantar dari borang, mencipta mesej e-mel yang betul, dan hantar ke alamat e-mel yang diberikan di <your email address>. Selepas menghantar e-mel, ia akan menghantar pengguna ke halaman /mesejsent. The middleware parser body mempunyai parameter url yang disimpan dalam pemboleh ubah request.body dan dibersihkan dengan betul.

Kod ini bekerja untuk persediaan Gmail tanpa pengesahan dua faktor. Jika anda mempunyai pengesahan dua faktor, anda boleh merujuk dokumen Nodemailer untuk menyediakannya.

Memproses Borang Dengan rubyPress

Untuk menghantar e-mel dalam Ruby, anda perlu memasang Perpustakaan ruby-gmail dengan baris arahan berikut:

Bergantung pada persediaan anda Ruby, anda mungkin perlu menggunakan sudo di hadapan perintah. Sekarang untuk memuatkan Perpustakaan, menambah baris berikut ke atas fail rubyPress.rb:

Selepas semua mendapat definisi, tambahkan baris berikut:

Dengan tambahan ini, pelayan rubyPress anda boleh memproses borang e-mel. Apabila anda menukar <alamat e-mel> ke alamat e-mel dan <kata laluan> untuk kata laluan untuk pelayan e-mel anda, skrip telah selesai.

Memproses Borang Dengan phpPress

Server terakhir untuk mengubah suai adalah pelayan phpPress. Untuk menambah keupayaan e-mel ke pelayan, saya akan memasang pustaka phpmailer. Ini adalah perpustakaan paling banyak digunakan dalam PHP untuk bekerja dengan e-mel. Untuk memasang pustaka, anda perlu menjalankan arahan baris perintah ini dalam direktori phpPress:

Malangnya, kemas penggubah akan mengemaskini Perpustakaan LightnCandy. Ini adalah baik kerana ianya lebih cepat dan lebih mudah untuk digunakan. Tetapi ia memecahkan kod pelayan. Dalam fail index.php, cari fungsi ProcessPage() dan gantikannya dengan kod berikut:

Membandingkannya dengan kod lama, anda tidak perlu lagi bekerja dengan fail sementara. Ia semua dilakukan dalam ingatan dan oleh itu lebih cepat. Sekarang, di bahagian atas fail index.php, tambahkan ini selepas perpustakaan Jade:

Ini memuat perpustakaan phpmailer. Sekarang, selepas $aplikasi-> get() terakhir, tambahkan kod ini:

Ini adalah pengendali permintaan pos untuk laluan /api/mesej. Ia mengambil data borang yang dihantar dari pelayar, membuat e-mel dengannya, dan menghantar e-mel. PHP secara automatik mengambil sebarang parameter URL dan meletakkannya dalam array global $_POST.

Anda perlu menggantikan <your email addres> ,<your password>, dan <your name> dengan nilai yang sesuai untuk e-mel anda. Sekiranya anda menggunakan sesuatu selain daripada pelayan SMTP Gmail, anda juga perlu menukar alamat $e-mel ->Host.

Kesimpulan

Saya telah menunjukkan kepada anda bagaimana untuk dengan mudah menambah borang e-mel ke laman pressCMS. Muat turun untuk tutorial ini mempunyai semua pelayan ini dengan pengubahsuaian mereka. Anda boleh memuat turunnya bukannya menaip. Saya telah melakukan sedikit kesilapan pengendalian. Saya akan meninggalkan selebihnya untuk anda sebagai latihan.

Kaedah yang saya ajarkan di sini adalah dengan menghantar data borang dengan data dalam URL. Banyak tapak sekarang menggunakan API REST dengan data dalam rentetan JSON dalam badan untuk melakukan tindakan tersebut. Rutin ini mudah diguna pakai untuk metodologi itu, tetapi itu latihan untuk anda (atau mungkin tutorial masa depan). Sekarang anda tahu cara melakukannya dengan cara ini, tambahkan borang anda sendiri ke laman web anda. Jenis penyesuaian ini sangat menyeronokkan. Satu-satunya had ialah imaginasi anda.

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.