Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara memasukkan data ke dalam database menggunakan Express, maka sekarang kita akan belajar bagaimana cara menampilkan data yang akan di edit kemudian mengupdate-nya.
Langkah 1 - Membuat Route Post Edit dan Update
Pertama, kita akan menambahkan 2 route baru, yaitu route untuk proses menampilkan data yang akan di edit di dalam form, kemudian route untuk proses update data ke dalam database.
Silahkan buka file routes/posts.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
var express = require('express');
var router = express.Router();
//import database
var connection = require('../library/database');
/**
* INDEX POSTS
*/
router.get('/', function (req, res, next) {
//query
connection.query('SELECT * FROM posts ORDER BY id desc', function (err, rows) {
if (err) {
req.flash('error', err);
res.render('posts', {
data: ''
});
} else {
//render ke view posts index
res.render('posts/index', {
data: rows // <-- data posts
});
}
});
});
/**
* CREATE POST
*/
router.get('/create', function (req, res, next) {
res.render('posts/create', {
title: '',
content: ''
})
})
/**
* STORE POST
*/
router.post('/store', function (req, res, next) {
let title = req.body.title;
let content = req.body.content;
let errors = false;
if(title.length === 0) {
errors = true;
// set flash message
req.flash('error', "Silahkan Masukkan Title");
// render to add.ejs with flash message
res.render('posts/create', {
title: title,
content: content
})
}
if(content.length === 0) {
errors = true;
// set flash message
req.flash('error', "Silahkan Masukkan Konten");
// render to add.ejs with flash message
res.render('posts/create', {
title: title,
content: content
})
}
// if no error
if(!errors) {
let formData = {
title: title,
content: content
}
// insert query
connection.query('INSERT INTO posts SET ?', formData, function(err, result) {
//if(err) throw err
if (err) {
req.flash('error', err)
// render to add.ejs
res.render('posts/create', {
title: formData.title,
content: formData.content
})
} else {
req.flash('success', 'Data Berhasil Disimpan!');
res.redirect('/posts');
}
})
}
})
/**
* EDIT POST
*/
router.get('/edit/(:id)', function(req, res, next) {
let id = req.params.id;
connection.query('SELECT * FROM posts WHERE id = ' + id, function(err, rows, fields) {
if(err) throw err
// if user not found
if (rows.length <= 0) {
req.flash('error', 'Data Post Dengan ID ' + id + " Tidak Ditemukan")
res.redirect('/posts')
}
// if book found
else {
// render to edit.ejs
res.render('posts/edit', {
id: rows[0].id,
title: rows[0].title,
content: rows[0].content
})
}
})
})
/**
* UPDATE POST
*/
router.post('/update/:id', function(req, res, next) {
let id = req.params.id;
let title = req.body.title;
let content = req.body.content;
let errors = false;
if(title.length === 0) {
errors = true;
// set flash message
req.flash('error', "Silahkan Masukkan Title");
// render to edit.ejs with flash message
res.render('posts/edit', {
id: req.params.id,
title: title,
content: content
})
}
if(content.length === 0) {
errors = true;
// set flash message
req.flash('error', "Silahkan Masukkan Konten");
// render to edit.ejs with flash message
res.render('posts/edit', {
id: req.params.id,
title: title,
content: content
})
}
// if no error
if( !errors ) {
let formData = {
title: title,
content: content
}
// update query
connection.query('UPDATE posts SET ? WHERE id = ' + id, formData, function(err, result) {
//if(err) throw err
if (err) {
// set flash message
req.flash('error', err)
// render to edit.ejs
res.render('posts/edit', {
id: req.params.id,
name: formData.name,
author: formData.author
})
} else {
req.flash('success', 'Data Berhasil Diupdate!');
res.redirect('/posts');
}
})
}
})
module.exports = router;
Di atas, kita menambahkan 2 route baru, yaitu : edit dan update.
edit
Route edit digunakan untuk menampilkan data yang diambil dari database ke dalam sebuah form, route ini menggunakan method GET.
let id = req.params.id; // <-- get ID from URL browser
connection.query('SELECT * FROM posts WHERE id = ' + id, function(err, rows, fields) {
// ...
Di atas, di dalam route edit, kita melakukan sebuah query ke dalam table posts berdasarkan ID yang di dapatkan dari parameter di URL. Setelah data di dapatkan, maka akan di parsing ke dalam view post edit.
// render to edit.ejs
res.render('posts/edit', {
id: rows[0].id,
title: rows[0].title,
content: rows[0].content
})
update
Route update digunakan untuk melakukan proses update data yang dikirim dari form edit. Untuk kode-nya memang hampir sama dengan route store, yang membedakan hanyalah pada query ke databasenya saja.
// update query
connection.query('UPDATE posts SET ? WHERE id = ' + id, formData, function(err, result) {
// ...
Kode di atas merupakan query yang digunakan untuk melakukan proses update data post berdasarkan ID.
Langkah 2 - Membuat View Post Edit
Sekarang, kita lanjutkan untuk membuat view untuk menampilkan data yang akan di edit. Silahkan buat file baru dengan nama edit.ejs di dalam folder views/posts, kemudian masukkan kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Edit Blogs - SantriKoding.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body style="background: lightgray">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<% if (messages.error) { %>
<div class="alert alert-danger" role="alert"><%- messages.error %></div>
<% } %>
<div class="card border-0 shadow rounded">
<div class="card-body">
<form action="/posts/update/<%= id %>" method="post">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" value="<%= title %>" placeholder="Masukkan Title Post">
</div>
<div class="form-group">
<label>Konten</label>
<textarea class="form-control" name="content" rows="4" placeholder="Masukkan Konten Post"><%= content %></textarea>
</div>
<button type="submit" class="btn btn-primary">UPDATE</button>
<button type="reset" class="btn btn-warning">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</script>
</body>
</html>
Di atas, bisa teman-teman perhatikan, untuk form action kita arahkan ke dalam route update dengan parameter ID post.
<form action="/posts/update/<%= id %>" method="post">
Sekatang, kita coba untuk menjalankan project-nya dengan cara klik button EDIT, jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Silahkan ubah data-nya dan klik UPDATE, jika berhasil maka kurang lebih seperti berikut ini :
Di atas, kita berhasil melakukan operasi untuk edit dan update data menggunakan Express ke dalam database MySQL, di tutorial selanjutnya kita akan belajar bagaimana cara membuat fungsi hapus data ke dalam database.
Terima Kasih
EBOOK Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway