selayang pandang javascript dan nodejs

Selayang Pandang Javascript dan NodeJS

Diselenggarakan oleh OSTRICPukul 09.00 s/d 12.00, 19 Juli 2014 Laboratorium Umum, Ilmu KomputerFPMIPA, Universitas Pendidikan Indonesia

Apa itu Javascript ?

● Script yang berjalan di browser. Disebut juga clientside scripting

● Diciptakan oleh Brendan Eich dari Netscape

● Engine yang mendukung Javascript diantaranya: SpiderMonkey (Firefox), V8 (Chrome), SquirrelFish (Safari), Carakan (Opera), Chakra (Internet Explorer)

● Biasanya digunakan untuk DOM Manipulation, AJAX, animasi, validasi form

Hello World

<html> <head> <title>Hello World Javascript</title> <script type="text/javascript"> // mencetak Hello World di developer tools console.log("Hello World"); // menampilkan Hello World di dialog peringatan alert("Hello World"); // menampilkan Are you ok di dialog pertanyaan confirm("Are you ok ?"); // menampilkan Hello World Javascript di dalam tag body document.write("Hello World Javascript"); </script> </head> <body> </body></html>

Catatan: Simpan di file dengan nama helloworld.html

Kondisional di Javascript

<html> <head> <title>Kondisional di Javascript</title> <script type="text/javascript"> var umur = 23; if (umur <= 15){ console.log("masih bocah.."); } else if (umur > 15 && umur <= 20){ console.log("beranjak remaja.."); } else if (umur > 20 && umur <= 30){ console.log("sudah dewasa.."); }

else if (umur > 30 && umur <= 50){ console.log("udah jadi om om.."); } else if (umur > 50){ console.log("semakin tua.."); } else{ console.log("umur tidak valid"); } </script> </head> <body> </body></html>

Catatan: Simpan di file dengan nama kondisional.html

Pengulangan di Javascript

<html> <head> <title>Pengulangan di Javascript</title> <script type="text/javascript"> var banyak_baris = 100; for (i=0; i < 100; i++){ console.log("ini adalah baris ke - " + i); document.write("ini adalah baris ke - " + i + "<br/>"); } </script> </head> <body> </body></html>

Catatan: Simpan di file dengan nama pengulangan.html

Fungsi di Javascript

<html> <head> <title>Fungsi di Javascript</title> <script type="text/javascript"> function hello(name){ console.log("Hello " + name + " :D....<br/>"); document.write("Hello " + name + " :D....<br/>"); } var students = ['ghifary', 'afghan', 'danang', 'renisa', 'nuy', 'ani', 'anshar']; for (student in students){ hello(students[student]); } </script> </head> <body> </body></html>

Catatan: Simpan di file dengan nama fungsi.html

Callback di Javascript

<html> <head> <title>Fungsi di Javascript</title> <script type="text/javascript"> // membuat fungsi coba1 untuk digunakan sebagai callback di fungsi hello function coba1(name){ console.log(name + " ada di dalam callback 1...<br/>"); document.write(name + " ada di dalam callback 1...<br/>"); } // membuat fungsi coba2 untuk digunakan sebagai callback di fungsi hello function coba2(name){ console.log(name + " ada di dalam callback 2...<br/>"); document.write(name + " ada di dalam callback 2...<br/>"); }

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

Catatan: Simpan di file dengan nama callback.html

Callback di Javascript

Catatan: Simpan di file dengan nama callback.html

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // fungsi hello adalah fungsi yang akan menggunakan fungsi lain sebagai callback function hello(name, callback){ console.log("Hello " + name + " :D....<br/>"); document.write("<b>Hello " + name + " :D....</b><br/>"); callback(name); } var students = ['ghifary', 'afghan', 'danang', 'renisa', 'nuy', 'ani', 'anshar']; for (student in students){ // memanggil callback cukup dengan melewatkan fungsi sebagai parameter hello(students[student], coba1); hello(students[student], coba2); } </script> </head> <body> </body></html>

Menangani Event di Javascript

Catatan: Simpan di file dengan nama menangani-event.html

