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

Pengolahan Form dengan phpPress, goPress, rubyPress, dan nodePress

by
Difficulty:IntermediateLength:LongLanguages:

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

Sekarang setelah Anda memiliki situs web menggunakan sistem file flat, Anda ingin mendapatkan umpan balik dari pengguna Anda. Menambahkan Disqus adalah mudah karena semua kode JavaScript ditambahkan ke halaman, tapi bukan itu yang Anda inginkan. Anda ingin mereka bisa mengirim email secara langsung sehingga Anda bisa membalas hanya untuk mereka.

Anda bisa membuat semua sistem JavaScript untuk mengirim email secara langsung dari komputer pengguna, namun itu membuat email Anda terbuka bagi spammer yang dapat mengambilnya dari kode Anda dan menjualnya ke spammer lainnya. Karena itu, Anda perlu menyembunyikan alamat email Anda di server.

Tutorial ini adalah tentang menambahkan sistem pesan email ke PressCMS baru Anda (yaitu phpPress, rubyPress, nodePress, dan goPress). Saya memulai dengan front-end dan kemudian menangani back-end untuk setiap sistem. Saya berasumsi bahwa Anda sudah memiliki server ini di sistem Anda.

Cara Membuat Form di Browser

Karena kode front-end akan sama untuk setiap server, Anda harus menyalin file baru ini ke masing-masing direktori server. Oleh karena itu, saya akan membahas tentang file-file di path yang dirujuk dari direktori server.

Alih-alih menambahkan penataan khusus form ke dalam tema, skrip form ini memiliki segalanya di satu tempat. Buatlah file questions.html di direktori site/parts untuk situs web dengan konten berikut:

Ini menciptakan form dasar yang meminta nama lengkap (nama depan dan belakang), email, dan pesan. Form ini menggunakan regular expression untuk memastikan bahwa nama dan alamat emailnya valid. Jika apapun masukan pengguna ke bidang tersebut tidak sesuai dengan regular expression dalam pattern direktif, maka form tidak akan dikirimkan. Sebuah popup akan meminta pengguna untuk mengisi field dengan benar dengan pesan di parameter title. Setiap field input memiliki required primitif juga. Ini membuat form kosong tidak akan dikirimkan. Ini adalah validasi data minimal yang harus Anda gunakan di front-end.

Direktif action dalam elemen form memberitahu browser web alamat apa untuk mengirimkan data form. Direktif method memberitahu browser untuk mengirim sebagai metode post. Data dari form akan dimasukkan ke dalam URL dari permintaan post ke server. Ini adalah Query String. Server kemudian memproses informasi dalam query string.

Di direktori site/pages, buat file contact.md dan letakkan kode ini:

Setelah disimpan, Anda bisa mencoba halaman di server. Di browser Anda, bukalah halaman http://localhost:8081/contact.

Contact Form Page
Halaman Form Kontak

Halaman Contact Us akan terlihat seperti gambar di atas. Perhatikan penyorotan field Name secara langsung saat memuat. Direktif autofocus menciptakan perilaku yang diinginkan ini. Desain yang selalu bagus untuk memiliki field pertama yang perlu diketik pengguna agar fokus secara otomatis.

Setelah mengirim pesan, pesan konfirmasi ke pengguna akan menyenangkan. Di direktori site/pages, buat file messagesent.md dan letakkan kode ini:

Sekedar pesan sederhana agar pengguna tahu pesannya terkirim dengan benar. Anda dapat memperluas ini sesuka Anda.

Message Sent Confirmation Page
Halaman Konfirmasi Pesan Dikirim

Pengolahan Form dengan goPress

Untuk membersihkan pesan yang diberikan oleh pengguna, saya menggunakan pustaka Blue Monday. Untuk memuat pustaka itu di sistem Anda, Anda perlu menjalankan baris perintah ini:

Ini akan membuat pustaka tersedia untuk program Anda. Itulah satu-satunya pustaka non-standar yang dibutuhkan.

Buka file goPressServer.go dan tambahkan ini ke bagian atas file di dalam pernyataan import ():

Mengirim email dari server memerlukan pustaka ini. Setelah baris panggilan fungsi goPress.DefaultRoutes(, tambahkan kode berikut:

Ini menetapkan rute post dari /api/message untuk menjalankan fungsi postMessage(). Di akhir file, tambahkan kode ini:

Kedua fungsi ini membentuk handler untuk memproses email yang dikirim dari browser. Rute /api/message memanggil fungsi postMessage(). Ini mengambil informasi yang dikirim dari form yang diisi oleh pengguna, membersihkan pesan dengan pustaka BlueMonday, dan mengirim email ke pemilik situs menggunakan fungsi sendEmail(). Anda harus meletakkan alamat Gmail Anda di tempat <your email address> dan kata sandi di <password>.

Di file goPress.go, tambahkan fungsi ini setelah fungsi SetGetRoute():

Fungsi ini persis seperti fungsi SetGetRoute(). Satu-satunya perbedaannya adalah menggunakan fungsi web.Post().

Dengan perubahan ini, server goPress Anda sekarang dapat mengirim email Anda dari pengguna.

Pengolahan Form dengan nodePress

Untuk mengirim email dari node, Anda harus terlebih dahulu menginstal pustaka nodemailer dan pustaka body-parser dengan baris perintah berikut:

Kemudian Anda perlu memuat pustaka baru tersebut dan mengkonfigurasi objek mailer. Di bagian atas file nodePress.js, setelah pustaka terakhir dimuat, tambahkan baris berikut:

Ini akan memuat pustaka nodemailer dan menyiapkan komponen yang dapat digunakan kembali untuk mengirim email. Anda harus mengganti <your email name> dengan nama alamat email Anda (misalnya sebelum simbol @), <your email domain> adalah domain untuk alamat email Anda (misalnya gmail.com untuk gmail normal atau nama domain Anda jika Gmail mengatur nama domain Anda), dan <your password> dengan kata sandi untuk akun email Anda.

Setelah baris yang menginisialisasi variabel nodePress, tambahkan kode ini:

Sekarang, setelah panggilan fungsi nodepress.get() terakhir, tambahkan kode ini:

Ini adalah handler untuk alamat /api/message. Fungsi ini mendapatkan informasi yang dikirim dari form, membuat pesan email yang benar, dan mengirimkannya ke alamat email yang diberikan di <your email address>. Setelah mengirim email, ia akan mengirim user ke halaman /messagesent. Middleware body parser memiliki parameter url yang disimpan ke variabel request.body dan disterilkan dengan benar.

Kode ini berfungsi untuk pengaturan Gmail tanpa otentikasi dua-faktor. Jika Anda memiliki otentikasi dua-faktor, Anda dapat merujuk ke dokumentasi Nodemailer untuk mengaturnya.

Pengolahan Form dengan rubyPress

Untuk mengirim email di Ruby, Anda perlu menginstal pustaka ruby-gmail dengan baris perintah berikut:

Tergantung pada konfigurasi Ruby Anda, Anda mungkin perlu menggunakan sudo di depan perintahnya. Sekarang untuk memuat pustakanya, tambahkan baris berikut ke bagian atas file rubyPress.rb:

Setelah semua definisi get, tambahkan baris berikut:

Dengan penambahan ini, server rubyPress Anda dapat mengolah form email. Setelah Anda mengubah <your email address> ke alamat email Anda dan <your password> ke kata sandi untuk server email Anda, skrip sudah selesai.

Pengolahan Form dengan phpPress

Server terakhir yang dimodifikasi adalah server phpPress. Untuk menambahkan kemampuan email ke server, saya akan menginstal pustaka phpmailer. Ini adalah pustaka yang paling banyak digunakan di PHP untuk bekerja dengan email. Untuk menginstal pustakanya, Anda perlu menjalankan perintah command-line ini di direktori phpPress:

Sayangnya, composer update akan memperbarui pustaka LightnCandy. Ini bagus karena ia jauh lebih cepat dan mudah digunakan. Tapi itu merusak kode server. Pada file index.php, cari fungsi ProcessPage() dan gantilah dengan kode berikut:

Membandingkan dengan kode yang lebih tua, Anda tidak lagi harus bekerja dengan file temporary. Semuanya dilakukan dalam memory dan karena itulah jauh lebih cepat. Sekarang, di bagian atas file index.php, tambahkan ini setelah pustaka Jade:

Ini memuat pustaka phpmailer. Sekarang, setelah fungsi $app->get() terakhir, tambahkan kode ini:

Ini adalah handler permintaan post untuk path /api/message. Ini mengambil data form yang dikirim dari browser, membuat email dengannya, dan mengirim emailnya. PHP secara otomatis mengambil parameter URL dan menempatkannya di array global $_POST.

Anda harus mengganti <your email address>, <your password>, dan <your name> dengan nilai yang sesuai untuk email Anda. Jika Anda menggunakan sesuatu selain server SMTP Gmail, Anda perlu mengubah alamat $mail->Host juga.

Kesimpulan

Saya telah menunjukkan kepada Anda cara menambahkan form email dengan mudah ke situs pressCMS. Download untuk tutorial ini memiliki semua server ini dengan modifikasi mereka. Oleh karena itu Anda dapat men-downloadnya daripada mengetiknya. Saya sudah melakukan sedikit penanganan kesalahan. Saya akan menyerahkan sisanya kepada Anda sebagai latihan.

Metode yang saya ajarkan di sini adalah dengan mengirim data form dengan data di URL. Banyak situs saat ini menggunakan API REST dengan data dalam string JSON di dalam body untuk melakukan aksinya. Rutinitas ini mudah diadopsi pada metodologi itu, tapi itu adalah latihan untuk Anda (atau mungkin tutorial masa depan). Sekarang Anda tahu cara melakukannya dengan cara ini, tambahkan form Anda sendiri ke situs Anda. Jenis mengkustomisasi ini sangat menyenangkan. Batasnya adalah imajinasi 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.