Workshop Js Nodejs 140718210047 Phpapp02

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
Catatan: Simpan di file dengan nama helloworld.html
<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>
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..");
}
Catatan: Simpan di file dengan nama kondisional.html

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>
Pengulangan di Javascript
Catatan: Simpan di file dengan nama pengulangan.html
<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>
Fungsi di Javascript
Catatan: Simpan di file dengan nama fungsi.html
<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>
Callback di Javascript
Catatan: Simpan di file dengan nama callback.html
<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/>");
}
----------------------------------------------------------------
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` (ìd_mahasiswa`, `nama`, `nim`, èmail`, `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 htmlswig.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="marginbottom: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
Google it:
NodeJS Succintly
NodeJS Up and Running
(http://chimera.labs.oreilly.com/books/1234000001808/i
ndex.html)
Node Book (http://book.mixu.net/node/)

Workshop Js Nodejs 140718210047 Phpapp02

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Workshop Js Nodejs 140718210047 Phpapp02

Diunggah oleh

Hak Cipta:

Format Tersedia

Selayang Pandang Javascript dan

Diselenggarakan oleh OSTRIC

Apa itu Javascript ?

Script yang berjalan di browser. Disebut juga clientside scripting

Diciptakan oleh Brendan Eich dari Netscape

Engine yang mendukung Javascript diantaranya: SpiderMonkey

// menampilkan Hello World di dialog peringatan

Catatan: Simpan di file dengan nama kondisional.html

else if (umur > 30 && umur <= 50){

Menangani Event di Javascript

Menangani Event di Javascript

------------------------------------------------------------// membuat fungsi yang digunakan saat tombol reset diklik

Menangani Event di Javascript

Manipulasi DOM Sederhana

Manipulasi DOM Sederhana

Validasi Form Sederhana

Validasi Form Sederhana

Validasi Form Sederhana

Apa itu NodeJS ?

Javascript sebagai server side scripting

Diciptakan oleh Ryan Dahl dari Joyent

Dibangun diatas engine V8 Javascript yang dikembangkan oleh

Linux: unduh installernya, ekstrak dengan perintah: tar -xzvf

Eksekusi kode javascript dengan NodeJS menggunakan perintah berikut:

Eksekusi file request-handling.js dengan perintah: node request-handling.js

Buatlah database dengan nama node_mysql kemudian buat tabel berikut

Isilah terlebih dahulu tabel mahasiswa tersebut dengan sampel berikut:

INSERT INTO `mahasiswa` (`id_mahasiswa`, `nama`, `nim`, `email`, `prodi`)

var mysql = require('mysql');

Jalankan file hellomysql.js dengan perintah: node hellomysql.js

ridwanbejo@ridwanbejo:/NodeJS Mania/labs/node-basic$ node hellomysql.js

Untuk menampilkan HTML, kita akan menggunakan bantuan Swig

var http = require('http');

Mengirim Data dari Form Method POST

Mengirim Data dari Form Method POST

----------------------------------------------------------else if (pathname == '/mahasiswa/add/process'){

Mengirim Data dari Form Method POST

Mengirim Data dari Form Method POST

Jalankan file form.js dengan perintah: node form.js

Mengirim Data dari Form Method POST

Ketika mengklik tombol Tambah, maka data dari form akan

NodeJS adalah Javascript yang digunakan untuk server side scripting

Anda mungkin juga menyukai