Cara menggunakan kirim email javascript

Buat file dengan nama latihan.html, karena kita menggunakna javascript anda dapat melatakkan filenya disembarang tempat, jadi tidak perlu dimasukkan ke htdocs. Copy paste script di bawah ini, lalu save.


<form name="test" onsubmit="cekemail(this.test2.value); return false">
    <input type="text" size="20" name="test2">
    <input type="submit" value="submit">
    <script>
        function cekemail(email){
            if(email.indexOf("@")!=-1 && email.indexOf(".")!=-1){
                alert("ini adalah email");
            }
            else{
                alert("ini bukan email");
            }
        }
    </script>
</form>



Penjelasan
kita membuat sebuah form sederhana yang terdiri dari input text dan button. saat kita mengklik button, maka fungsi cekemail otomatis akan dipanggil dan akan mengecek data yang diinput oleh user. Jika data yang diinput mengandung tanda @ dan ., maka browser akan menampilkan alerbox bertulisan "ini adalah email" dan jika salah satu syarat di atas tidak terpenuhi atau keduannya tidak terpenuhi maka browser akan menampilkan alertbox bertulisan "ini bukan email"


Coba anda jalankan di browser, cari file latihan.html, klik kanan dan buka dengan browser yang sering anda gunakan. Hasilnya akan tempak seperti gambar di bawah ini.jika anda memasukkan email yang benar maka, akan menampilkan alert box bertulisan "ini adalah email".

Cara menggunakan kirim email javascript
Alert Box jika email yang dimasukkan benar

Atau jika anda memasukkan email yang salah maka akan menampilkan alert box bertullisan "ini bukan email"


Cara menggunakan kirim email javascript
Alert Box jika email yang dimasukkan salah

Ok, sekian tutorial membuat validasi email dengan menggunakan javascript, mudah-mudahan bermanfaat bagi kita semua. Ada kesulitan, atau ada error silahkan tanyakan di kolom komentar di bawah ini. Happy coding!!!

Setelah kamu mengunduh modul Nodemailer, kamu dapat memasukkan modul tersebut ke dalam aplikasi apa pun:

var nodemailer = require('nodemailer');

Mengirim Sebuah email

Sekarang kamu siap mengirim email dari server kamu.

Gunakan nama pengguna dan kata sandi dari penyedia email yang kamu pilih untuk mengirim email. Tutorial ini akan menunjukkan cara menggunakan akun gmail kamu untuk mengirim email:

Contoh

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: '[email protected]',
    pass: 'yourpassword'
  }
});

var mailOptions = {
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Dan itu dia! Sekarang server kamu dapat mengirim email.

Penerima Ganda

Untuk mengirim email ke lebih dari satu penerima, tambahkan mereka ke properti “to” dari objek mailOptions, dipisahkan dengan koma:

Untuk zaman seperti sekarang ini email bukan lah hal yang jarang kita pakai. Mulai dari mengirim tugas ke dosen, mengirim surat lamaran, hingga nota pembelian pun sekarang sudah dikirim ke email si pembeli untuk menghemat penggunaan kertas.

Pada artikel kali ini, kita akan membahas bagaimana membuat layanan untuk mengirim email menggunakan Nodejs. 

Sebenarnya kita bisa menggunakan library bawaan Nodejs untuk mengirim email seperti NodeMailer. Namun untuk kali ini, kita akan bekerja sama dengan salah satu layanan provider pengirim email yang cukup cepat dalam proses pengirimannya, yaitu Mailjet. 

Tenang saja, provider yang satu ini bersifat gratis 

Cara menggunakan kirim email javascript
selama kamu tidak mengirim email lebih dari 200 pengiriman per hari. Kita rasa ini sudah sangat cukup untuk melakukan pengiriman email berskala kecil 
Cara menggunakan kirim email javascript

Baiklah, untuk membuat layanan pengirim email menggunakan Nodejs dan Mailjet silahkan ikuti step by step dibawah ini.

Akun Mailjet

Tentunya jika kamu ingin menggunakan layanan Mailjet ini kamu harus memiliki akun Mailjet. Caranya kamu cukup registrasi ke situs resminya. Kemudian setelah kamu login, silahkan kunjungi url berikut ini untuk mendapatkan API Key dan Secret Key dari Mailjet.

Cara menggunakan kirim email javascript

Langkah selanjutnya kamu harus melakukan verifikasi email pengirim. Bisa menggunakan Gmail, maupun domain kamu sendiri. Disini saya akan menggunakan domain saya sendiri. Kamu hanya tinggal mengikuti sesuai panduan yang ada untuk memverifikasi.

Buat Project

Seperti biasa ketika membuat project Nodejs kamu hanya perlu menyiapkan satu buah folder. Disini saya akan memberi nama nodejs-mailjet.

Install Dependensi

Pada project kali ini kita akan membutuhkan beberapa dependensi. Silahkan arahkan terminal masuk ke folder project yang telah kamu buat tadi. Kemudian ketikkan perintah berikut:

npm install express body-parser node-mailjet dotenv

Berikut penjelasan dari masing-masing dependensi:

  • Express: Sebagai kerangka kerja Nodejs.
  • Body Parser: Sebagai library yang meng-hendle data yang dikirim dari client.
  • Node Mailjet: Sebagai library resmi dari Mailjet.
  • Dotenv: Sebagai library yang akan meng-hendle variabel yang disimpan di dalam file env. 

Skeleton Project

Sekeleton merupakan gambaran dari kerangka atau struktur aplikasi yang akan dibangun. Agar kamu lebih mudah untuk memahaminya, struktur project yang akan kita buat sesederhana gambar dibawah ini.

Cara menggunakan kirim email javascript

Silahkan sesuaikan skeleton project kamu seperti gambar diatas agar lebih gampang mengikuti praktek dari tutorial ini.

Ngoding

Sekarang kita masuk ke bagian yang paling ditunggu-tunggu. Kita akan ngoding pada file index.js saja. Untuk itu silahkan buka file index.js dan ketik kode berikut:

const express = require('express');
const app = express();
const bodyParser = require("body-parser");
require('dotenv').config()

// Buat koneksi ke Mailjet dengan identitas API KEY yang telah didapat sebelumnya
const mailjet = require('node-mailjet').connect(process.env.MJ_APIKEY_PUBLIC, process.env.MJ_APIKEY_PRIVATE)

const PORT = 8080;

app.use(bodyParser.json());

app.get('/', function (req, res) {
    res.send('Halo...');
});

app.post('/send-mail', function (req, res) {
    // Variabel yang menampung desain email yang akan dikirim
    const contentEmail = `
        

Hai ${req.body.name},

Selamat, kamu telah berhasil mengirim email menggunakan Mailjet!

` const request = mailjet .post("send", { 'version': 'v3.1' }) .request({ "Messages": [{ "From": { "Email": "[email protected]", "Name": "Info dari Dazelpro" }, "To": [{ "Email": req.body.email, "Name": req.body.name }], "Subject": "Selamat, email kamu berhasil terkirim", "HTMLPart": contentEmail }] }) request .then((result) => { res.send({ status: result.response.status, result: result.body }); }) .catch((err) => { res.send({ status: err.statusCode, massage: err.message }); }) }); app.listen(PORT, () => { console.log('Application running in port : ' + PORT); }); module.exports = app;

Setelah itu, buka file .env dan buat variabel yang akan menampung API Key beserta Secret Key dari Mailjet.

MJ_APIKEY_PUBLIC = API KEY DARI MAILJET
MJ_APIKEY_PRIVATE = SECRET KEY DARI MAILJET

Sekarang coba jalankan server dengan perintah  nodemon pada terminal atau node index.js. Apabila terminal memperlihatkan text "Application running in port : 8080" itu artinya aplikasi yang kamu buat sudah dapat dijalankan dengan baik. Sekarang pertanyaannya, apakah fungsionalitas nya juga dapat dijalankan dengan baik?

Untuk itu kita akan melakukan pengujian menggunakan Postman.

Tahap Pengujian

Install terlebih dahulu aplikasi Postman di perangkat kamu, atau kamu juga dapat menggunakan versi plugin ekstention dari Chrome.

Cara menggunakan kirim email javascript

#1 Method

Rubah method pada postman menjadi POST.
Ini dikarenakan method yang kita setting pada index.js adalah method "post". Alasannya karena kita akan mengambil input yang dilakukan client.

app.post('/send-mail', function (req, res) { ... }

#2 End Point
Masukkan end point API yang telah kita tentukan sebelumnya. End point ini terdiri dari alamat host dan port server, diikuti dengan route yang telah ditentukan.
Maka URL End Point nya adalah http://localhost:8080/send-mail.

app.post('/send-mail', function (req, res) { ... }

#3 Body
Pada index.js kita telah menetapkan email dan nama penerima email di ambil dari data json yang dikirim client.

...
"To": [{
    "Email": req.body.email,   
    "Name": req.body.name    
}],
"Subject": "Selamat, email kamu berhasil terkirim",
...

Untuk memasukkan data json pada postman, Silahkan klik Body > raw > pilih JSON, kemudian isi kode berikut:

{
   "email": "[email protected]",
   "name": "Nama Penerima"
}

Silahkan ganti emailnya menjadi email penerima atau email tujuan yang kamu inginkan.

Setelah itu silahkan klik tombol Send. Apabila sukses dan tidak ada masalah, kamu akan mendapatkan respon status 200 seperti gambar di bawah 

Cara menggunakan kirim email javascript

Cara menggunakan kirim email javascript

Berikut tampilan email yang berhasil dikirim via Mailjet.

Cara menggunakan kirim email javascript

Oh ya, kamu juga dapat berkreasi mendesain email yang bagus dan responsive dengan menambahkan CSS pada baris kode HTML yang ada didalam variabel contentEmail. Atau kamu juga dapat menggunakan template email yang sudah disediakan Tim Mailjet secara gratis disini.