Assalamualaikum
Halo teman-teman perkenalkan saya admin baru, kali ini saya akan membagikan tentang cara membuat aplikasi sederhana mengunakan nodejs, artikel ini tentunya untuk pemula seperti admin ini dan tentunya cara memulai dengan proyek inovatif anda sendiri.
langkah-langkah :
- Pengantar
- Unduh dan instal Node.js (skip jika sudah diinstall)
- Menyiapkan bahan-bahan
- Membuat server dengan Express
- Template engine mengunakan EJS
- Styling pada halaman kita
- Membuat beberapa router
- Mengoper Data ke Tampilan
- Kesimpulan
Pengantar
Express : ExpressJS merupakan framework minimal yang sangat fleksibel. Anda bisa membuat web server HTML, server file statik, aplikasi chat, search engine, sosial media, layanan web dengan akses melalui REST API atau aplikasi hybrid yaitu selain pengguna mempunyai akses melalui REST API juga mempunyai akses ke HTML page.
EJS : template engine ini penulisan sama seperti html biasanya hanya saja kita bisa melakukan beberapa hal yang agak aneh . Untuk apa "E"? Bisa jadi. Bagaimana dengan "Efektif," "Elegan," atau hanya "Mudah"? EJS adalah bahasa templating sederhana yang memungkinkan Anda menghasilkan markup HTML dengan JavaScript biasa.
Unduh dan Install NodeJS
jika kalian belum mendownload Nodejs kalian bisa mendownloadnya di website reminya disini, kemudian install dan cek versi untuk memastikan sudah terinstall dengan benar
Menyiapkan bahan-bahan
saya pastikan kita sudah instal nodejs, kemudian kita buat folder dimana folder itu digunakan untuk menampung file-file kita, kemudian buka console, cmd, terminal dan kemudia arahkan ke directori
disaat kamu menekan "enter" di "npm init" kalian akan diminta untuk memasukan informasi tentang project yang anda akan buat, kalian bisa menetapkan semua secara defaul dengan menekan enter sampai selesai.
menignstal dependensi dengan NPM
dilangkan ini saya harap ada file "package.json" didalam folder yang kita buat. Untuk menginstal dependensi kita buka cmd/terminal kita tadi tepat didalam folder lalu ketikan :
ketik perintah diatas satu persatu, sehingga didalam folder terdapat folder "node_modules" dan "package-lock.json" seperti gambar dibawah ini
*Mungkin punya kamu berbeda dari ini, tapi itu bukan masalah
sampai dilangkah ini kita sudah berhasil mebuat file "package.json" dan menginstal dependensi yang kita kerjakan. Sekarang kita akan membuat server kita sendiri mengunakan Express. Buat file bernama
untuk menyalakan server kamu, ketikkan "node server.js" di cmd/terminal (pastikan kamu berada difolder proyek yang kamu buat tadi)
jika sudah seperti itu silahkan buak url berikut http://localhost:3000, kalian akan melihat halam berwarna putih (blank page) atau pesan "Cannot GET /". itu berarti semua berjalan semestinya dan selamat !!. kamu sudah membuat server pertama kamu. tapi kenapa halamannya seperti itu ? itu karena kamu belum membuat router dasar. silahkan tambahkan kode berikut ke server.jsmkdir simple-app #membuat folder cd simple-app #kita masuk kefolder npm init
disaat kamu menekan "enter" di "npm init" kalian akan diminta untuk memasukan informasi tentang project yang anda akan buat, kalian bisa menetapkan semua secara defaul dengan menekan enter sampai selesai.
menignstal dependensi dengan NPM
dilangkan ini saya harap ada file "package.json" didalam folder yang kita buat. Untuk menginstal dependensi kita buka cmd/terminal kita tadi tepat didalam folder lalu ketikan :
npm install express --save npm install ejs --save
ketik perintah diatas satu persatu, sehingga didalam folder terdapat folder "node_modules" dan "package-lock.json" seperti gambar dibawah ini
Kalian bisa lihat di bagian kiri terdapat 1 folder dan 2 file. ini memungkinkan kita untuk mengunakan framework di proyek nodejs yang kita buat. dan anda sekarang bisa lihat di file package.json :
{
"name": "simple-app",
"version": "1.0.0",
"description": "tutorial simple-app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "rizqi",
"license": "ISC",
"dependencies": {
"ejs": "^2.6.1",
"express": "^4.16.4"
}
}
*Mungkin punya kamu berbeda dari ini, tapi itu bukan masalah
Membuat server dengan Express
sampai dilangkah ini kita sudah berhasil mebuat file "package.json" dan menginstal dependensi yang kita kerjakan. Sekarang kita akan membuat server kita sendiri mengunakan Express. Buat file bernama
server.js dan kita mulai koding: // kita membutuhkan denpedensi
const express = require('express');
const app = express();
// nyalakan servernua
app.listen(3000, function () {
console.log('Server berjalan diport 3000');
});
untuk menyalakan server kamu, ketikkan "node server.js" di cmd/terminal (pastikan kamu berada difolder proyek yang kamu buat tadi)
// kita membutuhkan denpedensi
const express = require('express');
const app = express();
// membuat router untuk "/".
app.get("/", function (request, resolve) {
resolve.end("Hello World")
});
// nyalakan servernua
app.listen(3000, function () {
console.log('Server berjalan diport 3000');
});
kode diatas akan menciptakan rute dan memberitahu ketika user mengetik "http://localhost:3000/" maka server akan megirim text "Hello World" itu. tekan "CTRL" + "C" untuk menghentikan kerja server kemudian nyalakan lagi, refresh halamannya
Template engine mengunakan EJS
sebelum kita membuat tampilan halaman tadi, kita harus memberi tahu si-Nodejs ini kalau mesin tampilan "view engine" apa yang kita gunakan. tambahkan kode berikut di server.js :
// kita membutuhkan denpedensi
const express = require('express');
const app = express();
// set tampilan mesin untuk nodejs
app.set('view engine', 'ejs');
// membuat router untuk "/".
app.get("/", function (request, resolve) {
resolve.end("Hello World")
});
// nyalakan servernua
app.listen(3000, function () {
console.log('Server berjalan diport 3000');
});
setelah kode diatas sudah ditulis. Silahkan buat folder baru bernama "views" dan didalamnya ada file baru bernama "index.ejs", struktur folder proyek kita kurang lebih seperti ini:
node_modules views |____ index.ejs package-lock.json package.json server.js
ayo kita buat sesuatu untuk ditampilkan halaman web baru kita. kalian bisa buat sendiri atau salin kode dibawah ini. jangan lupa menyimpan file
<!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>Homepage</title>
</head>
<body>
<h1>Halo saya adalah halaman utama</h1>
</body>
</html>
Ubah pesan respon didalam router kamu. ganti menjadi "resolve.render" fungsinya memungkinkan kita untuk merender template ke halaman web. disini iki akan merender yang kita buat "index.ejs".
buka file server.js dan tambahkan kode berikut:
// kita membutuhkan denpedensi
const express = require('express');
const app = express();
// set tampilan mesin untuk nodejs
app.set('view engine', 'ejs');
// membuat router untuk "/" dan render file 'index.ejs' ke browser.
app.get("/", function (request, resolve) {
resolve.render("index")
});
// nyalakan servernua
app.listen(3000, function () {
console.log('Server berjalan diport 3000');
});
Restart server nodejs kamu sama seperti tadi. Refresh browser kamu. TADAA!!. kamu harus tahu perubahan dalam file ".js" diharuskan untuk merestart server sebelum perubahan benar-benar diterapkan.
Styling pada halaman kita
Akan sangat membosankan jika kita belum membuat style pada halamannya, mari kita tambahkan css. Buat folder baru bernama public dan didalam folder publik terdapat folder css. Buat file style.css dan letakan didalam folder css itu.
├── node_modules
├── package.json
├── package-lock.json
├── public
│ └── css
│ └── style.css
├── server.js
└── views
└── index.ejs
setelah itu tambahkan tambahkan kode, untuk mempercantik halaman web kita.
body {
background-color: aliceblue;
}
.wrap {
max-width: 720px;
text-align: center;
margin: 0 auto;
}
untuk menerapkan styling diatas kita butuh:
- Memberitahu node dimana letak css kita
- dan tambahkan di index.ejs
tambah kan kode dibawah ini di server.js :
app.use(express.static('public'))
dan tambahkan link css ke head di index.ejs :<link rel="stylesheet" type="text/css" href="/css/style.css">
jika kita merestart server kita dan merefresh browser kita sekarang akan melihat background berganti warna. Selamat!, kita sekarang sudah membuat server web sederhana dengan Express + EJS dan membuat css-nya.
Membuat beberapa Router
sekarang kita hanya cuma memiliki 1 router yaitu "/" atau http://localhost:3000/ . Mari kita buat beberapa router lagi seperti "/profile" dan "/contact"
// membuat router untuk "/" dan render file 'index.ejs' ke browser.
app.get("/", function (request, resolve) {
resolve.render("index")
});
app.get("/profile", function (request, resolve) {
resolve.render("profile")
});
app.get("/contact", function (request, resolve) {
resolve.render("contact")
});
sebelum ini berhasil, kita perlu membuat "views" atau tampilan dari kedua router itu. buat dua file didalam folder views profile.ejs dan contact.ejs.
jangan takut atau ragu untuk menulis apapun itu, buatlah tampilan halaman yang kamu inginkan, ketika sudah selesai restart server dan lihat http://localhost:3000/contact dan http://localhost:3000/profile. Dan kamu akan melihat konten yang kamu telah buat.
atau kami bisa salin kode saya:
profile.ejs
<!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>Profil</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Halo saya adalah halaman profil</h1>
</body>
</html>
contact.ejs
<!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>Kontak</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Halo saya adalah halaman kontak</h1>
</body>
</html>
Mengoper Data ke Tampilan
Mari kita deklarasikan beberapa variabel sederhana untuk judul halaman kita dan mengirimpan ke tampilan, tambahkan kode berikut ke router
// membuat router untuk "/" dan render file 'index.ejs' ke browser.
// buat variabel untuk halaman web kita
app.get("/", function (request, resolve) {
var title = "Halaman utama";
resolve.render("index",{
title: title
})
});
app.get("/profile", function (request, resolve) {
var title = "Halaman profile";
resolve.render("profile", {
title: title
})
});
app.get("/contact", function (request, resolve) {
var title = "Halaman kontak";
resolve.render("contact", {
title: title
})
});
untuk mengakses nilai variabel dan menampilkannya dalam view kita ganti menjadi "<title><%= title %></title>".
index.ejs:
<!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><%= title %></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Halo saya adalah halaman utama</h1>
<p>Sekarang kamu berada dihalaman</p>
<p><%= title %></p>
</body>
</html>
untuk file profile.ejs dan contact.ejs semuanya sama dengan index.ejs