EZ (Easy) Mengirimkan Email dari Personal Web

21 Jan 2020 10:04 1428 Hits 0 Comments Approved by Plimbi
Cara mudah mengirimkan email ke Gmail dari web personal kamu ...

Gmail adalah salah salah satu service untuk bisa komunikasi dengan sesama, yaitu dengan cara mengirimkan surat elektronik (email).

Gmail ini merupakan produk dari Google loh...

Sebagai seorang programmer, apakah kamu pernah berfikir tentang bagaimana sih cara agar bisa mengirim email ke Gmail melalui web yang kamu bangun?

Pernah kan?

Sekarang kita akan bahas bagaimana semua itu bisa terjadi...

 

Kamu akan menggunakan NodeJS, Nodemailer dan Express (sebagai rendering view) untuk mengkonfigurasinya. Untuk yang belum menginstal NodeJS kamu bisa ikutin tutorial sebelumnya yang berjudul NodeJS - Teknologi yang Mudah, Semudah Menyantap Siomay dan untuk yang belum tahu tentang Express bisa cek artikel sebelumnya juga yang berjudul Si Cepat dari Si Enod

 

Oke langsung saja kita mulai...

Langkah pertama, pastikan ada akses internet di komputer atau laptop kamu untuk mengirimkan email nantinya dan langsung kamu buka teks editor (saya menggunakan Visual Studio Code)

Setelah itu buka terminalnya di VSCode, dan untuk menginstal package nodemailer juga express kamu bisa ketikan baris berikut ini,

npm install nodemailer express

 

By the way, saya sudah install keduanya jadi hasilnya seperti ini,

Buat kamu yang belum install pastikan tidak ada error saat menginstalnya.

Oh iya, dan juga jangan lupa install body-parser untuk bisa mengirimkan respon ke express kamu nantinya dengan cara berikut ini,

npm install body-parser

 

Langkah kedua, buat satu file bernama app.js, dan kemudian panggil package yang telah diinstal tadi seperti kode berikut ini,

Kemudian kita gunakan express nya dan juga gunakan express tersebut dengan body-parser, agar respon kamu bisa ditampilkan di browser dengan mengetikan baris kode berikut ini,

 

Langkah ketiga, buat folder bernama views dan juga buat file index.html di dalamnya untuk menampilkan form yang ingin kita tampilkan nantinya.

Untuk mengakses index.html agar bisa tampil di browser adalah dengan cara mengetikan baris berikut di file app.js kamu,

Catatan:

sendFile digunakan untuk mengakses suatu file di NodeJs

__dirname digunakan untuk mengambil path dimana kamu sekarang.

Untuk penjelasan apa itu GET, slash (‘/’) dan apa itu request/response kamu bisa lihat juga di artikel saya yang berjudul Jurus Jitu Menggunakan Express

 

Langkah keempat, gunakan port untuk mengakses web kamu dibrowser seperti baris berikut ini,

Langkah kelima, edit file index.html kamu sebagai tampilannya. Untuk tampilannya kamu bebas berkreasi sesuka hati, berikut isi file punya saya,

Oh iya teman – teman, pastikan form method nya POST lebih secure sehingga tidak bisa diakses oleh user lain ketika sudah dihosting dan untuk action bebas (punya saya /send-email) yang penting nanti dicocokan dengan function yang ada di NodeJs nya (cocokan dengan langkah ketujuh)

 

Langkah keenam, jalankan kode yang kamu telah buat di terminal dengan cara mengetikan baris berikut ini,

node app.js

 

Kemudian buka browser kamu dan ketikan http://localhost:3000/ dan hasilnya seperti berikut ini,

 

Langkah ketujuh, buat function untuk mengakses action yang ada di form kamu, seperti berikut ini,

Catatan:

Post dan /send-email pada kode paling atas dicocokan dengan form method dan action yang ada di langkah kelima.

Variabel mailTo, mailSubject, mailBody digunakan untuk mengakses form yang kamu buat dan diisi di index.html

Transporter diibaratkan sebagai driver ojek, jadi mau pake ojek yang mana dan orangnya siapa atau dengan kata lain pengirimnya siapa

mailOptopns berarti apa yang akan dikirim, dari siapa dan mau dikirim kepada siapa

sendMail berarti pesan siap dikirimkan dengan output ‘Email Sent’ (jika berhasil dikirim) atau akan mendapat pesan error (jika tidak berhasil dikirim)

*) xxx@gmail.com dan xxx diganti dengan email dan password Gmail kamu

 

Langkah kedelapan, buka masuk ke akun Gmail kamu lalu ketikan myaccount.google.com/lesssecureapps di browser dan pastikan dalam keadaan ON,


 

Selanjutnya coba kamu jalankan lagi perintah berikut,

node app.js

dan buka browser ketikan http://localhost:3000/ lalu isi formnya,

Dan klik SEND, inilah yang terjadi “Email Sent”

 

Cek di email tujuan kamu, hasilnya seperti ini,

 

Beres deh, mudah kan?

About The Author

Yusri Yusron 28
Novice

Yusri Yusron

Mahasiswa
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel