Cari artikel lain

 

WHATSAPP API PART V

 

Lanjutan dari tutorial whatsapp api part iv.

#2021Produktif …!!! Rencananya tahun 2021 ini mau lebih rajin untuk membuat artikel. Tapi ternyata produktif itu bukan sekedar nulis blog, tapi harus bekerja bekerja dan bekerja :)

Ok, sekarang lanjut. Pada latihan sebelumnya setelah kita membuat tampilan maka kita akan buat design data base applikasi kita. Akan saya buat sesimple mungkin.

Pertama buat database dulu dengan nama latihan_wa. Kalian bisa buat dengan phpmyadmin atau dari command line. Saya asumsikan sudah familier dengan database mysql ya. 

untuk query ketik sbb

CREATE DATABASE latihan_wa;
USE latihan_wa;
CREATE TABLE `admin` (
	admin_id INT (11) AUTO_INCREMENT NOT NULL,
	admin_name TEXT NOT NULL,
	admin_email TEXT NOT NULL,
	admin_password TEXT NOT NULL,
	PRIMARY KEY (admin_id)
);
CREATE TABLE `device` (
	dev_id INT (11) AUTO_INCREMENT NOT NULL,
	dev_name TEXT NOT NULL,
	dev_phone TEXT NOT NULL,
	dev_token TEXT NOT NULL,
	dev_status INT DEFAULT 0 NOT NULL,
	PRIMARY KEY (dev_id)
);
INSERT INTO admin (admin_name, admin_email, admin_password) VALUES ('admin', 'admin@gmail.com', '$2b$12$JlNSbxLykV/mVrjGfxMI/eUQmtnBKPqpwufwgxdcs6Q/OOL2keYde');

Penjelasan :

CREATE DATABASE latihan_wa;

Ini digunakan untuk membuat database bernama latihan_wa.

USE latihan_wa;

USE digunakan untuk menggunakan database latihan_wa.

CREATE TABLE `admin` (
	admin_id INT (11) AUTO_INCREMENT NOT NULL,
	admin_name TEXT NOT NULL,
	admin_email TEXT NOT NULL,
	admin_password TEXT NOT NULL,
	PRIMARY KEY (admin_id)
);

CREATE TABLE digunakan untuk membuat table baru bernama admin dengan fields :

  • admin_id  - bertype INTEGER 11 karakter otomatis bertingkat dan tidak boleh kosong setiap input data baru
  • admin_name - bertype text dan tidak boleh kosong
  • admin_email - bertype text dan tidak boleh kosong
  • admin_password - bertype text dan tidak boleh kosong
  • PRIMARY KEY (admin) - primary key pada table ini adalah field admin_id
CREATE TABLE `device` (
	dev_id INT (11) AUTO_INCREMENT NOT NULL,
	dev_name TEXT NOT NULL,
	dev_phone INT(255) NOT NULL,
	dev_token TEXT NOT NULL,
	dev_status INT DEFAULT 0 NOT NULL,
	PRIMARY KEY (dev_id)
);

CREATE TABLE kali ini untuk membuat table baru bernama device dengan fields :

  • dev_id - bertype INTEGER 11 karakter otomatis bertingkat dan tidak boleh kosong setiap input data baru
  • dev_name - bertype text dan tidak boleh kosong
  • dev_phone- bertype INTEGER 255 karakter dan tidak boleh kosong
  • dev_status - bertype INTEGER  dan tidak boleh kosong
  • PRIMARY KEY (dev_id) - primary key pada table ini adalah field dev_id
INSERT INTO admin (admin_name, admin_email, admin_password) VALUES ('admin', 'admin@gmail.com', '$2b$12$JlNSbxLykV/mVrjGfxMI/eUQmtnBKPqpwufwgxdcs6Q/OOL2keYde');

INSERT INTO digunakan untuk menginput data ke dalam admin.

KONEKSI DATABASE KE APPLIKASI

Kita memerlukan module mysql, jadi pada console kita install package dengan mengetikkan 

npm i --save mysql

Pada struktur folder latihan kita tambahkan file dengan nama dbConn.js selevel dengan index.js. Maka folder kita akan jadi seperti ini

dbConn.js

Lalu ketikkan kode berikut

'use strict'

const mysql      = require('mysql');
const db = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'latihan_wa',
  port     : 3306
});
 
db.connect(err => {
    if (err) console.log(err)
    console.log('\nDatabase '+db.config.database+' is connected on PORT '+db.config.port+'\n')
});

module.exports = db

Untuk lebih lanjut mengenai module npm mysql bisa klik tautan ini.

Untuk menggunakan koneksi kita tinggal panggil saja file dbConn.js yang sudah kita buat. Misal kita ubah index.js seperti berikut ini

const db = require('./dbConn')

Save dan kita akan melihat hasilnya pada console seperti ini

Perhatikan console.log pada file dbConn.js

 

UPDATE VIEW

Agar menu tidak tampil pada halaman login kita update header seperti berikut

style="display: none;"

Lalu update file footer

Untuk post kita tidak menggunakan jquery atau plugin, kita akan menggunakan fetch. Untuk lebih detil bisa dilihat pada halaman mozilla ini.

Lalu pada halaman login.ejs tambahkan script onclick="login()" agar saat tombol login di klik applikasi akan menjalankan script login.

onclick="login()"

Lalu buat script login diatas inclide footer seperti ini

<script>

    function login() {
        const email = document.querySelector('#email').value.trim()
 // Ambil nilai input email
        const password = document.querySelector('#password').value.trim()
 // Ambil nilai input password
        if (!email) {
            alert("Check Email")
 //Buat alert jika email tidak diisi
        } else if (!password) {
            alert("check Password")
 //Buat alert jika password tidak diisi
        } else {
            postData('/login', { email, password })
                .then(data => {
                    if (data.status === 'failed') {
                        alert(data.message)
 //Buat alert jika post failed
                    } else {
                        window.location.replace("/profile")
 //Alihkan halaman jika post sukses
                    }
                });
        }
    }

</script>

Kita membutuhkan module lagi yaitu body-parser dan bcrypt

cara installnya yaitu ketik kode berikut di console

npm i --save body-parser bcrypt

Fungsi body-parser adalah untuk parsing data dan bcrypt untuk hash password

Lalu ubah file index.js menjadi seperti berikut ini

"use strict"

const express = require("express")
const app = express()
const http = require("http")
const server = http.createServer(app)
const port = 3000

const bodyParser = require('body-parser') //menggunakan bodyparser

const db = require('./dbConn') //memanggil koneksi database

app.use(express.json()) // membuat app json parser dengan limit
app.use(bodyParser.urlencoded({ extended: false })) //membuat app x-www-form-urlencoded parser

app.set('view engine', 'ejs');
app.use(require ("./router/router"))
app.use(require ("./router/login"))

server.listen(port, console.log("\nServer run and listen port : "+port))

Lalu buat i file lagi pada folder router bernama login.js

format folder kita menjadi seperti ini

Lalu ketik kode dibawah ini pada file login.js

'use strict'

const express = require('express')
const router = express.Router()
const db = require('../dbConn')
const bcrypt = require('bcrypt')

let sql

function checkUser(req, res, email, password) {
    sql = `SELECT admin_email FROM admin WHERE admin_email = ? `
    db.query(sql, [email], (err, result) => {
        if (err) throw err
        if (result.length == 0) {
            res.send({status: 'failed', message: 'User Not Found'})
        } else {
            verifikasi(req, res, email, password)
        }
    })
}

function verifikasi(req, res, email, password) {
    sql = `SELECT admin_password FROM admin WHERE admin_email = ?`
    db.query(sql, [email], (err, result) => {
        if (err) throw err
        const dbPass = result[0].admin_password
        if (bcrypt.compareSync(password, dbPass)) {
            res.send({status: 'success', message: 'User found and password verified'})
        } else {
            res.send({status: 'failed', message: 'User found and password not verified'})
        }
    })
}

router.post('/login', (req, res) => {
    const { email, password } = req.body
    checkUser(req, res, email, password)
})

module.exports = router

Silahkan save dan karena kita menggunakan nodemon maka otomatis system akan merestart.

Kita coba halaman login, dan isikan email = admin@gmail.com dan password = admin

Jika sukses maka jika email dan password terdaftar pada database maka akan diredirect ke halaman profile. Jika tidak atau ada kesalahan input maka akan ada notif alert muncul.

Selanjutnya akan kita buat sesi pada aplikasi kita agar hanya pemegang akun saja yang bisa mengakses aplikasi kita.

Tunggu tutorial selanjutnya di whatsap api part vi.

*Jika ada komen/pertanyaan silahkan kontak saya di halaman kontak ada bisa mampir ke channel youtube saya.


Kategori POST
I build this blog using BootstrapMade Template