GET
Mengirim data ke view, kita akan belajar bagaimana mengirim data ke view. Tidak hanya itu, kita belajar bagaimana mengambil data dari URI parameter dan mengirimnya ke view.1. Buka file app.js, kemudian ubah menjadi seperti dibawah ini.
const path = require('path');
const express = require('express');
const hbs = require('hbs');
const app = express();
app.set('views',path.join(__dirname,'views'));
app.set('view engine', 'hbs');
app.use(express.static('public'));
app.get('/',(req, res) => {
res.render('index',{
name : "M Anjas"
});
});
app.get('/:name',(req, res) => {
res.render('index',{
name : req.params.name
});
});
app.listen(8080, () => {
console.log('Server is running at port 8080');
});
2. Buka file index.hbs, kemudian ganti menjadi seperti dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello {{ name }}</title>
<!--Load bootstrap.css file-->
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1 class="display-4">Hello, {{ name }}</h1>
<p class="lead">This is a simple site</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</div>
</div>
<!--Load bootstrap.js file-->
<script src="js/bootstrap.js"></script>
</body>
</html>
3. Jalankan app.js dengan mengetikan perintah berikut pada terminal:
node app.js
4. Kemudian, buka browser kemudian ketikan URL berikut:
http://localhost:8080/alan
Maka, akan terlihat seperti dibawah ini:
Ketika kita merubah url nya makan akan merubah lagi tampilan index.
POST
Kali ini kita akan belajar bagaimana menghandle request melalui body. Untuk menghandle POST request body, kita membutuhkan middleware body-parser.Untuk menginstal body-parser, cukup ketikan perintah berikut pada terminal :
npm install body-parser --save
Perintah diatas akan menginstall middleware body-parser ke project kita.
Oke, kita mulai menghandle POST request body
1. Buat sebuah view dengan nama form.hbs di folder views
2. Copy kan script di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add New</title>
<!--Load bootstrap.css file-->
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Add New User</h2>
<form action="/post" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="textname" class="form-control" placeholder="Name">
</div>
<div class="col">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!--Load bootstrap.js file-->
<script src="js/bootstrap.js"></script>
</body>
</html>
3. Buka file app.js, ubah menjadi seperti di bawah ini:
const path = require('path');
const express = require('express');
const hbs = require('hbs');
const bodyParser = require('body-parser');
const app = express();
app.set('views',path.join(__dirname,'views'));
app.set('view engine', 'hbs');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static('public'));
app.get('/',(req, res) => {
res.render('index',{
name : "M Anjas"
});
});
app.get('/post',(req, res) => {
res.render('form');
});
app.post('/post',(req, res) => {
res.render('index',{
name : req.body.name
});
});
app.listen(8080, () => {
console.log('Server is running at port 8080');
});
4. Jalankan app.js
node app.js
Kemudian buka browser dan ketikan URL dibawah ini:
http://localhost:8080/post
