20230802 102603

Script Contact Form Dengan Node.js

Diposting pada

Codepelajar – contact form menjadi jembatan komunikasi modern antara pengguna dan pemilik website. Dengan adanya contact form, pengguna dapat dengan mudah mengirim pesan, pertanyaan, maupun saran kepada pemilik website tanpa harus menggunakan email atau media sosial. Proses komunikasi yang lebih efisien ini dapat meningkatkan keterlibatan pengunjung dan memberikan kesan positif terhadap pengalaman mereka di website.

Fungsi Dari Contact Form

contact form juga berfungsi sebagai alat dalam membangun hubungan dengan pelanggan atau pengunjung potensial. Respons cepat dan penuh perhatian terhadap pesan-pesan yang diterima melalui contact form dapat meningkatkan kepercayaan pengguna terhadap pemilik website. Hal ini juga dapat menciptakan kesan bahwa pemilik website peduli terhadap kebutuhan dan masukan dari pengunjung.

Script Contact Form Dengan Node.js

Untuk membuat formulir kontak di Node.js, saya akan menggunakan teknologi berikut:

Ekspres: Ekspres adalah framework web minimalistik untuk Node.js yang menawarkan sejumlah alat dan fitur untuk membangun aplikasi web dengan mudah. Didirikan oleh TJ Holowaychuk, Ekspres memiliki cakupan fungsionalitas yang terbatas dibandingkan dengan beberapa framework web lainnya. Namun, ini justru menjadi kelebihan Ekspres karena memberikan fleksibilitas yang tinggi dan menghindari terlalu banyak ketidakterdugaan dalam kode.

Body-parser: Body-parser adalah middleware Node.js yang memudahkan Anda untuk mengambil dan mengolah data dari permintaan HTTP yang dikirim oleh klien ke server Anda. Dengan bantuan Body-parser, Anda dapat dengan mudah menangani berbagai jenis data, seperti data formulir, data JSON, data gambar, dan banyak lagi, tanpa harus khawatir tentang detail implementasinya.

Express-validator: Express-validator adalah middleware yang ringan, efisien, dan sangat berguna dalam pengembangan aplikasi web berbasis Express.js. Middleware ini berfungsi untuk memvalidasi data yang diterima dari pengguna sebelum data tersebut diproses lebih lanjut oleh server. Dengan menggunakan Express-validator, Anda dapat dengan mudah memastikan bahwa data yang masuk sesuai dengan kriteria yang diharapkan, menghindari potensi kesalahan, serta melindungi aplikasi Anda dari serangan keamanan.

Nodemailer: Nodemailer adalah pustaka open-source yang ditulis dalam JavaScript yang bertujuan untuk mengirim email dari server Node.js. Alat ini memiliki berbagai fitur yang memudahkan pengiriman email, termasuk dukungan untuk protokol SMTP (Simple Mail Transfer Protocol) yang umum digunakan untuk pengiriman email. Nodemailer menyediakan antarmuka yang jelas dan mudah digunakan, membuatnya menjadi pilihan ideal bagi para pengembang yang ingin mengirim email dari aplikasi Node.js mereka.

Mari mulai dengan menginstal dependensi ini menggunakan perintah berikut:

npm install express body-parser express-validator nodemailer ejs

Selanjutnya, buat file bernama app.js dan tambahkan kode berikut:

const express = require('express');

const bodyParser = require('body-parser');

const { check, validationResult } = require('express-validator');

const nodemailer = require('nodemailer');

const ejs = require('ejs');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.set('view engine', 'ejs');

//middleware for parsing JSON in request body
app.use(express.json());

app.get('/', (request, response) => {

	response.render('contact', { errors : '' });

});

app.post('/send', 
	[
		check('name').notEmpty().withMessage('Name is required'),
		check('email').isEmail().withMessage('Invalid Email Address'),
		check('subject').notEmpty().withMessage('Subject is required'),
		check('message').notEmpty().withMessage('Message is required')
	], (request, response) => {

		const errors = validationResult(request);

		if(!errors.isEmpty())
		{
			response.render('contact', { errors : errors.mapped() });
		}
		else
		{
			const transporter = nodemailer.createTransport({
				service : 'Gmail',
				auth : {
					user : 'povonteblog@gmail.com',
					pass : 'write your Google App Password'
				}
			});

			const mail_option = {
				from : request.body.email,
				to : 'jm6078390@gmail.com',
				subject : request.body.subject,
				text : request.body.message
			};

			transporter.sendMail(mail_option, (error, info) => {
				if(error)
				{
					console.log(error);
				}
				else
				{
					response.redirect('/success');
				}
			});
		}
});

app.get('/success', (request, response) => {

	response.send('<h1>Your Message was Successfully Send!</h1>');

});

//start server
app.listen(3000, () => {

	console.log('Server started on port 3000');

});

Saya telah menetapkan rute GET untuk menampilkan formulir kontak menggunakan mesin tampilan ejs . Dan, saya juga menetapkan rute POST untuk memproses data formulir.

Di rute POST , saya telah menggunakan validator ekspres untuk memvalidasi data formulir. Jika ada kesalahan validasi, saya merender tampilan kontak dengan pesan kesalahan. Jika tidak, saya menggunakan nodemailer untuk mengirim email ke alamat email penerima.

Setelah itu buat file view contact.ejs di bawah folder views dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Node.js Server Side Validation</title>
    <link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5 mb-5">
        <h1 class="text-warning text-center"><b>Node.js Tutorial - How to Send an Email</b></h1>
        <div class="col-md-6 mt-3 mb-3">
            <div class="card">
                <div class="card-header">Contact Form</div>
                <div class="card-body">

                    <form method="post" action="/send">
                        <div class="mb-3">
                            <label for="name">Name</label>
                            <input type="text" name="name" class="form-control" />
                            <% if(errors && errors.name) { %>
                            <span class="text-danger"><%= errors.name.msg %></span>
                            <% } %>
                        </div>
                        <div class="mb-3">
                            <label for="email">Email</label>
                            <input type="text" name="email" class="form-control" />
                            <% if (errors && errors.email) { %>
                            <span class="text-danger"><%= errors.email.msg %></span>
                            <% } %>
                        </div>
                        <div class="mb-3">
                            <label for="subject">Subject</label>
                            <input type="text" name="subject" class="form-control" />
                            <% if (errors && errors.subject) { %>
                            <span class="text-danger"><%= errors.subject.msg %></span>
                            <% } %>
                        </div>
                        <div class="mb-3">
                            <label for="message">Message</label>
                            <textarea name="message" class="form-control"></textarea>
                            <% if(errors && errors.message) { %>
                            <span class="text-danger"><%= errors.message.msg %></span>
                            <% } %>
                        </div>
                        <button type="submit" class="btn btn-success">Send Message</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

Dalam file tampilan ini, saya telah membuat formulir HTML sederhana dengan bidang untuk nama, email, subjek, dan pesan. Saya juga telah menggunakan kelas Bootstrap untuk menata formulir.

Selamat Mencoba.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *