Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Membangun Website Lowongan Kerja Sederhana
dengan NodeJS
Diselenggarakan oleh POSS – UPI, 2014.
Daftar isi:
1. Pendahuluan
2. Instalasi dan Perangkat yang Dibutuhkan Lainnya
3. Desain Database
4. Desain website
5. Membangun Web Server Menggunakan NodeJS
6. URL Routing di NodeJS
7. Membangun Fitur Halaman Lowongan Kerja
8. Membangun Fitur Mengelola Lowongan Kerja
9. Membangun Fitur Mengelola Kategori Lowongan Kerja
10. Ringkasan
11. Saran
12. Daftar Pustaka
Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL
Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014
Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia.
(halaman 1 dari 41)

1. Pendahuluan
Pelatihan bulanan POSS UPI kali ini akan membahas bagaimana membangun sebuah website
sederhana menggunakan NodeJS. Tentu bagi Anda yang sudah kenal dengan membangun website
akan kenal dengan PHP, HTML, CSS, dan Javascript. PHP Digunakan sebagai server side scripting,
HTML sebagai alat untuk menampilkan informasi yang akan diterima oleh user, CSS untuk
memberikan style pada halaman HTML yang ditulis, dan Javascript sebagai teknologi yang
digunakan untuk memanipulasi halaman HTML di sisi client atau yang biasa disebut dengan client
side scripting.
Bagi yang belum mengenal NodeJS, tentu akan sedikit awkward saat menggunakan NodeJS.
Javascript yang biasanya dieksekusi di web browser kini dapat digunakan sebagai server side
scripting layaknya PHP. Javascript ini merupakan interface untuk Node yang merupakan kumpulan
pustaka untuk membangun sebuah infrastruktur web dan website web. Dengan demikian NodeJS
merupakan Javascript yang digunakan sebagai server side dan Javascript di browser digunakan
untuk client side. NodeJS ini diciptakan oleh Ryan Dahl, seorang senior software engineer dari
Joyent.
Di percobaan ini kita akan membangun sebuah website lowongan kerja sederhana dengan
menggunakan NodeJS. Di dalam website tersebut terdapat fitur yang akan kita coba di percobaan
ini seperti, mengelola kategori lowongan pekerjaan, mengelola lowongan pekerjaan, dan
menampilkan lowongan kerja di halaman utama.
Percobaan NodeJS ini tidak akan menggunakan web framework yang sudah tersedia seperti
ExpressJS, SailsJS, atau Geddy (web framework untuk NodeJS yang dibuat oleh Ryan Dahl).
Karena percobaan ini akan memaparkan pemahaman tentang NodeJS sederhana.
(halaman 2 dari 41)

2. Instalasi dan Perangkat yang Dibutuhkan Lainnya
Berikut adalah daftar perangkat yang dibutuhkan di percobaan NodeJS ini:
Sistem Operasi
Di percobaan ini akan digunakan distro Linux yang berbasis Debian atau Redhat. Jika Anda
menggunakan distro lain, silahkan cari terlebih dahulu cara instalasi dari perangkat yang akan
dijelaskan dibawah. Jika Anda menggunakan Windows, silahkan ikuti petunjuk yang diperuntukkan
bagi Windows.
Web Browser
Digunakan sebagai akses client terhadap website web yang akan dibangun. Anda dapat
menggunakan Firefox, Chrome, Opera, atau browser lainnya
Code Editor / Text Editor
Digunakan untuk menulis kode program NodeJS. Anda dapat menggunakan Geany, Gedit, Nano,
VIM, Sublime Text, atau apapun text editor favorit Anda
NodeJS
Tentu saja karena kita akan membangun website web menggunakan NodeJS, Anda harus
mengunduh terlebih dahulu NodeJS dari web resminya yaitu: http://nodejs.org/download kemudian
silahkan pilih installer yang sesuai dengan arsitektur prosesor Anda.
Kemudian jika sudah berhasil mengunduh NodeJS, silahkan ekstrak installer NodeJS tersebut
kemudian masuk ke dalam direktori hasil ekstraknya. Untuk menginstallnya, Anda harus melakukan
konfigurasi installer dengan menggunakan perintah: ./configure
Sesaat setelah konfigurasi beres, lanjutkan dengan mengkompilasi installer dengan menggunakan
perintah: make
Lalu tinggal kita install NodeJS dengan menggunakan perintah: make install
Jika instalasi sudah rampung, silahkan panggil NodeJS di terminal dengan perintah: nodejs
NPM: Mysql
Konektor MySQL untuk NodeJS ini dibuat oleh Felixge. Install MySQL untuk NodeJS dengan
menggunakan perintah: npm install mysql
NPM: Swig
(halaman 3 dari 41)

Merupakan templating engine yang akan digunakan untuk menampilkan data yang diambil dari
database ke file template yang akan ditampilkan. Dengan menggunakan templating engine tentu
saja akan membuat file HTML bersih dari kode server side scripting dalam hal ini adalah NodeJS.
Install Swig dengan menggunakan perintah: npm install swig
MySQL
RDBMS yang akan digunakan untuk menampung data lowongan pekerjaan. MySQL yang akan
diinstall ada dua macam. Pertama adalah mysql-server yang berfungsi untuk menjalankan service
mysql. Install mysql-server dengan menggunakan perintah: apt-get install mysql-server untuk
distro berbasis Debian atau yum install mysql-server untuk distro berbasis RedHat.
Tentu setelah mempunyai mysql-server kita membutuhkan mysql-client. Install mysql-client
dengan perintah: apt-get install mysql-client untuk distro berbasis Debian atau yum install
mysql-client untuk distro berbasis RedHat.
Apache2
Apache2 ini merupakan web server untuk PHP. Kita menggunakan Apache untuk menggunakan
PHPMyAdmin. Untuk menginstallnya, lakukan dengan perintah berikut: apt-get install apache2
untuk distro turunan Debian atau yum install apache2 untuk turunan RedHat
PHP5
PHP5 adalah engine PHP yang diperlukan oleh PHPMyAdmin. Karena PHPMyAdmin dibangun
menggunakan PHP. Untuk menginstallnya, lakukan dengan perintah berikut: apt-get install php5
untuk distro berbasis Debian atau yum install php5 untuk distro berbasis RedHat
PHPMyAdmin
PHPMyAdmin adalah sebuah website yang digunakan untuk mengelola database di MySQL. Anda
dapat membuat database, membuat tabel, serta fitur pengelolaan lainnya. PHPMyAdmin ini
dikhususkan untuk MySQL. Untuk menginstallnya, gunakan perintah berikut: apt-get install
phpmyadmin untuk distro berbasis Debian atau yum install phpmyadmin untuk distro berbasis
RedHat
Ada cara lain yang lebih sederhana untuk MySQL, Apache2, PHP5, dan PHPMyAdmin, Anda dapat
mengunduh XAMPP for Linux karena didalamnya terdapat keempat perangkat tersebut dalam satu
paket.
(halaman 4 dari 41)

3. Desain Database
Setelah melihat dan memahami skema database diatas, sekarang dengan menggunakan
PHPMyAdmin, buatlah terlebih dahulu database dengan nama jobspool.
Kemudian salin SQL dibawah ini menjadi sebuah file dengan nama jobspool.sql. Kemudian import
file SQL tersebut di PHPMyAdmin untuk membentuk database yang akan dibutuhkan selama
percobaan berlangsung.
--
-- Database: `jobspool`
--
-- --------------------------------------------------------
--
-- Table structure for table `jobs`
--
CREATE TABLE IF NOT EXISTS `jobs` (
ìd_jobs` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`category_id` int(11) NOT NULL,
`company` varchar(50) NOT NULL,
`min_wages` int(11) NOT NULL,
`max_wages` int(11) NOT NULL,
`description` text,
PRIMARY KEY (ìd_jobs`),
KEY `category_id` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
--
-- Dumping data for table `jobs`
--
INSERT INTO `jobs` (ìd_jobs`, `name`, `category_id`, `company`, `min_wages`, `max_wages`,
`description`) VALUES
(1, 'PHP Senior Programmer', 1, 'Inzpire', 6000000, 7000000, 'PHP Senior Programmer'),
(2, 'Java Junior Programmer', 1, 'Walden Global Services', 3000000, 4000000, 'Developing a web service'),
(3, 'System Analyst', 1, 'Inzpire', 8000000, 9000000, 'Analyzing the information system and business
process'),
(7, 'Data Cuber', 2, 'EBDesk', 8000000, 9000000, 'Data Cuber for Data Warehouse');
-- --------------------------------------------------------
--
-- Table structure for table `jobs_category`
--
(halaman 5 dari 41)

CREATE TABLE IF NOT EXISTS `jobs_category` (
ìd_category` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
PRIMARY KEY (ìd_category`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
--
-- Dumping data for table `jobs_category`
--
INSERT INTO `jobs_category` (ìd_category`, `name`) VALUES
(1, 'Informatic Engineering'),
(2, 'Data Mining'),
(3, 'Accountancy'),
(4, 'Statistic'),
(5, 'Pharmacy'),
(6, 'Health'),
(8, 'Aeronautic'),
(9, 'Food Technology'),
(12, 'Agriculture');
--
-- Constraints for dumped tables
--
--
-- Constraints for table `jobs`
--
ALTER TABLE `jobs`
ADD CONSTRAINT `jobs_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `jobs_category`
(ìd_category`) ON DELETE CASCADE;
Database yang diperlukan di percobaan ini bernama jobspool. Di dalamnya terdapat dua tabel yaitu
jobs_category dan jobs. Tabel jobs_category diperlukan untuk menyimpan data kategori
lowongan pekerjaan yang nantinya diperlukan untuk relasi one to many kepada tabel jobs. Terdiri
dari dua kolom yaitu id_category dan name.
Sedangkan tabel jobs berisi kolom id_jobs, name yang akan menyimpan judul lowongan kerja,
category yang akan menyimpan id yang berelasi ke tabel jobs_category, company yang akan
menyimpan nama perusahaan yang menyediakan lowongan kerja, min_wages yang akan
menyimpan gaji minimum, max_wages yang akan menyimpan gaji maksimum, dan description
yang akan menyimpan informasi lebih lengkap dari suatu lowongan kerja.
(halaman 6 dari 41)

4. Konsep website
Sebelum melanjutkan ke tahap coding, kita akan mencoba melihat dulu bagaimana konsep website
yang akan dibangun selama percobaan. Berikut adalah peta konsep dari website lowongan kerja ini:
Website yang akan kita bangun di percobaan ini tergambar di diagram diatas. Terdiri dari dua
pengguna yaitu pelamar kerja dan admin. Dan tentunya masing – masing pengguna menguasai
fiturnya masing – masing.
Agar lebih terbayang seperti apa website lowongan kerja yang akan kita bangun di percobaan ini.
Berikut adalah daftar rancangan antar muka dari website lowongan kerja tersebut:
Tampilan disamping
merupakan halaman utama
yang dapat diakses oleh
pelamar kerja.
(halaman 7 dari 41)

Tampilan disamping adalah
halaman about dari website
lowongan kerja.
halaman untuk mengelola
lowongan kerja yang diakses
oleh admin.
halaman untuk menambah
lowongan kerja yang diakses
oleh admin.
(halaman 8 dari 41)

Tampilan di samping adalah
halaman untuk menyunting
sebuah lowongan kerja yang
diakses oleh admin.
halaman untuk mengelola
kategori lowongan kerja yang
diakses oleh admin.
Tampilan di samping adalah
halaman untuk menambah
kategori lowongan kerja baru
yang diakses oleh admin.
(halaman 9 dari 41)

halaman untuk menyunting kategori
lowongan kerja yang diakses oleh
admin.
Dengan melihat rancangan aplikasi di bab ini, Anda akan lebih mudah untuk memahami kode
program yang akan dibahas di bab selanjutnya.
(halaman 10 dari 41)

5. Membangun Web Server Menggunakan NodeJS
Dengan menggunakan NodeJS, Anda dapat membuat sebuah web server dengan mengandalkan
modul – modul yang sudah tersedia secara default di NodeJS. Kali ini kita akan membuat web
server yang diperuntukkan untuk website NodeJS yang akan kita bangun.
Sebenarnya dalam pembuatan website NodeJS, setiap kode sumber dapat dipisahkan kedalam
beberapa file Javascript. Hanya saja dalam percobaan ini kita tidak akan memisahkan dulu kode
sumber yang akan ditulis. Kita gabungkan dulu dalam satu file, baik itu logika program ataupun
kode web server dari website lowongan kerja ini.
Sebelumnya buat terlebih dahulu sebuah file Javascript yang bernama app.js. Kemudian kita akan
membuat web server untuk website lowongan kerja di dalam file tersebut. Berikut adalah kode
untuk web server dengan NodeJS untuk website lowongan kerja di percobaan ini:
// memanggil module NodeJS yang diperlukan oleh website JobsPool
var http = require('http');
var mysql = require('mysql')
var swig = require('swig');
var url = require('url');
var qs = require('querystring');
var connection_config = {
host:'localhost',
user:'root',
password:"root",
database:'jobspool',
multipleStatements: true,
};
// Ganti absolute path ini dengan absolute path dimana project Anda berada
var abs_path = '/home/ridwanbejo/Projects/NodeJS Mania/labs/node-jobspool/';
// Function untuk redirect ke halaman tertentu
function redirect(res, pathname){
res.statusCode = 302;
res.setHeader('Location', pathname);
}
// URL Routing dari website JobsPool
function route(connection, urlPathname, res, data){
console.log(data);
}
// Objek server dimana proses koneksi MySQL dimulai dan mendeteksi request yang bertipe GET dan POST
var server = http.createServer(function(req, res){
var urlPath = url.parse(req.url, true);
var connection = mysql.createConnection(connection_config);

• url, modul yang digunakan untuk manipulasi URL seperti parsing dan mengambil setiap
detail dari URL yang dikirimkan user ke server. Modul ini tersedia di NodeJS
• querystring, modul yang digunakan untuk mengelola parameter yang dikirimkan secara
POST ataupun GET di NodeJS. Modul ini tersedia di NodeJS
Setelah memanggil beberapa modul, selanjutnya kita membuat sebuah dictionary koneksi NodeJS
ke MySQL yang bernama connection_config. Di dalamnya terdapat parameter localhost, database,
user, password, dan multipleStatements. Untuk host, database, user, dan password, silahkan atur
sesuai dengan konfigurasi MySQL yang Anda miliki. Jika diinstal di laptop Anda sendiri, gunakan
localhost atau 127.0.0.1 untuk host NodeJS. Di dalam connection_config terdapat parameter
multipleStatements. Parameter tersebut digunakan untuk mengeksekusi multiple query saat
melakukan query di NodeJS.
Kemudian kita membuat sebuah variabel bernama abs_path. Variabel tersebut digunakan untuk
mencatat absolute path dari proyek NodeJS di percobaan ini. Variabel ini akan digunakan ketika
akan me-render template untuk memberikan response kepada user.
Dibawah pembuatan variabel abs_path, terdapat dua function yang akan sering digunakan di dalam
website lowongan kerja ini. Berikut penjelasannya:
• redirect(res, pathname), function yang digunakan untuk mengarahkan response ke suatu
halaman. Parameter res digunakan untuk memanipulasi response. Parameter pathname
berisi URL yang dituju oleh user
• route(connection, urlPathname, res, data), function utama yang akan berisi logika website
lowongan kerja. Parameter connection adalah objek yang akan digunakan untuk melakukan
interaksi ke database di MySQL. Parameter urlPathname adalah string yang berisi URL
yang diminta oleh user. Parameter res adalah objek yang akan menentukan bagaimana
response yang akan dikirimkan kepada user. Parameter data adalah data yang dikirimkan
hasil dari request GET atau request POST. Di bab selanjutnya kita akan lebih banyak
menulis kode di dalam function route() ini
Bagian yang paling penting disini adalah ketika membuat objek server. Untuk membuat sebuah
objek server kita menggunakan objek http yang telah dibuat diawal dan menggunakan method
createServer(). Dalam pembuatan objek server ini kita melewatkan sebuah anonymous function
yang berisi bagaimana web server yang kita bangun akan menangani website lowongan kerja.
Hal yang pertama kali dilakukan ketika server menerima response adalah melakukan parsing URL.
Kemudian secara bersamaan membuat sebuah objek connection yang akan digunakan untuk
koneksi NodeJS ke database di MySQL. Disana ada sebuah variabel bernama urlPathname yang
berisi pathname hasil dari parsing URL.
Web server yang dibangun ini mampu menangani dua tipe request yaitu POST dan GET. Untuk
request dengan method GET tidak ada penanganan khusus, function route() langsung memproses
response yang akan dikirimkan. Untuk request dengan method POST terdapat proses untuk
mengambil parameter dari request POST. Disana dibuat sebuah variabel dengan nama postData
yang akan menampung seluruh data. Dengan menggunakan method addListener() dan
mengirimkan parameter data dimulailah proses pengumpulan data dari request POST. Proses
tersebut ditangani oleh sebuah callback function. Kemudian kita memanggil lagi method

addListener() namun dengan parameter end yang artinya seluruh proses dari addListener()
sebelumnya dapat digunakan. Sebuah callback function dilewatkan kedalam addListener() untuk
memanggil function route().
Dan terakhir kita akan menyalakan server tersebut dengan method listen() yang dimiliki objek
server di port 8084 jika file app.js dijalankan. Untuk menjalankan file app.js silahkan gunakan
perintah berikut ini: node app.js
Kita belum dapat meminta URL dari server. Namun berikut adalah tampilan di console ketika
server dinyalakan:
root@ridwanbejo-Aspire-4738G:/home/ridwanbejo/Projects/NodeJS Mania/labs/node-jobspool#
node app.js
Server is running on port 8084
GET Method fired...
{}
Informasi “Server is running on port 8084” akan muncul begitu server dinyalakan. Sedangkan
informasi “GET Method fired...” akan muncul ketika kita mengetikkan http://localhost:8084 di
web browser.

6. URL Routing di NodeJS
Di bab ini kita akan mempelajari bagaimana melakukan URL routing di NodeJS. URL Routing ini
akan diproses di function route(). Sebagai percobaan kita akan menampilkan halaman about dari
website lowongan kerja. Sebelumnya buat terlebih dahulu sebuah folder yang bernama template.
Simpan folder tersebut di dalam folder proyek lowongan kerja ini. Kemudian kita masuk ke dalam
folder template tersebut dan buatlah sebuah file HTML yang bernama about.html. Dan
about.html akan berisi kode seperti berikut:
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<hr/>
<a href="/">Home</a> | <a href="/about">About Us</a>
<hr/>
<p style="margin-bottom:30px;">JobsPool is a web application for jobs career that used for in NodeJS
Training for POSS UPI Internal Member. This application is purposed to introduce NodeJS without the
framework usage to know the basic and essential of create web application using NodeJS.</p>
<p style="margin-bottom:30px;">
Created by POSS - UPI Research Division. Copyright: POSS - UPI, 2014. <br/>
For further information please visit us at <a href="http://twitter.com/possupi">Twitter</a>,
<a href="http://facebook.com/poss.upi">Facebook</a>, or Our <a target="_blank" href="http://poss-
upi.org">Websites</a>
</p>
</body>
</html>
OK, file about.html tersebut belum dapat ditampilkan kepada user karena kita belum memiliki
handle untuk menampilkan halaman about. Masih ingat dengan function route() kan? Sekarang kita
akan menyunting function tersebut menjadi seperti pada potongan kode berikut ini (kode program
dibawah masih berada di file app.js. Tanda garis putus – putus menandakan bahwa sebelum atau
sesudahnya terdapat kode lain):
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// URL Routing dari aplikasi JobsPool
console.log(data);
if (urlPathname == '/about'){
template = swig.compileFile(abs_path+'template/about.html');
output = template();

res.writeHeader(200, {"Content-Type": "text/html"});
res.write(output);
res.end();
}
else{
res.write('Page not found');
res.end();
}
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
URL routing sederhana dapat dilakukan dengan menggunakan if else biasa. Hanya saja website
aplikasi lowongan kerja di percobaan ini belum mempunyai kemampuan seperti yang dapat
dilakukan dengan menggunakan framework semacam ExpressJS. Jadi masih sangat sederhana.
Di kondisi yang pertama route() akan memeriksa apakah urlPathname yang diterima server
adalah “/about” jika sesuai maka halaman about akan ditampilkan kepada user. Jika tidak sesuai
maka kondisi akan masuk ke kondisi else dan server akan mengirim response “Page not found”.
Ketika server menerima URL “/about” maka di dalam function route() akan dilakukan pembacaan
template about.html yang telah kita tulis sebelumnya dengan menggunakan Swig ke dalam objek
template. Kemudian konten dibaca dengan dengan memanggil constructor yang terdapat di objek
template dan menyimpannya di variabel output. Hasil pembacaan tersebut akan berupa plain text.
Sebelum ditampilkan, Anda harus mengatur response header terlebih dahulu dengan mengatur
status menjadi 200 dan mengatur Content-Type menjadi “text/html”. Setelah itu tampilkan isi
variabel output dengan menggunakan method write() yang terdapat di objek res. Dan hal yang
perlu diingat adalah di setiap akhir dari menanggapi response, method end() yang terdapat di objek
res harus dipanggil untuk mengakhiri proses response.
Sekarang silahkan jalankan kembali file app.js dengan perintah: node app.js. Setelah itu akses
URL berikut di web browser: http://localhost:8084/about
Maka akan tampil halaman seperti pada gambar berikut:

Sedangkan yang terjadi di server adalah:
root@ridwanbejo-Aspire-4738G:/home/ridwanbejo/Projects/NodeJS Mania/labs/node-jobspool# node app.js
GET Method fired...
{}
Jika mencoba mengakses URL yang tidak terdefinisi di function route() akan muncul tampilan
seperti berikut:

Berikut adalah tampilan yang terjadi di server:
root@ridwanbejo-Aspire-4738G:/home/ridwanbejo/Projects/NodeJS Mania/labs/node-jobspool# node app.js
GET Method fired...
{}
GET Method fired...
{}

7. Membangun Fitur Halaman Lowongan Kerja
Sebagaimana kita sudah merancangnya di bab 4, kita akan membuat halaman lowongan kerja ini
agar dapat diakses oleh pelamar kerja. Informasi yang akan ditampilkan antara lain posisi
pekerjaan, siapa yang menyediakan pekerjaan, rentang gaji yang ditawarkan, dan deskripsi dari
pekerjaan yang diajukan.
Sekarang kita akan menulis template yang bernama index.html. Template tersebut akan berisi
informasi seperti yang sudah dipaparkan sebelumnya. Buatlah template tersebut di dalam folder
template. Berikut adalah kode template index.html:
<html>
<head>
<title>Jobs Pool</title>
</head>
<body>
<h1>Welcome to JobsPool</h1>
<hr/>
<a href="/">Home</a> | <a href="/about">About Us</a>
<hr/>
<h3>Please seek your jobs here:</h3>
<div class="list-jobs">
{% for job in jobs %}
<div class="jobs-entry">
<b>{{ job.name }} </b>
From: {{ job.company }},
Category: {{ job.category }}<br/>
Wages: <b>{{job.min_wages}} - {{job.max_wages}}</b><br/>
Description: <br/>
{{job.description}}
</div>
{% endfor %}
</div>
</body>
</html>
Kita akan bahas bagian kode template Swig yang disisipkan diantara tag HTML diatas. Berikut
penjelasannya:
• {% for job in jobs %} adalah awal perulangan yang akan digunakan untuk menampilkan
daftar lowongan kerja. Variabel jobs adalah variabel yang berisi seluruh lowongan kerja
yang didapatkan dari hasil query. Sedangkan variabel job adalah variabel yang berisi
lowongan kerja di setiap iterasinya
• {{ job.name }}, {{ job.company }}, dan yang serupa lainnya adalah cara mengakses atribut

setiap data. {{ job.name }} akan mencetak posisi lowongan kerja
• {% endfor %} adalah akhir dari perulangan
Setelah selesai menulis kode template saatnya kita menulis url routing di function route(). Berikut
kode tambahan di app.js untuk menangani halaman lowongan kerja untuk pelamar kerja:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
console.log(data);
if (urlPathname == '/'){
connection.connect();
sql_string = "SELECT jobs.name, jobs_category.name, jobs.company, jobs.min_wages,
jobs.max_wages, jobs.description "+
"FROM jobs, jobs_category "+
"WHERE jobs.category_id = jobs_category.id_category "+
"LIMIT 0 , 30";
connection.query(sql_string, function(err, rows, fields){
template = swig.compileFile(abs_path+'template/index.html');
output = template({
jobs:rows
});
res.write(output);
res.end();
});
connection.end();
}
else if (urlPathname == '/about'){
res.write(output);
res.end();
}
else{
res.end();
}
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Kita akan membahas bagian routing untuk “/” saja. Apa saja yang terjadi saat user meminta
response terhadap URL tersebut ? Berikut adalah rentetan hal yang terjadi:
• connection.connect(), digunakan untuk memulai koneksi ke MySQL
• sql_string, adalah variabel yang berisi SQL yang akan menampilkan semua lowongan kerja
bagi pelamar kerja
• connection.query(), function yang digunakan untuk mengeksekusi query yang dibutuhkan.
Parameter pertama adalah SQL yang kita tentukan, parameter kedua adalah sebuah callback
function yang akan menangkap hasil query dan menggunakan hasil query tersebut untuk
ditampilkan kepada user dengan bantuan Swig. Callback function yang dilewatkan memiliki
tiga parameter yaitu err untuk menangkap error yang terjadi saat query, rows hasil query
berupa array object, dan fields yang akan menyimpan informasi ada kolom apa sajakah
yang terdapat di tabel yang ada di query.
• Masih di connection.query(), proses dilanjutkan dengan membaca file template index.html.
Hasil pembacaan template ditampung ke variabel output dengan tambahan melewatkan
hasil query yang ditangkap dengan parameter dari callback function yaitu rows. Variabel
rows tersebut akan dilewatkan ke template index.html dengan nama jobs
• Masih di connection.query(), proses dilanjutkan dengan mengatur response header menjadi
HTML, mencetak variabel output, dan mengakhiri proses response dengan method end()
• connection.end(), digunakan untuk menutup koneksi ke MySQL
Sekarang saatnya bergegas menyalakan kembali app.js dan akses URL: http://localhost:8084
kemudian akan tampil seperti berikut:
Anda pun sudah dapat mengklik link About Us dan akan diarahkan ke link tersebut. Begitupun
sebaliknya, jika Anda berada di halaman About Us, Anda dapat kembali lagi ke halaman Home. Di
bab berikutnya kita akan mempelajari bagaimana menambah lowongan kerja baru.

8. Membangun Fitur Mengelola Lowongan Kerja
Jika pada bab sebelumnya kita sudah menampilkan daftar lowongan kerja saja. Di bab ini kita akan
mencoba merealisasikan halaman pengelola lowongan kerja yang diasumsikan dikelola oleh admin.
Pada contoh sebelumnya kita menampilkan lowongan kerja yang sudah disediakan sebelumnya.
Pertama kali kita akan membuat terlebih dahulu halaman yang menampilkan daftar lowongan kerja.
Buatlah sebuah template baru yang bernama list_jobs.html. Kemudian simpan file tersebut
disimpan di folder template. Berikut adalah kode sumber dari isi list_jobs.html:
<html>
<head>
<title>List Jobs</title>
</head>
<body>
<h1>List Jobs</h1>
<a href="/jobs/add">Add Jobs</a> |
<a href="/category">See Jobs Category</a>
<br/><br/>
{% for job in jobs %}
{{ job.name }} ({{job.category_name}} / {{job.company}}) | <a href="/jobs/edit?
id_jobs={{job.id_jobs}}">Edit</a> | <a href="/jobs/delete?id_jobs={{job.id_jobs}}">Delete</a> <br/>
{% endfor %}
</body>
</html>
Sebelum beranjak ke tahap selanjutnya, mari kita perhatikan bagian penting dari kode program
diatas:
• {% for job in jobs %} adalah tag awal perulangan dari template untuk mulai menampilkan
daftar lowongan kerja. Perlu diingan jobs berasal dari variabel yang dilewatkan saat
pembacaan template list_jobs.html di app.js
• Kemudian kita menampilkan setiap lowongan kerja yang di ujungnya dibubuhi menu edit
dan delete. Di dalam menu edit dan delete tersebut disisipkan URL untuk masing – masing
proses yang dibubuhkan id dari setiap lowongan kerja. Proses edit akan diarahkan ke URL
“/jobs/edit?id_jobs=(id dari lowongan kerja)” dan proses delete akan diarahkan ke URL
“/jobs/delete?id_jobs=(id dari lowongan kerja)”
• {% endfor %} adalah tag penutup untuk proses menampilkan daftar lowongan kerja
Setelah selesai membuat template list_jobs.html, sekarang kita akan menyunting kembali file
app.js dengan menambahka URL routing untuk mengelola lowongan kerja. Karena saat ini kita
sedang mencoba untuk membuat halaman daftar lowongan kerja, maka URL routing yang akan kita
buat terlebih dahulu adalah “/jobs”. Berikut kode program untuk menangani request “/jobs” :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/jobs'){
sql_string = "SELECT jobs.id_jobs, jobs.name, jobs_category.name as 'category_name', jobs.company
"+
"FROM jobs, jobs_category "+
"WHERE jobs.category_id = jobs_category.id_category "+
"LIMIT 0 , 30";
connection.query(sql_string, function(err, rows, fields){
template = swig.compileFile(abs_path+'template/list_jobs.html');
output = template({
jobs:rows
});
res.write(output);
res.end();
});
connection.end();
}
res.write(output);
res.end();
}
else{
res.end();
}
}
Berikut adalah penjelasan untuk kode program yang menangani URL “/jobs”:
• connection.connect(), digunakan untuk memulai koneksi ke MySQL
• sql_string, adalah variabel yang berisi SQL yang akan menampilkan semua lowongan kerja
bagi admin

• connection.query(), function yang digunakan untuk mengeksekusi query yang dibutuhkan.
Parameter pertama adalah SQL yang kita tentukan, parameter kedua adalah sebuah callback
function yang akan menangkap hasil query dan menggunakan hasil query tersebut untuk
ditampilkan kepada user dengan bantuan Swig. Callback function yang dilewatkan memiliki
tiga parameter yaitu err untuk menangkap error yang terjadi saat query, rows hasil query
berupa array object, dan fields yang akan menyimpan informasi ada kolom apa sajakah
yang terdapat di tabel yang ada di query.
• Masih di connection.query(), proses dilanjutkan dengan membaca file template
list_jobs.html. Hasil pembacaan template ditampung ke variabel output dengan tambahan
melewatkan hasil query yang ditangkap dengan parameter dari callback function yaitu rows.
Variabel rows tersebut akan dilewatkan ke template list_jobs.html dengan nama jobs
• Masih di connection.query(), proses dilanjutkan dengan mengatur response header menjadi
HTML, mencetak variabel output, dan mengakhiri proses response dengan method end()
• connection.end(), digunakan untuk menutup koneksi ke MySQL
Sekarang silahkan jalankan kembali file app.js dengan perintah: node app.js. Setelah itu akses
URL berikut di web browser: http://localhost:8084/jobs
Maka akan tampil halaman seperti pada gambar berikut:
Sekarang kita akan membuat agar menu Add Jobs berfungsi. Pada pekerjaan sebelumnya, apabila
kita mengklik menu tersebut akan tampil halaman “Page not found”. Sebelum menangani URL
yang akan menampilkan halaman tambah lowongan kerja, terlebih dahulu kita membuat template
yang akan berisi form untuk menambah lowongan kerja. Buatlah file baru yang bernama
add_jobs.html kemudian simpan di folder template. Berikut adalah kode template di
add_jobs.html:
<html>
<head>

<title>Add Jobs</title>
</head>
<body>
<h1>Add Jobs</h1>
<form action="/jobs/add/process" method="POST">
Jobs: <input type="text" name="jobs_name" value="" required /><br/>
Company: <input type="text" name="jobs_company" value="" required /><br/>
Min Wages: <input type="text" name="jobs_min_wages" value="" required /><br/>
Max Wages: <input type="text" name="jobs_max_wages" value="" required /><br/>
Category:
<select name="jobs_category">
{% for category in categories %}
<option value="{{ category.id_category }}">{{ category.name }}</option>
{% endfor %}
</select><br/>
Description: <br/>
<textarea cols="80" rows="15" name="jobs_description"></textarea><br/>
<br />
<a href="/jobs">Cancel</a> | <input type="submit" value="Add" />
</form>
</body>
</html>
Yang istimewa dari template add_jobs.html adalah terdapat pengulangan yang akan menampilkan
daftar kategori yang ada di tabel jobs_category ke dalam combobox yang terdapat di form tambah
lowongan kerja. Kemudian action dari form diatas diarahkan ke “/jobs/add/process”. Kemudian ada
atribut required yang disematkan di beberapa field agar admin tidak mengosongkan field tersebut.
Atribut required merupakan fitur validasi yang ada di HTML5.
Seperti biasa, kita lanjutkan kembali menyunting function route() di file app.js dan tambahkan
URL routing untuk menampilkan halaman menambah lowongan kerja dan proses menambah
lowongan kerja. Berikut adalah kode program tambahan untuk function route():
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/jobs/add'){
connection.query('select * from jobs_category', function(err, rows, fields){
template = swig.compileFile(abs_path+'template/add_jobs.html');
output = template({
categories:rows

});
res.write(output);
res.end();
});
connection.end();
}
else if (urlPathname == '/jobs/add/process'){
connection.query("insert into jobs values (null, '"+data.jobs_name+"', "+data.jobs_category+" ,
'"+data.jobs_company+"', "+data.jobs_min_wages+", "+data.jobs_max_wages+",
'"+data.jobs_description+"')", function(err){
console.log(data);
console.log(err);
console.log('succcess add jobs..');
});
connection.end();
redirect(res, '/jobs');
res.end();
}
res.write(output);
res.end();
}
else{
res.end();
}
}
Pada penanganan URL “/jobs/add”, disana terdapat proses untuk melakukan query yang akan
mengambil semua kategori dan akan ditampilkan di form tambah lowongan kerja. Hasil query
tersebut dilewatkan melalui variabel categories. Tentunya sebelum melakukan proses query untuk
mengambil semua kategori dan menampilkan halaman tambah lowongan kerja, proses penanganan
diawali dengan membuka koneksi ke MySQL dan diakhiri dengan menutup koneksi ke MySQL.
Pada penanganan URL “/jobs/add”. Penanganan URL “/jobs/add/process” diawali dengan membuka
koneksi ke MySQL, kemudian melakukan penambahan data dengan query insert, menutup koneksi
ke MySQL, melakukan redirect ke URL “/jobs” dan mengakhiri response.
Sebelum mencoba melakukan penambahan lowongan kerja, nyalakan ulang file app.js kemudian
coba akses URL: http://localhost:8084/jobs

Dan hasilnya akan tampil seperti pada gambar berikut ini:
Sekarang mari kita coba buat lowongan kerja baru dengan form tersebut (silahkan isi dengan
lowongan kerja yang ingin Anda buat):

Maka jika jika lowongan kerja baru berhasil diciptakan, daftar lowongan kerja akan bertambah di
halaman mengelola lowongan kerja:
Untuk melakukan penyuntingan lowongan kerja, kita memerlukan form yang hampir serupa dengan
form untuk menambah lowongan kerja. Jika pada form tambah lowongan kerja, kita melihat form
yang belum terisi. Maka di form menyunting lowongan kerja akan tampil form yang sudah berisi
data lowongan kerja yang akan kita sunting. Terlebih dahulu kita buat sebuah file baru yang
bernama edit_jobs.html dan simpan file tersebut di folder template. Berikut adalah kode template
untuk halaman menyunting lowongan kerja:
<html>
<head>
<title>Edit Jobs</title>
</head>
<body>
<h1>Edit Jobs</h1>
<form action="/jobs/edit/process" method="POST">
Jobs: <input type="text" name="jobs_name" value="{{ job[0].name }}" required /><br/>
Company: <input type="text" name="jobs_company" value="{{ job[0].company }}" required
/><br/>
Min Wages: <input type="text" name="jobs_min_wages" value="{{ job[0].min_wages }}"
required /><br/>
Max Wages: <input type="text" name="jobs_max_wages" value="{{ job[0].max_wages }}" required
/><br/>
Category:
<select name="jobs_category">
{% if job[0].category_id == category.id_category %}
<option selected value="{{ category.id_category }}">{{ category.name }}</option>