<html> <head> <title>Menangani Event di Javascript</title> <script type="text/javascript"> // membuat fungsi yang digunakan saat salah satu field disorot function sorot_handler(elem, target, perintah){ petunjuk = document.getElementById(target); petunjuk.innerHTML = perintah; console.log('field ' + elem.name + ' lagi disorot....'); } // membuat fungsi yang digunakan saat salah satu field tidak disorot function tidak_disorot_handler(elem, target){ petunjuk = document.getElementById(target); petunjuk.innerHTML = ""; console.log('field ' + elem.name + ' tidak disorot...'); };

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



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // membuat fungsi yang digunakan saat tombol reset diklik function klik_handler(){ alert('form sudah direset'); } // membuat fungsi yang digunakan untuk mengambil data dari form function submit_handler(){ nama = document.getElementById('nama').value; prodi = document.getElementById('prodi').value; student_info = "nama: " + nama + ", "; student_info += "prodi: " + prodi; alert( student_info );

} </script>

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



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <body> <form id="form-students" onsubmit="submit_handler();"> Nama: <input type="text" name="nama" id="nama" onmouseover="sorot_handler(this, 'petunjuk-nama', 'isi field berikut dengan nama siswa');" onmouseout="tidak_disorot_handler(this, 'petunjuk-nama');"/> <br/> <div id="petunjuk-nama"></div> Program Studi: <input type="text" name="prodi" id="prodi" onmouseover="sorot_handler(this, 'petunjuk-prodi', 'isi field berikut dengan program studi siswa');" onmouseout="tidak_disorot_handler(this, 'petunjuk-prodi');"/> <br/> <div id="petunjuk-prodi"></div> <input type="submit" value="Simpan" /><input type="reset" value="Ulangi" onclick="klik_handler();"/> </form> <div id="student-info"> </div> </body></html>

Manipulasi DOM Sederhana

Catatan: Simpan di file dengan nama manipulasi-dom-sederhana.html

<html> <head> <title>Manipulasi DOM Sederhana</title> <script type="text/javascript"> // membuat fungsi yang mengubah warna teks pada paragraf function mengubah_warna(){ paragraf = document.body.getElementsByTagName("p"); for (i=0;i<paragraf.length; i++){ paragraf[i].style.setProperty('background-color', 'red'); paragraf[i].style.setProperty('color', 'white'); } } </script> </head>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Manipulasi DOM Sederhana

Catatan: Simpan di file dengan nama manipulasi-dom-sederhana.html

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

<body> <form> <input type="button" onclick="mengubah_warna();" value="Ubah Warna !"/> <p>1. Ini akan berwarna merah !</p> <p>2. Ini akan berwarna merah !</p> <p>3. Ini akan berwarna merah !</p> <p>4. Ini akan berwarna merah !</p> <p>5. Ini akan berwarna merah !</p> </form> </body></html>

Validasi Form Sederhana

Catatan: Simpan di file dengan nama validasi-form-sederhana.html

<html> <head> <title>Validasi Form Sederhana</title> <script type="text/javascript"> // membuat fungsi yang digunakan saat salah satu field disorot function validasi(){ // regular expression untuk validasi setiap field nim_ck = /^[0-9]{1,8}$/; student_info = document.getElementById('student-info'); nim = document.getElementById('nim'); error_nim = document.getElementById('error-nim');

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



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

if (nim.value.match(nim_ck)){ nim.style.setProperty('border-color', ''); error_nim.innerHTML = ""; student_info.innerHTML = "Validasi berhasil..."; } else{ nim.style.setProperty('border-color', 'red'); error_nim.innerHTML = "<p>nim harus diisi. tidak boleh selain angka</p>"; student_info.innerHTML = "Validasi gagal..."; } } </script>

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



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

</head> <body> <form id="form-students"> NIM: <input type="text" name="nim" id="nim" /> <br/> <div id="error-nim"></div> <input type="button" value="Simpan" onclick="validasi();"/><input type="reset" value="Ulangi"/> </form> <div id="student-info"> </div> </body></html>

Apa itu NodeJS ?

● Javascript sebagai server side scripting

● Diciptakan oleh Ryan Dahl dari Joyent

● Dibangun diatas engine V8 Javascript yang dikembangkan oleh Google

● Biasa digunakan untuk membuat aplikasi jaringan, sistem terdistribusi, aplikasi web, web server, FTP Server, web service

● Tidak dijalankan di web browser !

Instalasi ?

● Linux: unduh installernya, ekstrak dengan perintah: tar -xzvf node-x.x.x.tgz. Masuk ke dalam direktori hasil ekstrak dengan perintah: cd. Lakukan ./configure kemudian make. Setelah itu lakukan instalasi dengan perintah: make install

● Ubuntu: sudo apt-get install nodejs

● Windows: silahkan unduh installernya yang bekstensi .msi kemudian tinggal klik dua kali untuk memulai instalasi. Setelah instalasi beres, Anda akan mendapatkan nodejs, npm, dan dokumentasinya

Hello World

Catatan: Simpan di file dengan nama hello.js

console.log('Hello World');console.log('Anda sedang menggunakan NodeJS...');console.log('NodeJS adalah javascript yang berada disisi server');

Hello World

Catatan: Simpan di file dengan nama hello.js

Eksekusi kode javascript dengan NodeJS menggunakan perintah berikut:

node namafile.js

Request Handling

Catatan: Simpan di file dengan nama request-handling.js

var http = require('http');

var server = http.createServer(function(req, res){ console.log(req.url); if (req.url == '/'){ res.write('Welcome to public page'); res.end(); } else if (req.url == '/login'){ res.write('This is a login page'); res.end(); } else if (req.url == '/category'){ res.write('This is a jobs category page'); res.end(); } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Request Handling


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

else if (req.url == '/jobs'){ res.write('This is a jobs page'); res.end(); } else if (req.url == '/about'){ res.write('This is about page'); res.end(); } else{ res.write('Page not found'); res.end(); }});

server.listen(8084);console.log('Server is running on port 8084');

Request Handling


● Eksekusi file request-handling.js dengan perintah: node request-handling.js● Seperti yang tertera pada kode program, kita membuat web server yang dapat

menangani request dari user lewat URL tertentu● Server menyala di domain local dengan port 8084. Akses aplikasi NodeJS kita

di browser dengan url: http://localhost:8084 setelah itu Anda akan melihat halaman yang bertuliskan “Welcome to public page”

● Cobalah untuk akses URL lain yang sudah didefinisikan sebelumnya

Hello MySQL

● Buatlah database dengan nama node_mysql kemudian buat tabel berikut didalamnya:

