Kali ini saya akan berbagi tutorial cara membuat crud sederhana dengan stack backend menggunakan expressjs sedangkan untuk frontend kita menggunakan template engine ejs. Semuanya distaukan dalam satu folder dan server yang sama seperti laravel dengan blade.
Ok langsung buka terminal dan ketikan perintah berikut disini saya menggunakan bantuan express generator ya, jika belum install install dahulu express generatornya via npm
Sesudah projek terbuat kita install package nodemon yang berguna untuk hot reload server ketika ada perubahan di code kita.
Lalu kita test apakah sudah berjalan atau belum ketikan pertintah berikut di terminal
Setelah itu cek di browser aplikasi kita sudah berjalan atau belum dengan default port 3000 http://localhost:3000/
Selanjutnya kita akan menambahkan style bootstrap dan mengubah halaman 404 kita dengan cara sebagai berikut. Dowload jquery dan bootstrap nya terlebih dahulu lalu masukan ke folder public/stylesheet untuk css public/javascript untuk file js sehingga di folder kita menjadi seperti ini
Edit file app.js pada bagian error handler ubah menjadi seperti ini
// 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',{title:"404 Not Found"});
});
Lanjut kita akan memecah file ejs yang berisikan script html menjadi seperti ini buat file dengan nama header.ejs dan footer.ejs di dalam folder views
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
<link href="/stylesheets/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
</head>
<body>
<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>
Masih di dalam folder views ubah file error.ejs menjadi seperti ini
<% include header %>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="error-template">
<div class="error-details">
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
</div>
<div class="error-actions">
<a href="/" class="btn btn-primary btn-lg">
Take Me Home </a>
</div>
</div>
</div>
</div>
</div>
<% include footer %>
Buka browser dan test kembali mengakses url http://localhost:3000/asal jika berhasil akan muncul seperti pada gambar dibawah ini
 |
Hakaman 404
|
Layouting halaman index, tambah dan edit
Lanjut kita akan memodifikasi halaman index atau halaman utama kita dan menambahkan halaman edit dan tambah blog, di dalam folder view edit file index.js menjadi seperti ini
<% include header %>
<div class="container">
<div class="row">
<div class="col-md-12">
<br><br>
<a href="/add" class="btn btn-sm btn-success">Add</a><br><br>
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Judul</th>
<th>Deskripsi</th>
<th>Gambar</th>
<th>Aksi</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>judul</td>
<td>test</td>
<td>image</td>
<td>
<a href="/edit/:id" class="btn btn-sm btn-primary">Edit</a>
<a href="/delete/:id" class="btn btn-sm btn-danger">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<% include footer %>
Masih di dalam folder view buat file dengan nama add.ejs
<% include header %>
<div class="container">
<div class="row">
<div class="col-md-12">
<br><br>
<form enctype="multipart/form-data" method="POST" action="/save">
<div class="form-group">
<label for="exampleInputEmail1">Judul</label>
<input type="text" name="judul" class="form-control"
placeholder="Enter Judul">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Deskripsi</label>
<textarea name="deskripsi" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Gambar</label>
<input type="file" name="gambar" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<% include footer %>
<% include header %>
<div class="container">
<div class="row">
<div class="col-md-12">
<br><br>
<form enctype="multipart/form-data" method="POST" action="/save">
<div class="form-group">
<label for="exampleInputEmail1">Judul</label>
<input type="text" name="judul" class="form-control"
placeholder="Enter Judul">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Deskripsi</label>
<textarea name="deskripsi" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Gambar</label>
<input type="file" name="gambar" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<% include footer %>
Selanjutnya buat file dengan nama blog.js di dalam folder routes lalu ketikan code berikut
var express = require('express');
var router = express.Router();
/* GET blog page. */
router.get('/add', function(req, res, next) {
res.render('add', { title: 'Express Add Blog' });
});
router.get('/edit/:id', function(req, res, next) {
res.render('edit', { title: 'Express Edit Blog' });
});
module.exports = router;
Dan edit file app.js menjadi seperti ini
 |
| app.js |
Joss lanjut buka browser buka kembali http://localhost:3000/ akan tampil halaman dengan list tabel untuk nanti menampilkan list
 |
List tabel
|
 |
Halaman add atau edit
|
Oke untuk part 1 cukup sampai disini lanjut nanti ke part selanjutnya terima kasih semoga bermanfa'at, source code ada disini
0 Komentar