9. Membuat Web Portfolio

tech

Table of Content

• Introduction
• Package
• Install Dulu
• Inisialisasi terlebih dahulu
• Routing Sederhana
• Jangan Lupa Run Server
• Template Engine

Introduction

Langsung saja kita implementasikan ke studi kasus : membuat website portfolio menggunakan ExpressJS

Package

• nodemon
• express
• ejs (template engine)

Install Dulu

Kita akan menginstall 3 package:

npm install -g nodemon
npm install express
npm install ejs --save-dev

Inisialisasi terlebih dahulu

const express = require("express")
const path = require("path")
 
const app = express()

Kita akan memanggil modul express dan menginisialisasi nya express(). Path kita gunakan untuk memanggil css, js, maupun image.

Routing Sederhana

app.get("/", (req, res) => {
	res.send("Hello World")
})

Jika di Laravel mungkin kurang lebih seperti ini

Route::get('/', function(){
	return "Hello World";
});

Beda nya jika kita menggunakan js, tidak perlu menggunakan ;

Jangan Lupa Run Server

app.listen(3000, () => {
	console.info("Server is run!")
})

Untuk akses bisa menuju localhost:3000

Template Engine

Kita menggunakan template engine EJS. Dokumentasi bisa diakses disini.

index.js

app.set("view engine", "ejs");
app.set("views", "views");
 
app.use(express.static(path.join(__dirname, 'public')));
 
app.get("/", (req, res) => {
	res.render("pages/index")
})

Jangan lupa set view engine ke js dan menetapkan static file ke public. Untuk memanggil view ketik res.render("nama_file"). Jangan lupa buat folder views di root terlebih dahulu. Kurang lebih struktur folder akan seperti ini:

Buat view sesuka hati…

Codingan Lengkap

index.js

const express = require("express")
const path = require("path")
 
const app = express()
 
app.set("view engine", "ejs");
app.set("views", "views");
 
app.use(express.static(path.join(__dirname, 'public')));
 
app.get("/", (req, res) => {
	res.render("pages/index")
})
 
app.get("/sertifikat", (req, res) => {
	res.render("pages/sertifikat")
})
 
app.listen(3000, () => {
	console.info("Server is run!")
})

views/pages/index.ejs

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Andaru Triadi, S.Kom</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css>">
  </head>
  <body>
	// Codingan
	<!-- Javascript -->
    <script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js>"></script>
  </body>
</html>