Halo 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. Sobat bisa membuat web server HTML, server file statik, search engine,aplikasi chat, layanan web ,sosial media dengan akses melalui REST API atau aplikasi hybrid yaitu selain pengguna mempunyai akses melalui REST API dan juga mempunyai akses ke HTML page.
EJS : template engine ini penulisan hanya sama seperti html bisa hanya saja kita bisa melakukan beberapa hal yang cukup unik. Untuk apa "E"? Bisa jadi. Bagaimana dengan "Efektif," "Elegan," atau hanya "Mudah"? EJS merupakan bahasa templating sederhana yangn memungkinkan developer untuk membuat markup HTML dengan JavaScript biasa.
Unduh dan Install NodeJS
jika sobat belum melalukan install Nodejs sobat bisa mendownloadnya di website reminya disini (https://nodejs.org/ ) , kemudian sobat install dan cek versi untuk memastikan sudah nodejs sudah terinstall dengan benar
Baca juga membuat web scraper dengan nodejs
Menyiapkan bahan-bahan
Saya pastikan sobat sudah menginstall nodejs, kemudian kita buat folder dimana folder itu nantinya digunakan untuk menampung file-file kita, kemudian buka console/cmd/terminal dan kemudia arahkan ke directori
mkdir 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
Dilangkah ini saya harap ada file "package.json" didalam folder yang telah kita buat. Untuk menginstal dependensi kita bisa membuka cmd/terminal kita tadi tepat didalam folder lalu ketikan :
npm install express --save
npm install ejs --save
ketik perintah diatas satu persatu, sehingga nantinya didalam folder terdapat folder "node_modules" dan "package-lock.json" seperti gambar dibawah ini
Sobat bisa lihat di bagian kiri pada gambar terdapat 1 folder dan 2 file. ini memungkinkan kita untuk mengunakan framework di proyek nodejs yang kita buat. dan sobat 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
Baca juga membuat program jadwal waktu sholat dengan JSON dan PHP
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)
jika sudah seperti itu silahkan buak url berikut http://localhost:3000 dibrowser, 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.js
// 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 sobat buat folder baru bernama "views" dan didalamnya ada file baru bernama "index.ejs", struktur folder proyek kita kurang lebih seperti berikut:
node_modules
views
|____ index.ejs
package-lock.json
package.json
server.js
ayo kita buat sesuatu untuk ditampilkan halaman web baru kita. Sobat 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 sobat. ganti menjadi "resolve.render" berfungsi 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!!. Sobat harus tahu perubahan dalam file ".js" diwajibkan untuk merestart server sebelum perubahan benar-benar diterapkan.
Baca juga menghitung luas segitiga dengan html dan javascript
Styling pada halaman kita
Akan sangat membosankan jika kita belum membuat style pada halamannya, mari kita tambahkan css. Buat folder baru bernama public dan didalamnya terdapat folder css. Buat file denngan nama 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 coding, 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 tag head di index.ejs :
<link rel="stylesheet" type="text/css" href="/css/style.css">
Lakukan restart pada server dan refresh browser dan sekarang akan melihat background berganti warna. Selamat!, kita sekarang sudah berhasil 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 route lagi seperti "/contact" dan "/profile"
// 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 untuk membuat "views" atau tampilan dari kedua router itu. buat dua file didalam folder views dengan nama contact.ejs dan profile.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 sobat akan melihat konten yang sobat 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>
Baca juga membuat presentasi dengan Remark JS
Mengoper Data ke Tampilan
Mari kita deklarasikan beberapa variabel sederhana untuk judul halaman kita dan mengirimpan ke tampilan, tambahkan kode berikut ke route
// 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
kesimpulan
Jadi ini dia. kita sudah berhasil untuk membuat situs web sederhana dibuat dengan Nodejs, Express dan Ejs. dengan mengunakan variabel dan mengirimkan datanya, kita bisa membuat aplikasi web dengan cukup cepat, responsif, dan sangat modular dalam waktu singkat!. semoga kalian bisa ikuti dan sampai jumpa di tutorial berikutnya
No comments:
Post a Comment
Komentar yang bermutu Insyaallah akan mendapatkan berkah