CREATE TABLE IF NOT EXISTS `mahasiswa` ( ìd_mahasiswa` int(11) NOT NULL AUTO_INCREMENT, `nama` varchar(30) NOT NULL, `nim` int(8) NOT NULL, èmail` varchar(30) NOT NULL, `prodi` varchar(50) NOT NULL, PRIMARY KEY (ìd_mahasiswa`)) ;

Hello MySQL

● Isilah terlebih dahulu tabel mahasiswa tersebut dengan sampel berikut:

INSERT INTO `mahasiswa` (`id_mahasiswa`, `nama`, `nim`, `email`, `prodi`) VALUES(1, 'lynda', 801234, '[email protected]', 'ilmu komputer'),(2, 'arlyn', 805678, '[email protected]', 'pendidikan ilmu komputer'),(3, 'jarwo', 909934, '[email protected]', 'ilmu komputer');

Hello MySQL

Catatan: Simpan di file dengan nama hellomysql.js

var mysql = require('mysql');var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', database : 'node_mysql'});

connection.connect();

connection.query('select * from mahasiswa', function(err, rows, fields){if (err) throw err;console.log(rows);});

connection.end();

Hello MySQL

Catatan: Simpan di file dengan nama hellomysql.js

● Jalankan file hellomysql.js dengan perintah: node hellomysql.js● Kemudian lihat output yang dihasilkan oleh hellomysql.js berikut ini:

ridwanbejo@ridwanbejo:/NodeJS Mania/labs/node-basic$ node hellomysql.js [ { id_mahasiswa: 1, nama: 'lynda', nim: 801234, email: '[email protected]', prodi: 'ilmu komputer' }, { id_mahasiswa: 2, nama: 'arlyn', nim: 805678, email: '[email protected]', prodi: 'pendidikan ilmu komputer' }, { id_mahasiswa: 3, nama: 'jarwo', nim: 909934, email: '[email protected]', prodi: 'ilmu komputer' } ]

Hello HTML

● Untuk menampilkan HTML, kita akan menggunakan bantuan Swig● Swig adalah template engine yang digunakan untuk menampilkan data ke

sebuah halaman HTML● Dengan menggunakan Swig, Anda tidak perlu mencetak HTML di kode

NodeJS● Dengan menggunakan template engine, Anda tidak perlu mencetak kode

server di dalam HTML● Install Swig dengan cara: npm install swig

Hello HTML

Catatan: Simpan di file dengan nama html-swig.html

<html> <head> <title>Hello HTML dengan Swig</title> </head> <body> <h1>Daftar Mahasiswa</h1> {% for mhs in mahasiswa %} {{ mhs.nim }}, {{ mhs.nama }}, {{ mhs.email }}, {{ mhs.prodi }} <br/> {% endfor %} </body></html>

Hello HTML

Catatan: Simpan di file dengan nama html-swig.js

var http = require('http');var mysql = require('mysql');var swig = require('swig');

var server = http.createServer(function(req, res){ var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', database : 'node_mysql' });

console.log(req.url);

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

Hello HTML

Catatan: Simpan di file dengan nama html-swig.js

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

if (req.url == '/'){ connection.connect(); connection.query('select * from mahasiswa', function(err, rows, fields){ if (err) throw err; template = swig.compileFile('/home/ridwanbejo/Projects/NodeJS\ Mania/labs/node-basic/html-swig.html'); output = template({mahasiswa: rows}); res.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); });

connection.end(); }});

server.listen(8084);console.log('Server is running on port 8084');

Hello HTML

● Pastikan file html-swig.html yang telah ditulis, berada satu tempat dengan file html-swig.js

● Karena kita akan melihat halaman web yang diberikan oleh web server NodeJS, maka jalankan dulu file html-swig.js dengan cara: node html-swig.js

● Bukalah browser kemudian akses http://localhost:8084

Mengirim Data dari Form Method POST

Catatan: Simpan di file dengan nama form.js

// memanggil module NodeJS yang diperlukan oleh aplikasi JobsPoolvar http = require('http');var mysql = require('mysql')var swig = require('swig');var url = require('url');

// 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 pathname = urlPath.pathname; if (pathname == '/'){ template = swig.compileFile('/home/ridwanbejo/Projects/NodeJS\ Mania/labs/node-basic/form.html'); output = template(); res.writeHeader(200, {"Content-Type": "text/html"}); res.write(output); res.end(); }- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


Catatan: Simpan di file dengan nama form.js

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

else if (pathname == '/mahasiswa/add/process'){ 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; }); req.addListener("end", function() { console.log(postData); }); } } });

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


Catatan: Simpan di file dengan nama form.html

<html> <head> <title>Mengirim FORM dengan Method POST</title> </head> <body> <form action="/mahasiswa/add/process" method="POST"> Nama: <input type="text" name="nama" style="margin-bottom:20px;" /> <br/> NIM: <input type="text" name="nim" style="margin-bottom:20px;" /> <br/> E-Mail: <input type="text" name="email" style="margin-bottom:20px;" /> <br/> Program Studi: <input type="text" name="prodi" style="margin-bottom:20px;" /> <br/> <input type="submit" value="Tambah"/> </form> </body></html>


● Jalankan file form.js dengan perintah: node form.js● Akses localhost:8084 di browser● Masukkan beberapa data seperti pada gambar berikut:


● Ketika mengklik tombol Tambah, maka data dari form akan terkirim ke server

● Berikut adalah gambar dari data POST yang diterima oleh server:

Kesimpulan

● NodeJS adalah Javascript yang digunakan untuk server side scripting● Sintaks dan logika Javascript yang sering digunakan untuk client side

scripting umumnya dapat digunakan di NodeJS. (if, looping, function, ...)

● Sintaks Javascript untuk DOM Manipulation tidak dapat berjalan di NodeJS

● Dialog seperti alert dan confirm tidak dapat digunakan di NodeJS● Untuk membangun sebuah aplikasi web Anda dapat menggunakan

NodeJS sebagai server side scripting disamping PHP, JSP, dan ASP

Referensi

● NodeJS Succintly● NodeJS Up and Running

(http://chimera.labs.oreilly.com/books/1234000001808/index.html)

● Node Book (http://book.mixu.net/node/)

Google it:

selayang pandang javascript dan nodejs

Documents