Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bersama-sama bagaimana cara menampilkan data dari database di dalam project Express.
Sebelumnya, kita akan menginstall package tambahan yang digunakan agar kita tidak melakukan restart server saat merubah route di dalam project Express.
Langkah 1 - Install Nodemon
Disini kita akan menginstall library nodemon secara global di dalam komputer, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
npm install -g nodemon
Sekarang, untuk menjalankan project Express, kita gunakan perintah seperti berikut ini :
nodemon npm start
Maka, jika kita melakukan perubahan pada route di dalam project Express, maka nodemon akan otomatis melakukan restart sendiri.
Langkah 2 - Membuat Route Posts Index
Sekarang, kita lanjutkan untuk membuat route untuk posts, silahkan buat file baru dengan nama posts.js di dalam folder routes dan masukkan kode 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
});
}
});
});
module.exports = router;
Di atas, pertama kita import konfigurasi database yang sudah pernah kita buat sebelumnya.
//import database
var connection = require('../library/database');
Kemudian, kita definisikan 1 route baru dengan method get, yang isinya adalah query ke dalam table posts.
connection.query('SELECT * FROM posts ORDER BY id desc', function (err, rows) {
//...
}
Jika berhasil, maka data posts tersebut akan di parsing ke dalam view post index.
//render ke view posts index
res.render('posts/index', {
data: rows // <-- data posts
});
Langkah 3 - Membuat View Post Index
Sekarang, kita lanjutkan untuk membuat view untuk menampilkan data posts tersebut. Silahkan buat folder baru dengan nama posts di dalam folder views. Kemudian, di dalam folder posts silahkan buat file baru dengan nama index.ejs dan 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>Data 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.success) { %>
<div class="alert alert-success" role="alert"><%- messages.success %></div>
<% } %>
<% if (messages.error) { %>
<div class="alert alert-danger" role="alert"><%- messages.error %></div>
<% } %>
<div class="card border-0 shadow rounded">
<div class="card-body">
<a href="posts/create" class="btn btn-md btn-success mb-3">TAMBAH POST</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">NO.</th>
<th scope="col">JUDUL POST</th>
<th scope="col">CONTENT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
<% if(data.length){
for(var i = 0; i< data.length; i++) {%>
<tr>
<th scope="row" class="text-center"><%= (i+1) %></th>
<td><%= data[i].title%></td>
<td><%= data[i].content%></td>
<td class="text-center">
<a href="/posts/edit/<%=data[i].id%>" class="btn btn-sm btn-primary">EDIT</a>
<a onclick="return alert('Are You sure?')" href="/posts/delete/<%=data[i].id%>" class="btn btn-sm btn-danger">HAPUS</a>
</td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="4">
<div class="alert alert-danger" role="alert">
Data Tidak Ditemukan !
</div>
</td>
</tr>
<% } %>
</tbody>
</table>
</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, kita menambahkan session flash untuk menampilkan pesan sukses atau gagal.
<% if (messages.success) { %>
<div class="alert alert-success" role="alert"><%- messages.success %></div>
<% } %>
<% if (messages.error) { %>
<div class="alert alert-danger" role="alert"><%- messages.error %></div>
<% } %>
Kemudian, untuk menampilkan data posts, kita menggunakan perulangan for, kurang lebih seperti berikut ini :
for(var i = 0; i< data.length; i++) {%>
// ...
<% } %>
Langkah 4 - Edit File App.js
Sekarang, kita akan melakukan import beberapa library dan konfigurasi di dalam file app.js. Silahkan buka file app.js dan ubah semua kode-nya menjadi seperti berikut ini :
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//library
var flash = require('express-flash');
var session = require('express-session');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var postsRouter = require('./routes/posts'); // <-- route posts
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
cookie: {
maxAge: 60000
},
store: new session.MemoryStore,
saveUninitialized: true,
resave: 'true',
secret: 'secret'
}))
app.use(flash())
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/posts', postsRouter); // use route posts di Express
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
Di atas, pertama kita import library express-flash dan express-session.
//library
var flash = require('express-flash');
var session = require('express-session');
Kemudian, kita import file routes posts yang sebelumnya sudah kita buat.
var postsRouter = require('./routes/posts'); // <-- route posts
kemudian, kita gunakan express-flash di dalam Express menggunakan module use.
app.use(flash())
Terakhir, kita juga gunakan route posts di dalam Express menggunakan module use.
app.use('/posts', postsRouter); // use route posts di Express
Sekarang, jika kita buka project-nya di http://localhost:3000/posts, maka kurang lebih seperti berikut ini :
DI atas, kita mendapatkan pesan Data Tidak DItemukan!, itu karena kita memang belum mempunyai data apapun di dalam table posts.
Di artikel selanjutnya, kita semua akan belajar bagaimana cara memasukkan data ke dalam database menggunakan Express.
Terima Kasih
EBOOK Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway