PANDUAN PRAKTIKUM PEMROGRAMAN WEB CLIENT (1 SKS 8 Pertemuan) Penyusun: Wagito, S.T., M.T

PANDUAN PRAKTIKUM PEMROGRAMAN WEB CLIENT (1 SKS – 8 Pertemuan)

Penyusun: Wagito, S.T., M.T. ([email protected])

LABORATORIUM STMIK AKAKOM YOGYAKARTA 2004

[email protected]: Prak. Pemrograman Web Client

MODUL 1 TOOL BLUEFISH Tujuan • Memperkenalkan tool bluefish • Melatih menggunakan tool bluefish • Mencoba membuat skript HTML dengan bluefish Teori Bluefish adalah tool yang digunakan untuk membantu membuat kode-kode HTML maupun skrip pendukungnya semacam javascript maupun php. Software dan Hardware • bluefish • linux • browser • komputer Praktik Login pada sistem linux sebagai user Bukalah tool bluefish dengan perintah K|Networking|www|bluefish Akan ditampilkan hasil berikut

Ketikkan kode-kode html berikut <TITLE>PENGENALAN JARINGAN KOMPUTER
PENGENALAN JARINGAN KOMPUTER

A. Perangkat Keras Network

Perangkat keras yang dibutuhkan dalam suatu network sangat tergantung pada konfigursi yang digunakan untuk menyusun network, jenis media transmisi data, serta besar kecilnya janghkauan network. Secara umum suatu network memerlukan perangkat keras sebagai berikut.

server

workstation

NIC (Network Interface Card)

hub/konsentrator

brigde

switch
2


repeater

router

sistem kabel

Server

Suatu server merupakan hati dari kebanyakan network. Server biasanya merupakan komputer berkecepatan tinggi dengan kapasitas memori (RAM) dan simpanan yang besar, dan dihubungkan dengan antarmuka jaringan yang cepat (fast network interface).

Workstation

Semua komputer yang terhubung ke server pada jaringan disebut dengan workstation. Workstation merupakan komputer standar komputer yang dikonfigurasi menggunkan kartu antarmuka jaringan, perangkat lunak jaringan dan kabel-kabel yang diperlukan.

NIC (Network Interface Card)

NIC merupakan pealatan yang memungkinkan terjadinya hubungan antara network dengan komputer workstation atau network dengan komputer server.

Hub/Konsentrator

Hub merupakan pusat koneksi semua node pada jaringan serta semua jaringan dihubungkan satu dengan yang lain melalui Hub. Hub bertindak sebagai titik pengendali untuk aktivitas sistem, pengelolaan serta pengembangan jaringan

Bridge

Bridge adalah alat yang memungkinkan untuk membagi suatu jaringan yang besar dalam dua jaringan yang lebih kecil, sehingga menjadi jaringan yang lebih efisien
Switch

Switch LAN adalah peralatan multiport, masing-masing dapat mendukung satu workstation atau semua ethernet.
Repeater

Repeater adalah alat yang dapat menguatkan (boost) isyarat jaringan yang melintasinya.

router

Router digunakan untuk mengubah informasi dari suatu network ke network yang lain. Router mirip dengan bridge supercerdas (superitellegent bridge).

Sistem Kabel

Kabel sebagai media transmisi terlindung dapat dikategorikan dalam dua kelompok utama yaitu:

penghantar elektrik (electrical conductor), dan

serat optik (fiber optic)

Masing-masing kategori mempunyai banyak variasiKabel yang dikelompokkan dalam kategori penghantar elektrik yaitu TP (twisted-pair) dan koaksial (coaxial).

B. Perangkat Lunak Network

Untuk sistem server dapat digunakan beberapa sistem operasi seperti

Linux

Windows Nt

Windows 2000

Windows XP

Untuk sistem client dapat digunakan sistem operasi

Linux
3


Windows Nt

Windows 2000

Windows XP

Windows 98

Windows 95

Tugas 1. Buatlah agar semua tulisan berubah menjadi hijau 2. Buatlah agar semua tulisan berukuran 14 3. Buatlah agar semua tulisan berubah menjadi huruf tebal 4. Buatlah agar semua tulisan rata kanan 5. Buatlah agar semua tulisan rata tengah

4


MODUL 2 LINK DAN TABEL Tujuan • Mengenalkan pada mahasiswa bagimana me-link suatu halaman web • Mengenalkan kepada mahasiswa bagaimana menyusun suatu tabel Teori Ada beberapa link yang dapat dibuat dari suatu halaman web. Umumnya link dilakukan untuk menunjuk pada halaman lain atau menunjuk suatu alamat email sintaks untuk link ke halaman web adalah tampilan contohnya: http://www.yahoo.com sintaks untuk link ke suatu e-mail tampilan contohnya: e-mail cahpinter Kemampuan lain HTML adalah dalam pembuatan tabel. Tabel dalam HTML mempunyai sintaks sebagai berikut .......

. . . . .

. . . . .
contohnya:

Nama Alamat Telepon

Cah Pinter 5647863

Cah Kuat Semarang 4785643

Sofware dan Hardware • bluefish • linux • browser • komputer Praktik Bukalah tool bluefish Ketikkan kode-kode berikut 5


Halaman Link Pertama
JARINGAN KOMPUTER

Ada beberapa hal yang berhubungan dengan jaringan komputer antara lain

server

workstation

NIC (Network Interface Card)

hub/konsentrator

brigde

switch

repeater

router

sistem kabel

Simpanlah dengan nama linkpertama.html Buatlah juga halaman web baru yang lain Ketikkan kode-kode berikut <TITLE>Jaringan Komputer Perangkat Keras Network

Perangkat keras yang dibutuhkan dalam suatu network sangat tergantung pada konfigursi yang digunakan untuk menyusun network, jenis media transmisi data, serta besar kecilnya janghkauan network. Secara mudahnya beberapa hal yang berhubungan dengan hardware dapat dilihat di http://www.network.com yang berisi uraian umum perangkat keras network

Berikut adalah jenis-jenis kabel yang dipakai untuk jaringan komputer
6


Kabel Konduktor

Coaxial

thin coaxial

thick coaxial

Twisted Pair

STP

UTP

Serat Optik

Serat Optik

Serat Optik

Jika anda belum jelas tentang yang sudah diuraikan di atas, silakan kontak melalui [email protected]

Yogyakarta 2004

Simpanlah dengan nama linktabel.html Jalankan dengan browser Klik bagian yang ada link http-nya, amati yang terjadi Klik bagian yang ada link e-mail, amati yang terjadi Tugas 1. Bagaimana membuat link pada suatu gambar (image) 2. Bagaimana membuat link pada suatu file audio (mp3) 3. Buatlah kode HTML untuk bentuk tabel berikut ini Data Masukan Mahasiswa Nama Cah Pinter Cah Ayu

Data Pribadi Alamat Yogyakarta Magelang

Olah Raga Bulu Tangkis Renang

Kesukaan Kesenian Melukis Menari

7


MODUL 3 FORM Tujuan • Mengenalkan pada mahasiswa bagaimana membentuk suatu form • Mengenalkan pada mahasiswa macam-macam kontrol yang dapat dibuat dengan form Teori Form HTML adalah bagian dari dokumen yang dapat terdiri dari isi normal, markup dan elemen khusus yang disebut kontrol. Kontrol dalam form dapat berupa sebagai berikut. • button : Tombol yang memungkinkan untuk mengambil event klik mouse dari halaman situs. Ada tiga macam tombol yaitu submit, reset dan push • checkbox : switch on/off untuk menentukan pilihan yang secara automatis dapat diubah kondisinya oleh user dengan klik mouse. Pilihan dengan check box dapat lebih dari satu. • radio button : switch on/off untuk menentukan pilihan yang secara automatis dapat diubah kondisinya oleh user dengan klik mouse. Pilihan dengan radio button hanya dapat memilih salah satu. • menu : memungkinkan user menentukan pilihan dengan menu. • text input : memungkinkan user memasukkan data dengan car mengetikkan pada lokasi input tertentu. • file select : memungkinkan user untuk memilih suatu file dari daftaer seluruh file yang ada dalam simpanannya • hidden control : memungkinkan penyembunyian suatu kontrol • object control : memungkinkan untuk menyisipkan suatu objek dalam form. Sintak yang digunakan
............
Data yang dibuat dengan form dapat dijalankan dioleh menggunakan CGI.

