Mr Sói

Dùng Node.js gửi mail khi người dùng nhập form liên hệ

Khi người dùng nhập vào form liên hệ và ngay lập tức sẽ có một gmail gửi tới mình thông tin mà người dùng đã liên hệ mình, nghe thật hay đúng không... Vậy tại sao ta không dùng Node.js để giải quyết vấn đề đó nhỉ? Bắt đầu

Khi người dùng nhập vào form liên hệ và ngay lập tức sẽ có một gmail gửi tới mình thông tin mà người dùng đã liên hệ mình, nghe thật hay đúng không... Vậy tại sao ta không dùng Node.js để giải quyết vấn đề đó nhỉ?

Bắt đầu với Sói nào...

1. Khởi tạo project:

Vì bản thân Sói rất là lười nên sói sẽ dùng express-generator để khởi tạo một project express cho nhanh nhé.. Nếu bạn chưa cài thì cài bằng lệnh:

yarn global add express-generator

Rồi lại tạo một project với lệnh:

express --view=hbs email-contact

Sau đó nó sẽ tạo ra một thư mục chuẩn của express, giờ thử chạy proejct bằng mấy lệnh sau:

cd email-contact
yarn install
nodemon

Ổn rồi... :V :V

2. Bắt đầu vào việc chính:

Tạo form liên hệ vào route trỏ đến nó

Các bạn thêm một router và khi get đến địa chỉ contact thì nó sẽ render contact và post đến địa chỉ đó thì nó sẽ render file thanks ra...

Tạo thêm 2 file và contact.hbsthanks.hbs ở thư mục views nhé.

Ở file layout.hbs thì thêm boostrap,  jquery vào nhé, code là:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bạn có thể thêm vào giữa cặp thẻ head cũng được:

Rồi ở body thì thêm mấy dòng html này để có được một cái menu:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="/">MrSoi</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

File layout.hbs của bạn có thể nó sẽ giống như thế này:

Rồi load lại trang khi nãy, click vào contact... Thấy mộ trang trống giống như hình mình là oke:

Giờ thì thêm html cho cái form là được rồi nè!!

Bạn sửa file contact.hbs thành như thế này:

<h1 class="text-center">{{{title}}}</h1>
<br/>
<div class="row">
    <div class="col-sm-6 col-md-offset-3">
        <form class="form-horizontal" method="post">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input name="name" type="text" class="form-control" id="mame" placeholder="Name" value="">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input name="email" type="email" class="form-control" id="email" placeholder="Email" value="">
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea name="message" class="form-control" rows="3" id="message" placeholder="Message"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

Giờ đã có một cái form khá đẹp:

Sửa cài file thanks.hbs thành:

Xong... Giờ ta lại click vào button Send đi nào:

Tuyệt vời... Chúng ta đã đi được một nửa chặng đường rồi...

Kiểm tra dữ liệu người dùng trước khi cho phép họ gửi:

Chúng ta express-validator để kiểm tra dữ liệu đầu vào:

Như thông thường, trước tiên ta sẽ thêm module vào bằng lệnh yarn add express-validator vào.

Require nó vào và use với express:

var expressValidator = require('express-validator');
app.use(expressValidator());

Xong, sẽ được như hình này:

Qua bên index.js trong thư mục routes để thêm phần kiểm tra khi dữ liệu được post lên:

Bên file contact.hsb thì chúng ta thêm đoạn code hiển tị thông báo lỗi nếu có và giữ lại dữ liệu sau khi post:

Bạn để ý vòng lặp show ra thông báo lỗi và value của các input.

Quá đẹp trai luôn rồi... :V :V

Gửi mail đến cho mình khi người dùng liên hệ

Đây mới là phần quan trọng nhất của bài viết này mà:

Mình dùng nodemailer để giải quyết vấn đề này nhé...

Lại là câu lệnh thần thánh yarn add nodemailer.

Giờ tạo một file config.js ở thư mục gốc với nội dung như sau:

module.exports = {
    mailer:{
        service: 'Gmail',
        auth: {
            user: 'example@gmail.com',
            pass: '******'  //Pass gmail của bạn
        }
    }
}

Rồi qua bên index.js ở route thêm đoạn code này:

var nodemailer = require('nodemailer');

var config = require('../config');
var transport = nodemailer.createTransport(config.mailer);

Sửa lại một vài đoạn code thì toàn bộ code nó như thế này:

Rồi quay lại test trên trình duyệt:

Ngay lập tức có email gửi tới ( Thật ra là tự mình gửi cho mình, hí hí...)

Xong... Quá tuyệt vời... Sói thật tuyệt vời phải không nào.. Hí hí...

3. Một số lỗi khi làm theo:

Không thấy mail gửi tới:

Có thể là do bạn chưa bật less secure apps, có thể click đây để bật nó.

4. Lời nói cuối:

Hôm nay sói chẳng có gì muốn nói cả, mệt mỏi vì nhiều thứ lắm luôn....

Author image
Website
Nhiều năm qua, tôi luôn học tập một việc, chính là không quay đầu lại, chỉ vì bản thân chưa từng làm chuyện gì phải hối hận, không hối hận vì những chuyện mình đã làm.