{% else %}
<option value="{{ category.id_category }}">{{ category.name }}</option>
{% endif %}
{% endfor %}
</select><br/>
Description: <br/>
<textarea cols="80" rows="15" name="jobs_description">{{ job[0].description }}</textarea><br/>
<br />
<input type="hidden" name="id_jobs" value="{{job[0].id_jobs}}" />
<a href="/jobs">Cancel</a> | <input type="submit" value="Edit" />
</form>
</body>
</html>
Form penyuntingan lowongan kerja diatas akan mengarahkan proses penyuntingan kerja ke URL
“/jobs/edit/process”. Tentu saja template diatas belum dapat digunakan, template diatas akan
digunakan oleh URL routing “/jobs/edit”. Kita sunting terlebih dahulu function route() di file
app.js. Berikut adalah kode program terbaru untuk menangani URL “/jobs/edit” dan
“/jobs/edit/process”:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/jobs/edit'){
sql_string1 = "SELECT * "+
"FROM jobs "+
"WHERE jobs.id_jobs = "+data.id_jobs;
sql_string = "select * from jobs_category";
connection.query(sql_string1+"; "+sql_string, function(err, rows, fields){
template = swig.compileFile(abs_path+'template/edit_jobs.html');
output = template({
job: rows[0],
categories: rows[1]
});
res.write(output);
res.end();
});
connection.end();
}
else if (urlPathname == '/jobs/edit/process'){

sql_string = "update jobs set name='"+data.jobs_name+
"', category_id="+data.jobs_category+
" , company='"+data.jobs_company+
"', min_wages="+data.jobs_min_wages+
", max_wages="+data.jobs_max_wages+
", description='"+data.jobs_description+"' "+
" where id_jobs="+data.id_jobs;
connection.query(sql_string, function(err){
console.log(data);
console.log(err);
console.log('succcess add jobs..');
});
connection.end();
res.end();
}
res.write(output);
res.end();
}
else{
res.end();
}
}
Agak sedikit berbeda dengan penanganan URL “/jobs/add”. Penanganan URL “/jobs/edit” akan
melakukan proses tambahan, yaitu menangkap querystring dari variabel id_jobs. Seperti yang kita
tahu, saat mengklik salah satu lowongan kerja untuk disunting, URL penyuntingan terhadap suatu
lowongan kerja akan berbentuk seperti berikut: http://localhost:8084/jobs/edit?
id_jobs=(id_lowongan_kerja). Dengan demikian id lowongan kerja yang diterima dari id_jobs
melalui method GET, akan digunakan untuk melakukan pengambilan lowongan kerja yang
diinginkan melalui query select. Kemudian di penanganan URL “/jobs/edit” ini terdapat multiple
query saat menggunakan connection.query(). Query pertama adalah mengambil suatu lowongan
kerja, query kedua adalah mengambil semua data kategori. Kemudian hasil dari kedua query akan
dilewatkan ke template edit_jobs.html.
Pada penanganan URL “/jobs/edit/process”, kita melakukan penyimpanan data lowongan kerja yang
telah diubah dan melakukan redirect ke halaman mengelola lowongan kerja. Mari kita coba pilih
salah satu lowongan kerja untuk diubah:

Pada contoh diatas, kita mencoba untuk menyunting lowongan kerja yang ditambahkan ketika
menguji fitur tambah lowongan kerja. Jika Anda menekan tombol Edit maka perubahan data akan
terlihat seperti pada gambar berikut:

Dan yang sangat ditunggu – tunggu adalah fitur untuk menghapus lowongan kerja. Tidak seperti
menambah atau menyunting lowongan kerja. Fitur menghapus lowongan kerja tidak memerlukan
template. Proses hapus akan dilakukan dengan memilih salah satu lowongan kerja dan menekan
tombol delete yang disertakan dengan lowongan kerja tersebut. Seperti biasa kita ubah function
route() di app.js dengan menambahkan kode untuk menangani proses hapus. Berikut adalah kode
program untuk menangani proses hapus:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/jobs/delete'){
connection.query("delete from jobs where id_jobs="+data.id_jobs, function(err){
console.log("Deleted item id: "+data.id_jobs);
});
connection.end();
res.end();
}
res.write(output);
res.end();
}
else{
res.end();
}
}
Sama seperti fitur edit lowongan kerja, Anda akan mengakses URL
http://localhost:8084/jobs/delete?id_jobs=8 yang nantinya id_jobs akan digunakan pada query
untuk menghapus lowongan kerja di penanganan URL “/jobs/delete”. Setelah melakukan
penghapusan, maka proses selanjutnya adalah melakukan redirect ke halaman mengelola lowongan
kerja.
Untuk lebih jelasnya mari kita lihat contohnya seperti pada gambar berikut:

