Selayang Pandang Javascript dan NodeJS

Selayang Pandang Javascript dan
NodeJS
Diselenggarakan oleh OSTRIC
Pukul 09.00 s/d 12.00, 19 Juli 2014
Laboratorium Umum, Ilmu Komputer
FPMIPA, 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>
var umur = 23;
if (umur <= 15){
console.log("masih bocah..");
}
else if (umur > 15 && umur <= 20){
console.log("beranjak remaja..");
}
console.log("sudah dewasa..");
}
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>
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>
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>
// 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>
// 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>
// 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>
</form>
</body>
</html>

Validasi Form Sederhana
Catatan: Simpan di file dengan nama validasi-form-sederhana.html
<html>
<head>
<title>Validasi Form Sederhana</title>
// 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, 'lynda@gmail.com', 'ilmu komputer'),
(2, 'arlyn', 805678, 'arlyn@yahoo.com', 'pendidikan ilmu komputer'),
(3, 'jarwo', 909934, 'jarwo@gmail.com', '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: 'lynda@gmail.com',
prodi: 'ilmu komputer' },
{ id_mahasiswa: 2,
nama: 'arlyn',
nim: 805678,
email: 'arlyn@yahoo.com',
prodi: 'pendidikan ilmu komputer' },
{ id_mahasiswa: 3,
nama: 'jarwo',
nim: 909934,
email: 'jarwo@gmail.com',
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 mysql = require('mysql');
var swig = require('swig');
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();
}
});

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 JobsPool
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 POST
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 server

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/i
ndex.html)
● Node Book (http://book.mixu.net/node/)
Google it:

Selayang Pandang Javascript dan NodeJS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Ähnlich wie Selayang Pandang Javascript dan NodeJS

Ähnlich wie Selayang Pandang Javascript dan NodeJS (20)

Mehr von Ridwan Fadjar

Mehr von Ridwan Fadjar (20)

Selayang Pandang Javascript dan NodeJS