membangun website lowongan kerja sederhana dengan nodejs

41
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)

Upload: ridwan-fajar

Post on 20-Jun-2015

2.009 views

Category:

Software


0 download

DESCRIPTION

Mengenal membuat website menggunakan NodeJS. Belum ada sistem autentikasi user. Baru sebatas CRUD untuk kategori lowongan kerja dan lowongan kerja

TRANSCRIPT

Page 1: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Diselenggarakan oleh POSS – UPI, 2014.

Daftar isi:

1. Pendahuluan2. Instalasi dan Perangkat yang Dibutuhkan Lainnya3. Desain Database4. Desain website5. Membangun Web Server Menggunakan NodeJS6. URL Routing di NodeJS7. Membangun Fitur Halaman Lowongan Kerja8. Membangun Fitur Mengelola Lowongan Kerja9. Membangun Fitur Mengelola Kategori Lowongan Kerja10. Ringkasan11. Saran12. Daftar Pustaka

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 1 dari 41)

Page 2: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

1. Pendahuluan

Pelatihan bulanan POSS UPI kali ini akan membahas bagaimana membangun sebuah websitesederhana menggunakan NodeJS. Tentu bagi Anda yang sudah kenal dengan membangun websiteakan 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 untukmemberikan style pada halaman HTML yang ditulis, dan Javascript sebagai teknologi yangdigunakan untuk memanipulasi halaman HTML di sisi client atau yang biasa disebut dengan clientside 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 sidescripting layaknya PHP. Javascript ini merupakan interface untuk Node yang merupakan kumpulanpustaka untuk membangun sebuah infrastruktur web dan website web. Dengan demikian NodeJSmerupakan Javascript yang digunakan sebagai server side dan Javascript di browser digunakanuntuk client side. NodeJS ini diciptakan oleh Ryan Dahl, seorang senior software engineer dariJoyent.

Di percobaan ini kita akan membangun sebuah website lowongan kerja sederhana denganmenggunakan NodeJS. Di dalam website tersebut terdapat fitur yang akan kita coba di percobaanini seperti, mengelola kategori lowongan pekerjaan, mengelola lowongan pekerjaan, danmenampilkan lowongan kerja di halaman utama.

Percobaan NodeJS ini tidak akan menggunakan web framework yang sudah tersedia sepertiExpressJS, SailsJS, atau Geddy (web framework untuk NodeJS yang dibuat oleh Ryan Dahl).Karena percobaan ini akan memaparkan pemahaman tentang NodeJS sederhana.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 2 dari 41)

Page 3: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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 diperuntukkanbagi 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 melakukankonfigurasi 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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 3 dari 41)

Page 4: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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 dapatmengunduh XAMPP for Linux karena didalamnya terdapat keempat perangkat tersebut dalam satu paket.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 4 dari 41)

Page 5: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

3. Desain Database

Setelah melihat dan memahami skema database diatas, sekarang dengan menggunakanPHPMyAdmin, buatlah terlebih dahulu database dengan nama jobspool.

Kemudian salin SQL dibawah ini menjadi sebuah file dengan nama jobspool.sql. Kemudian importfile SQL tersebut di PHPMyAdmin untuk membentuk database yang akan dibutuhkan selamapercobaan berlangsung.

---- Database: `jobspool`--

-- --------------------------------------------------------

---- Table structure for table `jobs`--

CREATE TABLE IF NOT EXISTS `jobs` ( `id_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 (`id_jobs`), KEY `category_id` (`category_id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

---- Dumping data for table `jobs`--

INSERT INTO `jobs` (`id_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`--

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 5 dari 41)

Page 6: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

CREATE TABLE IF NOT EXISTS `jobs_category` ( `id_category` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, PRIMARY KEY (`id_category`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

---- Dumping data for table `jobs_category`--

INSERT INTO `jobs_category` (`id_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` (`id_category`) ON DELETE CASCADE;

Database yang diperlukan di percobaan ini bernama jobspool. Di dalamnya terdapat dua tabel yaitujobs_category dan jobs. Tabel jobs_category diperlukan untuk menyimpan data kategorilowongan pekerjaan yang nantinya diperlukan untuk relasi one to many kepada tabel jobs. Terdiridari 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.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 6 dari 41)

Page 7: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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 duapengguna yaitu pelamar kerja dan admin. Dan tentunya masing – masing pengguna menguasaifiturnya 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.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 7 dari 41)

Page 8: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Tampilan disamping adalah halaman about dari website lowongan kerja.

Tampilan disamping adalah halaman untuk mengelola lowongan kerja yang diaksesoleh admin.

Tampilan disamping adalah halaman untuk menambah lowongan kerja yang diaksesoleh admin.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 8 dari 41)

Page 9: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Tampilan di samping adalah halaman untuk menyunting sebuah lowongan kerja yang diakses oleh admin.

Tampilan disamping adalah 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.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 9 dari 41)

Page 10: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Tampilan disamping adalah halaman untuk menyunting kategorilowongan kerja yang diakses oleh admin.

Dengan melihat rancangan aplikasi di bab ini, Anda akan lebih mudah untuk memahami kodeprogram yang akan dibahas di bab selanjutnya.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 10 dari 41)

Page 11: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

5. Membangun Web Server Menggunakan NodeJS

Dengan menggunakan NodeJS, Anda dapat membuat sebuah web server dengan mengandalkanmodul – modul yang sudah tersedia secara default di NodeJS. Kali ini kita akan membuat webserver yang diperuntukkan untuk website NodeJS yang akan kita bangun.

Sebenarnya dalam pembuatan website NodeJS, setiap kode sumber dapat dipisahkan kedalambeberapa file Javascript. Hanya saja dalam percobaan ini kita tidak akan memisahkan dulu kodesumber yang akan ditulis. Kita gabungkan dulu dalam satu file, baik itu logika program ataupunkode 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 JobsPoolvar 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 beradavar abs_path = '/home/ridwanbejo/Projects/NodeJS\ Mania/labs/node-jobspool/';

// Function untuk redirect ke halaman tertentufunction redirect(res, pathname){ res.statusCode = 302; res.setHeader('Location', pathname);}

// URL Routing dari website JobsPoolfunction route(connection, urlPathname, res, data){ console.log(data);}

// Objek server dimana proses koneksi MySQL dimulai dan mendeteksi request yang bertipe GET dan POSTvar server = http.createServer(function(req, res){ var urlPath = url.parse(req.url, true); var connection = mysql.createConnection(connection_config);

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 11 dari 41)

Page 12: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

var pathname = urlPath.pathname; if (req.method == 'GET'){ console.log('GET Method fired...'); route(connection, pathname, res, urlPath.query); } else if (req.method == 'POST'){ console.log('POST Method fired...'); var postData = ""; console.log("req for " + pathname + " received."); req.setEncoding("utf8"); req.addListener("data", function(postDataChunk) { postData += postDataChunk; console.log("Received POST data chunk '"+ postDataChunk + "'."); }); req.addListener("end", function() { route(connection, pathname, res, qs.parse(postData)); }); }});

// menyalakan objek serverserver.listen(8084);console.log('Server is running on port 8084');

Di blok kode pertama kita dapat melihat bahwa website ini memerlukan beberapa modul dariNodeJS dan tambahan dari luar. Untuk menggunakan sebuah modul di NodeJS kita menggunakanmethod require(). Berikut adalah penjelasan dari tiap modul:

• http, modul yang digunakan untuk melakukan tugas – tugas protokol HTTP. Sebagaicontoh redirection page, request GET, request POST, dan response dengan berbagai bentukkonten seperti HTML, JSON, atau XML. Modul ini sudah terdapat di NodeJS

• mysql, modul yang digunakan di NodeJS untuk berinteraksi dengan RDBMS MySQL.Sebagai contoh kita dapat melakukan select data, update data, insert data, delete data,create database, drop database, create table, koneksi website NodeJS kita ke MySQL, danberbagai interaksi dengan MySQL lainnya. Modul ini tidak tersedia secara default diNodeJS. Cara instalasi terdapat di bab 2

• swig, modul yang digunakan untuk menampilkan hasil query dari MySQL atau data lainnyayang dilewatkan ketika akan menampilkan sebuah halaman sesuai dengan request dari user.File yang akan di-render oleh Swig disebut template. Dengan menggunakan template, Andatidak perlu repot untuk menyisipkan kode server side di dalam sebuah file HTML karenatemplate sudah memiliki sintaks tersendiri untuk menampilkan data yang dikirim dariserver. Modul ini tidak tersedia secara default di NodeJS. Cara instalasi terdapat di bab 2

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 12 dari 41)

Page 13: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

• url, modul yang digunakan untuk manipulasi URL seperti parsing dan mengambil setiapdetail dari URL yang dikirimkan user ke server. Modul ini tersedia di NodeJS

• querystring, modul yang digunakan untuk mengelola parameter yang dikirimkan secaraPOST ataupun GET di NodeJS. Modul ini tersedia di NodeJS

Setelah memanggil beberapa modul, selanjutnya kita membuat sebuah dictionary koneksi NodeJSke MySQL yang bernama connection_config. Di dalamnya terdapat parameter localhost, database,user, password, dan multipleStatements. Untuk host, database, user, dan password, silahkan atursesuai dengan konfigurasi MySQL yang Anda miliki. Jika diinstal di laptop Anda sendiri, gunakanlocalhost atau 127.0.0.1 untuk host NodeJS. Di dalam connection_config terdapat parametermultipleStatements. Parameter tersebut digunakan untuk mengeksekusi multiple query saatmelakukan query di NodeJS.

Kemudian kita membuat sebuah variabel bernama abs_path. Variabel tersebut digunakan untukmencatat absolute path dari proyek NodeJS di percobaan ini. Variabel ini akan digunakan ketikaakan me-render template untuk memberikan response kepada user.

Dibawah pembuatan variabel abs_path, terdapat dua function yang akan sering digunakan di dalamwebsite lowongan kerja ini. Berikut penjelasannya:

• redirect(res, pathname), function yang digunakan untuk mengarahkan response ke suatuhalaman. Parameter res digunakan untuk memanipulasi response. Parameter pathnameberisi URL yang dituju oleh user

• route(connection, urlPathname, res, data), function utama yang akan berisi logika websitelowongan kerja. Parameter connection adalah objek yang akan digunakan untuk melakukaninteraksi ke database di MySQL. Parameter urlPathname adalah string yang berisi URLyang diminta oleh user. Parameter res adalah objek yang akan menentukan bagaimanaresponse yang akan dikirimkan kepada user. Parameter data adalah data yang dikirimkanhasil dari request GET atau request POST. Di bab selanjutnya kita akan lebih banyakmenulis kode di dalam function route() ini

Bagian yang paling penting disini adalah ketika membuat objek server. Untuk membuat sebuahobjek server kita menggunakan objek http yang telah dibuat diawal dan menggunakan methodcreateServer(). Dalam pembuatan objek server ini kita melewatkan sebuah anonymous functionyang 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 untukkoneksi NodeJS ke database di MySQL. Disana ada sebuah variabel bernama urlPathname yangberisi pathname hasil dari parsing URL.

Web server yang dibangun ini mampu menangani dua tipe request yaitu POST dan GET. Untukrequest dengan method GET tidak ada penanganan khusus, function route() langsung memprosesresponse yang akan dikirimkan. Untuk request dengan method POST terdapat proses untukmengambil parameter dari request POST. Disana dibuat sebuah variabel dengan nama postDatayang akan menampung seluruh data. Dengan menggunakan method addListener() danmengirimkan parameter data dimulailah proses pengumpulan data dari request POST. Prosestersebut ditangani oleh sebuah callback function. Kemudian kita memanggil lagi method

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 13 dari 41)

Page 14: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

addListener() namun dengan parameter end yang artinya seluruh proses dari addListener()sebelumnya dapat digunakan. Sebuah callback function dilewatkan kedalam addListener() untukmemanggil function route().

Dan terakhir kita akan menyalakan server tersebut dengan method listen() yang dimiliki objekserver di port 8084 jika file app.js dijalankan. Untuk menjalankan file app.js silahkan gunakanperintah berikut ini: node app.js

Kita belum dapat meminta URL dari server. Namun berikut adalah tampilan di console ketikaserver 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. Sedangkaninformasi “GET Method fired...” akan muncul ketika kita mengetikkan http://localhost:8084 diweb browser.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 14 dari 41)

Page 15: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

6. URL Routing di NodeJS

Di bab ini kita akan mempelajari bagaimana melakukan URL routing di NodeJS. URL Routing iniakan diproses di function route(). Sebagai percobaan kita akan menampilkan halaman about dariwebsite 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 dalamfolder template tersebut dan buatlah sebuah file HTML yang bernama about.html. Danabout.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 memilikihandle untuk menampilkan halaman about. Masih ingat dengan function route() kan? Sekarang kitaakan menyunting function tersebut menjadi seperti pada potongan kode berikut ini (kode programdibawah masih berada di file app.js. Tanda garis putus – putus menandakan bahwa sebelum atausesudahnya terdapat kode lain):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){ console.log(data); if (urlPathname == '/about'){ template = swig.compileFile(abs_path+'template/about.html'); output = template();

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 15 dari 41)

Page 16: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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 websiteaplikasi lowongan kerja di percobaan ini belum mempunyai kemampuan seperti yang dapatdilakukan dengan menggunakan framework semacam ExpressJS. Jadi masih sangat sederhana.

Di kondisi yang pertama route() akan memeriksa apakah urlPathname yang diterima serveradalah “/about” jika sesuai maka halaman about akan ditampilkan kepada user. Jika tidak sesuaimaka 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 pembacaantemplate about.html yang telah kita tulis sebelumnya dengan menggunakan Swig ke dalam objektemplate. Kemudian konten dibaca dengan dengan memanggil constructor yang terdapat di objektemplate dan menyimpannya di variabel output. Hasil pembacaan tersebut akan berupa plain text.Sebelum ditampilkan, Anda harus mengatur response header terlebih dahulu dengan mengaturstatus menjadi 200 dan mengatur Content-Type menjadi “text/html”. Setelah itu tampilkan isivariabel output dengan menggunakan method write() yang terdapat di objek res. Dan hal yangperlu diingat adalah di setiap akhir dari menanggapi response, method end() yang terdapat di objekres harus dipanggil untuk mengakhiri proses response.

Sekarang silahkan jalankan kembali file app.js dengan perintah: node app.js. Setelah itu aksesURL berikut di web browser: http://localhost:8084/about

Maka akan tampil halaman seperti pada gambar berikut:

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 16 dari 41)

Page 17: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Sedangkan yang terjadi di server adalah:

root@ridwanbejo-Aspire-4738G:/home/ridwanbejo/Projects/NodeJS Mania/labs/node-jobspool# node app.js Server is running on port 8084 GET Method fired... {}

Jika mencoba mengakses URL yang tidak terdefinisi di function route() akan muncul tampilanseperti berikut:

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 17 dari 41)

Page 18: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Berikut adalah tampilan yang terjadi di server:

root@ridwanbejo-Aspire-4738G:/home/ridwanbejo/Projects/NodeJS Mania/labs/node-jobspool# node app.js Server is running on port 8084 GET Method fired... {} GET Method fired... {}

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 18 dari 41)

Page 19: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

7. Membangun Fitur Halaman Lowongan Kerja

Sebagaimana kita sudah merancangnya di bab 4, kita akan membuat halaman lowongan kerja iniagar dapat diakses oleh pelamar kerja. Informasi yang akan ditampilkan antara lain posisipekerjaan, siapa yang menyediakan pekerjaan, rentang gaji yang ditawarkan, dan deskripsi daripekerjaan yang diajukan.

Sekarang kita akan menulis template yang bernama index.html. Template tersebut akan berisiinformasi seperti yang sudah dipaparkan sebelumnya. Buatlah template tersebut di dalam foldertemplate. 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. Berikutpenjelasannya:

• {% for job in jobs %} adalah awal perulangan yang akan digunakan untuk menampilkandaftar lowongan kerja. Variabel jobs adalah variabel yang berisi seluruh lowongan kerjayang didapatkan dari hasil query. Sedangkan variabel job adalah variabel yang berisilowongan kerja di setiap iterasinya

• {{ job.name }}, {{ job.company }}, dan yang serupa lainnya adalah cara mengakses atribut

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 19 dari 41)

Page 20: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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(). Berikutkode tambahan di app.js untuk menangani halaman lowongan kerja untuk pelamar kerja:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){ 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.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); });

connection.end(); } else 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(); }}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 20 dari 41)

Page 21: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Kita akan membahas bagian routing untuk “/” saja. Apa saja yang terjadi saat user memintaresponse 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 callbackfunction yang akan menangkap hasil query dan menggunakan hasil query tersebut untukditampilkan kepada user dengan bantuan Swig. Callback function yang dilewatkan memilikitiga parameter yaitu err untuk menangkap error yang terjadi saat query, rows hasil queryberupa array object, dan fields yang akan menyimpan informasi ada kolom apa sajakahyang 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 melewatkanhasil query yang ditangkap dengan parameter dari callback function yaitu rows. Variabelrows tersebut akan dilewatkan ke template index.html dengan nama jobs

• Masih di connection.query(), proses dilanjutkan dengan mengatur response header menjadiHTML, 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:8084kemudian akan tampil seperti berikut:

Anda pun sudah dapat mengklik link About Us dan akan diarahkan ke link tersebut. Begitupunsebaliknya, jika Anda berada di halaman About Us, Anda dapat kembali lagi ke halaman Home. Dibab berikutnya kita akan mempelajari bagaimana menambah lowongan kerja baru.

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 21 dari 41)

Page 22: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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 menampilkandaftar 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 fileapp.js dengan menambahka URL routing untuk mengelola lowongan kerja. Karena saat ini kitasedang mencoba untuk membuat halaman daftar lowongan kerja, maka URL routing yang akan kitabuat terlebih dahulu adalah “/jobs”. Berikut kode program untuk menangani request “/jobs” :

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 22 dari 41)

Page 23: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

else if (urlPathname == '/jobs'){ connection.connect(); 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.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); });

connection.end(); } else 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(); }}

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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 23 dari 41)

Page 24: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

• connection.query(), function yang digunakan untuk mengeksekusi query yang dibutuhkan.Parameter pertama adalah SQL yang kita tentukan, parameter kedua adalah sebuah callbackfunction yang akan menangkap hasil query dan menggunakan hasil query tersebut untukditampilkan kepada user dengan bantuan Swig. Callback function yang dilewatkan memilikitiga parameter yaitu err untuk menangkap error yang terjadi saat query, rows hasil queryberupa array object, dan fields yang akan menyimpan informasi ada kolom apa sajakahyang terdapat di tabel yang ada di query.

• Masih di connection.query(), proses dilanjutkan dengan membaca file templatelist_jobs.html. Hasil pembacaan template ditampung ke variabel output dengan tambahanmelewatkan 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 menjadiHTML, 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 aksesURL 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, apabilakita mengklik menu tersebut akan tampil halaman “Page not found”. Sebelum menangani URLyang akan menampilkan halaman tambah lowongan kerja, terlebih dahulu kita membuat templateyang akan berisi form untuk menambah lowongan kerja. Buatlah file baru yang bernamaadd_jobs.html kemudian simpan di folder template. Berikut adalah kode template diadd_jobs.html:

