Membangun Website Lowongan Kerja Sederhana dengan NodeJS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Membangun Website Lowongan Kerja Sederhana dengan NodeJS

on

  • 473 views

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

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

Statistics

Views

Total Views
473
Views on SlideShare
473
Embed Views
0

Actions

Likes
0
Downloads
75
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Membangun Website Lowongan Kerja Sederhana dengan NodeJS Document Transcript

  • 1. 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)
  • 2. 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. 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 2 dari 41)
  • 3. 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 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 3 dari 41)
  • 4. 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. 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 4 dari 41)
  • 5. 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` ( `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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 5 dari 41)
  • 6. 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 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. 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 6 dari 41)
  • 7. 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. 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 7 dari 41)
  • 8. Tampilan disamping adalah halaman about dari website lowongan kerja. Tampilan disamping adalah halaman untuk mengelola lowongan kerja yang diakses oleh admin. Tampilan disamping adalah halaman untuk menambah lowongan kerja yang diakses oleh admin. 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 8 dari 41)
  • 9. 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 9 dari 41)
  • 10. Tampilan disamping adalah 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. 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 10 dari 41)
  • 11. 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); 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 11 dari 41)
  • 12. 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 server server.listen(8084); console.log('Server is running on port 8084'); Di blok kode pertama kita dapat melihat bahwa website ini memerlukan beberapa modul dari NodeJS dan tambahan dari luar. Untuk menggunakan sebuah modul di NodeJS kita menggunakan method require(). Berikut adalah penjelasan dari tiap modul: • http, modul yang digunakan untuk melakukan tugas – tugas protokol HTTP. Sebagai contoh redirection page, request GET, request POST, dan response dengan berbagai bentuk konten 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, dan berbagai interaksi dengan MySQL lainnya. Modul ini tidak tersedia secara default di NodeJS. Cara instalasi terdapat di bab 2 • swig, modul yang digunakan untuk menampilkan hasil query dari MySQL atau data lainnya yang dilewatkan ketika akan menampilkan sebuah halaman sesuai dengan request dari user. File yang akan di-render oleh Swig disebut template. Dengan menggunakan template, Anda tidak perlu repot untuk menyisipkan kode server side di dalam sebuah file HTML karena template sudah memiliki sintaks tersendiri untuk menampilkan data yang dikirim dari server. 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 12 dari 41)
  • 13. • 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 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 13 dari 41)
  • 14. 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. 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 14 dari 41)
  • 15. 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 function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 15 dari 41)
  • 16. 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: 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 16 dari 41)
  • 17. 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 tampilan seperti berikut: 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 17 dari 41)
  • 18. 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 18 dari 41)
  • 19. 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 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 19 dari 41)
  • 20. 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: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 20 dari 41)
  • 21. 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. 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 21 dari 41)
  • 22. 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” : 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 22 dari 41)
  • 23. // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 23 dari 41)
  • 24. • 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> 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 24 dari 41)
  • 25. <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(): // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 25 dari 41)
  • 26. }); 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 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 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 26 dari 41)
  • 27. 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 27 dari 41)
  • 28. 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"> {% 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 28 dari 41)
  • 29. {% 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”: // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 29 dari 41)
  • 30. 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” 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: 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 30 dari 41)
  • 31. 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 31 dari 41)
  • 32. 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: // URL Routing dari aplikasi JobsPool function 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 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: 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 32 dari 41)
  • 33. Saat kita menyorot link Delete, lowongan kerja yang akan dihapus masih ada. Lalu setelah kita klik link 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 33 dari 41)
  • 34. 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 JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 34 dari 41)
  • 35. 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 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”. // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 35 dari 41)
  • 36. 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 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> 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 36 dari 41)
  • 37. Kode untuk penanganan URL “/category/edit” dan “/category/edit/process” // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 37 dari 41)
  • 38. res.end(); } } Kode untuk penanganan URL “/delete” // URL Routing dari aplikasi JobsPool function 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 38 dari 41)
  • 39. 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 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 39 dari 41)
  • 40. 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 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 40 dari 41)
  • 41. 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 2014 Laboratorium Jaringan Komputer, Ilmu Komputer, Gedung FPMIPA – C, Universitas Pendidikan Indonesia. (halaman 41 dari 41)