• Like
Selayang Pandang Javascript dan NodeJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Selayang Pandang Javascript dan NodeJS

  • 503 views
Published

- Apa itu Javascript …

- 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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
503
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
56
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  • 11. Menangani Event di Javascript Catatan: Simpan di file dengan nama menangani-event.html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <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>
  • 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'); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  • 15. Validasi Form Sederhana Catatan: Simpan di file dengan nama validasi-form-sederhana.html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  • 16. Validasi Form Sederhana Catatan: Simpan di file dengan nama validasi-form-sederhana.html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </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>
  • 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>
  • 30. 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); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  • 31. 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');
  • 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: