- Apa itu Javascript
- Hello World Javascript
- Kondisional di Javascript
- Pengulangan di Javascript
- Fungsi di Javascript
- Callback
- Menangani Event di Javascript
- Manipulasi DOM Sederhana
- Validasi Form Sederhana
- Apa itu NodeJS
- Hello World NodeJS
- Request Handling
- Koneksi NodeJS ke RDBMS MySQL
- Menampilkan Halaman HTML dengan Swig
- Mengirim Data dari Form Swig
1. 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
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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>
9. 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...');
};
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
10. Menangani Event di Javascript
Catatan: Simpan di file dengan nama menangani-event.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// 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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
12. 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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
13. 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>
14. 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');
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
17. 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 !
18. 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
19. 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');
20. Hello World
Catatan: Simpan di file dengan nama hello.js
Eksekusi kode javascript dengan NodeJS menggunakan perintah berikut:
node namafile.js
21. 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();
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
22. Request Handling
Catatan: Simpan di file dengan nama request-handling.js
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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');
23. Request Handling
Catatan: Simpan di file dengan nama request-handling.js
● 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
24. Hello MySQL
● Buatlah database dengan nama node_mysql kemudian buat tabel berikut
didalamnya:
CREATE TABLE IF NOT EXISTS `mahasiswa` (
`id_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(30) NOT NULL,
`nim` int(8) NOT NULL,
`email` varchar(30) NOT NULL,
`prodi` varchar(50) NOT NULL,
PRIMARY KEY (`id_mahasiswa`)
) ;
25. 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');
26. 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();
27. 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' } ]
28. 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
29. 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>
32. 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
33. Mengirim Data dari Form Method POST
Catatan: Simpan di file dengan nama form.js
// memanggil module NodeJS yang diperlukan oleh aplikasi JobsPool
var 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 POST
var 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();
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
34. Mengirim Data dari Form Method POST
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
server.listen(8084);
console.log('Server is running on port 8084');
35. Mengirim Data dari Form Method POST
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>
36. Mengirim Data dari Form Method POST
● Jalankan file form.js dengan perintah: node form.js
● Akses localhost:8084 di browser
● Masukkan beberapa data seperti pada gambar berikut:
37. Mengirim Data dari Form Method POST
● Ketika mengklik tombol Tambah, maka data dari form akan
terkirim ke server
● Berikut adalah gambar dari data POST yang diterima oleh
server:
38. 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
39. 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: