Integrasi Node.js + Express.js & Bootstrap

Kali ini saya akan membuat halaman web statis dengan nodejs+express dan template bootstrap. mengapa saya melibatkan express js, karna express adalah framework yang sangat populer yang digunakan untuk mempermudah pembuatan web atau aplikasi dengan nodejs.

lebih lengkap tentang expressjs bisa dilihat di situs resminya https://expressjs.com/

pada tutorial ini saya asumsikan anda telah mengerti bagaimana cara membuat folder yang terintegrasi dengan nodejs

langsung saja kita buat struktur folder seperti dibawah ini

belajarnodejs
-views
--404.html
--about.html
--index.html
--kontak.html
app.js

sebelumnya kita install terlebih dahulu express.js nya

npm install express --save

jika sudah, buka file app.js lalu masukan kodingan berikut

var express = require("express");
var app = express();
var router = express.Router();
var path = __dirname + '/views/';
router.use(function (req,res,next) {
console.log("/" + req.method);
next();
});
router.get("/",function(req,res){
res.sendFile(path + "index.html");
});
router.get("/tentang",function(req,res){
res.sendFile(path + "about.html");
});
router.get("/kontak",function(req,res){
res.sendFile(path + "kontak.html");
});
app.use("/",router);
app.use("*",function(req,res){
res.sendFile(path + "404.html");
});
app.listen(3000,function(){
console.log("Live at Port 3000");
});

File index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Single page web app using Angularjs</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Beranda<span class="sr-only">(current)</span></a></li>
<li><a href="/tentang">Tentang kami</a></li>
<li><a href="/kontak">Kontak kami</a></li>
</ul>
</nav>
</div>
<br/>
<div class="jumbotron"> <p>
Selamat datang di halaman beranda</p></div>
</div>
</body>
</html>

file about.html

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li><a href="/">Beranda</a></li>
<li class="active"><a href="/tentang">Tentang<span class="sr-only">(current)</span></a></li>
<li><a href="/kontak">Kontak kami</a></a></li>
</ul>
</nav>
</div>
<br/>
<div class="jumbotron">
<p>
ini halaman tentang
</p>
</div>
</div>
</body>
</html>

file kontak.html

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li><a href="/">Beranda</a></li>
<li><a href="/tentang">Tentang</a></li>
<li class="active"><a href="/kontak">kontak<span class="sr-only">(current)</span></a></li>
</ul>
</nav>
</div>
<br/>
<form class="form-horizontal" role="form" style="width: 50%;">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Nama</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Nama lengkap" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="contoh@domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Pesan</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Kirim" class="btn btn-primary">
</div>
</div>
</form>
</div>
</body>
</html>

file 404.html

<b>Ini Halaman 404</b>

Jika sudah jalankan program

node app.js

kemudian buka http://localhost:3000/