Software dan Hardware • bluefish • linux • browser • komputer

8


Praktik Bukalah tool bluefish Ketikkan program berikut ini <TITLE>DATA PRIBADI
ISIAN DATA PRIBADI

Nama
Alamat
Telepon
Pekerjaan <select name=pekerjaan>
Jenis Kelamin Pria
Usia

Simpanlah dengan nama formdata.html Jalankan file tersebut Tampilan yang dihasilkan tidak rapi, biasanya untuk mengtur format penampilan dihunakan kombinasi form dan table. Cobalah ketikkan skrip HTML berikut <TITLE>DATA PRIBADI
ISIAN DATA PRIBADI

9


Nama

Alamat

Telepon

Pekerjaan <select name=pekerjaan>

Jenis Kelamin Pria

Usia

Simpanlah dengan nama formdata1.html Jalankan file tersebut

Tugas 1. Buatlah tampilan berikut ini

2. Buatlah tampilan berikut ini

3. nskskskk

10


MODUL 4 FRAME Tujuan • Mengenalkan pada mahasiswa bagaimana membuat frame pada halaman web • Mendayagunakan kemampuan frame Teori Frame memungkinkan mebagi layar halaman web dalam beberapa bagian. Dengan frame beberapa dokumen dapat dimunculkan secara bersama dalam satu halaman. Tag yang digunakan mempunyai bentuk sebagai berikut atau Untuk melibatkan frame pada halaman web memang kadang banyak dokumen. Minimal tiga dokumen. Software dan Hardware • bluefish • linux • browser • komputer Praktik Bukalah tool bluefish Ketikkan program berikut ini Tentang Jaringan Komputer

Simpanlah dengan nama frame.html 11


Dokumen ini berlaku sebagai frame utama dari halaman web yang dibuat. Buatlah juga halaman web baru dan ketikkan kode-kode berikut Indeks
DAFTAR ISI

Jaringan Komputer

Server

Workstation

Simpanlah dengan nama frameindeks.html Halaman ini berlaku sebagai halaman indeks untuk frame yang dibuat. Buatlah halaman baru untuk isi frame pertama Tuliskan kode-kode berikut Jaringan Komputer
JARINGAN KOMPUTER

Ada beberapa hal yang berhubungan dengan jaringan komputer antara lain

Server

work station, dan

penghubung

Simpanlah dengan nama frame1.html Halaman ini sebagai tampilan awal dari frame. Buatlah juga halaman web baru Kemudian tuliskan kode-kode berikut Server

SERVER
Suatu server merupakan hati dari kebanyakan network.
Server biasanya merupakan komputer berkecepatan tinggi
dengan kapasitas memori (RAM) dan simpanan yang besar,
dan dihubungkan dengan antarmuka jaringan berkecepatan tinggi.

12


Simpanlah dengan nama frame2.html Buatlah kembali halaman web baru Tuliskan kode-kode berikut Workstation

WORKSTATION
Semua komputer yang terhubung ke server pada
jaringan disebut dengan workstation.
Workstation merupakan komputer standar komputer
yang dikonfigurasi menggunkan kartu antarmuka jaringan,
perangkat lunak jaringan dan kabel-kabel yang diperlukan.

Simpanlah dengan nama frame3.html Jalankan dokumen frame.html Amati yang terjadi Tugas 1. Buatlah frame baru dengan pola ke arah baris sebagai berikut

2. Bagimana Anda membuat pola frame berikut

13


MODUL 5 DASAR-DASAR JAVASCRIPT Tujuan • Mengenalkan dasar-dasar pemrograman javascript • Mengenalkan bentuk struktur input/output • Mengenalkan tentang struktur kontrol Teori Javascript adalah program skrip yang biasa digunakan dalam pemrograman web sisi client. Javascript akan dieksekusi oleh interpreter yang dibawa oleh suatu browser dan hasilnya ditampilkan oleh tampilan browser tersebut. Browser seperti Netscape maupun IE yang ada sekarang sudah mendukung pemrograman javascript ini. Seperti bahasa pemrograman lain, javascript juga mendukung struktur input/output maupun struktur kontrol (kondisional dan perulangan). Untuk menampilkan keluaran pada browser document.write(“tampilan keluaran”); Untuk mengambil data dari papan ketik var nama_variable = prompt(“Pesan”, “default masukan”) Bentuk struktur kondisional if( kondisi ) { perintah; } else { perintah lain; } Bentuk struktur perulangan while ( kondisi ) { perintah; } Perulangan lain yang didukung adalah do … while dan for() Software dan Hardware • bluefish • linux • browser • komputer Praktik Bukalah tool bluefish Ketikkan program berikut ini 14


<SCRIPT LANGUAGE="javascript"> /* Tulisan ini hanya berlaku sebagai judul Program Javascript yang pertama */ //Tanda ini hanya sebagai komentar //Menampilkan Tulisan document.write("DASAR-DASAR JAVASCRIPT
") document.write("
"); //Script tentang waktu d = new Date(); document.write("HARI INI
"); document.write("tanggal : "+d.getDate()+"-"+(d.getMonth()+1)+"-"+d.getFullYear()+"
"); document.write("tanggal : "+d.getHours()+":"+d.getMinutes()+"."+d.getSeconds()+"
"); document.write("
"); //script ini untuk mengambil data dari papan ketik var nama = prompt ("Tulis nama anda di bawah",""); //script ini memberi contoh kondisional if if(nama=="") { document.write("Anda tidak memasukkan nama
"); } else { document.write("Hai " + nama + "
Bagaimana kabar Anda?
"); } //script ini memberi contoh perulangan for document.write("Angka ditampilkan dengan perulangan
"); for (i=1; i<=7; i=i+1) { document.write("Ini angka " + i + "
"); }

Simpanlah dengan nama belajar.html Jalankan program dengan web browser Tugas: 1. Ubahlah program di atas agar muncul tampilan prompt berikut. 2. Ubahlah program di atas untuk menggantikan perintah if dengan perintah switch(). 3. Ubahlah struktur perintah for () pada program di atas menggunakan struktur while 4. Ubahlah juga perintah for () pada program di atas menggunakan struktur do … while 15


MODUL 6 FUNGSI Tujuan • Mengenalkan pada mahasiswa bagaimana membuat fungsi dengan javascript Teori Seperti pada bahasa pemrograman yang lain, javascript juga mengenal tentang fungsi. Untuk mendeklarasikan suatu fungsi digunakan sintaksis sebagai berikut function nama_fungsi(parameter) { tubuh fungsi; return (var_return); } Fungsi dalam javascrpt dapat menghasilkan nilai balik (return), dapat juga tidak menghasilkan nilai balik, dalam hal ini fungsi hanyalah sekadar penggalan program. Software dan Hardware • bluefish • linux • browser • komputer Praktik Bukalah tool bluefish Ketikkan skrip berikut ini <SCRIPT LANGUAGE="javascript"> // fungsi menampilkan function data(nama, alamat, telepon) { hasil=""; hasil += "DATA PRIBADI
"; hasil += "Nama : "+nama+"
"; hasil += "ALamat : "+alamat+"
"; hasil += "Telepon : "+telepon+"
"; return hasil; } function suka(olahraga, kesenian, pelajaran) { document.write("DATA KESUKAAN
"); document.write("Olahraga : "+olahraga+"
"); 16


document.write("Kesenian : "+kesenian+"
"); document.write("Pelajaran : "+pelajaran+"
"); } document.write("DATA PERTAMA
"); hasil=data("Ilham", "Yogyakarta", "0816685988"); document.write(hasil); document.write("
"); suka("Aletik", "Menggambar", "Fisika"); document.write("

"); document.write("DATA KEDUA
"); hasil=data("Ismah", "Yogyakarta", "0274-418288"); document.write(hasil); document.write("
"); suka("Bulu Tangkis", "Menari", "Matematika"); document.write("

");

Simpanlah dengan nama fungsi.html Jalankan pada browser Lihatlah hasilnya Tugas 1. Apa perbedaan prinsip antara fungsi data() dan suka() 2. Ubahlah fungsi data() menjadi bentuk tanpa return 3. Ubahlah fungsi suka() dalam bentuk menggunakan return

17


MODUL 7 EVENT HANDLER Tujuan • Mengenalkan kepada mahasiswa tentang event handler Teori Event handler adalah penanganan kejadian yang diberikan pada suatu halaman web. Kejadian yqng dimaksud misalkan klik mouse, penunjuk mouse melintas dan sebagainya. Event handler merupakan bagian dari javascript yang telah berhasil menyatu secara pehuh dengan kode HTML tanpa harus menyebutkan bahwa perintah tersebut kode javascript. Beberapa event handler adalah • onClick • onMouseOver • onFocus • onBlur • onChange • onSelect • onSubmit • onLoad • onUnload Software dan Hardware • bluefish • linux • browser • komputer Praktik Bukalah tool bluefish Buatlah skrip berikut ini <SCRIPT LANGUAGE="javascript"> function melintas() { window.status="Ada mouse yang melintas di atasnya"; document.bgColor="GREEN"; return true; } function melintas2() { alert("Jangan kaget, ada yang muncul"); return true; } function klik() { 18


alert("Jangan kaget lagi, akibat kamu KLIK"); return true; }
Berikut ini diterangkan bagaimana event handler bekerja
Event handle pertama yang dipelajari adalah onMouseOver
yang maksudnya
jika ada mouse yang melintas pada suatu link,
maka browser akan mengerjakan sesuatu
Jika mouse Anda lewatkan pada link berikut
situs yahoo
maka status bar akan menunjukkan pesan
lihatlah pesan tersebut
Selain itu, warna latar juga akan diubah menjadi HIJAU
Untuk mengembalikan seperti semula, di REFRESH saja

Yang ini juga masih menggunakan event onMouseOver
tetapi dengan efek yang berbeda
Jika Anda melintaskan mouse diatasnya
maka akan muncul pesan pada browser anda
Situs Altavista
Tekanlah tombol OK, untuk kembali ke browser

Sedangkan yang berikut ini, kita melihat bagaimana
jika suatu link terkena KLIK
Jika mouse hanya melintas saja, belum menimbulkan pengaruh
tetapi jika link ini ANda KLIK mouse
perhatikan yang terjadi
situs yahoo.com
Akan muncul pesan juga seperti sebeumnya
Klik tombol OK, kemudian halaman web silakan di REFRESH

JANGAN LUPA MENGERJAKAN TUGAS-TUGAS

Simpanlah dengan nama event.html Jalankan skrip dengan browser Amati yang terjadi

19


Tugas 1. Buatlah program yang melibatkan event handler • onFocus • onBlur • onChange • onSelect • onSubmit • onLoad • onUnload masing-masing dalam satu program 2. Apakah maksud dari masing-masing event tersebut? 3. Carilah jenis event handler yang lain, yang dapat ditangani javascript

20


MODUL 8 MEMBUKA JENDELA BARU Tujuan • Mengenalkan kepada mahasiswa bagaimana membuka jendela baru • Mengenalkan efek lain ketika suatu link dikenakan klik mouse Teori Membuka jendela baru adalah kemampuan javascript untuk membentuk jendela baru tanpa menutup/mengganti jendela lama. Untuk membuka jendela baru digunakan perintah window.open('url', 'nama window', configurasi='parameter') Beberapa parameter configurasi yang dapat digunakan untuk membuka jedela baru adalah sebagai berikut •

height=nilai dan width=nilai

•

toolbar="yes" atau "no"

•

menubar="yes" atau "no"

•

scrollbars="yes" atau "no"

•

resizable="yes" atau "no"

•

location="yes" atau "no"

•

directories="yes" atau "no"

•

status="yes" atau "no"

Untuk menutup jendela yang sudah terbuka dapat digunakan beberpa perintah berikut • window.close() • self.close() • close() Anda dapat menggunakan salah satunya. Sofware dan Hardware • bluefish • linux • browser • komputer Praktik Bukalah tool bluefish Ketikkan skrip berikut ini

21


<TITLE>Jendela yang dibuka
SELAMAT ANDA BERHASIL MEMBUKA JENDELA BARU
Jendela ini dibentuk menggunakan file yang berbeda
Beberapa parameter bisa diatur tentang tinggi dan lebar,
toolbar, menubar, scrollbar dan sebagainya.
Perhatikan pada jendela ini,
apakah terdapat menubar atau toolbar?
Dapatkah Anda memunculkannya
Silakan tutup jedela ini dengan klik link berikut
TUTUP JENDELA

Simpanlah dengan nama jendela.html Bukalah dokumen baru dengan menu File|New Buatlah skript berikut ini <TITLE>Jendela Utama <SCRIPT LANGUAGE="JavaScript"> function buka_pertama() { window.open("jendela.html", "jedelabaru", config="height=300,width=300"); } function buka_kedua() { window.open("jendela.html", "jedelabaru", config="height=300,width=300, menubar=yes"); }
Berikut ini diberikan contoh untuk membuka
jendela baru, tanpa metutup jendela yang ini.
Coba saja klik pada link di bawah ini
Klik disini supaya jendelanya keluar
Coba dicermati hasil jendela yang muncul

Link yang ini juga akan membuka jendela baru
tetapi beberapa fasilitas ditampilkan, seperti
22


toolbar dan menubar. Cobalah klik link di bawah ini
Klik disini supaya jendelanya keluar
Amati bentuk jendela dan perbedannya dengan yang pertama

Simpanlah dengan nama utama.html Kemudian jalankan menggunakan browser Tugas: 1. Ubahlah skrip di atas supaya toolbars dan statusbar dapat muncul pada jendela 2. Ubahlah kembali skrip tersebut agar jedela yang dimunculkan dapat diubah-ubah ukurannya dengan mouse 3. Jendela baru tidak harus dibuka dari file lain, berikan contohnya

23

Kabel Konduktor	Coaxial	thin coaxial
		thick coaxial
	Twisted Pair	STP
		UTP
Serat Optik	Serat Optik	Serat Optik

Nama
Alamat
Telepon
Pekerjaan	<select name=pekerjaan>
Jenis Kelamin	Pria
Usia

PANDUAN PRAKTIKUM PEMROGRAMAN WEB CLIENT (1 SKS 8 Pertemuan) Penyusun: Wagito, S.T., M.T

Recommend Documents

PENGENALAN JARINGAN KOMPUTER

A. Perangkat Keras Network

B. Perangkat Lunak Network

JARINGAN KOMPUTER

ISIAN DATA PRIBADI

ISIAN DATA PRIBADI

DAFTAR ISI

JARINGAN KOMPUTER

SERVER

WORKSTATION