in

Membuat App Sederhana Mengunakan Nodejs dan Express

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 :

    PengantarUnduh dan instal Node.js (skip jika sudah diinstall)Menyiapkan bahan-bahanMembuat server dengan ExpressTemplate engine mengunakan EJSStyling pada halaman kitaMembuat beberapa routerMengoper Data ke TampilanKesimpulan

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 kitadan 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

Written by admin