<html> <head>

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 24 dari 41)

Page 25: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

<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 menampilkandaftar kategori yang ada di tabel jobs_category ke dalam combobox yang terdapat di form tambahlowongan kerja. Kemudian action dari form diatas diarahkan ke “/jobs/add/process”. Kemudian adaatribut 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 tambahkanURL routing untuk menampilkan halaman menambah lowongan kerja dan proses menambahlowongan kerja. Berikut adalah kode program tambahan untuk function route():

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

else if (urlPathname == '/jobs/add'){ connection.connect(); connection.query('select * from jobs_category', function(err, rows, fields){ template = swig.compileFile(abs_path+'template/add_jobs.html'); output = template({ categories:rows

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 25 dari 41)

Page 26: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

}); res.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); }); connection.end(); } else if (urlPathname == '/jobs/add/process'){ connection.connect(); 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(); } else 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(); }}

Pada penanganan URL “/jobs/add”, disana terdapat proses untuk melakukan query yang akanmengambil semua kategori dan akan ditampilkan di form tambah lowongan kerja. Hasil querytersebut dilewatkan melalui variabel categories. Tentunya sebelum melakukan proses query untukmengambil semua kategori dan menampilkan halaman tambah lowongan kerja, proses penanganandiawali dengan membuka koneksi ke MySQL dan diakhiri dengan menutup koneksi ke MySQL.

Pada penanganan URL “/jobs/add”. Penanganan URL “/jobs/add/process” diawali dengan membukakoneksi ke MySQL, kemudian melakukan penambahan data dengan query insert, menutup koneksike 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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 26 dari 41)

Page 27: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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):

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 27 dari 41)

Page 28: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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 denganform untuk menambah lowongan kerja. Jika pada form tambah lowongan kerja, kita melihat formyang belum terisi. Maka di form menyunting lowongan kerja akan tampil form yang sudah berisidata lowongan kerja yang akan kita sunting. Terlebih dahulu kita buat sebuah file baru yangbernama edit_jobs.html dan simpan file tersebut di folder template. Berikut adalah kode templateuntuk 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"> {% for category in categories %} {% if job[0].category_id == category.id_category %} <option selected value="{{ category.id_category }}">{{ category.name }}</option>

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 28 dari 41)

Page 29: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

{% 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 akandigunakan oleh URL routing “/jobs/edit”. Kita sunting terlebih dahulu function route() di fileapp.js. Berikut adalah kode program terbaru untuk menangani URL “/jobs/edit” dan“/jobs/edit/process”:

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

else if (urlPathname == '/jobs/edit'){ connection.connect(); 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.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); }); connection.end(); } else if (urlPathname == '/jobs/edit/process'){ connection.connect();

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 29 dari 41)

Page 30: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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(); redirect(res, '/jobs'); res.end(); } else 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(); }}

Agak sedikit berbeda dengan penanganan URL “/jobs/add”. Penanganan URL “/jobs/edit” akanmelakukan proses tambahan, yaitu menangkap querystring dari variabel id_jobs. Seperti yang kitatahu, saat mengklik salah satu lowongan kerja untuk disunting, URL penyuntingan terhadap suatulowongan kerja akan berbentuk seperti berikut: http://localhost:8084/jobs/edit?id_jobs=(id_lowongan_kerja). Dengan demikian id lowongan kerja yang diterima dari id_jobsmelalui method GET, akan digunakan untuk melakukan pengambilan lowongan kerja yangdiinginkan melalui query select. Kemudian di penanganan URL “/jobs/edit” ini terdapat multiplequery saat menggunakan connection.query(). Query pertama adalah mengambil suatu lowongankerja, query kedua adalah mengambil semua data kategori. Kemudian hasil dari kedua query akandilewatkan ke template edit_jobs.html.

Pada penanganan URL “/jobs/edit/process”, kita melakukan penyimpanan data lowongan kerja yangtelah diubah dan melakukan redirect ke halaman mengelola lowongan kerja. Mari kita coba pilihsalah satu lowongan kerja untuk diubah:

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 30 dari 41)

Page 31: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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:

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 31 dari 41)

Page 32: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Dan yang sangat ditunggu – tunggu adalah fitur untuk menghapus lowongan kerja. Tidak sepertimenambah atau menyunting lowongan kerja. Fitur menghapus lowongan kerja tidak memerlukantemplate. Proses hapus akan dilakukan dengan memilih salah satu lowongan kerja dan menekantombol delete yang disertakan dengan lowongan kerja tersebut. Seperti biasa kita ubah functionroute() di app.js dengan menambahkan kode untuk menangani proses hapus. Berikut adalah kodeprogram untuk menangani proses hapus:

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

else if (urlPathname == '/jobs/delete'){ connection.connect(); connection.query("delete from jobs where id_jobs="+data.id_jobs, function(err){ console.log("Deleted item id: "+data.id_jobs); }); redirect(res, '/jobs'); connection.end(); res.end(); } else 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(); }}

Sama seperti fitur edit lowongan kerja, Anda akan mengakses URLhttp://localhost:8084/jobs/delete?id_jobs=8 yang nantinya id_jobs akan digunakan pada queryuntuk menghapus lowongan kerja di penanganan URL “/jobs/delete”. Setelah melakukanpenghapusan, maka proses selanjutnya adalah melakukan redirect ke halaman mengelola lowongankerja.

Untuk lebih jelasnya mari kita lihat contohnya seperti pada gambar berikut:

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 32 dari 41)

Page 33: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 33 dari 41)

Page 34: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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/> {% for category in categories %} {{ 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”:

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - else if (urlPathname == '/category'){ connection.connect(); connection.query('select * from jobs_category', function(err, rows, fields){ template = swig.compileFile(abs_path+'template/list_category.html'); output = template({ categories:rows }); res.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); }); connection.end(); }

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 34 dari 41)

Page 35: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

else 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(); }

}

Template untuk fitur menambah kategori lowongan kerja. Simpan kode berikut ke dalam fileadd_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”.

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - else if (urlPathname == '/category/add'){ template = swig.compileFile(abs_path+'template/add_category.html'); output = template();

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 35 dari 41)

Page 36: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

res.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); } else if (urlPathname == '/category/add/process'){ connection.connect(); 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(); } else 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(); }

}

Template untuk melakukan penyutingan kategori lowongan kerja. Simpan kode berikut di fileedit_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>

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 36 dari 41)

Page 37: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

Kode untuk penanganan URL “/category/edit” dan “/category/edit/process”

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - else if (urlPathname == '/category/edit'){ connection.connect(); 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.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); }); connection.end(); } else if (urlPathname == '/category/edit/process'){ connection.connect(); 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(); redirect(res, '/category'); res.end(); } else 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');

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 37 dari 41)

Page 38: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

res.end(); }

}

Kode untuk penanganan URL “/delete”

// URL Routing dari aplikasi JobsPoolfunction route(connection, urlPathname, res, data){

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - else if (urlPathname == '/category/delete'){ connection.connect(); connection.query("delete from jobs_category where id_category="+data.id_category, function(err){ console.log("Deleted item id: "+data.id_category); }); redirect(res, '/category'); connection.end(); res.end(); } else 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(); }

}

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 38 dari 41)

Page 39: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

10. Ringkasan

• Anda sudah mengenal perbedaan Javascript di clientside dan Javascript di serverside setelahmencoba 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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 39 dari 41)

Page 40: Membangun Website Lowongan Kerja Sederhana dengan 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 setiapfile 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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 40 dari 41)

Page 41: Membangun Website Lowongan Kerja Sederhana dengan NodeJS

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

Pelatihan Membangun Website website Lowongan Kerja dengan NodeJS dan MySQL Diselenggarakan Divisi Riset POSS UPI pada tanggal 12 Juli 2014Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 41 dari 41)