8. Menggunakan Sequelize

tech

Table of Content

• Introduction
• Installing
• Koneksi Database
• Model
• Create Data
• Read Data
• Edit Data
  • Views
  • Logic
• Destroy Data

Introduction

Sequelize adalah ORM berbasis promise di Node.js yang mendukung Postgres, MySQL, SQL Server. Sequelize menyediakan cara yang mudah untuk mengelola data yang ada dalam database. Sebelum mulai: Pastikan kamu sudah menginstall dan menjalankan MySQL server di komputer kamu.

Installing

npm install mysql2
npm install sequelize

Koneksi Database

Kita akan membuat koneksi menggunakan sequelize. Buat folder util dengan file sequelize.js

util/sequelize.js

const sequelize = require("sequelize");
 
const database = new sequelize("latihan", "root", "", {
	dialect: "mysql",
	host: "localhost"
});
 
module.exports = database;

Silahkan run sequelize di app.js

app.js

const express = require("express");
const path = require("path");
const webRoute = require("./routes/web.js");
const sequelize = require("./util/sequelize.js");
 
const app = express();
 
app.set("view engine", "ejs");
app.set("views", "views");
 
app.use(express.static(path.join(__dirname, 'public')));
 
app.use(webRoute);
 
sequelize
	.sync()
	.then(result => {
		console.info('connected with sequelize!');
		app.listen(3000);
	})
	.catch(err => {
		console.info(err);
	});

Model

Sama seperti kita menggunakan laravel, kita harus membuat model terlebih dahulu. Buat folder models di root dan beri nama file nya biodata.js

biodata.js

const sequelize = require("sequelize");
 
const database = require("../util/sequelize");
 
// biodatas itu nama table nya
const Biodata = database.define("biodatas", {
  id: {
    type: sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true
  },
  nama: sequelize.STRING,
  umur: sequelize.INTEGER,
  hobi: sequelize.STRING
});
 
module.exports = Biodata;

Selengkapnya ada di https://sequelize.org/docs/v6/core-concepts/model-basics/

Create Data

Setelah membuat model, kita akan mencoba membuat Create Data ke database MySQL. Buat tampilan kurang lebih seperti ini.

Sebelumnya, penting untuk dipahami bahwa sebelum kita bisa menggunakan req.body kita harus menginstall body-parser

npm install body-parser

setelah itu taruh di app.js

app.js

const bodyParser = require("body-parser");
 
app.use(bodyParser.urlencoded({ extended: false }));

di Controller biodata.js buat 2 method. create untuk menampilkan halaman tambah data, store untuk logic tambah data.

controllers/biodata.js

const Biodata = require("../models/biodata");
 
exports.create = (req, res, next) => {
	res.render("create", {
		menu: "Tambah Data"
	});
};
 
exports.store = (req, res, next) => {
	Biodata.create({
			nama: req.body.nama,
			umur: req.body.umur,
			hobi: req.body.hobi
		})
		.then(result => {
			console.info("Berhasil menambahkan biodata!")
			res.redirect("/")
		})
		.catch(err => {
			console.info(err);
		});
};

Untuk view nya bisa buat tampilan biasa.

Read Data

controller/biodata.js

const Biodata = require("../models/biodata");
 
exports.index = (req, res, next) => {
	const biodatas = Biodata.findAll()
						.then(result => {
							res.render('index', {
								menu: "Dashboard",
								biodatas: result
							});
						});
};

views nya index.js

<% for(let biodata of biodatas) { %>
<tr>
	<td><%= biodata.nama %></td>
	<td><%= biodata.umur %></td>
	<td><%= biodata.hobi %></td>
</tr>
<% } %>

Edit Data

kita akan membuat halaman edit data. Logicnya kita akan mengambil data berdasarkan id.

Views

Sebelumnya buat route seperti berikut

Routes/web.js

router.get("/edit/:id", biodataController.edit);
router.post("/edit/:id", biodataController.update);

viewsnya seperti ini

edit.js

<form action="/edit/<%= id %>" method="POST">
<% for(let bio of biodata) {%>
<div class="form-group">
	<label>Nama</label>
	<input type="text" class="form-control" name="nama" value="<%= bio.nama %>" />
</div>
<div class="form-group">
	<label>Umur</label>
	<input type="text" class="form-control" name="umur" value="<%= bio.umur %>" />
</div>
<div class="form-group">
	<label>Hobi</label>
	<input type="text" class="form-control" name="hobi" value="<%= bio.hobi %>" />
</div>
<% } %>
<button type="submit" class="btn btn-success">Update</button>
</form>

controller/biodata.js

exports.edit = (req, res, next) => {
	const biodata = Biodata.findAll({
		where: {
			id: req.params.id
		}
	})
	.then(result => {
		res.render("edit", {
			menu: "Edit Data",
			id: req.params.id,
			biodata: result
		});
	});
};

Logic

controllers/biodata.js

exports.update = (req, res, next) => {
	const biodata = Biodata.update(
	{
		nama: req.body.nama,
		umur: req.body.umur,
		hobi: req.body.hobi
	},
	{
		where: {
			id: req.params.id
		}
	}
	)
	.then(result => {
		res.redirect("/");
	})
	.catch(err => console.info(err));
};

Destroy Data

Jangan lupa buat route nya terlebih dahulu. routes/web.js

router.get("/destroy/:id", biodataController.destroy);

controller/biodata.js

exports.destroy = (req, res, next) => {
	const biodata = Biodata.destroy(
		{
			where: {
				id: req.params.id
			}
		})
		.then(result => {
			res.redirect("/");
		})
		.catch(err => console.info(err));
}