Saat kita menyorot link Delete, lowongan kerja yang akan dihapus masih ada. Lalu setelah kita klik
link tersebut, maka lowongan kerja sudah terhapus:

9. Membangun Fitur Mengelola Kategori Lowongan Kerja
Kode template untuk halaman mengelola kategori lowongan kerja. Simpan kode berikut dalam file
list_category.html kemudian simpan di folder template. Berikut kodenya:
<html>
<head>
<title>Jobs Category</title>
</head>
<body>
<h1>Jobs Category</h1>
<a href="/category/add">Add Category</a> |
<a href="/jobs">See Jobs</a>
<br/><br/>
{{ category.name }} |
<a href="/category/edit?id_category={{category.id_category}}">Edit</a> |
<a href="/category/delete?id_category={{category.id_category}}">Delete</a> <br/>
{% endfor %}
</body>
</html>
Kode untuk penanganan URL “/category”:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/category'){
connection.query('select * from jobs_category', function(err, rows, fields){
template = swig.compileFile(abs_path+'template/list_category.html');
output = template({
categories:rows
});
res.write(output);
res.end();
});
connection.end();
}

res.write(output);
res.end();
}
else{
res.end();
}
}
Template untuk fitur menambah kategori lowongan kerja. Simpan kode berikut ke dalam file
add_category.html kemudian simpan di folder template:
<html>
<head>
<title>Add Category</title>
</head>
<body>
<h1>Add Category</h1>
<form action="/category/add/process" method="POST">
Category: <input type="text" name="category_name" value="" required />
<br/><br/>
<a href="/category">Cancel</a> | <input type="submit" value="Add" />
</form>
</body>
</html>
Kode untuk penanganan URL “/category/add” dan “/category/add/process”.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/category/add'){
template = swig.compileFile(abs_path+'template/add_category.html');

res.write(output);
res.end();
}
else if (urlPathname == '/category/add/process'){
connection.query("insert into jobs_category (name) values ('"+data.category_name+"')", function(err){
console.log(data);
console.log('add jobs category succcess ..');
});
connection.end();
redirect(res, '/category');
res.end();
}
res.write(output);
res.end();
}
else{
res.end();
}
}
Template untuk melakukan penyutingan kategori lowongan kerja. Simpan kode berikut di file
edit_category.html kemudian simpan di folder template.
<html>
<head>
<title>Edit Category</title>
</head>
<body>
<h1>Edit Category</h1>
<form action="/category/edit/process" method="POST">
Category: <input type="text" name="category_name" value="{{ category[0].name }}" required />
<input type="hidden" name="id_category" value="{{ category[0].id_category }}"/>
<br/><br/>
<a href="/category">Cancel</a> | <input type="submit" value="Edit" />
</form>
</body>
</html>

Kode untuk penanganan URL “/category/edit” dan “/category/edit/process”
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/category/edit'){
connection.query('select * from jobs_category where id_category = '+data.id_category, function(err,
rows, fields){
template = swig.compileFile(abs_path+'template/edit_category.html');
output = template({
category:rows
});
res.write(output);
res.end();
});
connection.end();
}
else if (urlPathname == '/category/edit/process'){
connection.query("update jobs_category set name='"+data.category_name+"' where
id_category="+data.id_category, function(err){
console.log(data);
console.log('edit jobs category succcess ..');
});
connection.end();
res.end();
}
res.write(output);
res.end();
}
else{

res.end();
}
}
Kode untuk penanganan URL “/delete”
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
else if (urlPathname == '/category/delete'){
connection.query("delete from jobs_category where id_category="+data.id_category, function(err){
console.log("Deleted item id: "+data.id_category);
});
connection.end();
res.end();
}
res.write(output);
res.end();
}
else{
res.end();
}
}

10. Ringkasan
• Anda sudah mengenal perbedaan Javascript di clientside dan Javascript di serverside setelah
mencoba NodeJS
• Anda mengetahui template engine untuk NodeJS yang bernama Swig
• Anda sudah mampu menggunakan data dari database di MySQL dengan NodeJS
• Anda sudah mengenal request method GET dan POST di NodeJS
• Anda sudah mengenal cara menangani URL di NodeJS
• Anda mengenal beberapa modul yang umum digunakan di NodeJS seperti http, url, dan
querystring
• Anda mengetahui cara membuat web server menggunakan NodeJS

11. Saran
Dalam praktikum kita kali ini, tentu saja terdapat banyak kekurangan seperti berikut:
• Belum ada pengelolaan template Swig yang baik dengan sistem inheritance. Sehingga setiap
file HTML harus menyalin tag <html></html>
• Belum ada pemaparan tentang sistem autentikasi di NodeJS
• Belum menggunakan CSS agar tampilan website menjadi lebih good looking
• Belum adanya fitur yang dapat berinteraksi dengan user seperti bookmark lowongan kerja,
pencarian lowongan kerja, apply ke salah satu lowongan kerja, dan konsultasi dengan
penyedia lowongan kerja
• Belum adanya fitur paging yang diperlukan untuk membatasi penampilan data jika
terlampau banyak dalam satu halaman. Minimal terdapat paging untuk menampilkan 10
item per halaman
• Belum ada fitur pencarian lowongan kerja

12. Daftar Pustaka
• NodeJS Documentation
• NodeJS Succintly
• Javascript and Node Fundamentals. Azat Mardanov. 2014. Leanpub
• Node Beginner Book: A Comprehensive NodeJS Tutorial. Manuel Kissling. 2014. Leanpub

Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Similar to Membangun Website Lowongan Kerja Sederhana dengan NodeJS (20)

More from Ridwan Fadjar

More from Ridwan Fadjar (20)

Membangun Website Lowongan Kerja Sederhana dengan NodeJS