Professional Documents
Culture Documents
Pemrograman Web
PEMROGRAMAN WEB
Politeknik Telkom
Pemrograman Web
Dilarang menerbitkan kembali, menyebarluaskan, atau menyimpan baik sebagian maupun seluruh isi buku dalam bentuk dan dengan cara apapun tanpa izin tertulis dari Politeknik Telkom Hak cipta dilindungi undang-undang @ Politeknik Telkom 2008 No part of this document may be copied, reproduced, printed, distributed, modified, removed and amended in any form by any means without prior written authorization of Telkom Polytechnic. Copyright @ 2008 Telkom Polytechnic. All rights reserved
ii
Politeknik Telkom
Pemrograman Web
KATA PENGANTAR
Assalamualaikum Wr. Wb Segala puji bagi Allah SWT karena dengan karunia-Nya courseware ini dapat diselesaikan. Atas nama Politeknik Telkom, kami sangat menghargai dan ingin menyampaikan terima kasih kepada penulis, penerjemah dan penyunting yang telah memberikan tenaga, pikiran, dan waktu sehingga courseware ini dapat tersusun. Tak ada gading yang tak retak, di dunia ini tidak ada yang sempurna, oleh karena itu kami harapkan para pengguna buku ini dapat memberikan masukan perbaikan demi pengembangan selanjutnya. Semoga courseware ini dapat memberikan manfaat dan membantu seluruh Sivitas Akademika Politeknik Telkom dalam memahami dan mengikuti materi perkuliahan di Politeknik Telkom. Amin. Wassalamualaikum Wr. Wb. Bandung, Desember 2007
iii
Politeknik Telkom
Pemrograman Web
DAFTAR ISI
KATA PENGANTAR ............................................................................................................. iii DAFTAR ISI .............................................................................................................................. iv DAFTAR GAMBAR ................................................................................................................ ix DAFTAR TABEL...................................................................................................................... xi 1 PENGANTAR PEMROGRAMAN WEB ............................................................ 1-1 1.1 Pendahuluan ............................................................................................................. 1-2 1.2 Sejarah Internet ....................................................................................................... 1-2 1.3 Konsep Dasar Internet ......................................................................................... 1-4 1.3.1 HTTP (Hypertext Transfer Protocol) ...................................................................... 1-4 1.3.2 URL (Uniform Resource Locator) ...................................................................... 1-5 1.3.3 Protokol Transfer ................................................................................................... 1-5 1.3.4 DNS (Domain Names System) ............................................................................ 1-6 1.4 Konsep Dasar World-Wide Web (WWW)..................................................... 1-7 1.5 Istilah-istilah Internet.............................................................................................. 1-8 1.5.1 E-mail (Electronic Mail) ............................................................................................ 1-8 1.5.2 Homepage ................................................................................................................ 1-8 1.6 Tool pada Client/Server ........................................................................................ 1-9 1.6.1 Browser .................................................................................................................... 1-9 1.6.2 Web Server.............................................................................................................. 1-9 1.6.3 Database Server ...................................................................................................... 1-9 2 DESIGN HALAMAN WEB ................................................................................... 2-1 2.1 Pengenalan HTML ................................................................................................... 2-2 2.1.1 HTML Editor............................................................................................................ 2-2 2.1.2 Struktur Dasar HTML............................................................................................ 2-3 2.2 Memformat Dokumen HTML .............................................................................. 2-5 2.2.1 Bagian Body .............................................................................................................. 2-5 2.2.2 Membuat Heading ................................................................................................... 2-5 2.2.3 Memformat Paragraf............................................................................................... 2-7 2.2.4 Line Breaks ............................................................................................................... 2-8 2.2.5 Teks Preformat ..................................................................................................... 2-10 2.2.6 Memformat Bentuk Tulisan ................................................................................ 2-11 2.2.7 Tag Font .................................................................................................................. 2-12 2.2.8 Karakter Spesial .................................................................................................... 2-14 2.2.9 Membuat Garis Horizontal ................................................................................. 2-16 2.3 List............................................................................................................................ 2-18 2.3.1 List Tanpa Urutan (Unordered Lists)................................................................... 2-18 2.3.2 List Berurut (Ordered Lists) .............................................................................. 2-19 2.3.3 Definition Lists ...................................................................................................... 2-22 2.3.4 List Bersarang (Nested Lists) ............................................................................. 2-23 3 LINK DAN GAMBAR............................................................................................ 3-1 3.1 Link ............................................................................................................................ 3-2
iv
Politeknik Telkom
Pemrograman Web
3.1.1 Membuat Link antar Dokumen HTML ............................................................... 3-3 3.1.2 Relative Links versus Absolute Pathnames ........................................................ 3-4 3.1.3 Membuat Link ke Bagian Tertentu dalam Dokumen ....................................... 3-6 3.2 Gambar ..................................................................................................................... 3-8 3.2.1 Gambar sebagai Hyperlink .................................................................................. 3-10 <BR><BR> .......................................................................................................................... 3-10 4 FORM ........................................................................................................................ 4-1 4.1 Form .......................................................................................................................... 4-2 4.2 Membuat Input Field .............................................................................................. 4-3 5 LAYOUT HALAMAN WEB ................................................................................. 5-1 5.1 Tabel .......................................................................................................................... 5-2 5.1.1 Membuat Tabel........................................................................................................ 5-2 5.1.2 Menambahkan Judul Tabel .................................................................................... 5-3 5.1.3 Memformat Baris .................................................................................................... 5-4 5.1.4 Memformat Kolom ................................................................................................. 5-5 5.1.5 Mengatur CELLSPACING dan CELLPADDING .............................................. 5-7 5.1.6 Lebih Lanjut dengan Tabel .................................................................................... 5-8 5.2 Frame....................................................................................................................... 5-10 5.2.1 Frame Syntax ......................................................................................................... 5-11 5.2.2 Frame Target ......................................................................................................... 5-13 5.2.3 Penggunaan Frame ................................................................................................ 5-13 6 CSS ( Cascading Style Sheet) ................................................................................ 6-1 6.1 Keuntungan Menggunakan CSS ............................................................................ 6-2 6.2 Penempatan CSS ..................................................................................................... 6-2 6.2.1 Inline Style Sheet ..................................................................................................... 6-2 6.2.2 Embedded Style Sheet ........................................................................................... 6-3 6.2.3 Linked Style Sheet................................................................................................... 6-4 6.3 Aturan Penulisan pada CSS ................................................................................... 6-5 6.4 CSS Selector ............................................................................................................ 6-6 6.5 CSS untuk Memanipulasi Font .............................................................................. 6-9 6.6 CSS untuk Memanipulasi Color dan Background ........................................... 6-10 6.7 CSS untuk Memanipulasi List.............................................................................. 6-11 6.8 CSS untuk Memanipulasi Text ........................................................................... 6-11 6.9 CSS untuk Memanipulasi Table .......................................................................... 6-12 7 PEMROGRAMAN JAVASCRIPT ......................................................................... 7-1 7.1 Pengantar Pemrograman Client Side dan Server Side......................................... 7-2 7.2 Pengantar Javascript................................................................................................ 7-3 7.2.1 Struktur Dasar JavaScript ...................................................................................... 7-3 7.2.2 Meletakkan JavaScript dalam Dokumen HTML ................................................ 7-5 7.3 Tipe Data dasar ....................................................................................................... 7-8 7.3.1 Mendeklarasikan Variabel ...................................................................................... 7-8 7.3.2 Jangkauan dari Variabel ........................................................................................ 7-10 7.4 Tipe Data (Literal) ................................................................................................ 7-10 7.4.1 Integer(bilangan bulat).......................................................................................... 7-11
v
Politeknik Telkom
Pemrograman Web
7.4.2 7.4.3 7.4.4 7.5 7.5.1 7.5.2 7.6 7.6.1 7.6.2 7.6.3 7.6.4 7.6.5 7.6.6 7.6.7 7.6.8 7.7 7.8 8 8.1 8.1.1 8.1.2 8.2 8.2.1 8.2.2 8.2.3 8.2.4 8.3 8.3.1 8.3.2 9 9.1 9.1.1 9.1.2 9.1.3 9.1.4 9.2 9.2.1 9.2.2 9.2.3 9.2.4 9.2.5 10 10.1 10.1.1
Float (bilangan desimal)........................................................................................ 7-11 String .................................................................................................................... 7-11 Booleans ................................................................................................................. 7-12 Konversi Jenis Variabel ........................................................................................ 7-12 parseInt() ................................................................................................................ 7-12 parseFloat() ............................................................................................................ 7-13 Operator ................................................................................................................ 7-13 Operator Pemberi Nilai (Assignment operator) ............................................ 7-13 Operator Perhitungan (Arithmetic Operator) ............................................... 7-14 Operator Afektasi................................................................................................. 7-15 Operator Inkrementasi........................................................................................ 7-15 Operator Pemanipulasi Bit (Bitwise operator) ............................................... 7-15 Operator Logika (Logical Operator) ................................................................ 7-16 Operator Pembanding (Comparison Operator) ............................................ 7-17 Operator String..................................................................................................... 7-18 Ekspresi ................................................................................................................... 7-18 Derajat Operator ................................................................................................. 7-19 STRUKTUR KONTROL DAN FUNGSI ........................................................... 8-1 Struktur Kontrol ..................................................................................................... 8-2 Percabangan (Kondisional) .................................................................................... 8-2 Pengulangan (Looping) ............................................................................................. 8-4 Fungsi......................................................................................................................... 8-9 Mendefinisikan Fungsi............................................................................................. 8-9 Pemanggilan Fungsi ............................................................................................... 8-11 Parameter dari Fungsi .......................................................................................... 8-13 Menggunakan Fungsi-fungsi Bawaan (Built-in Function) ................................ 8-14 Kejadian (Event) ..................................................................................................... 8-15 Macam-macam Kejadian ...................................................................................... 8-15 Contoh Penggunaan Kejadian ............................................................................. 8-16 OBJECT, FRAME DAN FORM PADA JAVASCRIPT ...................................... 9-1 Penggunaan Objek .................................................................................................. 9-2 Menciptakan Objek Sendiri ................................................................................... 9-2 Objek Standar JavaScript ....................................................................................... 9-4 Metoda ...................................................................................................................... 9-5 Object Browser ...................................................................................................... 9-7 Penanganan Frame dan Form pada JavaScript ................................................... 9-9 Window dan Frame................................................................................................ 9-9 Properti Objek Window ....................................................................................... 9-9 Metode Objek Form ............................................................................................ 9-11 Objek element....................................................................................................... 9-11 Metode element .................................................................................................... 9-12 PENGANTAR PEMROGRAMAN WEB DENGAN PHP ............................. 10-1 Pengenalan Lingkungan Kerja Web Server ...................................................... 10-2 Instalasi Apache Web Server, PHP & MySQL sebagai DBMS Pendukung . 10-2
vi
Politeknik Telkom
Pemrograman Web
10.1.2 10.1.3 10.2 10.2.1 10.2.2 10.2.3 10.3 10.4 10.4.1 11 11.1 11.2 11.3 11.4 11.4.1 11.4.2 11.5 12 12.1 12.1.1 12.1.2 12.1.3 13 13.1 13.2 13.3 13.4 13.5 13.6 13.7 13.8 13.9 14 14.1 14.1.1 14.1.2 14.1.3 14.1.4 14.2 14.2.1 14.2.2 14.2.3 14.2.4 14.2.5
Membuat halaman web sederhana dengan PHP ............................................. 10-3 Penggunaan Komentar pada PHP ...................................................................... 10-4 Tipe data ................................................................................................................. 10-4 Array .................................................................................................................... 10-5 Object .................................................................................................................... 10-7 Resource ................................................................................................................. 10-7 Variable PHP .......................................................................................................... 10-8 Operator ................................................................................................................ 10-9 Menggunakan Operator Aritmatika .................................................................. 10-9 STRUKTUR KONTROL DAN FUNGSI (PHP) ............................................. 11-1 Kondisional............................................................................................................. 11-2 Pengulangan ............................................................................................................ 11-2 Membuat Fungsi .................................................................................................... 11-3 Menggunakan fungsi bawaan PHP ...................................................................... 11-4 Math Function ........................................................................................................ 11-4 String Function ...................................................................................................... 11-5 Class ........................................................................................................................ 11-6 MENGOLAH DATA DALAM FORM ............................................................ 12-10 Menyiapkan Form ............................................................................................... 12-11 Menangkap Variabel dari Form ........................................................................ 12-11 Metode Get.......................................................................................................... 12-13 Metode Post......................................................................................................... 12-14 MYSQL DENGAN PHP ...................................................................................... 13-1 Pengenalan MySQL ............................................................................................... 13-2 Tes Koneksi ke server MySQL .......................................................................... 13-2 Membuat Database pada MySQL....................................................................... 13-4 Membuat Tabel pada MySQL ............................................................................. 13-5 Insert Data ............................................................................................................. 13-7 View Data ............................................................................................................... 13-9 Searching Data..................................................................................................... 13-10 Delete Data.......................................................................................................... 13-12 Update Data......................................................................................................... 13-14 KEMANAN DATA ............................................................................................... 14-1 Session..................................................................................................................... 14-2 Memulai Session ..................................................................................................... 14-2 Menyimpan Data Session..................................................................................... 14-2 Mengakses Data Session ...................................................................................... 14-3 Membersihkan dan Menghapus Session ........................................................... 14-5 Cookie..................................................................................................................... 14-8 Memulai cookie ....................................................................................................... 14-8 Menggunakan Cookie ......................................................................................... 14-10 Menguji cookie .................................................................................................... 14-10 Menghapus cookie .............................................................................................. 14-11 Multiple cookies .................................................................................................. 14-12
vii
Politeknik Telkom
Pemrograman Web
14.2.6 Cookies Array. .................................................................................................... 14-13 14.3 SQL Injection ....................................................................................................... 14-14 14.3.1 Pengertian SQL Injection................................................................................... 14-14 14.3.2 Sebab terjadinya SQL Injection ........................................................................ 14-14 14.3.3 Bug SQL Injection berbahaya ?......................................................................... 14-14 14.3.4 Apa saja yang diperlukan untuk melakukan SQL Injection ? ...................... 14-14 14.3.5 Contoh sintaks SQL Injection .......................................................................... 14-14 DAFTAR PUSTAKA
viii
Politeknik Telkom
Pemrograman Web
DAFTAR GAMBAR
Gambar 2-1 Lembar Kerja Microsoft FrontPage................................................................ 2-2 Gambar 2-2 Tampilan MyPage.html ...................................................................................... 2-5 Gambar 2-3 Contoh Heading................................................................................................. 2-6 Gambar 2-4 Contoh Format Paragraf .................................................................................. 2-8 Gambar 2-5 Contoh Penggunaan Line Break dan Center ................................................ 2-9 Gambar 2-6 Contoh Penggunaan Teks Preformat........................................................... 2-10 Gambar 2-7Contoh Menggunakan Tag pada Teks ........................................................... 2-12 Gambar 2-8 Contoh Tag Font dan Atributnya ................................................................. 2-14 Gambar 2-9Contoh Penggunaan Karakter Spesial ........................................................... 2-16 Gambar 2-10 Contoh membuat Garis Horizontal .......................................................... 2-17 Gambar 2-11 Contoh Unordered List ............................................................................... 2-19 Gambar 2-12 Contoh Ordered List ................................................................................... 2-20 Gambar 2-13 Contoh Penomoran dengan Ordered List ............................................... 2-21 Gambar 2-14 Contoh Definition List ................................................................................. 2-22 Gambar 2-15 Contoh Nested List ...................................................................................... 2-23 Gambar 3-1 Tampilan Halaman dok_awal.htm .................................................................. 3-3 Gambar 3-2 Tampilan Halaman dok_tujuan.htm ............................................................... 3-4 Gambar 3-3 Contoh Link untuk Mengirim Email ............................................................... 3-6 Gambar 3-4 Contoh Link ke Bagian Tertentu dalam Dokumen ................................... 3-7 Gambar 3-5 Contoh Penggunaan Atribut pada Tag <img> ............................................. 3-9 Gambar 3-6 Contoh Gambar sebagai Hyperlink.............................................................. 3-10 Gambar 5-1 Contoh Pembuatan Tabel ................................................................................ 5-4 Gambar 5-2 Contoh Memformat Kolom ............................................................................ 5-7 Gambar 5-3 Contoh Pengaturan Cellspacing dan Cellpadding ....................................... 5-8 Gambar 5-4 Contoh Penyisipan Gambar pada Tabel ...................................................... 5-10 Gambar 5-5 Contoh Penggunaan Frame............................................................................ 5-16 Gambar 6-1 Contoh inline CSS ............................................................................................. 6-3 Gambar 6-2 Contoh penggunaan embedded style sheet ................................................. 6-4 Gambar 6-3 Contoh penerapan linked style sheet ............................................................ 6-5 Gambar 6-4 Contoh selector tag .......................................................................................... 6-7 Gambar 6-5 Contoh selector bebas ..................................................................................... 6-8 Gambar 6-6 Contoh selector class ....................................................................................... 6-8 Gambar 6-7 Contoh selector ID ........................................................................................... 6-9 Gambar 7-1 Tampilan Halaman Hello.html ......................................................................... 7-7 Gambar 8-1 Contoh Tampilan Kotak Dialog .................................................................... 8-14 Gambar 9-1 Hirarki objek browser & objek HTML pada JavaScript ............................. 9-7 Gambar 9-2 Contoh Penggunaan Properti Status pada Status Bar .............................. 9-11 Gambar 10-1 Hubungan Client dan Server dalam Web ................................................. 10-2 Gambar 10-2 Komponen Pendukung Aplikasi Web........................................................ 10-2 Gambar 12-1 Hasil ekekusi skrip variabel.php .............................................................. 12-12
ix
Politeknik Telkom
Pemrograman Web
Gambar 12-2 Hasil eksekusi skrip Hasil.php ................................................................... 12-12 Gambar 12-3 Hasil eksekusi MetodeGet.html................................................................ 12-13 Gambar 12-4 Hasil eksekusi Proses.php dengan metode get ...................................... 12-14 Gambar 12-5 Hasil Eksekusi Proses.php dengan metode post ................................... 12-15 Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL.php saat terhubung dgn server . 13-3 Gambar 13-2 Hasil eksekusi skrip Database.php ............................................................ 13-4 Gambar 13-3 Hasil eksekusi skrip BuatTabel.php ............................................................ 13-6 Gambar 13-4 hasil eksekusi skrip FormInput.php ............................................................ 13-8 Gambar 13-5 Hasil eksekusi skrip InputMHS.php ............................................................ 13-9 Gambar 13-6 Hasil eksekusi skrip TampilMHS.php ....................................................... 13-10 Gambar 13-7 Hasil eksekusi skrip FormCari.php .......................................................... 13-11 Gambar 13-8 Hasil eksekusi skrip CariMHS.php .......................................................... 13-12 Gambar 13-9 Hasil eksekusi skrip TampilDelete.php ................................................... 13-13 Gambar 13-10 Hasil eksekusi skrip HapusMHS.php ..................................................... 13-14 Gambar 13-11 Hasil eksekusi skrip TampilUpdate.php ................................................ 13-16 Gambar 13-12Hasil eksekusi skrip FormEdit.php .......................................................... 13-16 Gambar 13-13 Hasil eksekusi skrip EditMHS.php .......................................................... 13-17 Gambar 14-1 Mengakses data session-1 ............................................................................ 14-4 Gambar 14-2 Mengakses data session-2 ............................................................................ 14-4 Gambar 14-3 Menghapus data session ............................................................................... 14-6 Gambar 14-4 Membersihkan nilai pada data session ....................................................... 14-8 Gambar 14-5 Menampilkan nilai cookie ........................................................................... 14-11 Gambar 14-6 Multiple cookies........................................................................................... 14-12 Gambar 14-7 Cookies Array.............................................................................................. 14-13 Gambar 14-8 Penerapan SQL Injection ........................................................................... 14-15 Gambar 14-9 SQL injection melalui URL ........................................................................ 14-16
Politeknik Telkom
Pemrograman Web
DAFTAR TABEL
Tabel 2-1 Tabel Jenis Bullet .................................................................................................. 2-18 Tabel 2-2 Tipe Penomoran pada Ordered List ................................................................ 2-20 Tabel 3-1 Tabel Atribut dalam Tag <A> .............................................................................. 3-2 Tabel 3-2 Jenis-Jenis Atribut pada Tag <img> ..................................................................... 3-8 Tabel 4-1 Jenis- Jenis Atribut dalam Tag <FORM>............................................................ 4-2 Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text ................................................ 4-3 Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox ........................................ 4-4 Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio ................................................ 4-4 Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button .............................................. 4-4 Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea .................................................... 4-5 Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select ............................................... 4-6 Tabel 5-1 Jenis-Jenis Atribut pada Tag <TABLE> .............................................................. 5-2 Tabel 5-2 Jenis Jenis Atribut pada Tag <TR> .................................................................. 5-5 Tabel 5-3 Jenis Jenis Atribut pada Tag <TD> .................................................................. 5-5 Tabel 5-4 Jenis Jenis Target Frame .................................................................................. 5-13 Tabel 6-1Satuan ukuran untuk value ..................................................................................... 6-6 Tabel 6-2 Property Font.......................................................................................................... 6-9 Tabel 6-3 Property Background dan Color....................................................................... 6-10 Tabel 6-4 Property List.......................................................................................................... 6-11 Tabel 6-5 Property Text ....................................................................................................... 6-11 Tabel 6-6 Property Table ...................................................................................................... 6-12 Tabel 7-1 Cadangan Kata pada Javascript ............................................................................ 7-9 Tabel 7-2 Karakter khusus JavaScript. ................................................................................ 7-12 Tabel 7-3 Daftar Operator Assignment ............................................................................. 7-14 Tabel 7-4 Jenis Operator Aritmatika .................................................................................. 7-14 Tabel 7-5 Jenis Operator Afektasi....................................................................................... 7-15 Tabel 7-6 Jenis Operator Inkrementasi.............................................................................. 7-15 Tabel 7-7 Jenis Operator Logika ......................................................................................... 7-16 Tabel 7-8 Jenis Operator Pembanding ............................................................................... 7-17 Tabel 7-9 Derajat/Prioritas Operator ................................................................................ 7-19 Tabel 8-1 Penulisan Menggunakan Pernyataan If ................................................................ 8-2 Tabel 8-2 Penggunaan Pernyataan Switch-Case ................................................................. 8-4 Tabel 8-3 Penggunaan Pernyataan for .................................................................................. 8-5 Tabel 8-4 Contoh Script Pengulangan While ...................................................................... 8-6 Tabel 8-5 Contoh Sript Penggunaan Fungsi....................................................................... 8-10 Tabel 8-6 Jenis - Jenis Kejadian pada JavaScript ................................................................ 8-15 Tabel 9-1 Objek Standar JavaScript ...................................................................................... 9-5 Tabel 9-2 Macam-macam Objek Browser ........................................................................... 9-8 Tabel 9-3 Macam-macam Metoda Objek Window............................................................ 9-8 Tabel 9-4 Properti dari Objek Element ............................................................................. 9-11
xi
Politeknik Telkom
Pemrograman Web
Tabel 9-5 Metode-Metode dari Elemen Objek-Objek .................................................... 9-12 Tabel 10-1 Jenis-Jenis Tag PHP ............................................................................................ 10-3 Tabel 10-2 Jenis-Jenis Komentar pada PHP ....................................................................... 10-4 Tabel 10-3 PHP Mendukung 8 Tipe Data Primitif ............................................................ 10-4 Tabel 10-4 Macam-macam Operator Aritmatika ............................................................. 10-9 Tabel 10-5 Macam-macam Operator Logika .................................................................... 10-9 Tabel 11-1 Statement Kondisional pada PHP ................................................................... 11-2 Tabel 11-2 Statement Kondisional pada PHP ................................................................... 11-3 Tabel 13-1 Tipe Data pada MySQL ..................................................................................... 13-5 Tabel 14-1 Jenis Argumen pada Cookie............................................................................. 14-9
xii
Politeknik Telkom
Pemrograman Web
Overview
Dalam era teknologi informasi dan komunikasi sekarang ini setiap orang sangat membutuhkan alat komunikasi yang dapat menjangkau berbagai informasi di belahan dunia manapun. Dengan kehadiran internet yang merupakan sebuah sistem komunikasi global yang menghubungkan komputerkomputer dan jaringan komputer di seluruh dunia, maka segala informasi yang diperlukan dapat dicari dengan mudah. Setiap orang dari berbagai latar belakang yang berbeda dapat bertukar informasi tanpa perlu berinteraksi secara fisik. Internet ini dimanfaatkan oleh perusahaan, pemerintahan maupun perorangan untuk membangun aplikasi yang disebut web site. Web site ini dipergunakan salah satunya untuk tujuan memperkenalkan profil perusahaan atau pemerintahan. Melalui web site tertentu, kita dapat berkirim email kepada seseorang di luar negeri tanpa harus repot menulis di kertas, memasukkan ke dalam amplop dan mengirimnya lewat kantor pos.
Tujuan
1. 2. 3. 4. 5. 6.
Mengenal sejarah internet Memahami dasar-dasar internet Mengenal istilah-istilah internet Memahami konsep dasar pada web Memahami pemodelan Client/Server Mengenal Client/Server tools
1-1
Politeknik Telkom
Pemrograman Web
1.1
Pendahuluan
Komputer pertama kali dibuat hanyalah sebagai mesin yang berdiri sendiri (stand alone). Untuk melakukan perpindahan informasi dari satu komputer ke komputer lainnya dibutuhkan tape, disk, disket dan lain-lain. Jalan untuk berbagi informasi tersebut, dibuatlah koneksi. LAN, atau disebut juga Local Area Network, merupakan jaringan komputer terkecil yang menghubungkan 2 atau lebih komputer untuk berbagi informasi. Dengan konsep koneksi jaringan untuk membentuk jaringan dari jaringan terciptalah internet. Internet itu sendiri merupakan singkatan dari Interconnected Network of Networks.
1.2
Sejarah Internet
Internet bukanlah satu fenomena baru. ARPAnet (US Defense Advanced Research Projects Agency) atau Departemen Pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan. Jadi bila satu bagian dari sambungan network terganggu dari serangan musuh, jalur yang melalui sambungan itu secara otomatis dipindahkan ke sambungan lainnya. Setelah itu Internet digunakan oleh kalangan akademis (UCLA) untuk keperluan penelitian dan pengembangan teknologi. Dan baru setelah itu Pemerintah Amerika Serikat memberikan ijin ke arah komersial pada awal tahun 1990. 1957 1959 1967 1969 1970 1972 1973 1974 1976 Ringkasan Sejarah : : Advanced Research Projects Agency (ARPA) dibentuk oleh Departement of Defence (DoD) USA. : Len Kleinrock menulis paper tentang packet switching. : Disain awal dari ARPANET diterbitkan. : DoD menggelar pengembangan ARPANET : ARPANET mulai menggunakan Network Control Protocol : InterNetworking Working Group (INWG) dibentuk untuk mempromosikan standar yang sudah disepakati bersama. Spesifikasi dari telnet, RFC 318, diusulkan. : Ide ethernet dijabarkan dalam thesis PhD dari Bob Metcalfe. Spesifikasi untuk File Transfer, RFC 454, diusulkan. : Disain dari TCP/IP dijabarkan secara rinci oleh Vint Cerf dan Bob Kahn dalam "A Protocol for Packet Network Intercommunication". : UNIX-to-UNIX Copy (UUCP) dikembangan oleh Bell Labs.
1-2
Politeknik Telkom
Pemrograman Web
: : : : : : :
1989 1990
: :
1991
1992
1993
BITNET mulai beroperasi. TCP/IP menjadi protokol untuk ARPANET dan ini dispesifikasikan oleh DoD. BSD UNIX release 4.2 menggunakan TCP/IP. Jumlah Internet hosts melewati batas 1000 host. Domain Name Service (DNS) mulai lahir. NSFNET dilahirkan dengan kecepatan backbone 56Kbps. Jumlah Internet hosts melewati batas 10.000. UUNET didirikan untuk memberikan akses komersial untuk Usenet dan UUCP. Sebuah "Internet Worm" berhasil melumpuhkan Internet, sekitar 6000 host terkena akibatnya. NSFNET meningkatkan kecepatan backbone menjadi 1,544 Mbps (T1). Jumlah Internet hosts melewati batas 100.000. Tim Berners-Lee dari CERN mensirkulasikan porposalnya yang berjudul "Information Management: A Proposal". DoD menghentikan ARPANET. Tim Berners-Lee mensirkulasikan proposal World Wide Web (WWW). Dikembangkan sebuat program WWW, sebuah WYSIWYG browser dan editor. Brewster Kahle (Thinking Machines) mengembangan Wide Area Information System (WAIS). Paul Lindner dan Mark McCahill (University of Minnesota) meluncurkan Gopher. Phillip Zimmerman meluncurkan Pretty Good Privacy (PGP). CERN meluncurkan library WWW. Jumlah Internet hosts melampaui 1.000.000. University of Nevada mengeluarkan sistem Veronica. Sebuah WWW browser yang bernama Viola diluncurkan oleh Pei Wei dan didistribusikan bersama CERN WWW. NSF membuat InterNIC untuk menjalankan Internet servis seperti pendaftaran domain. Versi pertama dari Mosaic (untuk X Window) yang dikembangkan oleh Marc Andreesen dikeluarkan oleh NCSA. White House online. National Information Infrastructure Act lolos dan pemerintah Amerika Serikat mulai lebih serius dalam bidang Web.
1-3
Politeknik Telkom
Pemrograman Web
1994
1995
Pizza hut online, merupakan contoh pertama dari aplikasi komerisal Internet. Spam mail menjadi kasus besar setelah sebuah lembaga hukum yang bernama Canter & Siegel menyebarkan mail ke seluruh dunia tentang servis untuk mendapatkan "green card". First Virtual menjalankan "CyberBank" yang pertama. Compuserve, America Online, dan Prodiy mulai memberikan servis akses ke Internet. Perusahaan Marc Andreesen, Netscape Communication Corporation, menjadi publik dan menjadi nomor 3 tertinggi untuk harga Initial Public Offering (IPO) share di NASDAQ. NFS tidak lagi menggratiskan pendaftaran domain. Domain mulai membayar $50/tahun.
1.3
Internet yang berasal dari kepanjangan Interconnected Network adalah sebuah sistem komunikasi global yang menghubungkan computer - komputer dan jaringan - jaringan komputer di seluruh dunia. Setiap komputer dan jaringan terhubung secara langsung maupun tidak langsung ke beberapa jalur utama yang disebut internet backbone dan dibedakan satu dengan yang lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230. Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing - masing (Unix, Linux, Windows, Mac, dan lain-lain) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol / Internet Protocol). TCP/IP tersusun atas 4 layer ( network access, internet, host-to-host transport dan application ) yang memiliki protokolnya sendiri-sendiri. Bila anda mempunyai komputer minimal prosessor 486, Windows 95, Modem, dan line telepon, maka anda bisa bergabung dengan ribuan juta komputer lain di seluruh dunia dan mengakses harta karun informasi di internet.
1.3.1
HTTP merupakan suatu protokol yang menentukan aturan yang perlu diikuti oleh Web Browser dalam meminta atau mengambil suatu dokumen dan oleh Web Server dalam menyediakan dokumen yang diminta web
1-4
Politeknik Telkom
Pemrograman Web
browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML.
1.3.2
URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu Web Server. URL diibaratkan sebagai suatu alamat, dimana alamat tersebut terdiri dari: Protokol yang digunakan oleh suatu browser untuk mengambil informasi. Nama dari komputer dimana informasi tersebut tersedia. Path serta nama file dari suatu informasi. Format umum URL : Protokol_transfer://nama_host/path/nama_file
1.3.3
Protokol Transfer
Protokol transfer adalah suatu protokol yang digunakan untuk pengiriman informasi di internet. HTTP adalah salah satu protokol transfer yang merupakan standar untuk suatu dokumen web. Selain protokol HTTP, dalam internet juga dikenal beberapa protokol lain diantaranya adalah : FTP (File Transfer Protocol), protokol ini untuk mengunduh (download) dan mengunggah (upload) suatu file di FTP server. Dengan hal ini kita dapat bertukar file dengan cepat. Pada saat ini banyak program atau software yang bebas untuk di download dari manapun di Internet. Telnet, protokol yang digunakan untuk login ke suatu server komputer. Telnet memungkinkan kita dapat mengakses komputer yang letaknya jauh dari komputer kita. Dengan telnet kita bisa mengetikkan unix command dari satu komputer ke komputer yang lain, dengan kata lain kita bisa melakukan akses jarak jauh (remote access). Untuk menggunakan Telnet kita harus mempunyai IP address atau domain name, dan mempunyai hak untuk mengakses yaitu dengan login name dan password. SSH (Secure Shell) didesain untuk menggantikan telnet dengan kelebihan dalam keamanan, beroperasi melalui TCP dan menyediakan autentifikasi dan komunikasi yang aman.
Pengantar Pemrograman Web 1-5
Politeknik Telkom
Pemrograman Web
Gopher, protokol ini untuk mengakses server gopher yang menyediakan informasi dengan mengggunakan suatu sistem menu atau melalui hubungan ke telnet News (Network News Transfer Protocol , NNTP), protokol ini digunakan untuk mendistribusikan berita di Usenet. Usenet adalah suatu sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik yang disebut newsgroup. Contoh : ftp://sgi2.mi.politekniktelkom.ac.id/multimedia : Browser anda bertindak sebagai cliet FTP dan mengakses direktori pub pada server sgi2.mi.politekniktelkom.ac.id gopher://wiretrap.spies.com : browser anda bertindak sebagai client gopher pada wiretrap.spies.com news:comp.infosystems.www.announce : Browser anda bertindak sebagai client Usenet dan mengakses artikel-artikel pada newsgroup comp.infosystems.www.announce
1.3.4
Komputer-komputer di internet menggunakan suatu format penamaan standar untuk mempermudah pengelolaan server komputer di internet yang berkembang dengan cepat. Sistem penamaan server komputer ini adalah Domain Names System (DNS). DNS membuat suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer yang terhubung ke internet. Tabel 1.1 Nama-nama Domain di Indonesia Nama Domain Com edu, ac.id gov, go.id int Mil net org Jenis Organisasi Organisasi komersial Lembaga Pendidikan Lembaga Pemerintah Lembaga Internasional Organisasi militer Provider internet Organisasi umum
1-6
Politeknik Telkom
Pemrograman Web
1.4
World Wide Web merupakan suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan internet. Informasi-informasi dalam web mempunyai link-link yang menghubungkan informasi tersebut ke informasi lain di dalam jaringan internet. Sistem yang menghubungkan informasi-informasi melalui link ini disebut dengan nama hypertext. World Wide Web menyediakan pengguna Internet akses ke berbagai macam media yang dikemas dengan sederhana. WWW adalah aplikasi yang paling menarik di internet, penting dan banyak digunakan. Dengan WWW ini kita dapat dengan mudahnya mendapatkan informasi, tidak hanya teks, gambar bahkan multimedia. Informasi yang diletakkan di WWW disebut homepage ataupun situs (sites) yang memiliki alamatnya masing-masing. Untuk melihat isinya dibutuhkan suatu web browser, misalkan Internet Explorer, Netscape Navigator, Opera, Mozilla, dan lain-lain. Semakin berkembangnya World Wide Web, istilah hypertext menjadi hypermedia, dimana link-link penghubung antar informasi bukan lagi berupa suatu teks, tetapi juga bisa berupa suatu file multimedia seperti gambar, suara dan video. Bekerja pada web mencakup 2 hal penting, yaitu : Software Web Browser Software Web Server Kedua software ini bekerja seperti sebuah sistem client-server. Web browser bertindak sebagai client yang memungkinkan anda untuk menginterpretasikan dan melihat informasi pada web, sedangkan web server yang bertindak sebagai server memungkinkan anda untuk menerima suatu informasi yang diminta oleh browser. Jika suatu permintaan (request) akan suatu informasi datang, web server mencari file yang diminta tersebut dan kemudian mengirimkan ke browser yang memintanya. Perhatikan ilustrasi di bawah ini :
1-7
Politeknik Telkom
Pemrograman Web
Request
Response
Web Browser
Web Server
1.5 1.5.1
E-mail merupakan salah satu aplikasi atau fasilitas yang paling banyak digunakan di Internet, mempunyai konsep yang sama dengan surat dalam bentuk kertas hanya saja untuk mengirimkannya tidak diperlukan layanan kantor pos karena e-mail adalah surat berbentuk elektronik yang dikirimkan melalui internet. E-mail merupakan alat komunikasi yang murah dan cepat. Seperti halnya konsep surat melalui pos, email memiliki alamat yang bisa dituju secara elektronik, contoh alamat email adalah emailku@yahoo.com. Dengan email ini kita tidak hanya bisa mengirimkan teks saja tapi juga gambar, data, dan lain-lain. Dalam pengirimannya kita bisa mengirimkan ke lebih dari satu orang sekaligus.
1.5.2
Homepage
Setiap perusahaan atau pribadi yang memiliki informasi di WWW memerlukan suatu alamat (URL) khusus yang disebut web site. Setiap informasi ini disimpan dalam suatu file yang berbeda-beda yang disebut Web Page. Di dalam web page inilah tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lainnnya, baik itu di dalam suatu web page yang sama ataupun dalam web page lain pada web site yang berbeda. Sebelum mengakses berbagai macam informasi pada suatu web site, anda akan menemui suatu web page pembuka yang disebut sebagai home page. Home page ini merupakan halaman pertama dari suatu web site yang biasanya berisi tentang apa dan siapa dari perusahaan atau organisasi pemilik web site tersebut.
Pengantar Pemrograman Web 1-8
Politeknik Telkom
Pemrograman Web
1.6 1.6.1
Browser merupakan tool yang berada di sisi client. Untuk mengakses web, anda memerlukan suatu program yang disebut Web Browser. Browser merupakan suatu program yang dirancang untuk mengambil informasiinformasi dari suatu server komputer pada jaringan internet. Informasiinformasi ini biasanya dikemas dalam page-page, dimana setiap page bisa memiliki beberapa link yang menghubungkan web page tersebut ke sumber informasi lainnya. Pertama kali munculnya www, browser hanya mampu menampilkan inforamsi dalam bentuk teks. Lynx merupakan salah satu contoh browser teks. Tahun 1993, NCSA membuat browser Mosaic yang memiliki kemampuan lebih baik dan dapat menampilkan gambar. Sejak kemunculan NCSA Mosaic, www mulai berkembang dengan pesat.Perkembangan ini menjadi jauh lebih cepat lagi setelah muncul browser Netscape Navigator dari Netscape Communication. Netscape memiliki kecepatan jauh lebih bagus daripada Mosaic dalam menampilkan informasi baik teks maupun gambar. Kemudian dunia browser semakin semarak setelah Microsoft mengeluarkan browser Internet Explorer. Baik Netscape dan IE telah mendukung penggunaan berbagai jenis objek multimedia serta VRML dan Java.
1.6.2
Web Server
Web Server merupakan tool yang berada di sisi server yang akan memproses permintaan data dari web browser. Ada beberapa jenis web server yang banyak digunakan sekarang ini, antara lain : Internet Information Server 5.0 (IIS 5.0) yang berjalan pada Windows 2000, Personal Web Server 4.0 (PWS 4.0) yang berjalan pada Windows 98, Apache Web Server (http://httpd.apache.org) yang merupakan web server gratis yang mendukung PHP.
1.6.3
Database Server
Database Server merupakan tool yang berada di sisi server yang merupakan perangkat lunak sistem manajemen database (Database Management System DBMS), berfungsi untuk pengelolaan data pada sebuah web site. Beberapa DBMS yang dapat digunakan untuk membangun database antara lain : Oracle, MySQL, Ms. SQL Server dan Ms. Access.
Pengantar Pemrograman Web 1-9
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. Internet adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia. World Wide Web menyediakan pengguna Internet akses ke berbagai macam media yang dikemas dengan sederhana. WWW adalah aplikasi yang paling menarik di internet, penting dan banyak digunakan. Dengan WWW ini kita dapat dengan mudah mendapatkan informasi, tidak hanya teks, gambar bahkan multimedia. Sistem kerja web seperti sebuah sistem pemodelan client/server, yang mencakup software web browser (contohnya Internet Explorer) dan software web server ( contohnya Apache). Melalui aplikasi e-mail, setiap orang dapat saling berkirim surat elektronik tanpa perlu menulis dalam kertas dan mengirimkannya ke kantor pos. Untuk mempermudah pengelolaan, server komputer di internet mengikuti sistem penamaan yang disebut Domain Names System (DNS), contoh : www.politekniktelkom.ac.id
3. 4. 5.
Latihan
1. 2.
Jelaskan pengertian dari Internet! Siapakah yang pertama kali menerapkan penggunaan internet? Dan digunakan untuk keperluan apakah? 3. Apa yang Anda ketahui mengenai World Wide Web! 4. Gambarkan hubungan client dan server dalam sebuah web! 5. Jelaskan sistem client-server pada aplikasi web! 6. Apa yang dimaksud dengan E-mail? 7. Jelaskan minimal dua macam Protokol Transfer yang Anda ketahui! 8. Jelaskan fungsi DNS dan sebutkan beberapa nama domain yang ada di Indonesia! 9. Apa yang dimaksud dengan web browser? 10. Apa yang dimaksud dengan web server?
Pengantar Pemrograman Web 1-10
Politeknik Telkom
Pemrograman Web
Overview
Untuk membangun sebuah web site, diperlukan modal dasar berupa bahasa yaitu Hypertext Markup Language(HTML). Setiap tampilan pada halaman web dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna.
Tujuan
1. 2. 3. 4. 5.
Mengenal dasar-dasar HTML Membuat dokumen HTML dan melakukan pemformatan dokumen yang sederhana. Membuat teks preformat dan karakter spesial Membuat list pada dokumen HTML Membuat list bersarang pada dokumen HTML
2-1
Politeknik Telkom
Pemrograman Web
2.1
Pengenalan HTML
HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. Setiap dokumen dalam Web ditulis dalam format HTML. Semua format dokumen, hyperlink yang dapat di klik, gambar, dokumen multimedia, form yang dapat di isi dan sebagainya didasarkan atas HTML.
2.1.1
HTML Editor
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa seperti notepad. Namun sekarang ini di pasaran terdapat banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web), contohnya Macromedia Dreamweaver, Adobe GoLive, Microsoft FrontPage.
2-2
Politeknik Telkom
Pemrograman Web
Kemudahan Microsoft FrontPage : Pengeditan What You See Is What You Get (WYSIWYG) Menambahkan, menghapus dan mengubah teks. Menambahkan paragraf dan gaya karakter ke dalam teks. Mengubah huruf, ukuran dan warnanya. Memasukkan tabel, gambar, garis horisontal dan hyperlink dalam dokumen web yang anda buat. Drag-and-drop hyperlink dan gambar dari dokumen yang lain.
2.1.2
Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung kode penanda yang disebut tag HTML yang digunakan untuk mengatur format tampilan suatu dokumen. Kode ini diselipkan ke dalam teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai HTML menggunakan huruf besar dalam penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua dokumen HTML terdiri dari dua bagian logikal, yaitu: bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML berisi informasi umum mengenai dokumen dan bagian badan (body) yaitu berisi dokumen yang sebenarnya. Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur dasarnya adalah sebagai berikut:
<html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html> Design Halaman Web 2-3
Politeknik Telkom
Pemrograman Web
Keterangan: <html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML. <head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. <title> .. </title> Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). <body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. Contoh dari penggunaan tag <HTML> seperti ini:
<HTML> <HEAD> <TITLE> Judul dari dokumen HTML </TITLE> </HEAD> <BODY> My Homepage </BODY> </HTML>
Untuk mencoba script di atas, anda bisa membuka aplikasi notepad ataupun program teks editor yang lain. Tuliskan script di atas dan simpan dengan ekstensi *.html atau *.htm, misalkan MyPage.html. Bukalah dokumen html yang telah anda buat tadi dengan menggunakan web browser, misalkan Internet Explorer. Maka akan terlihat tampilan seperti di bawah ini.
2-4
Politeknik Telkom
Pemrograman Web
2.2 2.2.1
Pada bagian tag <BODY> digunakan untuk mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. 1) Background : digunakan untuk mengatur latar belakang dengan gambar/image. 2) Bgcolor : digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya. 3) Teks : digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default. 4) Link : Untuk mengatur warna link dokumen dengan warna biru sebagai warna default 5) Vlink : Untuk mengatur warna visited link dokumen dengan default ungu 6) Alink : digunakan untuk mengatur warna active link dokumen dengan default merah.
2.2.2
Membuat Heading
Heading digunakan untuk mengatur ukuran huruf pada header. Tag heading <Hn>..</Hn>, "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
2-5
Politeknik Telkom
Pemrograman Web
Dalam banyak dokumen, heading pertama digunakan sebagai judul tulisan. Heading ini mempunyai atribut untuk menentukan letak tulisan, di kiri, kanan ataupun tengah. Jika atribut ini tidak ditambahkan, maka heading akan otomatis rata kiri. Contoh penggunaannya :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> <BODY> My Homepage <H1>Heading tingkat 1</H1> <H2>Heading tingkat 2</H2> <H3>Heading tingkat 3</H3> <H4>Heading tingkat 4</H4> <H5>Heading tingkat 5</H5> <H6>Heading tingkat 6</H6> <H1 ALIGN=LEFT>Heading 1 rata kiri</H1> <H2 ALIGN=CENTER>Heading 2 rata tengah</H2> <H3 ALIGN=RIGHT>Heading 3 rata kanan</H1> </BODY> </HTML> </HEAD>
Tampilan dari script diatas dapat dilihat pada gambar berikut ini :
Politeknik Telkom
Pemrograman Web
2.2.3
Memformat Paragraf
Dalam membuat paragraf, ada beberapa hal yang harus diperhatikan. Dengan adanya perbedaan browser web yang berjalan pada komputer yang berbeda, memiliki kemampuan untuk menampilkan grafis yang berbeda sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda. Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk browser web yang memiliki ukuran satu halaman penuh dan yang tidak. Untuk membuat paragraf ini digunakan tag <P>, hal yang perlu dicatat adalah tag <P> ini akan mengabaikan spasi dan pindah baris. Dalam pembuatan paragraf pun, kita bisa menggunakan atribut ALIGN untuk mengatur letak paragraf, rata kiri, tengah ataupun rata kanan. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY. Contoh penggunaan paragraf dapat dilihat pada script berikut ini.
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Paragraf rata kiri</h3> <P ALIGN=LEFT>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. </P> <h3>Paragraf rata tengah</h3> <P ALIGN=CENTER>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. </P>
2-7
Politeknik Telkom
Pemrograman Web
<h3>Paragraf rata kanan</h3> <P ALIGN=RIGHT>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. </P> </BODY> </HTML>
2.2.4
Line Breaks
Line breaks digunakan untuk menambahkan baris baru pada teks dalam dokumen HTML dengan cara menambahkan tag <BR>. <CENTER> digunakan untuk membuat teks dalam posisi di tengah. Setiap teks yang
Design Halaman Web 2-8
Politeknik Telkom
Pemrograman Web
terdapat diantara <CENTER> dan </CENTER> akan ditempatkan di tengahtengah margin kiri dan kanan. Contoh script penggunaan Line Breaks dan <CENTER> :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Penggunaan Line Breaks</h3> Contoh penggunaan line break<BR> baris baru<BR>sudaaaahhh<br><br> <CENTER>contoh teks ditengah</CENTER> </BODY> </HTML>
Hasilnya :
2-9
Politeknik Telkom
Pemrograman Web
2.2.5
Teks Preformat
Berbeda dengan pembuatan paragraf yang mengabaikan setiap tambahan spasi, tag <PRE> ini akan membuat spasi ikut diperhitungkan. Dengan kata lain tag <PRE> akan menampilkan teks pada halaman web sesuai dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat. Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom, yang membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut ini contoh penggunaan dari tag <PRE>.
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Penggunaan Teks Preformat</h3> Contoh dibawah adalah penggunaan tag Preformat membuat tabel<br> <PRE> Tabel data mahasiswa ---------------------------------Nama Umur ---------------------------------Adi Sasongko 19 Budi Swarga 20 Chev Sampurna 18 Della Rossa 19 ---------------------------------</PRE> </BODY> <HTML>
untuk
Hasil :
Politeknik Telkom
Pemrograman Web
2.2.6
Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan. Cara menggunakannya adalah awali dengan <tag>, terus masukkan tulisan yang akan diatur dan akhiri dengan </tag>. Tag-tag yang dapat digunakan untuk mengatur teks adalah : <B> <I> <U> <TT> <S> <BLINK> <CITE> <BIG> <SMALL> <SUP> <SUB> <ABBREV> <ACRONYM> <PERSON> <Q> <VAR> Bold text Italic text Underscore Typewriter Strikeout - draws a line through the text Text berkedip (lebih baik jangan digunakan) Digunakan untuk quoting text Ukuran teks akan lebih besar satu ukuran Ukuran teks akan lebih kecil satu ukuran Membuat tekssuperscript membuat tekssub script Abbreviations Untuk akronim Digunakan untuk indexing Membuat short inline quotation Membuat variable name, selalu dalam italics.
Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini.
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> Contoh menggunakan Tag pada Teks<BR><BR> <B>tag untuk menebalkan huruf</B><BR><BR> <I>tag untuk membuat huruf miring</I><BR><BR> tag untuk membuat huruf<SUP>superscript</SUP><BR><BR> tag untuk membuat huruf<SUB>subscript</SUB><BR><BR> untuk membuat huruf yang <U>digaris bawahi</U><BR><BR> untuk membuat huruf yang lebih <BIG>BESAR</BIG><BR><BR> untuk membuat huruf yang lebih <SMALL>kecil</SMALL><BR><BR> </BODY> </HTML> Design Halaman Web 2-11
Politeknik Telkom
Pemrograman Web
2.2.7
Tag Font
Tag <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.
Design Halaman Web 2-12
Politeknik Telkom
Pemrograman Web
SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini.
<html> <head> <title>::: Ukuran, Jenis dan Warna Font:::</title> </head> <body> <font size=1 Face=arial color=#FF0000>Ukuran font 1</font><br> <font size=2 Face=arial color=green>Ukuran font 2</font><br> <font size=3 Face=arial color=blue>Ukuran font 3</font><br> <font size=4 Face=verdana color=red>Ukuran font 4</font><br> <font size=5 Face=verdana color=blue>Ukuran font 5</font><br> <font size=6 Face=tahoma color=green>Ukuran font 6</font><br> <font size=7 Face=tahoma color=red>Ukuran font 7</font><br> </body> </html>
Hasilnya :
2-13
Politeknik Telkom
Pemrograman Web
2.2.8
Karakter Spesial
Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar (>), tanda dan (&) dan kutip ganda (), yang mempunyai arti khusus dan digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu karakter spesial untuk menggantikan karakter-karakter di atas. Karakter spesial tersebut antara lain : < karakter spesial untuk < > karakter spesial untuk > & karakter spesial untuk & " karakter spesial untuk " @ karakter spesial untuk @ © karakter spesial untuk © karakter spesial untuk ® karakter spesial untuk ® karakter spesial untuk karakter spesial untuk spasi yang tak dapat dipecah
Design Halaman Web 2-14
Politeknik Telkom
Pemrograman Web
Dibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial dalam dokumen HTML :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Penggunaan Karakter Spesial</h3> Berikut ini contoh penggunaan karakter spesial<br> Sekarang kita mencoba menggunakan tanda lebih kecil seperti ini < dan sekarang kita akan coba menggunakan tanda lebih besar seperti ini >. Bagaimana? dapat terlihat kan? yang akan ditampilkan saat ini adalah tanda dan &. tanda kutip ganda " dan tanda @ seperti yang sering digunakan dalam alamat email. Pernah lihat tanda © atau tanda © atau tanda ® atau tanda ®. Pasti salah satunya sudah pernah lihat kan?   ;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa spasi di kalimatnya. </BODY> </HTML>
2-15
Politeknik Telkom
Pemrograman Web
2.2.9
Tag <HR> digunakan untuk membuat garis horizontal pada jendela browser. Defaultnya adalah membuat garis yang solid. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. <HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D. <HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel, default 2. <HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan garis. <HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis dengan letak sebelah kiri (left), kanan (right) atau tengah (center-default). Contoh pembuatan garis horizontal :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Membuat Garis Horizontal</h3> Design Halaman Web 2-16
Politeknik Telkom
Pemrograman Web
Garis horizontal biasa (Shade dan solid) <HR> Garis horizontal No Shade <HR NOSHADE> Garis horizontal dengan ukuran 10 (berongga, bukan solid) <HR SIZE=10> Garis horizontal dengan Lebar 100 <HR WIDTH=100> Garis horizontal dengan lebar 50% dari lebar dokumen <HR WIDTH=50%> Garis horizontal dengan lebar 100 dan diletakkan di sebelah kiri <HR WIDTH=100 ALIGN=LEFT> Garis horizontal dengan ukuran 10, lebar 100 dan diletakkan di sebelah kanan <HR SIZE=10 WIDTH=100 ALIGN=RIGHT> </BODY> </HTML>
Politeknik Telkom
Pemrograman Web
2.3
List
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/simbol. Terdapat tiga tipe list yang dapat digunakan, yaitu:
2.3.1
Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entri didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini : Tabel 2-1 Tabel Jenis Bullet Tipe Disc Circle Square Penjelasan Bullet berbentuk cakram Bullet berbentuk lingkaran Bullet berbentuk kotak
2-18
Politeknik Telkom
Pemrograman Web
2.3.2
<OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entri juga didefinisikan dengan tag <LI>. Contoh pembuatan list berurut adalah sebagai berikut :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List berurut</h3> <OL> <LI>apel</LI> <LI>jeruk</LI> <LI>mangga</LI> <LI>jambu</LI> </OL> </BODY> </HTML>
Politeknik Telkom
Pemrograman Web
Gambar 2-12 Contoh Ordered List Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa type penomoran yang dapat digunakan pada ordered list ditunjukkan pada tabel di bawah ini : Tabel 2-2 Tipe Penomoran pada Ordered List Tipe I i a A Penjelasan Angka ditampilkan dalam angka romawi huruf besar Angka ditampilkan dalam angka romawi huruf kecil Angka ditampilkan dalam abjad huruf kecil Angka ditampilkan dalam abjad huruf besar
Pada tag <OL> juga terdapat atribut START untuk memulai list dari nomor tertentu. Pada tag <LI> terdapat atribut VALUE untuk melewati nomor yang tidak diinginkan. Contoh penggunaannya adalah sebagai berikut:
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List berurut</h3> Contoh penggunaan atribut START dan VALUE<br> <OL START=3> Design Halaman Web 2-20
Politeknik Telkom <LI>apel</LI> <LI>jeruk</LI> <LI VALUE=7>mangga</LI> <LI>jambu</LI> </OL> Contoh penggunaan atribut START type=A<br> <OL TYPE=A START=3> <LI>apel</LI> <LI>jeruk</LI> <LI VALUE=7>mangga</LI> <LI>jambu</LI> </OL> </BODY> </HTML>
Pemrograman Web
dan
VALUE
dengan
Politeknik Telkom
Pemrograman Web
2.3.3
Definition Lists
Definition lists biasanya digunakan untuk membuat suatu list singkatan dan definisinya atau istilah-istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah. Contoh :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat Definition LIsts</h3> <DL> <DT> HTTP <DD> HyperText Transfer Protocol <DT> FTP <DD> File Transfer Protocol </DL> </BODY> </HTML>
Politeknik Telkom
Pemrograman Web
2.3.4
Dalam pembuatan list bersarang menggunakan tag-tag yang telah dijelaskan sebelumnya seperti tag <UL>, <OL> dan <LI>. Contoh pembuatan list bersarang adalah sebagai berikut :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List Bersarang</h3> <UL> <LI>List item Number 1</LI> <LI>List item number 2</LI> <UL> <LI>Item 2 sub-item A</LI> <LI>Item 2 sub-item B</LI> </UL> <LI>List item number 3</LI> <UL> <LI>Item 3 sub-item A</LI> <LI>Item 3 sub-item B</LI> </UL> </UL> </BODY> </HTML>
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4.
HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan mengatur warna latar belakang, format teks, pewarnaan teks dan pengaturan paragraf. List ada tiga macam antara lain : ordered list, unordered list dan definition list. Dari ketiga macam list tersebut dapat dibuat bentuk List Bersarang.
Latihan
1. a. b. c. d. e. 2. 3. 4. 5. 6.
Jelaskan masing-masing fungsi dari tag-tag berikut ini : <h3> <br> <sub> <b> <small> Jelaskan perbedaan antara <p> dan <pre>! Untuk pengaturan font dapat digunakan atribut size, face dan color. Jelaskan masing-masing atribut tersebut dan berikan conroh penggunaannya! Tuliskan tag HTML untuk karakter spesial @, &, , , spasi! Sebutkan jenis-jenis list yang ada pada dokumen HTML! Tuliskan perintah HTML untuk membuat list dengan menggunakan penomoran angka Romawi!
2-24
Politeknik Telkom
Pemrograman Web
Overview
Keunggulan dokumen HTML adalah dapat melakukan link ke dokumen yang berlainan atau ke dokumen yang sama. Selain menggunakan teks sebagai link, dapat pula menggunakan gambar maupun aplikasi multimedia sebagai link. Menggunakan relative links lebih memudahkan dalam manajemen file apabila terjadi perpindahan aplikasi web ke komputer yang berbeda.
Tujuan
1. 2. 3. 4. 5.
Membuat link antar dokumen HTML Relative Links versus Absolute Pathnames Membuat link ke bagian tertentu dari dokumen (anchor) yang sama Memasukan gambar ke halaman HTML Membuat link dari gambar
3-1
Politeknik Telkom
Pemrograman Web
3.1
Link
Kelebihan dari HTML adalah kemampuannya untuk link (menyambungkan) daerah teks ataupun gambar ke dokumen yang lain. Browser memberi tanda daerah ini biasanya dengan warna yang berbeda dan garis bawah, untuk menunjukkan kalau daerah tersebut merupakan hypertext link. Hypertext tag pada HTML menggunakan anchor yaitu tag <A>. Dalam pembuatan dokumen HTML diperlukan keterhubungan antar dokumen. Keterhubungan ini dibagi dalam 2 (dua) kategori : 1. 2. Keterhubungan antara satu dokumen dengan dokumen yang lain Keterhubungan kepada suatu bagian pada dokumen itu sendiri
<A href=url_tujuan>nama_link</A>
Sintak tag link adalah sebagai berikut: url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <BODY>. Dikenal 3 (tiga) istilah dalam pengalamatan link : 1. 2. 3. Link relatif Link ini menggunakan alamat relatif file dituju. Misal : <a href=tujuan.htm>Tujuan</a> Link absolut Link ini menggunakan alamat absolut file yang dituju. Misal : <a href=c:/my documents/tujuan.htm>Tujuan</a> Link dalam dokumen yang sama Link ini menggunakan alamat pada bagian tertentu di dokumen itu sendiri. Misal : <a href=#top>Kembali ke atas</a>
Beberapa atribut yang dapat ditambahkan dalam tag <a> diantaranya : Tabel 3-1 Tabel Atribut dalam Tag <A> Atribut Href Name Target Title Kegunaan Menunjukkan url yang dituju Memberikan nama pada bagian tertentu pada dokumen Menunjukkan target ditampilkannya link Menunjukkan title dari link ketika cursor digerakkan di sekitar area hyperlink
3-2
Politeknik Telkom
Pemrograman Web
3.1.1
Untuk membuat link/penghubung dengan target ke dokumen / halaman yang berbeda, anda harus membuat dokumen yang dituju / target dan disimpan dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat script berikut dan beri nama masing-masing dokumen dengan dok_awal.htm dan dok_tujuan.htm. Membuat halaman awal dok_awal.htm :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat Relative Link</h3> Contoh membuat Link yang sederhana<br><br> Untuk pindah ke dokumen yang lain,ikuti link pertama ini dengan klik <A HREF="doktujuan.html">disini</A> </BODY> </HTML>
Hasil :
3-3
Politeknik Telkom
Pemrograman Web
3.1.2
Secara umum, anda diharapkan menggunakan relative link, dikarenakan penulisannya lebih pendek. Selain itu akan memudahkan jika diharuskan memindahkan grup dokumen ke lokasi yang lain karena relative path tersebut akan tetap bisa digunakan. Tetapi anda bisa menggunakan Absolute Pathname ketika kita diharuskan membuat link ke lokasi yang tidak secara langsung terkait. Untuk penggunaan Absolute Pathname ini diharuskan mencantumkan URL (Uniform Resource Locator) yang menspesifikasikan lokasi suatu file dalam server yang lain. Bentuk dari URL ini terlihat sebagai berikut : Scheme ://host.domain[:port]/path/filename Scheme itu sendiri bisa berupa : http file yang terletak di server World Wide Web (WWW). ftp file pada server FTP
Link dan Gambar 3-4
Politeknik Telkom
Pemrograman Web
Untuk port, dapat diisi dengan nomor port jika dibutuhkan. Nomor port ini bersifat optional, dicantumkan ketika dibutuhkan. Contoh penggunaan script anchor dengan Absolute pathname adalah sebagai berikut
<A HREF=http://www.mtv.com/jadwal.html>Jadwal acara</A>
Link ke direktori adalah ditujukan ke satu file default dalam direktori tersebut seperti index.html (pada umumnya), welcome.html ataupun homepage.html. Contoh : http://www.mtv.com ditujukan ke http://www.mtv.com/index.html yang sebenarnya ditujukan ke file yang berada di: www.mtv.com/public/.www/index.html Untuk membuat link yang ditujukan untuk mengirimkan email, bisa dilakukan dengan format
<A HREF=mailto:alamat email>nama link</A>
3-5
Politeknik Telkom
Pemrograman Web
3.1.3
Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan / target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file / dokumen yang bersangkutan. Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:
<A HREF=#sejarah> Bab 1 </A>
Contoh penggunaan :
<HTML> <HEAD> <TITLE>Membuat Link Ke Bagian dalam Dokumen</TITLE> </HEAD>
3-6
Politeknik Telkom
Pemrograman Web
<BODY> <H4>Membuat Link ke Bagian dalam Dokumen</H4> <A NAME="bab1"></A> <B>Bab 1</B><BR> Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<BR> Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.<Br> Sebagai pendahuluan, coba klik link ini untuk <A HREF="#sejarah">menuju ke bagian lain</A> pada dokumen ini.. <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <A NAME="sejarah"></A> <B>1.1 Sekilas Sejarah Internet</B><BR> Bab ini adalah bagian lain pada dokumen yang dituju ketika link pada Bab 1 diklik.<BR> Untuk kembali ke Bab 1, klik <A HREF="#bab1">disini</A> </BODY> </HTML>
Hasilnya:
3-7
Politeknik Telkom
Pemrograman Web
3.2
Gambar
Untuk menampilkan gambar atau animasi gif pada halaman web menggunakan tag sebagai berikut :
<IMG SRC=nama_file_gambar>
Beberapa atribut yang digunakan pada tag <img> antara lain : Tabel 3-2 Jenis-Jenis Atribut pada Tag <img> Atribut Alt Align Border Height Hspace Src Width Vspace Contoh :
<HTML> <HEAD> <TITLE>Judul dari Dokumen HTML</TITLE> </HEAD> <BODY> <img src="BlueLace.gif" ALT="Gambar Gelembung" width="48" height="48"> <HR> <img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Midlle width=30% height="48"> Teks ini di bagian tengah dari tinggi gambar dengan lebar=30%<HR> <img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Bottom width="48" height="48"> Teks ini terletak pada bagian bawah dari tinggi gambar <HR> <img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Right width="80" height="60"> Link dan Gambar 3-8
Kegunaan Menampilkan alternatif text pada image jika mouse berada diatasnya Mengatur perataan posisi gambar (center, left, right) Mengatur lebar border/bingkai pada gambar Mengatur tinggi image Mengatur letak gambar Menentukan sumber file, lokasi dimana file disimpan Mengatur lebar image Mengatur letak gambar
Politeknik Telkom
Pemrograman Web
Gambar akan terletak di sebelah kanan teks dengan lebar=80 dan tinggi=60 <BR><BR><BR><BR> <img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Left width="48" height="48"> Gambar akan terletak di sebelah kiri teks <BR><BR><BR><BR> <img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Top width="48" height="48"> Teks ini terletak pada bagian atas dari tinggi gambar </BODY> </HTML>
Politeknik Telkom
Pemrograman Web
3.2.1
Untuk menjadikan image sebagai hyperlink, dapat dilakukan seperti contoh di bawah ini:
<HTML> <HEAD> <TITLE>Halaman Awal</TITLE> </HEAD> <BODY> <H4>Selamat Datang di Situs Pribadi Saya</H4> untuk bisa menjelajahi situs ini, silahkan klik pada gambar berikut <A HREF="contoh_4.2.htm"> <IMG SRC="lambang_poltek_telkom.bmp" ALT="Link Menggunakan Image"></A> <BR><BR> Selamat menikmati penjelajahan di situs ini. </BODY> </HTML>
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5. Kelebihan dari HTML adalah kemampuannya untuk link (menyambungkan) daerah teks ataupun gambar ke dokumen yang lain. Link dibagi dalam dua kategori, yaitu link antara satu dokumen dengan dokumen yang lain dan link kepada suatu bagian pada dokumen itu sendiri. Ada tiga istilah dalam pengalamatan link, yaitu link relatif, link absolut dan link dalam dokumen yang sama. Penggunaan relative link penulisannya lebih pendek, selain itu akan memudahkan jika diharuskan memindahkan grup dokumen ke lokasi yang lain karena relative path tersebut akan tetap bisa digunakan. Absolute Pathname digunakan ketika kita diharuskan membuat link ke lokasi yang tidak secara langsung terkait. Untuk penggunaan Absolute Pathname ini diharuskan mencantumkan URL yang menspesifikasikan lokasi suatu file dalam server yang lain. Untuk menampilkan gambar dalam dokumen HTML menggunakan tag <IMG>. Sebuah gambar dapat dijadikan link ke dokumen tertentu.
6. 7.
Latihan
1. Link pada dokumen HTML dapat digunakan untuk apa saja? 2. Terdapat tiga istilah pengalamatan link, jelaskan disertai contohnya! 3. Berikan contoh penggunaan link yang ditujukan untuk mengirimkan email ke alamat tertentu! 4. Jelaskan fungsi atribut alt pada penyisipan gambar di dokumen HTML! 5. Berikan contoh penggunaan gambar sebagai hyperlink ke suatu alamat tertentu!
3-11
Politeknik Telkom
Pemrograman Web
4 FORM
Overview
Untuk dapat berinteraksi secara lebih menarik, dalam dokumen HTML harus mampu menyediakan fasilitas yang dapat menerima masukan atau isian data dari user. Data isian dari pengguna ini untuk kemudian dapat diproses lebih lanjut menjadi informasi yang dibutuhkan baik oleh user maupun oleh pemilik web itu sendiri. Pengguna web dapat memasukkan inputan pada dokumen HTML melalui elemen form.
Tujuan
1. 2. 3.
Membuat form pada dokumen HTML Mengerti cara penggunaan form pada halaman dokumen HTML. Mampu menggunakan Input Field sesuai kegunaannya.
Form
4-1
Politeknik Telkom
Pemrograman Web
4.1
Form
Form dalam HTML digunakan untuk menerima masukan atau isian dari user untuk kemudian diolah lebih lanjut menjadi informasi yang dibutuhkan, baik oleh user ataupun pihak yang mempunyai web. Elemen dari form HTML adalah <FORM> yang menunjukkan awal dari suatu form HTML dan diakhiri dengan </FORM>. Dalam sebuah dokumen dapat mempunyai lebih dari satu form HTML. Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: Memperoleh data-data user baik nama, alamat dan data lainnya. Untuk mendaftar pada service yang di sediakan. Memperoleh informasi pembelian secara online. Memperoleh feedback dari user mengenai website anda. Sintak penulisan form adalah:
<form method=post atau get action=program_pemroses> elemen-elemen FORM </form>
Tag <FORM> digunakan untuk membuat form dalam dokumen HTML. Tabel 4-1 Jenis- Jenis Atribut dalam Tag <FORM> Atribut METHOD Deskripsi Menentukan bagaimana data akan di kirim ke server. GET data akan di kirim dengan menggunakan query string pada URL. POST data akan di kirim ke server sebagai block data ke script. Syntax: METHOD=POST|GET Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=URL
ACTION
Form
4-2
Politeknik Telkom
Pemrograman Web
4.2
Dalam form, kita dapat membuat input atau kotak isian yang dapat diisi dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isian adalah tag <INPUT>. Tipe-tipe input yang tersedia adalah sebagai berikut : 1. Type=TEXT Kotak isian bertipe teks ini menerima data karakter (default) sebanyak satu baris. Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text Atribut Name Type Value Size Maxlength Contoh :
<INPUT TYPE=TEXT NAME=textbox1 VALUE= SIZE=20>
Deskripsi Nama variable dari control yang akan menyimpan nilai dari input field <INPUT TYPE=TEXT> Untuk memberikan value ke input field Jumlah karakter dari input field jumlah karakter maksimum untuk input field
Tampilan : 2. TYPE=PASSWORD Kotak isian bertipe password ini menerima data karakter, tapi tidak akan ditampilkan karena kebutuhan masukan password yang bersifat rahasia. Atribut nya sama dengan input field type text. Contoh :
<INPUT TYPE="PASSWORD" NAME="PWD" VALUE="" SIZE=20>
Tampilan : 3. TYPE=CHECKBOX Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih sama sekali, dengan memberikan tanda pada checkbox tersebut.
Form 4-3
Politeknik Telkom
Pemrograman Web
Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox Atribut Checked Name Type Value Size Tampilan : Deskripsi Untuk memberi default check Nama variable dari control yang akan menyimpan nilai dari input field <INPUT TYPE=CHECKBOX> Untuk memberikan value ke input Ukuran control
4. TYPE=RADIO Hanya mengijinkan memilih satu dari banyak pilihan. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value. Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio Atribut Checked Name Type Value Size Tampilan : Deskripsi Untuk memberi default check Nama variable dari control yang akan menyimpan nilai dari input field <INPUT TYPE=RADIO> Untuk memberikan value ke input Ukuran control
5. TYPE=BUTTON Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button Atribut Name Deskripsi Nama variable dari kontrol yang akan menyimpan nilai dari input field
4-4
Form
Politeknik Telkom
Pemrograman Web
Type
<INPUT TYPE=SUBMIT> : Mengirimkan form ke URL yang telah didefinisikan pada atribut ACTION pada tag <FORM> <INPUT TYPE=RESET> : Browser mengembalikan field dalam form ke dalam nilai default(mengosongkan nilai semua elemen form). Memberikan nama label pada button Menentukan lebar button
Tampilan :
<INPUT TYPE="RESET" NAME="RESET" VALUE="RESET">
Tampilan :
6. Tag <TEXTAREA> Tag ini digunakan untuk membuat input teks yang lebar, bisa menampung lebih banyak karakter dibanding input field bertipe TEXT. Teks yang berada diantara tag <TEXTAREA> dan </TEXTAREA> secara default akan ditampilkan sesuai aslinya. Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea Attribute Name Rows Cols Wrap Contoh :
<HTML> <TEXTAREA NAME=text1 COLS=20 rows=5></TEXTAREA> </HTML>
Deskripsi Nama variable dari control yang akan menyimpan nilai dari input field Jumlah baris Lebar kolom text area WRAP=PHYSICAL tampilan word-wraps. Default WRAP=OFF
Form
4-5
Politeknik Telkom
Pemrograman Web
Tampilan :
7. TYPE=IMAGE NAME=SUBMIT SRC= Mengirimkan informasi form seperti halnya tombol Submit, hanya berbentuk gambar. Contoh :
<INPUT TYPE="IMAGE" NAME="SUBMIT" SRC="submit.jpg">
Tampilan :
8. Tag <SELECT> dan <OPTIONS> Digunakan untuk membuat input field yang berbentuk pilihan. Tag <SELECTION> dan <OPTION> ini harus digunakan secara bersamasama. Tag <OPTION> ini mendefinisikan pilihan dari item-item. Tag ini dipasangkan diantara tag <SELECT> dan </SELECT>. Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select Atribut Name Value Size Multiple Selected Deskripsi Nama variable dari control yang akan menyimpan nilai dari input field Teks yang ditampilkan pada tombol, default = Submit Query Untuk menentukan jumlah baris yang di tampilkan Untuk menentukan apakah user boleh memilih lebih dari satu option atau tidak. Pilihan ini dipilih secara default.
Form
4-6
Politeknik Telkom
Pemrograman Web
Contoh :
<select name="job" size="1"> <option value="1">Web Developer</option> <option value="2">Web Designer</option> <option value="3" selected>Web Administrator</option> <option value="4">Web Database</option> </select>
Tampilan :
Rangkuman
1. 2. 3.
Form digunakan untuk menerima masukan berupa informasi atau data dari pengguna. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD, CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan metoda POST.
4-7
Form
Politeknik Telkom
Pemrograman Web
Latihan
1. 2. 3. 4. 5.
Apa fungsi dari form pada dokumen HTML? Apa perbedaan checkbox dan radio button? Apakah fungsi dari tombol Submit dan Reset? Apa perbedaan penanganan form menggunakan metoda GET dan POST? Buatlah dokumen HTML seperti tampilan di bawah ini, jika ada penekanan tombol kirim, maka hasilnya akan dikirimkan ke e-mail anda :
Form
4-8
Politeknik Telkom
Pemrograman Web
Overview
Salah satu metode yang dapat dilakukan dalam membuat layout dokumen HTML adalah menggunakan tabel. Dengan menggunakan tabel kita dapat membagi dokumen HTML ke dalam bagian-bagian yang masing-masing bagian tersebut mempunyai ruang. Hampir semua web site yang berkualitas dan profesional, dirancang dengan menggunakan tabel. Layaknya sebuah spreadsheet yang memiliki sel dan berisi angka-angka, tabel dalam web juga mempunyai sel yang berisi link, gambar dan text. Selain menggunakan tabel, layout halaman web juga dapat dibuat menggunakan frame yang masing-masing bagian frame dihubungkan dengan dokumen HTML yang terpisah.
Tujuan
1. 2. 3. 4. 5. 6.
Membuat dan memformat tabel pada halaman dokumen HTML Memahami pembuatan frame pada dokumen HTML Memahami penggunaan frame Memahami pembagian tampilan layar ke dalam beberapa bagian, yang masing-masing dihubungkan dengan dokumen HTML yang terpisah Mengatur border pada frame Menentukan target frame cells dari hypertext links
5-1
Politeknik Telkom
Pemrograman Web
5.1
Tabel
Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris.
5.1.1
Membuat Tabel
Untuk membuat tabel dalam dokumen HTML, kita dapat menggunakan tag <TABLE>. Dalam 1(satu) tabel terdiri atas baris dan kolom. Elemen pendukung dalam pembuatan tabel di dokumen HTML adalah : 1. Table Heading Table heading diwakili dengan tag <TH>, digunakan untuk memberikan judul kolom pada tabel. 2. Table Row Table row merupakan penyusun baris pada tabel. Diwakili dengan tag <TR>. 3. Table Data Table data adalah bagian yang digunakan untuk mengisikan informasi yang akan ditampilkan di web browser. Diwakili dengan tag <TD>. Table data selalu berada di dalam table row. Biasa disebut kolom. Susunan sederhana dalam membuat tabel di dokumen HTML sebagai berikut :
<TABLE> <TH>... berisi judul tabel</TH> <TR> <TD> ... berisi informasi yang ditampilkan di web browser </TD> </TR> </TABLE>
Beberapa atribut yang bisa ditambahkan dalam tag <TABLE> adalah sebagai berikut : Tabel 5-1 Jenis-Jenis Atribut pada Tag <TABLE> Atribut Align Background Bgcolor Border Kegunaan Untuk mengatur alignment tabel Menambahkan image sebagai background pada tabel Untuk mengatur warna background tabel Untuk mengatur besar border table (dalam pixel), default=0
5-2
Politeknik Telkom
Pemrograman Web
Mengatur warna border Mengatur jarak antara border dengan isi cell Mengatur jarak antar cell Mengatur tinggi tabel Mengatur lebar tabel (dalam pixel atau persen)
5.1.2
Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut. Contoh pembuatan tabel adalah sebagai berikut :
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat Tabel dengan Judulnya</h3> <TABLE BORDER=2 WIDTH=50% BGCOLOR="Sky Blue"> <CAPTION> Tabel 3.1 Prakiraan cuaca di kota besar </CAPTION> <TH>Kota</TH> <TH>Cuaca</TH> <TR> <TD>Bandung</TD> <TD>Hujan</TD> </TR> <TR> <TD>Jakarta</TD> <TD>Cerah</TD> </TR> </TABLE> <BR>Contoh penggunaan judul tabel yang terletak tabel<BR><BR> <TABLE BORDER=1 WIDTH=50% ALIGN=CENTER BACKGROUND="Garden.JPG"> <CAPTION ALIGN=bottom> Tabel 3.1 Prakiraan cuaca di kota besar </CAPTION> Layout Halaman Web
di
bawah
5-3
Politeknik Telkom <TH>Kota</TH> <TH>Cuaca</TH> <TR> <TD>Bandung</TD> <TD>Hujan</TD> </TR> <TR> <TD>Jakarta</TD> <TD>Cerah</TD> </TR> </TABLE> </BODY> </HTML>
Pemrograman Web
5.1.3
Memformat Baris
Seperti yang sudah dijelaskan di atas, salah satu elemen pendukung tabel pada dokumen HTML adalah table row. Untuk memudahkan kita sebut
Layout Halaman Web 5-4
Politeknik Telkom
Pemrograman Web
saja sebagai baris (row). Setiap tabel pasti terdiri atas baris baris yang diwakili dengan tag <TR>. Tabel 5-2 Jenis Jenis Atribut pada Tag <TR> Atrribut Align Bgcolor Bordercolor Height Valign Kegunaan Mengatur rataan (horizontal) Terdapat 3 (tiga) pilihan : left, center, atau right Mengatur warna yang dijadikan background Mengatur warna border Mengatur tinggi baris Mengatur rataan (vertikal) Terdapat 3 (tiga) pilihan : top, middle, bottom
5.1.4
Memformat Kolom
Elemen pada tabel yang digunakan sebagai tempat untuk menuliskan informasi yang nantinya akan ditampilkan di web browser adalah table data. Untuk selanjutnya kita akan menyebut bagian ini sebagai kolom. Kolom dalam dokumen HTML diwakili oleh tag <TD>. Tabel 5-3 Jenis Jenis Atribut pada Tag <TD> Atrribut Align Background Bgcolor Bordercolor Colspan Height Rowspan Valign Width Kegunaan Mengatur rataan (horizontal) Terdapat 3 (tiga) pilihan : left, center, atau right Menambahkan image sebagai background kolom Mengatur warna yang dijadikan background Mengatur warna border Menggabungkan kolom Mengatur tinggi kolom Menggabungkan baris Mengatur rataan (vertikal) Terdapat 3 (tiga) pilihan : top, middle, bottom Mengatur lebar kolom
Politeknik Telkom
Pemrograman Web
<TH>No</TH> <TH>Barang</TH> <TH>Jenis</TH> <TH>Harga</TH> <TH>Jumlah</TH> <TH>Total Harga</TH> <TR> <TD ALIGN=CENTER>1</TD> <TD>Pocari Sweat</TD> <TD ROWSPAN=2>Minuman</TD> <TD>Rp. 4500</TD> <TD ALIGN=RIGHT>5</TD> <TD>Rp. 22500</TD> </TR> <TR> <TD ALIGN=CENTER>2</TD> <TD>Nutrisari Jus Jeruk</TD> <TD>Rp. 2450</TD> <TD ALIGN=RIGHT>3</TD> <TD>Rp. 7350</TD> </TR> <TR> <TD ALIGN=CENTER>3</TD> <TD>Kacang Kulit Garuda</TD> <TD ROWSPAN=3>Makanan</TD> <TD>Rp. 9800</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 19600</TD> </TR> <TR> <TD ALIGN=CENTER>4</TD> <TD>Tango Coklat</TD> <TD>Rp. 2750</TD> <TD ALIGN=RIGHT>1</TD> <TD>Rp. 2750</TD> </TR> <TR> <TD ALIGN=CENTER>5</TD> <TD>Snack Ringan</TD> <TD>Rp. 6450</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 12900</TD> </TR> <TR HEIGHT=30 BORDERCOLOR="RED"> <TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD> <TD BGCOLOR="GRAY"><B>Rp. 65100</B></TD> </TR> </TABLE> </BODY> </HTML> Layout Halaman Web 5-6
Politeknik Telkom
Pemrograman Web
5.1.5
Atribut CELLSPACING adalah jumlah spasi yang dimasukkan diantara sel-sel dalam tabel. Secara default cell spacing ini bernilai 2. Atribut CELLPADDING adalah jumlah spasi di antara border sel dan isi dari sel. Secara default cell padding ini bernilai 1. Contoh penggunaannya adalah seperti ini :
<HTML> <HEAD> <TITLE> Membuat CELLSPACING & CELLPADDING </TITLE> </HEAD> <BODY> <TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10> <CAPTION>Peringkat Kejuaraan Catur</CAPTION> <TH>Peringkat</TH> <TH>Medali</TH> <TH>Pemenang</TH> <TR> <TD>1</TD> <TD>Emas</TD> <TD>Aditia Warman</TD> </TR> <TR> <TD>2</TD> Layout Halaman Web 5-7
Politeknik Telkom <TD>Perak</TD> <TD>Firmansyah</TD> </TR> <TR> <TD>3</TD> <TD>Perunggu</TD> <TD>Indra Bekti</TD> </TR> </TABLE> </BODY> </HTML>
Pemrograman Web
5.1.6
Tabel dalam halaman web dapat berisi hyperlink, gambar, gambar yang menunjuk pada hyperlink dan teks dengan huruf yang berwarna. Sebagai contoh, berikut ini akan ditunjukkan penggunaan tabel dengan berbagai macam konten :
<HTML> <HEAD> <TITLE> Menyisipkan Gambar pada Tabel </TITLE> </HEAD> <BODY> Layout Halaman Web 5-8
Politeknik Telkom
Pemrograman Web
<TABLE BORDER=2> <CAPTION> Dokumentasi Fotograpi </CAPTION> <TR> <TD>1.</TD> <TD>Pemandangan Awan</TD> <TD ALIGN=CENTER> <IMG SRC="dock.jpg" width="100" height="100"></TD> </TR> <TR> <TD>2.</TD> <TD>Hutan Lindung</TD> <TD ALIGN=CENTER> <IMG SRC="forest.jpg" width="100" height="100"></TD> </TR> <TR> <TD>3.</TD> <TD>Pinguin</TD> <TD ALIGN=CENTER> <A HREF="Student.html"> <IMG SRC="image.jpg" ALT="Pinguin"></A></TD> </TR> </TABLE> </BODY> </HTML>
5-9
Politeknik Telkom
Pemrograman Web
5.2
Frame
Salah satu teknik pengaturan tata letak dokumen web yang telah dipelajari sebelumnya adalah dengan menggunakan tabel. Pada pembahasan ini,
5-10
Politeknik Telkom
Pemrograman Web
diperkenalkan teknik lain dalam mengatur tata letak dokumen web dengan menggunakan frame. Sama halnya dengan tabel, frame akan membagi web page dalam baris dan kolom, bedanya, jika digunakan frame, web page akan terbagi menjadi beberapa windows yang masing masing bagian mempunyai nama (nantinya akan menjadi target). Tiap bagian windows ini akan berisi web page. Jadi dengan menggunakan frame, kita dapat menampilkan beberapa web page dalam satu halaman. Sehingga tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan. Sintaks umum yang digunakan untuk membuat frame :
<HTML> <HEAD> </HEAD> <FRAMESET BORDER=# { [ROWS | COLS] } = { #,[#,[...]] }> <FRAME SRC=url NAME=FrameName> </FRAMESET> </HTML>
5.2.1
Frame Syntax
<FRAMESET> Tag frameset ini mempunyai 2 buah atribut ROWS dan COLS. Frame document ini tidak mempunyai BODY, tapi memiliki tag <FRAMESET> dan diakhiri dengan tag </FRAMESET>. Di dalam FRAMESET ini hanya dapat mempunyai tag FRAMESET lainnya, tag FRAME atau tag NOFRAMES. ROWS=list Digunakan untuk frame pembagi horizontal. Atribut ROWS memakai daftar nilai yang dipisahkan dengan koma. Secara umum digunakan nilai prosentase.
<FRAMESET ROWS=10%,25%,65%>
Jika totalnya tidak 100%, maka semua presentase akan diskalakan sehingga total menjadi 100%. Untuk pengisian nilainya dimungkinkan juga menggunakan nilai pixel selain menggunakan nilai prosentase, untuk menggunakan sisa space pada layar bisa digunakan tanda *
<FRAMESET ROWS=100,250,*> Layout Halaman Web 5-11
Pemrograman Web
COLS=list Digunakan untuk frame pembagi vertikal. Atribut COLS memakai daftar nilai yang dipisahkan dengan koma. Tag FRAMESET ini dapat bersarang didalam tag FRAMESET yang lain.
<FRAMESET COLS=20%,80%> <FRAMESET COLS=200,*>
<FRAME> Mendefinisikan frame tunggal dalam frameset. Beberapa atribut yang sering digunakan adalah : SRC=url :Atribut SRC ini berisi URL ke dokumen yang akan ditampilkan pada frame ini. NAME=window_name :Atribut NAME berisi nama frame yang bisa ditunjuk oleh link pada dokumen yang lain, biasanya dari frame lain pada dokumen yang sama. Atribut NAME ini bersifat optional. Frame bernama bisa mempunyai isi target window dengan menggunakan atribut TARGET. SCROLLING=yes|no|auto Atribut SCROLLING mendeskripsikan apakah frame harus mempunyai scrollbar atau tidak. Pilih yes jika diinginkan scrollbar selalu tampak pada frame, pilih no jika tidak menginginkan scrollbar tidak tampak atau pilih auto sehingga browser yang nanti menentukan akan menampilkan scrollbar jika dibutuhkan. Atribut ini bersifat optional dan nilai defaultnya adalah auto. NORESIZE Atribut NORESIZE ini mengindikasikan jika frame tidak dapat di ubah ukurannya oleh user. Secara default, semua frame dapat diubah ukurannya. BORDERCOLOR=color Memberi warna pada border yang memisahkan frame ini dengan yang lain, misalkan BORDERCOLOR=green. BORDERCOLOR dapat digunakan pada satu atau lebih <FRAME> atau dengan <FRAMESET> untuk mengatur warna default pada semua border. MARGINWIDTH=pix Secara default, terdapat 8 pixel margin kiri dan kanan untuk setiap frame yang dapat diperkecil ataupun diperbesar.
Layout Halaman Web 5-12
Politeknik Telkom
Pemrograman Web
MARGINHEIGHT=pix Secara default, terdapat 8 pixel margin atas dan bawah pada setiap frame yang dapat diperkecil atau diperbesar.
5.2.2
Frame Target
Target frame digunakan untuk menentukan tujuan ditampilkannya suatu informasi dari suatu link. Biasanya, target frame ini disesuaikan dengan nama frame yang akan dijadikan tujuan menampilkan informasi tersebut. Ada nama frame predefined yang dapat digunakan sebagai target, seperti yang diperlihatkan pada tabel di bawah ini : _self, _top, _parent, _blank. Tabel 5-4 Jenis Jenis Target Frame Nama Frame _self _top Kegunaan Digunakan apabila target frame adalah frame tempat link berada Digunakan apabila target frame adalah windows tempat frame berada. Dengan menggunakan _top sebagai target, maka definisi frame yang ada pada window browser akan hilang, diganti dengan definisi frame yang baru jika ada Target frame adalah setingkat di atas frame link berada Digunakan apabila hasil link ingin ditampilkan di window baru
_parent _blank
5.2.3
Penggunaan Frame
Pada bagian ini, kita akan mencoba menggunakan frame untuk membagi halaman web menjadi 2 (dua) bagian atau lebih secara horizontal. Sebelum mencoba frame baris, silahkan buat beberapa dokumen web yang nanti akan ditampilkan di tiap frame. Misalkan terdapat tiga halaman yang akan ditampilkan yang terdiri dari halaman header.htm, main.htm, jur_mi.htm. 1. header.htm
<html> <head> <title> Header Politeknik Telkom </title> </head> <body> Layout Halaman Web 5-13
Politeknik Telkom
Pemrograman Web
<center> <h3>Politeknik Telkom</h3> <h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung</h5> <hr> [ <a href="Jur_mi.html"> Manajemen Informatika </a> ] [ <a href="#"> Komputer Akuntansi </a> ] [ <a href="#"> Teknik Komputer </a> ] </center> </body> </html>
2.
main.htm
<html> <head> <title>Main Politel</title> </head> <body> <h3>Selamat datang di Politeknik Telkom</h3> Saat ini kami berlokasi di Kampus Politeknik Telkom <br>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung.<br>
Beberapa jurusan yang terdapat di Politeknik diantaranya : <ol> <li>Jurusan Manajemen Informatika</li> <li>Jurusan Komputer Akuntansi</li> <li>Jurusan Teknik Komputer</li> </ol> </body> </html>
Telkom
3.
jur_mi.htm
<html> <head> <title>Jurusan Manajemen Informatika</title> </head> <body> <h3>Jurusan Manajemen Informatika</h3> <hr> Jurusan ini berkonsentrasi untuk mencetak lulusan yang mampu menguasai teknologi ICT yang handal dan siap pakai.
5-14
Politeknik Telkom
Pemrograman Web
Kurikulum yang dipersiapkan untuk mencapai tujuan tersebut seperti diperlihatkan pada tabel berikut ini : <table width="100%" border="1" cellpadding="1" cellspacing="1"> <tr bgcolor="#e2e2e2"> <td>Tahapan</td> <td>Mata Kuliah / Praktikum</td> </tr> <tr> <td rowspan="7">Semester 1</td> <td>Algoritma Pemrograman</td> </tr> <tr><td>Bahasa Inggris</td></tr> <tr><td>Pengenalan Komputer</td></tr> <tr><td>Praktikum Pascal</td></tr> <tr><td>Praktikum Pengenalan Komputer</td></tr> <tr><td>Praktikum Aplikasi Internet</td></tr> <tr><td>Praktikum Dasar Jaringan Komputer</td></tr> </table> </body> </html>
4.
frame_baris.htm
<html> <head> <title>Frame Baris</title> </head> <frameset rows="25%,75%"> <frame src="header.htm" scrolling="no"> <frame src="main.htm" name="main"> </frameset> <noframes><body> </body></noframes> </html>
5-15
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3.
4.
Pada dokumen HTML Untuk membuat layout ada dua cara, yaitu menggunakan tabel dan menggunakan frame. Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Tabel, baris dan kolom dapat diformat menggunakan atribut-atribut yang disediakan, seperti untuk mengatur ukuran tabel, mengatur letak tulisan di dalam tabel, memberi warna pada latar belakang baris atau tabel, menyisipkan gambar di dalam tabel dan sebagainya. Frame dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah.
5-16
Politeknik Telkom
Pemrograman Web
5.
Untuk menampilkan link yang terdapat pada frame dapat ditentukan letak halaman yang akan dituju dengan menggunakan atribut target.
Latihan
1. 2. 3. 4. 5.
Jelaskan perbedaan antara rowspan dan colspan! Jelaskan perbedaan cellspacing dan cellpadding! Apa fungsi dari frame? Apa perbedaan frame dan frameset? Buatlah layout web seperti di bawah ini, layout dapat menggunakan dua cara yaitu menggunakan tabel atau menggunakan frame.
5-17
Politeknik Telkom
Pemrograman Web
Overview
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Tujuan
1.
Memberikan uraian tentang konsep dasar, sintaks CSS, dan pemanfaatannya untuk representasi dan layout dokumen pada lingkungan web
6-1
Politeknik Telkom
Pemrograman Web
6.1
CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Cascading Style Sheet, tahap 1 (CSS1) yang dipopulerkan oleh World Wide Web Consortium (W3C) telah menetapkan versi terbaru peselancar Web Netscape dan Microsoft untuk menentukan jenis gaya yang mungkin atau kenyataan yang menterjemahkan ciri-ciri elemen gaya dalam sebuah halaman Web. CSS disediakan untuk memberikan kebebasan bagi para desainer halaman web sesuai dengan yang dikehendakinya. Keuntungan menggunakan CSS : Memisahkan presentastion sebuah dokumen dari content document itu sendiri. Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web Mempercepat proses rendering/pembacaan HTML.
6.2 6.2.1
Pada posisi ini, CSS dituliskan di dalam elemen HTML, dan mempunyai ciri ciri sebagai berikut : Merupakan style yang terlemah karena editing harus dilakukan disemua bagian dimana inline berada Mirip dengan atribut biasa. Bagian dari <BODY> Format Statement : SELECTOR {PROPERTY:VALUE} Nama selector bisa merujuk ke tag HTML yang akan diedit, sebagai contoh jika tag paragraf diubah dengan CSS maka dapat ditulis sebagai berikut : P {PROPERTY:VALUE} Contoh penggunaan inline style sheet :
<html> <head> <title>Contoh Inline CSS</title> </head> CSS (Cascading Style Sheet) 6-2
Politeknik Telkom
Pemrograman Web
Jika source tersebut dijalankan di web browser, maka akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
6.2.2
Penulisan CSS didalam dokumen HTML dan menggunakan tag <style>.</style> yang ditempatkan pada bagian page header atau diantara tag <head></head>. Penggunaan embedded style sheet akan memberikan efek terhadap satu halaman saja. Format Statement :
"HTML tag"{ "CSS Property":"Value" ; } "HTML tag"{ "CSS Property1":"Value1"; "CSS Property2":"Value2"; ..}
Pemrograman Web
Jika source tersebut dijalankan di web browser, maka akan didapatkan hasil seperti yang terlihat pada gambar di bawah ini :
6.2.3
Style disimpan dalam file yang berbeda dari file HTML dan disimpan dalam format .css Secara umum, linked style sheet memiliki ciri ciri : Disimpan di file lain sehingga sebuah file CSS dapat dipakai di banyak file HTML lainnya File hanya berisi style bukan tag html Untuk menggunakan file lain yang berisi css pada file HTML, digunakan tag <link> yang ditempatkan pada bagian page header atau diantara tag <head> ....</head> Untuk menggunakan linked style sheet, setidaknya dibutuhkan 2 (dua) file yang masing masing berfungsi sebagai file css (yang akan dipanggil) dan file HTML (yang akan memanggil). Tahap pertama, buat sebuah file css dan simpan dengan menggunakan nama file mystyle.css dengan isi script css sebagai berikut :
p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000; font-style:italic}
Tahap kedua, buat sebuah file HTML yang disimpan pada direktori yang sama dengan file css yang sudah dibuat dengan script HTML sebagai berikut :
<html> <head> CSS (Cascading Style Sheet) 6-4
Politeknik Telkom
Pemrograman Web
<title>Linked Style Sheet</title> <link rel="stylesheet" href="mystyle.css" type="text/css"> </head> <body> <p>Berikut ini contoh penerapan linked style sheet pada paragraf</p> </body> </html>
Jika file HTML dengan script di atas dijalankan pada web browser, akan didapatkan hasil seperti yang ditunjukkan pada gambar di bawah ini :
6.3
Sintaks CSS dibagi dalam 3 bagian : Selector {property : value} Dimana : Selector berisi tag HTML yang akan didefinisikan (body, H1, font, dll) Property merupakan atribut yang akan di-set/diubah Value merupakan nilai dari property Contoh penulisan CSS :
H1 { Font-family : arial; Color : #0000FF }
Keterangan : H1 merupakan selector, Color merupakan property, dan #0000FF merupakan value
CSS (Cascading Style Sheet) 6-5
Politeknik Telkom
Pemrograman Web
Untuk mendeklarasikan properti secara berkelompok, dapat menggunakan penghubung koma dan &. Contoh : H1, H2 {color : green}; H3, H4 & H5 {color : red}; Untuk menuliskan komentar pada CSS dapat menggunakan salah satu dari 2 (dua) di bawah ini : 1. Menggunakan tanda : /* .. */ 2. Menggunakan tanda : <!-- - - > Satuan ukuran yang disediakan (pada bagian value) adalah : Tabel 6-1Satuan ukuran untuk value Satuan Ukuran em Ex px Keterangan Untuk menentukan nilai desimal (pecahan) x-height, digunakan untuk menentukan ukuran yang sifatnya vertical Pixels, menentukan ukuran yang bersifat pixel (layar monitor) seperti ukuran huruf.
6.4
CSS Selector
CSS selector adalah bagian terpenting dari CSS. Selector mendefinisikan elemen elemen HTML mana saja yang akan dimanipulasi menggunakan kode CSS. Ada 4 (empat) macam selector : 1. Tag / elemen Semua tag /elemen HTML yang berada pada bagian <body> merupakan selector. Contoh :
CSS (Cascading Style Sheet) 6-6
Pemrograman Web
<title> Selector - Tag</title> <style type="text/css"> h3{text-decoration: underline; text-align:center} </style> </head> <body> <h3> Tag heading ini dimodifikasi menggunakan CSS</h3> </body> </html>
Jika script di atas dijalankan pada web browser, maka akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini:
2.
Gambar 6-4 Contoh selector tag Selector bebas Seorang web design dapat membuat tag sendiri yang difungsikan sebagai CSS. Contoh :
<html> <head> <title> Selector - Bebas </title> <style type="text/css"> gbawah{text-decoration: underline;} </style> </head> <body> <gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah> </body> </html>
6-7
Politeknik Telkom
Pemrograman Web
Jika script di atas dijalankan pada web browser, akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
3.
Gambar 6-5 Contoh selector bebas Class Pada pendeklarasiannya, penulisan selector berbentuk class diawali dengan tanda titik (.), dan pada file HTML yang memanggilnya, ditambahkan atribut class. Contoh :
<html> <head> <title> Selector - Class </title> <style type="text/css"> .modifikasi {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; text-align:center} </style> </head> <body> <p class="modifikasi">Memodifikasi tag <p> menggunakan selector class</p> </body> </html>
Jika script di atas dijalankan pada web browser, akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
Politeknik Telkom
Pemrograman Web
4.
ID Pada pendeklarasiannya, penulisan selector berbentuk ID diawali dengan tanda pagar (#), dapat digunakan untuk mendefinisikan header, content, dan desain dalam desain web karena didefinisikan dengan ID berbeda. Contoh :
<html> <head> <title> Selector - ID </title> <style type="text/css"> #judul { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-style:italic } </style> </head> <body> <p id="judul">Menggunakan ID Selector untuk memodifikasi tampilan</p> </body> </html>
Jika script di atas dijalankan pada web browser, akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
6.5
Contoh Penggunaan
P { font-family: arial. Helvetica} 6-9
Politeknik Telkom
6.6
Value Rangkaian 6 digit heksadesimal atau nama warna url dimana image disimpan
Contoh Penggunaan
Body { Background-color : green; } Body { Background-image : url(gambar1.jpg); } Body { Background-attachment : scroll; } Body { Background-repeat : repeat; Background-image : url(image/gambar1.jpg); } Body { Background-repeat : norepeat; Background-image : url(image/gambar1.jpg); Background-position : bottom center } H1 { color : red }
Fixed|scroll|inherit
Inherit|repeat|norepeat|repeat-x|repeat-y
Backgroundposition
Bottom|center|left|right|top |inherit
Color
6-10
Politeknik Telkom
Pemrograman Web
6.7
Contoh Penggunaan
Ul { List-style-type : disc ; }
6.8
None|underline|overline|lin e-through|blink None|capitalize|,uppercase|l owercase) Nilai integer dengan pilihan satuan : em|pt|px|% Nilai integer dengan pilihan satuan : em|pt|px|%
6-11
Politeknik Telkom
Pemrograman Web
6.9
Rangkuman
1. 2. 3. 4.
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, background, list, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Ada tiga jenis penempatan CSS, antara lain : Inline Style Sheet, Embedded Style Sheet dan Linked Style Sheet. Selector mendefinisikan elemen elemen HTML mana saja yang akan dimanipulasi menggunakan kode CSS.
6-12
Politeknik Telkom
Pemrograman Web
Tugas
1.
Kunjungi beberapa website (minimal 10 website). Amatilah website yang telah anda kunjungi. Yang harus anda amati adalah meliputi: a. Layout, - Seberapa besar daya tarik dan unsur seni dari web yang anda amati. - Bagaimana model layout web tersebut, berbentuk tabel atau frame? b. Content/Isi, Apa saja isi dari web tersebut - Silahkan catat hasil pengamatan anda. c. Penempatan CSS, - Bagaimana model penempatan script CSS yang dilakukan oleh desainer web. - Buktikan model yang Anda sebutkan pada point di atas dengan menuliskan penggalan script pada file HTML-nya d. Selector apa saja yang dimodifikasi oleh desainer web? Pilihlah sebuah website (misal: Perguruan Tinggi, Unit Kegiatan Mahasiswa, Partai Politik, Pemerintah Kota dan lain-lain) yang menurut Anda menarik untuk referensi, kemudian buatlah sebuah website (dengan cara Anda sendiri) dengan memodifikasi website yang Anda jadikan referensi.
2.
Latihan
1. 2. 3. 4.
Ada berapa macam penempatan script CSS? Dari beberapa macam penempatan script CSS, mana yang menurut Anda paling bagus? Jelaskan alasan Anda! Apa yang dimaksud dengan selector? Ada berapa macam selector? Apa yang dimaksud dengan property dan value? Berikan 2 (dua) contoh property dan value!
6-13
Politeknik Telkom
Pemrograman Web
7 PEMROGRAMAN JAVASCRIPT
Overview
Saat ini perkembangan World Wide Web sangat pesat yang memunculkan banyak homepage dengan halaman-halaman yang sangat menarik, tidak hanya berupa teks dan gambar saja seperti dahulu, namun sudah menjadi interaktif dan pintar. Untuk mendukung hal ini, diperlukan teknologi atau bahasa pemrograman lain yang juga digunakan untuk meningkatkan interaktivitas halaman web. Secara umum teknologi di Web dibedakan menjadi dua, yaitu Server-Side contohnya PHP, ASP, JSP dan Client-Side contohnya JavaScript, VBScript.
Tujuan
1. 2. 3. 4. 5. 6. 7. 8.
Mengenal pemrograman server-side dan client-side. Mampu membedakan jenis-jenis dari pemrograman server-side. Mampu membedakan jenis-jenis dari pemrograman client-side. Mengenal Pemrograman JavaScript. Memahami Struktur JavaScript. Mampu menggabungkan JavaScript ke dalam dokumen HTML. Mengenal macam-macam tipe data dan operator. Mampu menerapkannya dalam pemrograman JavaScript.
7-1
Pemrograman Javascript
Politeknik Telkom
Pemrograman Web
7.1
Membahas mengenai web tentunya tidak terlepas dari HTML (HyperText Markup Language), yaitu suatu bahasa yang menggunakan tandatanda tertentu (disebut sebagai Tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar. Dokumen HTML sebenarnya hanya berupa dokumen teks biasa (tujuannya agar dapat dengan mudah dipindah-pindahkan antar berbagai platform). Namun, untuk membuat sebuah halaman web yang interaktif, HTML saja tidak cukup. Oleh karena itu diperlukan teknologi atau bahasa pemrograman lain yang juga digunakan untuk meningkatkan interaktivitas halaman web. Secara umum teknologi di Web dibedakan menjadi dua, yaitu Server-Side dan ClientSide. Pada Server-Side proses akan dilakukan di Web Server sementara client (Web Browser) hanya akan menerima hasilnya dalam bentuk HTML. Contoh skrip Server-Side adalah CGI/Perl, ASP (Active Server Pages), JSP (Java Server Pages) dan PHP. Server-side scripting ini merupakan kebalikan dari client-side scripting, yang seluruh proses programnya dilakukan di client. Contoh skrip Client-Side antara lain JavaScript, JScript dan VBScript. Penggunaan keduanya hendaknya disesuaikan dengan aplikasi Web yang digunakan. Server-Side digunakan untuk memproses segala sesuatu yang berhubungan dengan server misalnya manipulasi database. Client-Side digunakan untuk mengadakan interaksi dengan user yang frekuensinya tinggi, namun data yang diperlukan relatif sedikit atau telah tersedia sebelumnya misalnya aplikasi untuk permainan atau pemeriksaan event pada browser. Tidak dianjurkan menggunakan Client-Side untuk aplikasi Web yang membutuhkan data yang banyak dan selalu berubah-ubah, atau menggunakannya untuk verifikasi user dan password. Pada server side Karena seluruh prosesnya berada di server, maka client akan menerima hasil dalam bentuk HTML biasa. Berbeda dengan client-side scripting, dimana client juga menerima script. Jelas server-side scripting ini lebih aman dan lebih bebas untuk dikembangkan. Keunggulan lain dari server side ini adalah dapat berinteraksi lebih dengan pengunjung situs, Menampilkan informasi perusahaan yang berasal dari database, Menampilkan halaman yang memproses informasi dari klien, terupdate otomatis, berbeda tampilan sesuai kondisi tertentu. Pada dasarnya skrip tidak berbeda dengan bahasa pemrograman biasa karena skrip juga berisi kumpulan instruksi program. Hanya saja skrip
Pemrograman Javascript 7-2
Politeknik Telkom
Pemrograman Web
memiliki aturan yang lebih lebih sederhana (penulisannya lebih manusiawi) dan biasanya tidak dikompilasi. Karena kesederhanaannya, waktu yang dibutuhkan untuk mempelajari skrip jauh lebih singkat dibandingkan waktu yang dibutuhkan untuk mempelajari bahasa pemrograman. Salah satu contoh skrip adalah file batch (*.BAT) pada sistem operasi Windows.
7.2
Pengantar Javascript
Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip-skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa Java (dengan mana JavaScript selalu di bandingbandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien. Pada bagian ini anda akan belajar menulis program Java-Script sederhana dan kemudian menjalankannya. JavaScript adalah bahasa berbasis objek, artinya saat menuliskan kode JavaScript, Anda menggunakan objekobjek bawaan atau objek-objek yang Anda ciptakan sendiri. JavaScript adalah bahasa yang case sensitive artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik koma (;).
7.2.1
Program JavaScript dituliskan pada file HTML (.html atau .htm) dengan menggunakan tag <SCRIPT>. Berarti Anda tidak perlu menuliskan program JavaScript pada file terpisah dengan file HTML (meskipun Anda bisa melakukannya). Berikut ini adalah sintak umum penulisan JavaScript :
Pemrograman Javascript 7-3
Pemrograman Web
Atribut language=JavaScript memberitahukan browser bahwa skrip yang Anda tulis adalah JavaScript. Browser lama yang belum mendukung skrip biasanya mengabaikan tag <script>. Namun masalahnya ada beberapa browser lama yang menuliskan teks di antara tag </script> dan </script>. tentu saja hal ini tidak diinginkan. Untuk mencegahnya, letakkan program Anda di dalam tag komentar. Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar-komentar di dalam skrip atau kode program yang dibuat. Kegunaannya antara lain adalah : Mengingatkan akan bagian-bagian khusus di dalam skrip tersebut, jika ingin merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian dan sudah lupa dengan detail dan alur dari skrip tersebut. Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk-petunjuk yang anda buat melalui komentar-komentar, kecuali anda tidak mau mensharing program yang anda miliki. Untuk menuliskan komentar ada dua cara : Untuk menulis komentar dalam satu baris, gunakan double slash // semua karakter di belakang // tidak akan di eksekusi Untuk menulis komentar dalam beberapa baris, gunakan /* dan */ /* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */ Contoh :
<SCRIPT LANGUAGE="JavaScript"> <!-- Menyembunyikan script terhadap browser non-JavaScript Perintah-perintah JavaScript anda diketik disini. // --> </SCRIPT>
Pemrograman Javascript
7-4
Politeknik Telkom
Pemrograman Web
Dengan meletakkan kode sumber JavaScript dalam tag komentar, halaman HTML Anda akan kompatibel dengan browser lama. Dengan kata lain, browser yang mendukung JavaScript akan menjalankannya dan yang tidak mendukung JavaScript akan mengabaikannya.
7.2.2
1. Menggunakan tag <SCRIPT> Dengan menggunakan cara ini, pada saat mengakses satu halaman HTML kita harus menunggu sampai proses pemanggilan halaman itu selesai sepenuhnya, sebelum kita menjalankan program JavaScript tersebut. Proses eksekusi kode HTML untuk menampilkan satu halaman dilakukan dari atas ke bawah, semakin banyak user yang mengakses halaman ini dapat menganggu proses pemanggilan tersebut. Pada kasus dimana pemanggilan suatu fungsi JavaScript terjadi sebelum proses pemanggilan kode JavaScript selesai dilakukan oleh navigator, maka akan timbul pesan error. Oleh karena itu untuk menghindari kejadian diatas, maka pada umumnya letakkan tag <SCRIPT> diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa disebut diantara tag <BODY> dan </BODY>. Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya, contohnya JavaScript, JavaScript1.1,JavaScript1.2 untuk bahasa JavaScript atau bahasa lainnya, contohnya VBScript. Script dalam tag head
<HTML> <HEAD> <TITLE>Script dalam HEAD</TITLE> <script language="javascript"> //Statemen ditulis disini... </script> </HEAD> <BODY> </BODY> </HTML>
Pemrograman Javascript
7-5
Politeknik Telkom
Pemrograman Web
Pada listing diatas, merupakan metode penulisan script paling umum dalam pembuatan dokumen. Tag <script> diposisikan di dalam tag <head> yang secara tipikal merupakan bagian inisialisasi dari sebuah dokumen yang akan diload ke dalam browser. Script tersebut kemudian dieksekusi melalui useraction. Script dalam tag body
<HTML> <HEAD> <TITLE>Script dalam BODY</TITLE> </HEAD> <BODY> <script language="javascript"> //Statemen ditulis disini... </script> </BODY> </HTML>
Apabila script yang dibuat ingin dijalankan bersamaan dengan loading dari sebuah dokumen, penulisan script dapat dilakukan di dalam <body> seperti yang terlihat pada listing diatas. Script dalam tag body dan head
<HTML> <HEAD> <TITLE>Script dalam HEAD dan BODY</TITLE> <script language="javascript"> //Statemen ditulis disini... </script> </HEAD> <BODY> <script language="javascript"> //Statemen ditulis disini... </script> </BODY> </HTML>
Pemrograman Javascript
7-6
Politeknik Telkom
Pemrograman Web
Gambar 7-1 Tampilan Halaman Hello.html Menggunakan file ekstern Cara berikutnya adalah menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang disisipkan kedalam dokumen HTML adalah sebagai berikut :
<SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>
1.
dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script. Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik tombol mouse. Kodenya dapat di tulis sebagai berikut :
Pemrograman Javascript 7-7
2.
Politeknik Telkom
Pemrograman Web
eventHandler adalah nama dari event tersebut. Menangani Event akan mengubah halaman yang static menjadi lebih dinamis. Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik pada mouse, klik pada tombol submit di suatu form, dan keluar dari halaman. Netscape mengenali sejumlah event, tetapi kita tidak akan mendiskusinya sekarang.
7.3 7.3.1
Variable digunakan untuk menyimpan data. Dengan demikian tanpa variabel, sebuah program tidak akan dapat melakukan apa-apa. Pada JavaScript, pendeklarasian variable bersifat opsional, maksudnya Anda bisa mendeklarasikannya atau tidak. Bila Anda memberi nilai pada suatu variable, JavaScript menganggap Anda telah mendeklarasikan variable tersebut. Sebagai contoh :
X = 50; // X bernilai 50
JavaScript menganggap bahwa telah dideklarasikan variable X. Cara seperti ini merupakan pendeklarasian variabel secara implisit. Untuk mendeklarasikan variabel secara eksplisit, tulislah nama variable didahului dengan kata kunci var, contoh :
var X; // mendeklarasikan sebuah variable dengan nama X
untuk mendeklarasikan beberapa variabel dalam satu baris, Anda cukup menuliskannya dengan tanda pemisah koma, contoh :
var X, Y, Z; // mendeklarasikan 3 buah variable, yaitu X, Y dan Z
Meskipun pendeklarasian variabel bersifat opsional, tapi sebelum diberi nilai, variabel tidak dapat digunakan. Pada saat dideklarasikan suatu variabel dapat langsung diinisialisasi atau diberi nilai tertentu, contoh:
var X = hallo; Pemrograman Javascript 7-8
Pemrograman Web
Aturan penamaan variabel : Nama variabel harus dimulai dengan suatu huruf atau garis bawah (_) dan huruf selanjutnya dapat berupa angka (0-9), huruf besar (A-Z) atau huruf kecil (a-z), garis bawah. Contoh : Nama_depan, h9224_nama Catatan JavaScript membedakan huruf besar dan kecil (case sensitif), sehingga harus diwaspadai oleh programmer, penulisan indoprog adalah berbeda dengan Indoprog bagi JavaScript. Nama variabel tidak boleh sama dengan cadangan kata pada JavaScript. Tabel 1 adalah daftar dari cadangan kata (Reserved Word) pada JavaScript. Nama variabel tidak boleh mengandung karakter spasi. Tabel 7-1 Cadangan Kata pada Javascript abstract boolean break byte case catch char class const continue default do double else
Pemrograman Javascript 7-9
extends False Final finally Float for function goto if implements import in instanceof
int interface long native new null package private protected public return short static
super switch synchronized this throw throws transient true try var val while with
Politeknik Telkom
Pemrograman Web
7.3.2
Variabel lokal digunakan didalam suatu fungsi dan ruang lingkupnya terbatas pada fungsi tersebut. Untuk mendeklarasikan suatu variabel lokal, harus diawali dengan var, seperti contoh berikut ini:
var nilaiTerbesar = 0
JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel global. Walaupun JavaScript memperbolehkan anda menggunakan nama variabel yang sama untuk local maupun global, tetapi dalam praktek hal tersebut tidak disarankan, karena akan membingungkan anda sendiri. TIP Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu variabel global, deklarasikan semua variabel global tersebut pada awal dari script. Contoh (simpan dengan nama file variable.html):
<SCRIPT language="Javascript"> <!-var a = 12; var b = 4; document.write("Dua kali dari ",b," adalah ",2*b); document.write(" Nilai dari a adalah ",a); // --> </SCRIPT>
7.4
1. 2.
Pemrograman Javascript
Politeknik Telkom
Pemrograman Web
3.
4.
Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk memeriksa suatu kondisi : true : jika kondisinya benar false : jika kondisinya salah variabel dengan jenis null : satu kata khusus (termasuk keyword juga) untuk menjelaskan bahwa tidak ada data didalamnya.
7.4.1
1. 2. 3.
Integer(bilangan bulat)
Bilangan bulat dapat ditampilan dalam beberapa basis berikut ini : basis desimal : integer di tuliskan dalam urutan unit bilangan (dari 0 sampai dengan 9), permulaan bilangan tidak boleh dimulai oleh angka 0 basis heksadesimal : dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f), permulaan bilangan dimulai oleh 0x atau 0X basis oktal : dituliskan dalam urutan unit angka dari 0 sampai dengan 7, permulaan bilangan dimulai dengan angka 0
7.4.2
Bilangan desimal bisa kita sebut juga sebagai bilangan pecahan atau bilangan yang bisa kita tuliskan dalam bentuk menggunakan tanda koma. Bilangan ini juga bisa di tuliskan dengan beberapa cara berikut : 1. 2. 3. 4. bilangan bulat desimal : 895 bilangan dengan tanda koma : 895,12 bilangan pembagian : 27/11 bilangan eksponensial : bilangan dengan tanda koma , kemudian diikuti oleh huruf e(atau E), kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau -, pangkat postitif atau negatif), contoh: var a = 2.75e-2; var b = 35.8E+10;
7.4.3
String
String adalah kumpulan dari karakter, kita deklarasikan variabel string menggunakan tanda (') atau ("), kedua tanda tersebut harus digunakan secara berpasangan dan tidak bisa digunakan secara tersendiri atau bercampur. Berikut ini adalah beberapa cara untuk mendeklarasikan variabel string :
var a = "Hallo"; var b = 'Sampai Ketemu Lagi !'; Pemrograman Javascript 7-11
Politeknik Telkom
Pemrograman Web
Tabel 7-2 Karakter khusus JavaScript. Keterangan Backspace Form feed Newline Menekan tombol ENTER Karakter Antislash Tanda petik ganda Tanda petik tunggal Tab Spesial Karakter \b \f \n \r \\ \" \' \t
7.4.4
Booleans
Boolean adalah satu variabel khusus yang berguna untuk mengevaluasi suatu kondisi tertentu, oleh karenanya boolean mempunyai dua nilai True : diwakili oleh nilai 1 dan False : diwakili oleh nilai 0
7.5
Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu :
7.5.1
parseInt()
Fungsi ini memungkinkan merubah satu variabel yang dilewatkan dengan parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan bulat. Sintaksnya adalah sebagai berikut:
parseInt(string[, basis]);
Agar supaya fungsi parseInt() mengembalikan nilai bilangan bulat, maka parameter yang dilewatkan harus dimulai dengan karakter bilangan [09], prefiks hexadesimal 0x, dan/atau karakter +,-,e,dan E. Selain daripada itu maka fungsi parseInt() akan mengembalikan nilai NaN(Not a Number). Jika karakter berikutnya tidak valid, maka dia akan diabaikan oleh fungsi parseInt(), dan akan ditampilkan terpotong jika di bagian depan karakter valid dan bagian belakang karakter tidak valid.
Pemrograman Javascript 7-12
Politeknik Telkom
Pemrograman Web
Contoh :
var a = "123"; var b = "456"; document.write(a+b,"<BR>"); // hasil 123456 document.write(parseInt(a)+parseInt(b),"<BR>"); // hasil 579
7.5.2
parseFloat()
Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah variabel yang dilewatkan dengan parameter tertentu menjadi bilangan desimal, Sintaks dari fungsi parseFloat adalah sebagai berikut :
parseFloat(string);
Contoh :
var a = "128,34"; var b = "128.34"; document.write(parseFloat(a),"<BR>"); // hasil 128 document.write(parseFloat(b),"<BR>"); // hasil 128.34
7.6
Operator
Operator adalah simbol untuk memanipulasi variabel, dengan kata lain melakukan operasi-operasi, mengevaluasi, dan lain-lainnya. JavaScript memiliki operator binari maupun unari. Suatu operator binari memiliki format : operand1 operator operand2. Sebagai contoh, 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari. Operator unari memiliki dua format: operand operator atau operator operand Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++. Operator JavaScript dapat dibagi menjadi beberapa kategori berikut:
7.6.1
Operator pemberi nilai (=) adalah suatu operator binari yang digunakan untuk memberi nilai ke operand di sisi kiri (biasanya berupa suatu
Pemrograman Javascript
7-13
Politeknik Telkom
Pemrograman Web
variabel) yang didasarkan pada nilai operand sebelah kanan (seperti NamaDepan = "Hendra" atau x = y * 9). Tabel 7-3 Daftar Operator Assignment Shorthand operator x += y x -= y x *= y x /= y x %= y x <<= y x >>= y x >>>= y x &= y x |= y x ^= y Artinya x=x+Y x=x-y x=x*y x=x/y x=x%y x = x << y x = x >> y x = x >>> y x=x&y x=x|y x=x^y Contoh x += x -= x *= x /= x %= x <<= x >>= x >>>= x &= 0xC0 x |= 0x0F x ^= 0XFF
7.6.2
Operator penghitungan digunakan untuk memodifikasi nilai dari variabel secara matematika. Tabel 7-4 Jenis Operator Aritmatika
Pemrograman Javascript
7-14
Politeknik Telkom
Pemrograman Web
7.6.3
Operator Afektasi
Operator ini digunakan untuk menyederhanakan operasi penambahan nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri. Operasi ini biasanya ditulis dengan cara berikut : x=x+2, dengan menggunakan operator afektasi operasi tersebut bisa dituliskan menjadi x+=2, dan jika nilai awal x=7 maka nilai akhir x menjadi 9. Jenis jenis operator seperti ini adalah sebagai berikut : Tabel 7-5 Jenis Operator Afektasi
7.6.4
Operator Inkrementasi
Operator ini digunakan untuk menambahkan ataupun mengurangi per unit dari satu variabel. Operator ini sangat berguna dalam struktur pemrograman sistem Loop, yang membutuhkan penghitung (variabel yang nilainya naik/turun satu persatu). Operator dengan model x++ bisa menggantikan notasi x=x+1 atau x+=1 Tabel 7-6 Jenis Operator Inkrementasi
7.6.5
Untuk programmer yang perlu menangani bit. JavaScript menyediakan satu set dari operator bitwise. Untuk operator ini, JavaScript melakukan konversi terhadap operand menjadi integer 32-bit sebelum melakukan operasi padanya. Operator logika bitwise adalah :
Pemrograman Javascript 7-15
Politeknik Telkom
Pemrograman Web
Bitwise AND (&), akan mengembalikan nilai dari logika AND antara sepasang bit. Sebagai contoh , 0x0f & 0x0a mengembalikan 0x0a. Bitwise OR (|), akan mengembalikan nilai dari logika OR antara setiap pasangan dari bit. Sebagai contoh, 0x05 | 0x0a mengembalikan 0x0f. Bitwise XOR (^), akan mengembalikan nilai dari logika exclusive OR between antara tiap pasangan bit. Sebagai contoh, 0x0f ^ 0x0a mengembalikan 0x05. JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1 terhadap jumlah yang ditentukan di operand2. Operand ini adalah Shift left (<<), akan mengeser bit ke kiri dengan jumlah tertentu. Bit yang melewati batas kiri akan diabaikan, dan suatu bit nol akan digeser dari kanan. Sebagai contoh, 0x0f << 2 mengembalikan 0x3c. Sign propagating shift right (>>) mempertahankan bit tanda dari nilai ketika melakukan geser ke kanan sesuai dengan jumlah yang ditentukan. Bit yang tergeser melewati bata kanan akan diabaikan, kecuali bit tanda, bit nol akan digeser dari kiri. Sebagai contoh, 10 >> 2 mengembalikan 2 dan -10 >> 2 mengembalikan -2. Zero-fill right shift (>>>) sama seperti >>, cuma tidak mempertahankan bit tanda ketika dilakukan pergeseran sesuai dengan jumlah yang ditentukan.
7.6.6
Operator logika membutuhkan operand dengan nilai Boolean (true atau false) dan mereka akan mengembalikan suatu nilai logika. Operator logika adalah sebagai berikut : Tabel 7-7 Jenis Operator Logika
Pemrograman Javascript
7-16
Politeknik Telkom
Pemrograman Web
7.6.7
Operator ini digunakan untuk melakukan pemeriksaan suatu nilai dan membandingkannya dengan nilai atau kondisi yang lain. Tabel 7-8 Jenis Operator Pembanding
Pemrograman Javascript
7-17
Politeknik Telkom
Pemrograman Web
7.6.8
Operator String
Operator string (+) menggabung dua nilai string dan mengembalikan satu string dimana merupakan hasil gabungan dari keduanya. Sebagai contoh :
"Java" + "Script"
Menghasilkan
"JavaScript"
Operator shorthand + mengabung string kiri dengan string dikanan operand dan memberikan nilai baru pada operand disebelah kiri.
7.7
Ekspresi
Ekspresi merupakan pengkombinasian beberapa operand dan operator yang dapat dievaluasi agar menghasilkan nilai tertentu. Literal dan variabel dihubungkan oleh operator dan akan menghasilkan ekspresi. JavaScript menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit. Contoh :
temp = 56; /* temp adalah variabel, 56 adalah variabel, = adalah operator, dan temp=56 adalah ekspresi.*/ temp = B + C; /* temp, B, C adalah variabel, = adalah operator, dan temp=B+C adalah ekspresi yang melibatkan operator aritmatik.*/
Ekspresi kondisional merupakan ekspresi yang nilainya tergantung pada kondisi tertentu. Sintaksnya sebagai berikut :
(kondisi) ? nilai1 : nilai2
pada ekspresi ini jika kondisi dievaluasi benar, ekspresi akan mengembalikan nilai1. Sebaliknya jika kondisi dievaluasi salah, ekspresi akan mengembalikan nilai2. Contoh :
temp = (X > Y) ? Benar : Salah ;
Contoh diatas, jika nilai X lebih besar dari Y, maka variabel temp akan bernilai Benar, jika X lebih besar atau sama dengan Y, maka variabel temp bernilai Salah.
Pemrograman Javascript
7-18
Politeknik Telkom
Pemrograman Web
7.8
Derajat Operator
Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu operator, urutan operasi dari operator menentukan nilai hasil evaluasi. Dengan menggunakan tanda kurung, programmer dapat mengatur aturan tersebut. Tabel 4 adalah urutan derajat/prioritas operasi dari yang paling rendah sampai yang paling tinggi. Tabel 7-9 Derajat/Prioritas Operator Keterangan Coma Assignment Conditional Logical OR Logical AND Bitwise OR Bitwise XOR Bitwise AND Equality Relational Bitwise shift Addition/subtraction Multiply/divide
Call, member, indeks
Operator , = += -= *= /= %= <<= >>= >>>= &= ^= |= ?: || && | ^ & == < << + * / ~ != <= >> % ++ -> >>> >=
Negation/increment/decrement !
() Untuk melewatkan parameter ke sebuah fungsi [] Untuk mengakses indeks array . Untuk mengakses metode atau properti dari sebuah objek()
// hasilnya X = 22 // hasilnya X = 30 7-19
Contoh :
X = 2 + 4 * 5; X = (2 + 4) * 5; Pemrograman Javascript
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5. 6. 7. 8.
Teknologi di Web dibedakan menjadi dua, yaitu Server-Side contohnya PHP, ASP, JSP dan Client-Side contohnya JavaScript, VBScript. Pada Server-Side proses akan dilakukan di Web Server sementara client (Web Browser) hanya akan menerima hasilnya dalam bentuk HTML. Pada Client-Side proses akan dilakukan di sisi client. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML. JavaScript adalah bahasa yang case sensitive artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil. Pada JavaScript hanya dapat memanipulasi empat jenis data, yaitu : integer/float, string, boolean dan variabel dengan jenis null. Untuk melakukan konversi jenis variabel ada dua fungsi, yaitu : parseInt() dan parseFloat(). Operator pada JavScript antara lain : a. Operator Pemberi Nilai (Assignment operator) b. Operator penghitungan (Arithmetic operator) c. Operator Afektasi d. Operator Inkrementasi e. Operator Pemanipulasi Bit (Bitwise operator) f. Operator Logika (Logical operator) g. Operator Pembanding (Comparison operator) h. Operator String
Pemrograman Javascript
7-20
Politeknik Telkom
Pemrograman Web
Latihan
1. 2. 3. 4. 5. 6. 7. 8. 9.
Jelaskan perbedaan antara server-side-scripting dengan client-sidescripting! Jelaskan perbedaan variabel global dan variable lokal! Buatlah script untuk menampilkan tulisan berikut ini di browser : Ada apa di dalam "c:\windows\" Jelaskan beserta contohnya macam-macam tipe data pada Javascript! Tuliskan hasil dari parseInt(24Halo56)! Tuliskan hasil dari parseFloat(0024566)! Jelaskan fungsi operator inkrementasi beserta contohnya! Jelaskan beserta contohnya macam-macam operator pembanding yang terdapat pada Javascript! Analisa hasil keluaran dari program berikut ini :
<HTML> <HEAD> <TITLE> .::Latihan Tipe Data dan Operator::. </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.writeln ("<PRE>"); var X = 10; var Y = 5; var Z = 0; document.writeln ("X = " + X); document.writeln ("Y = " + Y); document.writeln ("Z = " + Z + "\n"); var A = ++X * Y++; document.writeln ("++X * Y++ = " + A); A = X + Y << 2; document.writeln ("X + Y << 2 = " + A); var A = A + A; document.writeln ("A + A = " + A); var A = (X + Y) / Z; document.writeln ("(X + Y) / Z = " + A); document.writeln ("</PRE>"); //--> </SCRIPT> </BODY> </HTML>
Pemrograman Javascript
7-21
Politeknik Telkom
Pemrograman Web
Overview
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi. Berdasarkan hasil komputasi yang telah dilakukan, JavaScript akan membuat keputusan jalur mana yang akan dieksekusi. Pada bagian ini akan dibahas tentang perintah kondisi dan loop dalam JavaScript. Walaupun semua kode harus ditulis dalam penanganan event, tetapi hal ini adalah praktek pemrograman yang kurang baik. Sebagai pengantinya, gunakan fungsi, kode akan menjadi lebih modular dan dapat digunakan kembali (reusable).
Tujuan
Mengerti esensi penggunaan Percabangan (pemilihan/kondisional) dalam JavaScript. 2. Memahami bentuk umum Percabangan. 3. Mengerti esensi penggunaan Pengulangan (Looping) dalam JavaScript. 4. Memahami bentuk umum Pengulangan 5. Memahami penggunaan Fungsi. 6. Memahami parameter pada fungsi dalam JavaScript. 7. Memahami bentukbentuk fungsi bawaan dalam JavaScript 8. Memahami perbedaan penggunaan Fungsi dan Kejadian. 9. Memahami bentukbentuk kejadian dalam JavaScript. 10. Mampu mengimplementasikan Percabangan, Pengulangan, Fungsi dan Kejadian pada suatu studi kasus JavaScript.
1.
Struktur Kontrol dan Fungsi 8-1
Politeknik Telkom
Pemrograman Web
8.1 8.1.1
Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian sebelumnya. JavaScript memiliki suatu perintah kondisi if. Dengan pernyataan percabangan, program Anda dapat melompat ke baris lain. Pernyataan if..else Pernyataan ini digunakan untuk menguji sebuah kondisi, kemudian mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, atau mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi. Tata cara penulisan dari perintah kondisi tersebut adalah sebagai berikut: Tabel 8-1 Penulisan Menggunakan Pernyataan If Blok Pernyataan if
If (kondisi1) { //pernyataan yang dieksekusi //jika kondisi1 terpenuhi } [else if (kondisi2) { //pernyataan yang dieksekusi //jika kondisi1 TIDAK terpenuhi //dan kondisi2 terpenuhi } else { //pernyataan yang dieksekusi //jika kondisi2 TIDAK terpenuhi } ]
Contoh
<HTML> <HEAD> <TITLE>:Latihan Percabangan:</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var n = 5; if (n > 3) { status = true ; j = 0 ; document.write("j=" + j + "\n");} else { status = false ; j = n ; document.write("j=" + j + "\n");} //--> </SCRIPT> </BODY> </HTML>
kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false. Perhatian Suatu kondisi numerik yang menghasilkan nol adalah tidak sama dengan suatu Boolean true pada JavaScript, dan sebaliknya suatu nilai bukan nol tidak sama dengan Boolean false. Pada JavaScript hasil dari suatu kondisi harus data type Boolean.
Struktur Kontrol dan Fungsi 8-2
Politeknik Telkom
Pemrograman Web
Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh berikut adalah perintah yang benar:
if ( a==b ) j = 0 else j = 1
Pada pernyataan if..else, Anda bisa menggabungkan beberapa kondisi dengan menggunakan operator logika &&,||, atau !. Perhatikan contoh berikut:
if (( a > 0 ) && ( b > 0 ) j = 1 ; else j = 0 ;
Pada contoh diatas, bila a dan b lebih besar dari nol, maka j diberi nilai 1. Sebaliknya jika salah satu dari a atau b tidak lebih daripada 0, maka x bernilai 0. Catatan Pada modul sebelumnya telah dibahas mengenai ekspresi. Contoh :
if ((a > 0) && (b > 0) j = 1 ; else j = 0 ;
Pernyataan switch . case Instruksi ini memungkinkan untuk melakukan test berbagai nilai dari variabel yang sama. Dengan cara ini dapat melakukan testing terhadap berbagai nilai variabel lebih sederhana daripada memakai instruksi if. Kata di dalam tanda kurung sesudah kata switch menunjukkan nama variabel yang akan di test pada kasus nilai yang berbeda. Pada saat nilai variabel yang akan di test sama dengan nilai kasusnya (case) maka blok instruksi di bawahnya akan dieksekusi. Kata break berarti berhentinya atau keluar dari struktur kondisi switch. Kata default berarti blok instruksi dibawahnya akan dieksekusi bila nilai variabel yang masuk tidak sama dengan semua kasus (case) yang ada. Sintaksnya adalah sebagai berikut :
8-3
Politeknik Telkom
Pemrograman Web
Tabel 8-2 Penggunaan Pernyataan Switch-Case Blok Pernyataan Switch ... case switch (Variabel) { case Nilai1: //blok instruksi; break; case Nilai2: //blok instruksi; break; case NilaiX: //blok instruksi; break; default: //blok instruksi; break; }
8.1.2
Pengulangan (Looping)
Sebelum berbicara tentang instruksi, kita bicarakan dulu tentang Loop. Loop adalah struktur instruksi-instruksi yang dapat di eksekusi berulang-ulang selama kondisi syaratnya belum terpenuhi. Cara yang paling umum dalam melakukan Loop adalah dengan menambahkan variabel penghitung/counter (variabel yang bertambah satu unit nilai selama satu kali Loop instruksi dijalankan (increment)), Loop akan berhenti jika variabel penghitung sudah melewati batas nilai tertentu yang dijadikan syarat. JavaScript mendukung dua struktur loop, perintah for dan perintah while. Untuk kontrol pada struktur loop, JavaScript menyediakan perintah break dan continue.
Struktur Kontrol dan Fungsi 8-4
Politeknik Telkom
Pemrograman Web
Penjelasan dari contoh diatas, loop ini akan 5 kali menampilkan nilai dari i, mulai dari i=1,2,3,4,5. Loop dimulai dari i=1 dan akan selalu melakukan cek dan verifikasi apakah nilai i kurang dari 6. Sampai pada i=6, dimana kondisi syaratnya sudah tidak terpenuhi maka loop akan berhenti. Urutan proses untuk perintah for adalah sebagai berikut: 1. 2. Interpreter menjalankan ekspresi-awal. Ekspresi ini menentukan nilai yang diperlukan untuk kendali perulangan. Kemudian interpreter memeriksa kondisi. Jika true, kendali dilanjutkan ke langkah selanjutnya. Jika false, kendali diarahkan ke perintah setelah perulangan.
8-5
Politeknik Telkom
Pemrograman Web
3. 4.
Interpreter menjalankan ekspresi-penambah, yang mana melakukan update terhadap variabel yang digunakan untuk kendali perulangan. Kemudian statement dijalankan dan, jika ditemukan suatu break atau continue, kendali kembali ke langkah 2.
Test kondisi terjadi pada perulangan while yang pertama kali dan pada akhir dari setiap loop. Ketika hasil test mengembalikan false, kendali dilewatkan ke perintah berikutnya setelah loop. Karena instruksi ini menjalankan program selama kondisi syarat terpenuhi, maka perlu diperhatikan baik baik syarat yang kita berikan, agar supaya instruksi tidak menjadi loop tanpa henti (infinity) dan membuat error navigator kita.
8-6
Politeknik Telkom
Pemrograman Web
Ada hal yang patut di perhatikan juga, ada kalanya kita perlu melakukan lompatan (jump) terhadap satu atau beberapa nilai tertentu di dalam loop tanpa menghentikan loop itu sendiri. Sintaks yang digunakan disini adalah continue, dan di letakkan di dalam loop itu sendiri, pada umumnya kita tambahkan juga struktur kondisional sebagai syarat supaya sintaks tersebut berjalan lancar. Contoh : kita akan mencetak hasil dari persamaan 1/(x-7) untuk nilai x = 1 sampai x = 10, cukup jelas untuk nilai x = 7 maka akan menghasilkan error (pembagian dengan 0), berkat instruksi continue kita bisa memperlakukan secara terpisah nilai x = 7, dan meneruskan loop dari program tersebut.
<HTML> <HEAD> <TITLE>::Latihan Looping:: </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.writeln ("<PRE>"); var x=1; while (x<=10)
8-7
Politeknik Telkom {
Pemrograman Web
if (x == 7) { document.writeln("pembagian oleh 0"); x++; continue; } a = 1/(x-7); document.writeln(a); x++; } document.write ("</PRE>"); //--> </SCRIPT> </BODY> </HTML>
8-8
Politeknik Telkom {
Pemrograman Web
a = x-7; if (a == 0) { document.writeln ("pembagian oleh 0"); break; } document.writeln (1/a); } document.write ("</PRE>"); //--> </SCRIPT> </BODY> </HTML>
8.2
Fungsi
Fungsi merupakan subprogram yang memungkinkan untuk menjalankan sekelompok instruksi dengan satu pemanggilan sederhana nama fungsi tersebut dari satu atau beberapa bagian di dalam badan suatu program. Bentuk subprogram yang kita sebut fungsi ini sangat umum di pakai di banyak bahasa pemrograman (tentu saja dengan cara yang sedikit berbeda antara satu dengan lainnya). Di lain pihak suatu fungsi, juga bisa memanggil dirinya sendiri, ini kita sebut dengan fungsi rekursif (akan tetapi jangan lupa untuk meletakkan kondisi khusus supaya fungsi bisa berhenti, kalau tidak bisa membahayakan kelangsungan program secara global). Fungsi pada JavaScript pada dasarnya dibagi ke dalam dua macam yaitu fungsi yang Anda definisikan sendiri dan fungsi bawaan (built-in function). JavaScript sendiri mempunyai fungsi native (predefined) yang dapat diaplikasikan untuk satu atau banyak jenis obyek spesifik, kita sebut fungsi ini sebagai metoda (akan dibahas pada bagian lain).
8.2.1
Mendefinisikan Fungsi
Sebelum digunakan, suatu fungsi harus di definisikan terlebih dahulu karena untuk memanggil fungsi tersebut dari dalam program, navigator harus mengenalinya terlebih dahulu, dalam artian mengenali namanya, argumennya, dan instruksi di dalamnya. Pendefinisian satu fungsi dinamakan deklarasi. Sintaks pendeklarasian suatu fungsi adalah sebagai berikut :
8-9
Politeknik Telkom
Pemrograman Web
Tabel 8-5 Contoh Sript Penggunaan Fungsi Blok Function 1. { // daftar instruksi atau // blok instruksi } Function tanpa Parameter function Nama_Fungsi() Contoh
<HTML> <HEAD> <TITLE>:Latihan Function:</TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function myHomepage() { document.write("Ini Homepage Saya <br>"); document.write("Menggunakan JavaScript <br>"); } myHomepage(); //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Blok Function 2. function dengan Parameter function Nama_Fungsi (parameter1, parameter2,...) { // daftar instruksi atau // blok instruksi }
Contoh
<HTML> <HEAD> <TITLE>:Latihan Function: </TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function Tulis(str) { document.write(str) } Tulis ("Ini fungsi dengan parameter"); //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Penjelasan : Kata kunci function diikuti nama_ fungsi tersebut. Penamaan dari fungsi mempunyai aturan yang sama dengan penamaan dari variable
Struktur Kontrol dan Fungsi 8-10
Politeknik Telkom
Pemrograman Web
o o o
Nama harus dimulai oleh huruf. Nama dari fungsi bisa berisi huruf, angka atau karakter _ dan &, karakter kosong atau spasi tidak diperbolehkan. Nama fungsi seperti juga nama variabel adalah case sensitive, jadi memperhatikan huruf besar dan huruf kecilnya.
Parameter adalah optional, boleh ada dan boleh tidak ada, jika argumen tidak ada maka tanda kurung harus tetap ditampilkan. Sebuah fungsi tidak hanya bisa menerima informasi, tapi dapat juga mengembalikan informasi atau nilai. Caranya dengan menambah kata kunci return. Contoh :
<HTML> <HEAD> <TITLE>::Latihan Function:: </TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function Mengembalikan_Nilai() { return 10; } document.write(Mengembalikan_Nilai()); //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
8.2.2
Pemanggilan Fungsi
Untuk mengeksekusi satu fungsi, kita cukup memanggil nama dari fungsi tersebut yang diikuti dengan kurung buka, argumen(jika ada) dan di tutup dengan kurung tutup.
Nama_dari_Fungsi() ;
Ingat : Titik koma memberikan tanda kepada navigator tentang akhir dari blok instruksi yang berbeda.
Struktur Kontrol dan Fungsi 8-11
Politeknik Telkom
Pemrograman Web
Jika anda mendefinisikan suatu argumen untuk suatu fungsi, maka pada saat pemanggilannya anda harus memanggil fungsi tersebut lengkap dengan argumentnya. Contoh :
<HTML> <HEAD> <TITLE>::Latihan Function:: </TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function Tulis(str) { document.write(str) } function Tambah(x, y) { return (x + y); } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="javaScript"> <!-var a = Tambah(2,5); Tulis(a); //--> </SCRIPT> </BODY> </HTML>
Dengan adanya event administrator yang bernama onLoad (di letakkan di dalam tag BODY), kita bisa memanggil fungsi pada saat loading halaman dokumen HTML, sebagai contoh inisialisasi nilai awal dari skrip anda atau melakukan test apakah navigator dapat menjalankan fungsi dari skrip atau tidak. Contohnya adalah sebagai berikut :
<HTML> <HEAD> <TITLE>::Latihan Function:: </TITLE>
8-12
Politeknik Telkom
Pemrograman Web
<SCRIPT LANGUAGE="javaScript"> <!-function myHomepage() { document.write("Ini Homepage Saya<br>") document.write("Menggunakan JavaScript<br>") } //--> </SCRIPT> </HEAD> <BODY onload="myHomepage();"> </BODY> </HTML>
8.2.3
Seperti contoh sebelumnya, kita bisa melewatkan parameter di dalam suatu fungsi, dalam artian kita berikan nilai atau nama variabel supaya fungsi itu bisa di eksekusi berdasarkan parameter tersebut. Pada saat kita melewatkan beberapa parameter ke dalam fungsi, parameter-parameter tersebut dipisahkan oleh tanda koma, baik pada saat deklarasi ataupun pada saat pemanggilan. Kita lihat contoh di bawah ini, kita akan membuat program JavaScript yang menampilkan kotak dialog :
<HTML> <HEAD> <SCRIPT language="Javascript"> <!-function Tampilkan() { alert('Menggunakan alert'); } //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:;" onClick="Tampilkan();">Teks</A> </BODY> </HTML>
8-13
Politeknik Telkom
Pemrograman Web
Hasilnya :
Gambar 8-1 Contoh Tampilan Kotak Dialog 8.2.4 Menggunakan Fungsi-fungsi Bawaan (Built-in Function) Pada pembahasan sebelumnya telah diperkenalkan fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu, yaitu parseInt dan parseFloat. Kedua fungsi tersebut merupakan fungsi bawaan JavaScript, selain itu masih ada beberapa fungsi bawaan lainnya, yaitu eval, escape, unescape dan isNaN. Sintak umum dari fungsi bawaan adalah sebagai berikut :
nama_fungsi_bawaan (str)
1.
Fungsi eval
Fungsi eval digunakan untuk mengevaluasi ekspresi atau pernyataan JavaScript. Fungsi ini banyak digunakan sebagai pengevaluasi ekspresi (dapat dianalogikan dengan parser). Selain itu dapat digunakan untuk mengeksekusi pernyataan. 2. Fungsi escape Fungsi eval digunakan untuk menyandikan string ke himpunan karakter ISO-Latin-1. Tujuannya agar string tersebut dapat dibaca oleh semua komputer. Fungsi eval mengganti semua karakter non-alfanumerik pada parameter string ke bentuk %xx, dimana xx adalah nomor dari karakter ISO-Latin-1. sebagai contoh karakter spasi akan diganti menjadi %20. 3. Fungsi unescape yaitu mengembalikan hasil Merupakan kebalikan fungsi escape, penyandian ke himpunan karakter ASCII.
Struktur Kontrol dan Fungsi
8-14
Politeknik Telkom
Pemrograman Web
4. Fungsi isNaN
Digunakan untuk menguji suatu variabel adalah bilangan atau bukan. Jika variabel yang diuji bukan bilangan, fungsi akan mengembalikan true, jika sebaliknya fungsi ini mengembalikan false.
8.3
Kejadian (Event)
Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse (merupakan satu satunya aksi yang dapat diatur oleh HTML). JavaScript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas zona tertentu, perubahan nilai dan lain sebagainya. Event administrator adalah yang memperbolehkan untuk mengasosiasikan satu aksi ke dalam sebuah event. Sintaks dari event administrator tersebut adalah sebagai berikut :
OnEvenement = "Aksi_Javascript_atau_Fungsi();"
8.3.1
Macam-macam Kejadian
Dalam JavaScript terdapat beberapa macam kejadian yang harus ditangani. Dibawah ini beberapa kode yang harus dimasukkan ke dalam tag event administrator untuk menghasilkan aksi tertentu. Tabel 8-6 Jenis - Jenis Kejadian pada JavaScript
8-15
Politeknik Telkom
Pemrograman Web
8.3.2
Dibawah ini akan mencoba satu contoh sederhana cara menampilkan kotak dialog yang berisi tulisan 'Latihan Event' (dengan tanda satu petik di depan dan di belakang kata) sesudah anda melakukan klik terhadap satu link
Struktur Kontrol dan Fungsi 8-16
Politeknik Telkom
Pemrograman Web
Analisa skrip diatas : Event administrator onClick dimasukkan didalam tag links dari hiperteks <a href=.> Tujuan dari skrip ini adalah menampilkan satu kotak dialog, jadi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain, oleh karena itu kita masukkan kode "javascript:;" didalam atribut href untuk memberi tahu navigator kalau kita ingin tetap berada di halaman yang sedang di proses tersebut. Perhatikan penggunaan \' di dalam kalimat \'Latihan Event\'. Tanda antislash (\) di depan tanda petik untuk memperingatkan navigator kalo dianggap sebagai karakter biasa dan bukan di intepretasi sebagai pembatas string.
8-17
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5. 6. Untuk mengatur aliran informasi pada sebuah halaman web yang interaktif diperlukan perintah percabangan dan pengulangan. JavaScript mendukung dua struktur percabangan, yaitu pernyataan if..else dan pernyataan switch..case. JavaScript mendukung dua struktur pengulangan, perintah for dan perintah while. Untuk kontrol pada struktur loop, JavaScript menyediakan perintah break dan continue. Fungsi merupakan subprogram yang memungkinkan untuk menjalankan sekelompok instruksi dengan satu pemanggilan sederhana nama fungsi tersebut dari satu atau beberapa bagian di dalam badan suatu program. Selain fungsi yang didefinisikan tersendiri, JavaScript juga menyediakan fungsi-fungsi bawaan, antara lain : parseInt, parseFloat, eval, escape, unescape dan isNaN. Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse.
Latihan
1. 2. 3. 4.
Buatlah program menggunakan JavaScript untuk menampilkan bilangan genap atau bilangan ganjil terhadap sebuah nilai tertentu. Buatlah program menggunakan JavaScript untuk menghasilkan bilangan fibonaci! Buatlah program kalkulator menggunakan fungsi dalam JavaScript! Analisa hasil keluaran dari program berikut ini :
<HTML> <HEAD> <TITLE> ::Latihan Fungsi dan Event:: </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var Global = 0; var Lokal = 0;
8-18
Politeknik Telkom function fUbahVariabel () { var Lokal; Global = 100; Lokal = 100;
Pemrograman Web
document.writeln ("Di dalam fungsi fUbahVariabel"); document.writeln ("Global = " + Global); document.writeln ("Lokal = " + Lokal + "\n"); } function fTulisVariabel (str) { document.writeln (str); document.writeln ("Global document.writeln ("Lokal document.writeln (" "); } function fTukarVariabel (a, b) { var temp = a; a = b; b = temp; } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.writeln ("<PRE>"); Global = 75; Lokal = 25; fTulisVariabel("Keadaan Awal"); fUbahVariabel (); fTulisVariabel ("Setelah Pemanggilan fungsi fUbahVariabel"); fTukarVariabel (Global, Lokal); fTulisVariabel ("Setelah Pemanggilan fungsi fTukarVariabel"); document.writeln ("</PRE>"); //--> </SCRIPT> </BODY> </HTML>
= =
8-19
Politeknik Telkom
Pemrograman Web
Overview
Untuk menangani permintaan dan pengolahan input data dari user, JavaScript menyediakan objek-objek yang dapat digunakan sesuai kebutuhan. Pada sebuah web berbasis basisdata, dibutuhkan pula penanganan form validasi input dari user dan kemudian dilakukan pengiriman ke server.
Tujuan
1. Mengerti esensi penggunaan Objek dalam JavaScript. 2. Mampu menciptakan objek sendiri. 3. Mampu membuat properti dan metoda untuk suatu objek. 4. Mampu menggunakan objek-objek bawaan pada JavaScript. 5. Memahami Hirarki Objek Browser dan Objek HTML. 6. Mengenal Macam-macam Objek Browser pada JavaScript. 7. Mengerti esensi penggunaan Frame dalam JavaScript. 8. Mengerti esensi penggunaan Form dalam JavaScript. 9. Mampu memecahkan masalah dengan menggunakan Frame dan Form serta
9-1
Politeknik Telkom
Pemrograman Web
9.1 9.1.1
JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan merupakan bahasa object-oriented programming (OOP). Perancang JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang telah dibuat dengan suatu bahasa OOP kedalam dokumen HTML. Selanjutnya Javascript tidak memiliki encapsulation, inheritance dan abstraction seperti pada bahasa pemrograman C atau Java. Tetapi class pada JavaScript menyediakan properti dan metode untuk membuat objek. JavaScript memperlakukan elemen-elemen yang tampil di jendela navigator kita sebagai suatu objek, yang artinya adalah elemen yang : Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga bisa diketahui dimana letak/lokasi objek itu sebenarnya. 2. Dimana kita mengasosiasikan dengan kondisi atau sifat sifat khusus (properti). Pengertian diatas mungkin sedikit membingungkan bagi anda, tapi coba lihat contoh berikut ini untuk memperjelas. Misal bayangkan ada satu pohon yang terletak di dalam satu kebun, dimana pohon itu mempunyai banyak dahan, dan di salah satu dahannya terdapat sarang burung. Hirarkinya sebagai berikut : Pohon Dahan Daun Sarang Burung o Panjang = 20 o Warna = kuning o Tinggi = 4 Batang Akar Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut :
1. Pohon.Dahan.Sarang Burung
Bayangkan sekarang untuk mengecat atau mengganti warna sarang burung yang terletak di atas pohon, maka cukup mengetik perintah berikut ini :
Kebun.Pohon.Dahan.Sarang Burung.warna=hijau
9-2
Politeknik Telkom
Pemrograman Web
Penjelasan diatas merupakan ilustrasi tentang bagaimana memperlakukan objek didalam JavaScript, perbedaannya adalah bukan pohon sebagai bentuk objek kita, akan tetapi navigator kitalah sebagai objek utamanya.
Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index:
pegawai["name"]="Budi Suseno" pegawai["age"]=35 pegawai["weight"]=85
9-3
Politeknik Telkom function Mahasiswa(NIM, Nama, Umur) { this.NIM = NIM; this.Nama = Nama; this.Umur = Umur; }
Pemrograman Web
Untuk seterusnya fungsi diatas disebut konstruktur objek, karena Anda telah mengkonstruksi sebuah objek dengan fungsi tersebut. Untuk menciptakan instant dari objek mahasiswa diatas, kita gunakan kata kunci new (maksudnya satu objek yang lain dengan properti sama dengan objek mahasiswa) :
Mahasiswa1 = new Mahasiswa("30108010", "Susan", 18);
Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan dari JavaScript yaitu dengan perintah for...in , perintah with, operator new, dan kata kunci this. Bila Anda ingin menggunakan properti atau memanggil metode beberapa kali, dapat mempersingkat penulisan dengan pernyataan with. Pernyataan with menghilangkan perlunya penulisan nama objek.
with nama_objek{ nama_properti = suatu_nilai; nama_metode(); }
9.1.2
JavaScript telah menyediakan predefined objects, yaitu objek-objek yang telah terdefinisi dan siap dipakai. Objek-objek ini distandarisasikan oleh asosiasi ECMA (European Computer Manufacturer Association). Berikut ini adalah daftar objek standar JavaScript.
9-4
Politeknik Telkom
Pemrograman Web
Cara mendefinisikan objek standar JavaScript untuk array, boolean, date adalah sebagai berikut :
var nama_variabel = new nama_objek()
Cara mendefinisikan objek standar JavaScript untuk math adalah sebagai berikut :
document.write(nama_objek.nama_metoda())
Cara mendefinisikan objek standar JavaScript untuk string adalah sebagai berikut :
var nama_variabel_hasil = nama_variabel_string.metoda()
9.1.3
Metoda
Metoda adalah suatu fungsi yang diasosiasikan dengan satu objek, satu aksi yang bisa di eksekusi pada satu objek. Metoda pada objek dari navigator adalah fungsi-fungsi yang sudah didefinisikan sebelumnya (predefined) berdasarkan aturan-aturan HTML dan tidak bisa dimodifikasi. Akan tetapi bisa dibuat metoda yang mempersonalisasikan sendiri untuk
9-5
Politeknik Telkom
Pemrograman Web
setiap objek yang di buat. Perhatikan contoh tentang dokumen HTML, yang terdiri dari objek yang bernama document, objek ini mempunyai metoda yang bernama write() yang berguna untuk memodifikasi isi dari dokumen HTML dengan menampilkan teks tertentu. Maka metoda itu akan di panggil dengan cara berikut :
window.document.write()
Secara praktisnya bisa menuliskan metoda write() sebagai berikut : 1. 2. Menuliskan secara langsung teks ke dalam parameter :
document.write("selamat");
3.
4.
Menyisipkan langsung satu ekspresi, yang akan dievaluasi dan dijalankan segera mungkin, dan hasilnya langsung ditampilkan
test='akar dari bilangan 2 adalah : ';
9-6
Pemrograman Web
5.
Cara lain juga bisa dengan memasukkan tag HTML kedalam metoda write:
document.write('<font color="#FF0000">Hallo</font>');
9.1.4
Object Browser
Objek Browser
Objek HTML
Gambar 9-1 Hirarki objek browser & objek HTML pada JavaScript Hirarki ini penting untuk membuat acuan kepada Objek dan propertinya. Turunan dari suatu Objek adalah properti dari objek orang tuanya. Karena semua objek adalah merupakan turunan dari objek window,
Object, Frame dan Form pada JavaScript 9-7
Politeknik Telkom
Pemrograman Web
sehingga objek window sendirinya tidak memiliki acuan ke objek maupun properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window lain membutuhkan tambahan nama window kepada Objek acuan-nya. Contoh :
window.document window.document.forms["frForm"] window.location
Tabel 9-2 Macam-macam Objek Browser Nama Objek navigator window Fungsi Meyimpan informasi tentang browser yang digunakan pengguna, seperti nama dan versi browser Menyimpan segala macam informasi tentang jendela browser Properti Objek
Memberikan peringatan kepada user Memberikan pilihan yang harus dipilih oleh user Meminta user untuk mengisi atau melengkapi isian pada suatu form field. Tabel 9-3 Macam-macam Metoda Objek Window
Fungsi Memungkinkan navigator untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan
Contoh
alert('Input Sukses!');
9-8
Politeknik Telkom
close() confirm()
Untuk menutup window acuan. Sama seperti metoda alert, dengan tambahan dapat melakukan pilihan OK atau cancel Mendapatkan informasi yang diberikan oleh user. Dengan metode ini, evaluasi dari ekspresi adalah jumlah delay dalam milidetik. timeoutID adalah hanya digunakan oleh metode clearTimeout. Metode ini membatalkan time-out yang ditentukan oleh metode setTimeout.
confirm('teks');
prompt('teks_pertanyaan', 'teks_default');
9.2 9.2.1
Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspek-aspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika user memilih menu option File|New Web Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut. Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET> </FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika dokumen frame ditutup, frame menghilang karena keberadaannya tergantung pada dokumen tersebut.
9.2.2
Seperti telah dijelaskan sebelumnya mengenai objek window, pada bagian ini akan dijelaskan lebih lanjut lagi mengenai Objek window tersebut, karena objek ini sangat berhubungan dengan frame dan form yang akan dibangun pada sebuah halaman HTML.
9-9
Politeknik Telkom
Pemrograman Web
Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan pesan, tetapi sangat tergantung pada parameter yang diberikan. Berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser : 1. defaultStatus.defaultStatus adalah pesan yang dimunculkan pada status bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset dari onMouseOver event handler, event handler harus mengembalikan true untuk perubahan status. frames. Property ini adalah suatu array yang mengandung objek frame. Frame mewarisi semua properti dan metode dari objek window. length. nilai dari properti ini adalah jumlah frame dalam frame array. parent. Dari suatu acuan frame, ini adalah window yang mana frameset berada. Suatu frame diantara frameset tersebut dapat mengacu pada frame lain dalam frameset dengan menggunakan parent.frames[index] tanpa memiliki acuan ke nama window. self. Ini adalah sama dengan window atau frame yang sekarang. status. Ini adalah pesan transient yang mana diset dengan onMouseOver event handler. top. Property ini digunakan sebagai acuan window yang laing atas. Dapat digunakan oleh child windows atau embedded filesets untuk mengacu pada window original. window. Property ini adalah sama dengan window sekarang.
2. 3. 4.
5. 6. 7. 8.
9-10
Politeknik Telkom
Pemrograman Web
Output :
9.2.3
Objek form hanya memiliki satu metode-submit. Metode submit melakukan aksi yang sama seperti tombol submit pada HTML form dan memiliki tata cara penulisan sebagai berikut:
document.formName.submit()
9.2.4
Objek element
Objek elemen berpengaruh pada isi elemen dalam tag <FORM></FORM>. Tabel 9 memperlihatkan elemen objek dan properti-nya. Tabel 9-4 Properti dari Objek Element Element objek button checkbox hidden password radio reset select submit text textarea Properti name, value name, value, checked, defaultChecked name, value name, value, defaultValue name, value, checked, defaultChecked, length name, value name, length, options array, selectedIndex name, value name, value, defaultValue name, value, defaultValue
9-11
Politeknik Telkom
Pemrograman Web
Properti adalah menggunakan pengalamatan seperti document.elementName.property, atau document.formName.elements[index].propertyName, dimana elementName adalah nilai dari nama property untuk objek elemen.
9.2.5
Metode element
Metode element melakukan emulasi dari sepupu mereka, yaitu penanganan event: blur(). Metode ini memindahkan fokus dari objek yang ditentukan, tetap tidak membuat fokus pada objek lain. click(). Metode ini melakukan suatu simulasi klik mouse pada suatu objek yang ditentukan. Ketika mengacu pada element radio, bentuknya adalah document.radioName[index].click(). focus(). Metode ini memberikan fokus pada objek tertentu. select(). Metode ini men-select seluruh text area. Kecuali objek radio, metode dialamatkan sebagai document.elementName.metodename(). Tabel 10 mendaftarkan element objek-objek dan metode yang bersesuaian Tabel 9-5 Metode-Metode dari Elemen Objek-Objek Elemen objek button checkbox hidden password radio reset select submit text textarea Metode click click (tidak ada metode) blur, focus, select click click blur, focus click blur, focus, select blur, focus, select
9-12
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4.
JavaScript memperlakukan elemen-elemen yang tampil di jendela navigator kita sebagai suatu objek. Programer dapat menciptakan sendiri objek yang ingin ditampilkan dalam halaman web, tetapi JavaScript juga menyediakan objek yang telah terdefinisi. Setiap objek mempunyai metoda yaitu suatu fungsi yang diasosiasikan dengan satu objek, satu aksi yang bisa di eksekusi pada satu objek. Untuk menangani frame dan form pada JavaScript, programer tinggal menggunakan objek browser beserta metoda ataupun properti yang sesuai dengan kebutuhan.
9-13
Politeknik Telkom
Pemrograman Web
Latihan
1. 2.
Sebutkan macam-macam objek standar JavaScript yang Anda ketahui! Buatlah objek initBarang yang mempunyai tiga properti, yaitu Nama, Supplier, dan Harga. Di samping itu, tambahlah dua metoda, yaitu Tulis untuk menulis nilai dari properti-properti objek ini dan Ubah untuk mengubah properti initBarang. Tampilkan hasil keluaran dengan menggunakan metode objek window alert()! Output : Nama : Acer Aspire 4710 Supplier : Acer Harga : 6.890.000 Nama Barang diubah Nama : Acer Aspire 4720s 4510MGHi Supplier : Acer Harga : 6.890.000
3.
9-14
Pemrograman Web
<SCRIPT LANGUAGE="JavaScript"> <!-document.writeln("<PRE>"); document.writeln("Title : " + document.title); document.writeln("URL : " + document.URL); document.writeln("Update terakhir : " + document.lastModified); document.writeln(" "); document.writeln("</PRE>"); // --> </SCRIPT> </BODY> </HTML>
4.
Buatlah halaman HTML dengan sebuah kotak teks yang menampilkan waktu dari mesin lokal pengguna. Tampilan sebagai berikut :
9-15
Politeknik Telkom
Pemrograman Web
Overview
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada serverside. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. Ketika seorang pengguna internet membuka suatu situs yang menggunakan fasilitas server side scripting PHP, maka terlebih dahulu server yang bersangkutan akan memproses semua perintah PHP di server lalu mengirimkan hasilnya dalam format HTML ke web server pengguna internet tadi. Sehingga kode asli yang ditulis dengan PHP tidak terlihat di browser pengguna. PHP merupakan software yang open source bebas. Jadi anda dapat merubah source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi (Windows dan Linux) dan web server apapun (misalnya: PWS, IIS, Apache).
Tujuan
1. Memahami cara melakukan instalasi Apache Web Server, PHP dan MySQL 2. Memahami cara melakukan konfigurasi pada web server 3. Mampu membuat halaman web sederhana dengan PHP 4. Mengenal Tipe Data PHP 5. Mengenal Variable PHP 6. Menggunakan Operator Aritmatika 7. Menggunakan Operator Logika 8. Menggunakan Operator Penggabungan String
Pengantar Pemrograman Web dengan PHP 10-1
Politeknik Telkom
Pemrograman Web
10.1 Pengenalan Lingkungan Kerja Web Server 10.1.1 Instalasi Apache Web Server, PHP & MySQL sebagai DBMS Pendukung
Pada umumnya, prinsip hubungan client (web browser) dan server (web server) dalam web dapat digambarkan sebagai berikut :
Gambar 10-1 Hubungan Client dan Server dalam Web Untuk menjalankan PHP, dibutuhkan beberapa perangkat lunak hal sebagai berikut : a. b. c. Apache Web Server PHP (www.php.net) MySQL (http://www.mysql.com).
Langkah-langkah instalasi dan konfigurasi perangkat lunak diatas, akan dipraktekkan secara langsung pada pelaksanaan praktikum. Berikut ini merupakan ilustrasi komponen yang diperlukan untuk membangun web server apache yang mendukung PHP dan DBMS mysql :
Politeknik Telkom
Pemrograman Web
2.
Penulisan lain yang sedikit lebih variatif dijabarkan dibawah ini. PHP hanya akan menampilkan salah satu dari kalimat Rajin pangkal pandai. atau Hemat pangkal kaya. tergantung nilai True / false dari variabel $pilih.
<?php if ($pilih) { ?> <i> Rajin pangkal pandai. </i> <?php }else{ ?> <b> Hemat pangkal kaya. </b> <?php }?>
10-3
Politeknik Telkom
Pemrograman Web
3.
4.
Contoh 0, 1, 6, 30, 20000, 399984 0x0, 0xf, 0xfc3da34, 0X0F0FD32 00, 032, 07344733 -2, -300040, -0xf, -0X0FOFD32, -032, -07344733
10-4
Politeknik Telkom
Pemrograman Web
float/double string
Merupakan nilai desimal/pecahan Kumpulan karakter. Ada 3 jenis : - single qouted - double qouted - heredoc qouted sebuah tipe yang memetakan ke suatu nilai Instansiasi dari class Variabel spesial Variable yang tidak mempunyai nilai. NULL berbeda dengan 0. - variabel di assign dengan NULL - variabel belum diberi value - variabel dilakukan fungsi unset()
10.2.1 Array
Array pada PHP merupakan susunan map (peta). Array merupakan sebuah tipe yang memetakan ke suatu nilai. Array juga merupakan sebuah set variabel yang terdiri dari sekumpulan jenis data yang sama, disimpan menggunakan indeks dalam satu variabel. PHP mengenal dua macam indeks, yaitu indeks numerik (menggunakan angka untuk menandai tiap elemen) dan indeks asosiatif (memberikan nama untuk masing-masing elemen). Array PHP dapat anda gunakan sebagai benar-benar array, list (vector), hashtable, dictionary, collection, stack, queue, tree dan lain sebagainya. Array dapat berdimensi satu, dua, atau lebih :
a. b. c.
Array dimensi satu (one-dimensional array) mewakili bentuk suatu vektor. Array dimensi dua (two-dimensional array) mewakili bentuk dari suatu matrik. Array dimensi tiga (three-dimensional array) mewakili bentuk suatu ruang.
1.Array Berindeks Numerik Inisialisasi sebuah array dilakukan dengan cara berikut :
$nama_variabel = array(nilai1, nilai2, nilai3);
Selain cara di atas, pembuatan array dapat juga dilakukan dengan cara seperti contoh berikut :
Pengantar Pemrograman Web dengan PHP 10-5
Politeknik Telkom $jurusan[] = "Komputerisasi Akuntansi"; $jurusan[] = "Ilmu Komputer"; $jurusan[] = "Teknologi Informasi";
Pemrograman Web
2.Array Berindeks Asosiatif Untuk membuat array berindeks asosiatif, kita membutuhkan label atau nama untuk masing-masing elemen seperti dalam contoh berikut :
$jurusan = array(IE=>" Komputerisasi Akuntansi", CS=>"Ilmu Komputer",IT=>"Teknologi Informasi");
3.Navigasi Array Untuk mengakses array berindeks numerik dapat dilakukan dengan mengarahkan urutan indeks dari elemen array yang dituju.
for($i=0;$i<3;$i++){ echo("Array \$jurusan index ke [$i] adalah $jurusan[$i] <br>");}
4.Fungsi-Fungsi Array
a. b. c.
sort() : Untuk mengurutkan elemen-elemen dalam array berindeks numerik. asort() : Untuk mengurutkan elemen-elemen dalam array berindeks numerik menurut isinya. ksort() : Untuk mengurutkan elemen-elemen dalam array berindeks numerik menurut indeksnya. Sintak array:
array( [key => ] value , . . .)
5.Implementasi Array
Key dapat berupa integer ataupun string. Value dapat berupa apapun. Contoh penggunaan:
<?php /* Contoh simple array dengan key dan value yang Bervariasi */ $a = array("Band" => "Blink", "code" => 182, 5 => " + 311 + ", 14 => 5000 ); echo $a["Band"]; // Blink echo $a["code"]; // 182 echo $a[5]; // + 311 + Pengantar Pemrograman Web dengan PHP 10-6
Politeknik Telkom
Pemrograman Web
echo $a[14]; // 5000 // Contoh penggunaan array didalam array $aa = array("music" => array(1=>"Jazz", 2=>"Classic", 3=>"Metal"), "sport" => array(1=>"basketball", 2=>"golf", 3=>"airsoftgun") ); echo $aa["music"][3]; // Metal echo $aa["music"][1]; // Jazz echo $aa["sport"][3]; // airsoftgun ?>
Pada array, jika anda melakukan assign nilai pada array dengan key array secara eksplisit tidak ditulis, maka indeks integer maximum akan digunakan, dan key baru adalah indeks key maksimum + 1. Jika sebelumnya tidak ada indeks yang digunakan maka key adalah 0. Contoh penggunaan:
<?php $myArray[] = "Please "; $myArray[3] = "me "; $myArray[6] = "on "; $myArray[] = "my own"; for ($i=0;$i<=7;$i++){ echo "Array ke $i: $myArray[$i] <br />"; } ?>
10.2.2 Object
Hal yang membedakan PHP4 dan PHP5 adalah performansi dari Zend PHP engine yang mengakibatkan script berjalan lebih cepat dan efisien. Perubahan lain yang juga menjadi fokus utama PHP5 adalah fitur objectoriented (OO) yang lebih baik. Beberapa fitur baru yang menyangkut konsep OO ditambahkan. Akan dibahas pada bab selanjutnya.
10.2.3 Resource
Resource adalah variable spesial, memegang peranan terhadap external resource seperti melakukan koneksi dengan database, fungsi-fungsi FTP, OpenSSL, PDF document, Image, XML parser dan lain sebagainya. Resource lengkap dapat anda lihat pada dokumentasi PHP yang dapat didownload di www.php.net.
10-7
Politeknik Telkom
Pemrograman Web
10-8
Politeknik Telkom
Pemrograman Web
Menggunakan Operator Logika Tabel 10-5 Macam-macam Operator Logika Keterangan TRUE jika $a dan $b TRUE. TRUE jika ada salah satu $a atau $b $a or $b / $a || $b Or TRUE. TRUE jika salah satu saja $a atau $b $a xor $b Xor TRUE ! $a Not TRUE jika $a tidak TRUE. Menggunakan Operator Penggabungan String Terdapat dua cara penggabungan string: a. Menggunakan operator konkatenasi (.). b. Menggunakan operator assignment konkatenasi (.=). Contoh :
<?php $a = Hallo; $b = $a.Selamat Datang di PHP; echo $b; //$b berisikan Hallo Selamat datang di PHP $x = Politeknik ; &y .= Telkom; echo $y; //$y berisikan Politeknik Telkom ?>
Nama And
10-9
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5. 6. 7.
PHP merupakan serverside scripting yang open source dan dapat berjalan lintas platform. Untuk menjalankan PHP dibutuhkan instalasi Web Server, software PHP dan Database Server. Dengan berjalan dalam sebuah web server, maka secara otomatis program ini bersifat multiuser. PHP mendukung delapan jenis tipe data, yaitu : boolean, integer, float/double, string, array, object, resource dan NULL. Variable pada PHP direpresentasikan oleh karakter dollar ($) dan dilanjutkan dengan nama variable tersebut. Variable pada PHP bersifat case-sensitive. Variable dalam PHP tidak perlu dideklarasikan terlebih dahulu sebelum digunakan. PHP menyediakan operator aritmatika, logika dan penggabungan string.
Latihan
1. 2. 3. 4. 5. 6.
Jelaskan kelebihan PHP di bandingkan dengan pemrograman web lainnya, misal dengan ASP! Apa saja yang diperlukan untuk dapat menjalankan aplikasi web dengan PHP? Jelaskan beserta contoh jenis tipe data yang Anda ketahui! Sebutkan syarat-syarat yang berlaku untuk membuat variable di PHP! Buatlah program untuk menghitung volume balok! Buatlah program untuk menghitung luas persegi panjang!
10-10
Politeknik Telkom
Pemrograman Web
Pada pemrograman web PHP disediakan struktur kontrol berupa statemen kondisional untuk menyelesaikan masalah pemilihan terhadap kasus tertentu dan statemen pengulangan yang dapat digunakan misalnya untuk menampilkan isi dari sebuah basis data. Untuk memudahkan pengaturan struktur program dalam PHP, user dapat membuat fungsi maupun menggunakan fungsi bawaan PHP yang dapat dipanggil setiap kali dibutuhkan.
Tujuan
Mengerti esensi penggunaan Percabangan (pemilihan/kodisional) dalam PHP. 2. Memahami bentuk umum Percabangan. 3. Mampu memecahkan masalah sederhana dengan menggunakan Percabangan dan mengimplementasikan ke dalam program PHP. 4. Mengerti esensi penggunaan Pengulangan (Looping) dalam PHP. 5. Memahami bentuk umum Pengulangan. 6. Mampu memecahkan masalah sederhana dengan menggunakan Pengulangan dan mengimplementasikan ke dalam program PHP. 7. Memahami penggunaan Fungsi. 8. Memahami parameter pada fungsi dalam PHP. 9. Memahami bentukbentuk fungsi bawaan dalam PHP. 10. Mampu mengimplementasikan Fungsi pada suatu studi kasus PHP. 11. Mengerti esensi penggunaan class di PHP. 12. Membuat sebuah class yang memiliki field dan fungsi.
1.
11-1
Politeknik Telkom
Pemrograman Web
11.1 Kondisional
Statement kondisional digunakan pada saat anda akan melakukan eksekusi blok statement tertentu. Misalnya anda memiliki beberapa blok statement dan anda hanya ingin mengeksekusi salah satunya. PHP dapat membantu menjalankan block yang anda inginkan dengan adanya pengecekan kondisional diawal block statementnya. Sintak PHP berkaitan dengan statement kondisional adalah statemen if else elseif dan statemen switch. Tabel 11-1 Statement Kondisional pada PHP Statement kondisional if-else-elseif Contoh
<?php $nilai = 83; if ($nilai > 70) { echo "Selamat Anda Lulus Ujian"; } elseif ($nilai == 70) { echo "Anda harus ujian lagi"; } else { echo "Anda Tidak Lulus"; } ?> <? switch ($bilangan){ case 28: echo "bilangan genap"; break; case 3: echo "bilangan ganjil"; break; default: echo "bukan bilangan"; break; } ?>
Switch-case
11.2 Pengulangan
Terkadang pada saat scripting terdapat statement yang perlu dieksekusi secara berulang agar dapat memperoleh output yang dibutuhkan. Yang perlu diperhatikan jika ingin melakukan pengulangan adalah kondisi apa pengulangan dimulai, kondisi apa pengulangan berhenti dan seperti apa pengulangan dilakukan. Beberapa sintak PHP berkaitan dengan pengulangan adalah while, for, do-while, foreach.
11-2
Politeknik Telkom
Pemrograman Web
Tabel 11-2 Statement Kondisional pada PHP Statement Pengulangan for Contoh
<?php for ($i=1;$i<=12;$i++){ echo "<br />for ke $i."; } ?> <?php // Contoh while model 1 $i=1; while ($i<=12){ echo "<br />while model 1 ke $i."; $i++; } // Contoh while model 2 $i=1; while ($i<=12): echo "<br />while model 2 $i++; endwhile;
while
ke $i.";
do-while
foreach
?> <?php $i = 1; do { echo "<br />do-while ke $i"; $i++; } while ($i <= 10); ?> <?php $arr = array("Strife", "Deftones", "Poison The Well", "Walls of Jericho", "As I Lay Dying" ); foreach ($arr as $varr){ echo "<br />$varr"; } ?>
11-3
Politeknik Telkom
Pemrograman Web
sama dengan aturan penamaan variable. Berikut contoh bentuk fungsi pada PHP :
<?php // Contoh fungsi tanpa parameter function dowrite(){ echo "Simple PHP function"; } dowrite(); // Pemanggilan fungsi // Contoh fungsi dengan parameter function dosum($a,$b){ return $a+$b; } echo dosum(4,2); // Menampilkan nilai dari fungsi yang dipanggil ?>
b.
string decbin (int number) Melakukan konversi dari decimal ke binary. Contoh :
11-4
Pemrograman Web
c.
int mt_rand ([int min, int max]) Melakukan random angka integer. Jika tidak terdapat parameter yang diinput maka fungsi ini akan melakukan random dari range 0 sampai maximal angka random yang diberikan oleh engine PHP. Untuk memberi range random, anda dapat menulis batas minimal dan maximal pada parameternya.
<?php echo mt_rand() . "<br />"; // menghasilkan angka random 1 echo mt_rand() . "<br />"; // menghasilkan angka random 2 echo mt_rand(1, 5); // menghasilkan angka random antara 1-5 ?>
b.
string nl2br ( string string ) Merubah new line (\n) menjadi <br />
<?php echo nl2br("Politeknik \n Telkom"); ?>
11-5
Politeknik Telkom
Pemrograman Web
c.
string number_format ( float number [, int decimal [, string penanda decimal, string penanda ribuan]] ) Memformat bilangan dan mengelompokan ribuan serta angka setelah penanda decimal.
<?php $bilangan = 2362454.385; $nbilangan = number_format($bilangan, 2, ',', '.'); echo $nbilangan; ?>
d.
mixed str_replace ( mixed search, mixed replace, mixed subject [, int &count] ) Melakukan replace kata yang dicari dengan kata baru.
<?php echo $kalimat; // Sebelum direplace echo "<br />"; $kalimat = str_replace($client_side, $server_side, $kalimat); echo $kalimat; // Setelah direplace ?>
e.
int strlen ( string string ) Menghasilkan nilai berupa jumlah string pada parameter input.
<?php $kalimat = "Giving and caring the world"; $jumlah = strlen($kalimat); echo "Terdapat $jumlah karakter"; ?>
11.5 Class
Class adalah sekumpulan variabel/property dan fungsi/method yang mengolah variabel-variabel ini. Class sering disebut juga sebagai objek. Dengan menggunakan objek proses pembuatan program menjadi lebih cepat, karena objek-objek yang sudah ada dapat dipakai untuk membuat objek yang lain. Struktur class di PHP adalah sebagai berikut :
class namaobjek { var $property; function method($arg) { //definisi method; } }
11-6
Politeknik Telkom
Pemrograman Web
Sintaksis di atas mendefinisikan sebuah objek yang bernama namaobjek dengan satu property $property dan satu method yaitu method(). Pada bagian ini akan diberikan contoh tipe data object/class.
<? class kendaraan { var $penumpang; function isi_penumpang($nama){ $this->penumpang[] = $nama; } function lihat_penumpang(){ print_r($this->penumpang); } } $mobil = new kendaraan; $mobil->isi_penumpang("Hartawan"); $mobil->isi_penumpang("Budiman"); $kapal = new kendaraan; $kapal->isi_penumpang("Peterpan"); $kapal->isi_penumpang("Putri Salju"); $kapal->isi_penumpang("Kapten Hook"); $mobil->lihat_penumpang(); $kapal->lihat_penumpang(); ?>
Pada contoh diatas diberikan sebuah kelas kendaraan yang mempunyai properti (yang dituliskan berupa variable) $penumpang dan 2 method (ditulis sebagai function) yaitu isi_penumpang yang akan menyimpan value dari parameter input (berupa variable $nama) ke properti $penumpang dan lihat_penumpang yang akan menampilkan semua value dari properti $penumpang. Baris selanjutnya $mobil melakukan create instance dari class kendaraan. Kemudian melakukan pemanggilan method isi_penumpang dan mengisinya dengan value Hartawan serta Budiman. Barisan selanjutnya, $kapal juga mengcreate instance / membuat object baru dari class kendaraan dengan value yang berbeda sebanyak 3 kali. Baris selanjutnya variable object $mobil dan $kapal memanggil method lihat_penumpang yang akan menampilkan value pada properti object tersebut di layar.
11-7
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5.
PHP menyediakan struktur kontrol berupa kondisional dan pengulangan, sama halnya seperti pada bahasa pemrograman lainnya. Struktur kondisional terdiri dari statemen if else elseif dan statemen switch. Sedangkan struktur kontrol pengulangan terdiri dari while, for, do-while, foreach. Pemrograman PHP menyediakan fungsi bawaan dan fungsi yang dapat dibuat sendiri oleh user. Fungsi bawaan dalam PHP antara lain untuk fungsi pengolahan matematika dan fungsi untuk pengolahan string.
11-8
Politeknik Telkom
Pemrograman Web
Latihan
1. 2. 3.
Jelaskan macam-macam struktur kontrol yang terdapat pada PHP dan apa fungsinya! Buatlah program untuk melakukan pengecekan hari menurut jam dari sistem pada komputer Anda! Buatlah program untuk menampilkan pilihan tanggal seperti tampilan di bawah ini :
4. 5.
6.
Buatlah fungsi untuk menghitung volume suatu bangun ruang, dengan pilihan balok, tabung, kubus dan bola! Buatlah program untuk menampilkan jumlah karakter pada tulisan berikut ini dan ganti kata diare dengan kata tubercolosis, tampilkan kata sebelum dan sesudah berubah : Penyakit diare sampai kini masih menjadi masalah kesehatan masyarakat, walaupun secara umum angka kesakitan masih berfluktuasi. Diare dapat dicegah dengan menjaga kebersihan lingkungan Buatlah sebuah class untuk pegawai yang mempunyai property nama=Ananda, umur=25 dan jabatan=staf operasional. Class tersebut mempunyai method yang digunakan untuk mengubah umur dan method untuk mengubah jabatan. Tampilkan data awal pegawai dan data setelah diubah!
11-9
Politeknik Telkom
Pemrograman Web
Overview
Pengolahan data pada server side scripting dilakukan di sisi server (dalam hal ini, yang menjadi pemroses adalah web server) untuk kemudian hasilnya dikembalikan kembali ke client dalam format html. Dalam pengolahan data menggunakan server side scripting, dikenal istilah requests dan responds. Request merupakan permintaan layanan dari sisi client kepada server. Proses request dimulai ketika user memasukkan data melalui media inputan pada form kemudian men-submit form. Respond merupakan hasil pengolahan oleh web server yang dikirimkan ke client. Berbeda dengan server side scripting, pengolahan data client side scripting dilakukan oleh web browser, jadi semua pengolahan data dilakukan di sisi client.
Tujuan
1. 2.
Memahami kegunaan elemen elemen dalam form Mengolah data yang dimasukkan melalui form
12-10
Politeknik Telkom
Pemrograman Web
Kita juga bisa menyisipkan tag HTML form ini ke dalam skrip PHP, contohnya:
echo("<FORM METHOD = ... ACTION = ... </FORM>");
Atribut METHOD mendefinisikan bagaimana data yang dikirimkan dari form ini akan dibaca untuk diproses oleh script PHP. ACTION diisi dengan nama file tujuan yang akan memproses data yang dimasukkan dalam form. Untuk penjelasan atribut-atribut yang dimiliki oleh form, bisa diperoleh dari sumbersumber yang membahas form pada HTML.
Skrip Hasil.php
<?php echo('Namanya <B>'.$nama. '</B> ?> Mengolah Data dalam Form ya? Nama yang bagus euy');
12-11
Politeknik Telkom
Pemrograman Web
Pertama-tama, jalankan dulu skrip variabel.php, lalu masukkan nama, dan klik tombol Proses. Lihat gambar 12-1. Setelah tombol Proses di klik, nama yang dimasukkan akan disimpan sebagai variabel, sehingga dapat diolah dan ditampilkan sesuai dengan keinginan. Lihat gambar 12-2.
12-12
Politeknik Telkom
Pemrograman Web
Skrip Proses.php
<?php If ($nama==Purnama && $rahasia==Winnie) { echo(Anda telah berhasil login); } Else { echo(Username atau Password anda masih salah); } ?>
Jalankan MetodeGet.html, lalu isikan Username : Purnama dan Password : Winnie, lalu tekan tombol login. Lihat gambar 12-3.
Politeknik Telkom
Pemrograman Web
Setelah tombol Login ditekan, data yang dimasukkan di form akan diproses skrip Proses.php, dan hasilnya seperti pada gambar 12-4.
Gambar 12-4 Hasil eksekusi Proses.php dengan metode get Dengan menggunakan metode get, data yang telah diisi di dalam form akan terlihat pada URL seperti ditunjukkan pada gambar 12-4.
Menjadi :
<FORM METHOD = POST ACTION = Proses.php>
Jalankan lagi skrip MetodeGet.html, masukkan username dan password, lalu tekan tombol Login, maka hasilnya seperti pada gambar 12-5.
12-14
Politeknik Telkom
Pemrograman Web
Gambar 12-5 Hasil Eksekusi Proses.php dengan metode post Dari penjelasan di atas, dapat terlihat bahwa ada perbedaan antara metode GET dan metode POST. Di bawah ini adalah pertimbangan kapan kita menggunakan metode GET dan metode POST, yaitu :
1. 2.
Apabila data yang dikirim ke server bersifat rahasia, gunakan metode POST, misalnya mengirimkan data Password. Apabila data yang dikirim ke server berupa data biasa saja dan biasanya untuk memperjelas data yang dimasukkan di form, gunakan metode GET, misalnya membuat aplikasi pencarian (Search Engine) atau polling. Jika data yang dimasukkan banyak, dianjurkan untuk menggunakan metode POST.
3.
12-15
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5.
Pengolahan data pada server side scripting dilakukan di sisi server (dalam hal ini yang menjadi pemroses adalah web server). Berbeda dengan server side scripting, pengolahan data client side scripting dilakukan oleh web browser, Terdapat dua cara menangkap variabel dari form, yaitu metode get dan metode post. Metode post tepat digunakan ketika data yang akan dikirimkan ke server bersifat rahasia dan jika data yang dimasukkan banyak. Metode get tepat digunakan apabila data yang dikirim ke server berupa data biasa saja dan biasanya untuk memperjelas data yang dimasukkan di form
12-16
Politeknik Telkom
Pemrograman Web
Latihan
1. 2. 3.
Jelaskan konsep pengolahan data pada server side scripting! Jelaskan perbedaan cara menangkap variabel dari form dengan menggunakan metode get dan metode post! Buatlah form di bawah ini, gunakan metode yang sesuai dengan kebutuhan Anda, ACTION dari form adalah halaman proses.php yang akan menampilkan seluruh data masukkan dari user :
12-17
Politeknik Telkom
Pemrograman Web
Overview
MySQL merupakan software sistem manajemen database (Database Management System - DBMS) yang sangat populer di kalangan pemrogram web, terutama di lingkungan Linux dengan menggunakan script PHP dan Perl. Software database ini kini telah tersedia juga pada platform sistem operasi Windows (98/Me atau pun NT/2000/XP). MySQL merupakan database yang paling populer digunakan untuk membangun aplikasi web yang menggunakan database sebagai sumber dan pengelola datanya. Kepopuleran MySQL dimungkinkan karena kemudahannya untuk digunakan, cepat secara kinerja query, dan mencukupi untuk kebutuhan database perusahaan-perusahaan skala menengah kecil. MySQL merupakan database yang digunakan oleh situs-situs terkemuka di Internet untuk menyimpan datanya.
Tujuan
1. 2. 3. 4. 5. 6. 7. 8.
Menggunakan MySQL untuk mengelola database Mampu membuat database pada MySQL Mampu membuat tabel pada MySQL melalui aplikasi web Mampu memasukkan data ke dalam tabel di database MySQL Mampu menampilkan data dari table Mampu melakukan proses pencarian data pada table Mampu melakukan delete data pada tabel Mampu melakukan update data pada tabel
Keamanan Data
13-1
Politeknik Telkom
Pemrograman Web
Politeknik Telkom
Pemrograman Web
Sebelum membuat aplikasi yang melibatkan database MySQL, harus terlebih dahulu melakukan koneksi ke server MySQL. Gunakan fungsi dari PHP, yaitu :
$nama_variabel = mysql_connect("localhost","nama_user","password");
Jika koneksi berhasil, $nama_variabel akan bernilai TRUE, dan jika koneksi gagal, $nama_variabel akan bernilai FALSE. Isilah nama_user dan password dengan user dan password sendiri. Namun jika belum membuatnya, kosongkan saja, yaitu (localhost,,). Untuk lebih jelasnya, cobalah skrip berikut : Skrip KoneksiMySQL.php
<?php $koneksi_oke = mysql_connect(("localhost","",""); if ($koneksi_oke) { echo("Koneksi ke server MySQL berhasil"); } else { echo("Koneksi ke server MySQL gagal"); } ?>
Pada saat skrip KoneksiMySQL.php dijalankan, maka akan muncul tulisan Koneksi ke server MySQL berhasil di browser bila seandainya terhubung dengan server. Namun akan muncul tulisan Koneksi ke server MySQL gagal di browser bila seandainya tidak terhubung dengan server.
Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL.php saat terhubung dgn server
Keamanan Data 13-3
Politeknik Telkom
Pemrograman Web
Jika proses pembuatan database berhasil, $nama_variabel akan bernilai TRUE, dan jika proses pembuatan database gagal, $nama_variabel akan bernilai FALSE. Untuk lebih jelasnya, cobalah skrip berikut : Skrip Database.php
<?php include(KoneksiMySQL.php); $buat_db = mysql_create_db(COBA_DB); if ($buat_db) { echo(<BR><BR>Database dengan nama : <B>COBA_DB</B> sukses dibuat); } else { echo(<BR><BR>Database dengan nama : <B>COBA_DB</B> gagal dibuat); } ?>
Bila skrip Database.php dijalankan dan database telah berhasil dibuat, maka akan muncul pesan seperti yang tampil pada gambar 13-2.
Politeknik Telkom
Pemrograman Web
Sebenarnya PHP tidak menyediakan fungsi khusus untuk membuat suatu tabel, sehingga untuk membuat suatu tabel, kita harus menggunakan perintah internal dari MySQL. Perintah internal pada MySQL dapat disisipkan di skrip PHP menggunakan fungsi :
$nama_var = mysql_db_query(nama_database,$perintah_internal); $nama_var = mysql_query($perintah_internal); Keamanan Data 13-5
Politeknik Telkom
Pemrograman Web
$perintah_internal diisi dengan perintah internal MySQL. Mysql_db_query() digunakan untuk menyisipkan perintah internal yang terkait dengan database, seperti membuat tabel. Sedangkan mysql_query() digunakan untuk menyisipkan perintah internal yang terkait dengan tabel, seperti mendeteksi jumlah kolom suatu tabel. Untuk lebih jelasnya, cobalah skrip berikut : Skrip BuatTabel.php
<?php include(KoneksiMySQL.php); $pilih_db = mysql_select_db(COBA_DB) or die(Database COBA_DB tidak ditemukan); $buat_tabel = CREATE TABLE mahasiswa(nim int(9) PRIMARY KEY, nama char(50), alamat char(50) ); $tabel = mysql_db_query(COBA_DB,$buat_tabel); if($tabel){ echo(<BR><BR>Tabel dengan nama : <B>mahasiswa</B> sukses dibuat); } else { echo(<BR><BR>Tabel dengan nama : <B>mahasiswa</B> gagal dibuat); } ?>
Bila tabel mahasiswa telah berhasil dibuat, maka tampilan seperti pada gambar 13-3 akan muncul.
Politeknik Telkom
Pemrograman Web
Keamanan Data
13-7
Politeknik Telkom
Pemrograman Web
Skrip InputMHS.php
<?php mysql_connect("localhost","",""); mysql_select_db("COBA_DB") or die("Database tidak ada"); $perintah="INSERT INTO mahasiswa(nim,nama,alamat) VALUES('$nim','$nama','$alamat')"; $isi_data=mysql_query($perintah); if(isset($isi_data)) { echo("Data mahasiswa :<BR>"); echo("NIM : $nim<BR>"); echo("NAMA : $nama<BR>"); echo("ALAMAT : $alamat<BR>"); echo("Telah dimasukan ke dalam table mahasiswa<BR>"); echo("<FORM METHOD = POST ACTION = FormInput.php>"); echo("<INPUT TYPE=SUBMIT NAME=SUBMIT VALUE='Daftar Lagi'></FORM>"); } else { echo("Data mahasiswa gagal dimasukkan ke dalam tabel"); } ?>
Jalankan skrip FormInput.php, lalu isikan NIM, NAMA, dan ALAMAT, kemudian tekan tombol Input. Lihat gambar 13-4.
Politeknik Telkom
Pemrograman Web
Setelah tombol Input ditekan, data yang dimasukkan di form akan diproses skrip InputMHS.php, dan hasilnya seperti pada gambar 13-5.
Tanda asterik (*) di atas menandakan bahwa semua data akan ditampilkan dan ORDER BY nama_field berfungsi untuk mengurutkan data sesuai dengan nama_field sebagai field acuannya. Agar lebih rapi, data yang akan dipanggil akan ditampilkan ke dalam bentuk tabel. Caranya :
While ($variabel3=mysql_fetch_row($variabel2)) { echo(<TR><TD>$variabel3[0]</TD><TD>$variabel3[1]</TD> ............</TR>); echo(</TABLE>); ?>
Keamanan Data
13-9
Politeknik Telkom
Pemrograman Web
Skrip TampilMHS.php
<?php echo("DATA MAHASISWA<HR><BR><BR>"); echo("<TABLE BORDER=1>"); echo("<TR><TD>NIM</TD><TD>NAMA</TD><TD>ALAMAT</TD></TR>"); mysql_connect("localhost","",""); mysql_select_db("COBA_DB"); $perintah="SELECT * FROM mahasiswa ORDER BY nim"; $tampil_data=mysql_query($perintah); while($data=mysql_fetch_row($tampil_data)){ echo("<TR> <TD>$data[0]</TD> <TD>$data[1]</TD> <TD>$data[2]</TD></TR>"); } echo("</TABLE>"); ?>
Pada saat skrip TampilMHS.php dijalankan, maka skrip akan menampilkan data yang ada di dalam tabel mahasiswa. Lihat gambar 13-6. (Asumsi tabel mahasiswa tidak kosong sebelumnya).
Politeknik Telkom
Pemrograman Web
Untuk mengimplementasikan fasilitas searching data ini, cobalah skrip berikut: Skrip FormCari.php
<HTML> <HEAD> <TITLE> Mencari data mahasiswa </TITLE> <BODY> <FORM METHOD=POST ACTION=CariMHS.php> Masukkan NIM mahasiswa :<BR> <INPUT TYPE=TEXT NAME=cari SIZE=20><BR> <INPUT TYPE=submit NAME=submit VALUE=CARI> </FORM> </BODY> </HTML> </HEAD>
Skrip CariMHS.php
<?php echo("<H3>HASIL PENCARIAN</H3>"); mysql_connect("localhost","",""); mysql_select_db("COBA_DB"); $perintah="SELECT * FROM mahasiswa WHERE nim like '%$cari%'"; $hasil=mysql_query($perintah); $jumlah=mysql_num_rows($hasil); if($jumlah>0) { echo("Data yang ditemukan : $jumlah<BR><HR>"); while($data=mysql_fetch_row($hasil)) { echo("Nama : $data[1]<BR>"); echo("Alamat : $data[2]<BR>"); } } else { echo("Maaf, data yang anda cari tidak ada"); } ?>
Pada saat skrip FormCari.php dijalankan, maka ada perintah untuk memasukkan nim mahasiswa yang akan dicari. Lihat gambar 13-7.
Politeknik Telkom
Pemrograman Web
Bila nim yang dimasukkan pada tampilan skrip FormCari.php ada pada tabel mahasiswa, maka akan ditampilkan nama dan alamat dari mahasiswa yang bersangkutan. Lihat gambar 13-8.
Politeknik Telkom
Pemrograman Web
mysql_select_db("COBA_DB"); $perintah="SELECT * FROM mahasiswa ORDER BY nim"; $tampil_data=mysql_query($perintah); while($data=mysql_fetch_row($tampil_data)){ echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD> <TD>$data[2]</TD>"); echo("<TD><a href=\"HapusMHS.php?id=$data[0]\">Hapus</a> </TD></TR>"); } echo("</TABLE>"); ?>
Skrip HapusMHS.php
<?php mysql_connect("localhost","",""); mysql_select_db("COBA_DB"); $perintah="DELETE FROM mahasiswa where nim=$id"; $hapus=mysql_query($perintah); header("Location:TampilDelete.php"); ?>
Jika skrip TampilDelete.php dijalankan, maka akan ditampilkan data yang ada di dalam tabel mahasiswa. Link untuk hapus terletak di setiap baris pada data yang ditampilkan. Lihat gambar 13-9.
Politeknik Telkom
Pemrograman Web
Bila link hapus di pilih, maka data yang berada satu baris dengan link hapus tersebut akan dihapus dari tabel mahasiswa. Lihat gambar 13-10 dimana mahasiswa dengan nim 113040567 dihapus.
13.9
Update Data
Update data dilakukan untuk mengubah data yang ada di dalam tabel. Untuk mengubah data, gunakan fungsi :
$variabel1 = UPDATE nama_tabel SET nama_kolom1 = data1,nama_kolom2 = data2,... where syarat1, syarat2......; Mysql_query($variabel1);
Seperti halnya input data, pada pengolahan data diperlukan suatu antarmuka untuk menampilkan data yang akan diubah. Untuk lebih jelasnya, cobalah skrip-skrip berikut : Skrip TampilUpdate.php
<?php echo("DATA MAHASISWA<HR><BR><BR>"); echo("<TABLE BORDER=1>"); Keamanan Data 13-14
Politeknik Telkom
Pemrograman Web
echo("<TR><TD>NIM</TD><TD>NAMA</TD><TD>ALAMAT</TD></TR>"); mysql_connect("localhost","",""); mysql_select_db("COBA_DB"); $perintah="SELECT * FROM mahasiswa ORDER BY nim"; $tampil_data=mysql_query($perintah); while($data=mysql_fetch_row($tampil_data)) { echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD> <TD>$data[2]</TD>"); echo("<TD><ahref=\"FormEdit.php?id=$data[0]\">Ubah</a> </TD></TR>"); } echo("</TABLE>"); ?>
Skrip FormEdit.php
<?php mysql_connect("localhost","",""); mysql_select_db("COBA_DB"); $perintah="SELECT * FROM mahasiswa where nim='$id'"; $hasil=mysql_query($perintah); $baris=mysql_fetch_array($hasil); ?> <HTML> <B>Pengeditan Data Mahasiswa</B><HR><BR> <FORM method=post action=EditMHS.php> <input type=hidden name="id" value="<?echo"$baris[nim]"?>"> Nama : <input type=text name=nama size=20 value="<?echo"$baris[nama]" ?>"><BR> Alamat : <input type=text name=alamat size=20 value="<?echo"$baris[alamat]" ?>"><BR><BR> <input type=submit name=edit value=Simpan> </HTML>
Skrip EditMHS.php
<?php mysql_connect("localhost","",""); mysql_select_db("COBA_DB"); $ubah = "UPDATE mahasiswa SET nama='$nama',alamat='$alamat' where nim='$id'"; mysql_query($ubah); header("location:TampilUpdate.php"); ?>
Pada saat menjalankan skrip TampilUpdate.php maka akan ditampilkan data yang berada di dalam tabel mahasiswa. Lihat gambar 13-11.
Keamanan Data 13-15
Politeknik Telkom
Pemrograman Web
Untuk mengubah data, pilih link ubah yang berada satu baris dengan data yang ingin diubah. Pada saat link diklik, maka akan merefer ke skrip FormEdit.php. Lihat gambar 13-12. (NIM 113030184 yang diubah). Bila tombol Simpan di klik pada FormEdit.php, maka akan menjalankan skrip EditMHS.php. Skrip EditMHS.php akan mengupdate data sesuai dengan inputan user pada skrip FormEdit.php.
Politeknik Telkom
Pemrograman Web
Keamanan Data
13-17
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2. 3. 4. 5. 6.
Database MySQL menyimpan data didalam direktori khusus yang terpisah dari file program PHP sehingga keamanan data lebih terjamin. Web server dan database server terpisah sehingga menyulitkan pihak luar untuk mengakses data yang terdapat didalam database. Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat diakses oleh sistem operasi Windows maupun Linux. Bahasa program PHP dan MySQL adalah open source sehingga kita tidak perlu mengeluarkan biaya tambahan untuk membeli software tersebut. Untuk membuat tabel dan memanipulasi isi tabel pada database MySQL dapat dilakukan secara langsung melalui halaman web dengan pemrograman PHP Pengaksesan database MySQL melalui halaman web dengan menggunakan fungsi-fungsi yang telah disediakan oleh PHP.
Latihan
1. 2. 3.
Jelaskan kelebihan database MySQL yang Anda ketahui! Apakah PHP dapat diaplikasikan untuk DBMS selain MySQL? Jelaskan! Buatlah buku tamu (guestbook) dengan langkah-langkah pembuatan buku tamu sebagai berikut: a. Membuat table MySQL yang akan menyimpan isi buku tamu b. Membuat form pengisian buku tamu c. Membuat program untuk menerima masukan data dari form yang telah kita buat sebelumnya d. Membuat program untuk menampilkan isi buku tamu.
Keamanan Data
13-18
Politeknik Telkom
Pemrograman Web
14 KEMANAN DATA
Overview
PHP menawarkan metode dalam menyimpan variabel yang mempunyai sifat global. Dengan menggunakan variabel global ini, variabel dapat dikenali dan digunakan di semua halaman web tanpa harus dideklarasi ulang. Variabel global ini disebut session dan cookie. Penggunaan session dan cookie biasanya berupa penyimpanan informasi yang bersifat private dan informasi ini digunakan secara berulang oleh user. Contoh penerapan session dan cookies adalah penyimpanan login account, menyimpan informasi barang yang sudah masuk keranjang belanja pada aplikasi e-commerce, atau aplikasi lainnya yang biasanya membutuhkan autentikasi. Dalam membuat sebuah website, pembuat website juga harus mengantisipasi dari kemungkinan kegiatan kegiatan yang berusaha membobol password melalui SQL injection untuk mengamankan data.
Tujuan
1. 2. 3. 4.
Memahami kegunaan session pada aplikasi web. Mampu melakukan konfigurasi runtime untuk membuat session. Memahami kegunaan cookies pada aplikasi web. Membuat cookies pada aplikasi web.
Keamanan Data
14-1
Politeknik Telkom
Pemrograman Web
14.1 Session
Session dalam PHP mengandung suatu mekanisme untuk menjaga sejumlah data tetap dapat diakses dalam serangkaian halaman website. Mekanisme ini memungkinkan pembuat web untuk membangun aplikasi yang lebih terkostumisasi dan lebih menarik. Session memungkinkan untuk mendaftarkan sejumlah variabel untuk tetap dapat digunakan dalam halaman situs yang berbeda- beda. Ketika menggunakan session, data (variabel) akan tersimpan dan dikelola oleh server. Seorang pengunjung yang mengunjungi sebuah website akan diberikan sebuah identitas yang unik, dan disebut dengan session id.
Function session_start() akan men-generate session id secara acak. Nama default yang diberikan kepada session id yang terbentuk adalah PHPSESSID, akan tetapi nama ini dapat diubah pada konfigurasi PHP.
Pemrograman Web
Melalui script tersebut di atas, sebuah data session yang bernama nama_pengunjung sudah terbentuk. Untuk selanjutnya, data session ini dapat diakses pada setiap halaman pada website selama data session tersebut tidak dihapus. Aturan pembuatan nama untuk data session sama seperti aturan penamaan variabel pada umumnya.
Keamanan Data
14-3
Politeknik Telkom
Pemrograman Web
Jika script di atas dijalanlan di web browser, akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
Gambar 14-1 Mengakses data session-1 Jika pengunjung me-refresh halaman web tersebut,akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
Gambar 14-2 Mengakses data session-2 Pada contoh di atas, dibuat 2 (dua) buah data session yang masing masing bernama nama_pengunjung dan counter. Variabel nama_pengunjung akan menyimpan nama pengunjung dan variabel counter akan menghitung berapa kali pengunjung tersebut telah mengunjungi halaman web tersebut. Memberikan nilai kepada data session sama mudahnya dengan memberikan nilai kepada variabel biasa, yaitu dengan menggunakan tanda sam dengan (=), seperti yang ditunjukkan pada potongan script :
$_SESSION['nama_pengunjung'] = "Adul";
Keamanan Data
14-4
Politeknik Telkom
Pemrograman Web
Pada data session juga dapat dikenakan operasi aritmatika (yang akan menambahkan 1 nilai pada nilai terakhir yang disimpan pada data session), seperti yang ditunjukkan pada potongan script :
$_SESSION['counter']++;
Nilai yang tersimpan pada data session juga dapat digunakan untuk operasi logika, seperti yang diperlihatkan pada contoh di bawah ini :
<? if ($_SESSION[counter] == 1 echo Ini baru pertama kali berkunjung y?; else echo Terima kasih telah lebih dari satu kali mengunjungi website kami.; ?>
Keamanan Data
14-5
Pemrograman Web
Pada script di atas terdapat perintah session_destroy() pada baris ke-6 yang akan menghapus data session dan file PHPSESSID secara permanen. Pada baris ke-3, variabel $id_session berisi nilai session id, akan tetapi pada baris ke-7, variabel $id_session2 tidak lagi berisi nilai session id karena data session sudah dihapus. Jika script di atas dijalankan di web browser akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
Gambar 14-3 Menghapus data session Untuk membersihkan nilai yang terdapat pada data session tanpa menghapus secara permanen file PHPSESSID, dapat digunakan function session_unregister(). Dengan menggunakan function session_unregister(), nilai yang tersimpan pada data session akan dihilangkan, tapi data session ini masih dapat digunakan atau diisi dengan nilai yang baru. Berikut ini adalah cara untuk membersihkan nilai pada data session :
Keamanan Data
14-6
Pemrograman Web
echo "Selamat Datang",$_SESSION['nama_pengunjung'],"<br><br>"; session_unregister("nama_pengunjung"); if (isset($_SESSION['nama_pengunjung'])) echo "Terima kasih ",$_SESSION['nama_pengunjung']," masih berada pada website kami"; else echo "Terima kasih atas kunjungannya, kunjungi website kami lagi y??"; ?> kapan kapan
6 7 8
9 10
11
Pada script di atas, terdapat pemanggilan function session_unregister(nama_pengunjung) pada baris ke-6. Perintah ini akan membersihkan nilai data session nama_pengunjung yang semula bernilai Adul. Selanjutnya, di baris ke-7 dilakukan pengecekan terhadap nilai yang ada pada data session nama_pengunjung yang ternyata sudah tidak ada nilainya (akibat dari perintah session_unregister(nama_pengunjung)), sehingga baris perintah yang akan dijalankan adalah baris ke-10. Jika script di atas dijalankan di web browser, akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini :
Keamanan Data
14-7
Politeknik Telkom
Pemrograman Web
14.2 Cookie
Cookie merupakan sebagian informasi yang disimpan pada klien (web browser) ketika melakukan request terhadap suatu halaman web. Informasi ini dilewatkan melalui HTTP header diantara web server dan web browser. Web browser akan mengirimkan cookie sebagai bagian dari request ke server dan server akan mengirimkan kembali cookie yang sudah di-update sebagai bagian dari response ke klien. Ukuran dari cookie bergantung pada web browser, tetapi secara umum, biadanya tidak lebih dari 1K (1024 byte). Informasi yang disimpan di dalam cookie bisa apa saja, seperti : nama, banyaknya kunjungan ke website, informasi keranjang belanja, dan sebagainya. Sebagai tambahan informasi yang disimpan, masing masing cookie mempunyai sekumpulan atribut : masa kadaluwarsa, path, domain, dan penanda keamanan. Atribut ini akan membantu web browser untuk mengirimkan cookie yang tepat ketika ada request ke server.
Keamanan Data
14-8
Politeknik Telkom
Pemrograman Web
bool setcookie ( string name [, string value [, int expire [, string path [, string domain [, int secure]]]]]) Tabel 14-1 Jenis Argumen pada Cookie No a. b. c.
Nama Argumen
Keterangan Merupakan nama dari cookie, misal : mycookie, counter_pengunjung, nama Merupakan nilai dari cookie. Nilai cookie ini akan disimpan di sisi klien (web browser) Digunakan untuk mengatur masa kadaluwarsa cookie. Ukuran waktu yang digunakan disesuaikan dengan standar pengaturan waktu di Unix menggunakan fungsi time(). Sebagai contoh time()+60*30 akan mengatur masa kadaluwarsa cookie selama 30 menit. Jika masa kadaluwarsa cookie tidak diatur, cookie akan terhapus ketika web browser ditutup.
d.
Path
Path cookie digunakan untuk mengorganisasikan cookie berdasarkan path di web server. Jika path di web server bernilai /, maka cookie akan ditemukan di semua direktori, jika path bernilai /dir1/, maka cookie hanya ditemukan di dorektori dir1 dan sub direktori dibawah dir1
e.
Domain
Argumen ini akan menentukan secara spesifik domain yang dapat mengakses cookie. Jika domin bernilai www.mydomain.com, maka cookie hanya dapat diakses di www.sub-domain Agar cookie dapat diakses di seluruh subdomain dari mydomain.com, domain harus bernilai .mydomain.com
Keamanan Data
14-9
Politeknik Telkom
Pemrograman Web
f.
Secure
Jika value bernilai 1(satu), berarti cookie harus diakses pada koneksi yang aman (https). Nilai default secure adalah 0 (nol)
Pada baris perintah ke-2, akan terbentuk cookie yang mempunyai nama mycookie dengan nilaiTest mycookie dan akan hilang (expire) ketika web browser ditutup. Pada baris perintah ke-3, akan terbentuk cookie yang mempunyai nama mycookie dengan nilai Test mycookie dan mempunyai masa kadaluarsa selama 1 (satu) hari. Pada baris perintah ke-4, akan terbentuk cookie yang mempunyai nama mycookie dengan nilai Test mycookie, mempunyai masa kadaluarsa 1 (satu) hari, dan tersimpan di direktori /dir1 dan subdirektori di bawahnya
Pemrograman Web
Keamanan Data
14-11
Politeknik Telkom
Pemrograman Web
Jika baris perintah di atas dijalankan di web browser, akan didapatkan hasil sebagai berikut :
Politeknik Telkom
Pemrograman Web
Untuk menampilkan nilai dari cookie pada contoh di atas dapat digunakan perintah di bawah ini :
<? foreach ($_COOKIE['mycookie'] as $key => $value) { echo $key:$value ; } ?>
Jika perintah tersebut dijalankan di web browser, akan didapatkan hasil seperti yang ditampilkan pada gambar di bawah ini :
Politeknik Telkom
Pemrograman Web
Keamanan Data
14-14
Politeknik Telkom
Pemrograman Web
1) $SQL = select * from login where username =$username and password = $password; , {dari GET atau POST variable } 2) isikan password dengan string or = 3) hasilnya maka SQL akan seperti ini = select * from login where username = $username and password=pass or = ; , { dengan SQL ini hasil selection akan selalu TRUE } 4) maka kita bisa inject sintax SQL (dalam hal ini OR) kedalam SQL
Gambar 14-8 Penerapan SQL Injection Contoh sintaks SQL Injection a. Melalui query 1) Sintaks SQL string -- setelah nama username 2) Query database awal :
Berubah menjadi :
b.
Melalui URL
Politeknik Telkom
Pemrograman Web
Keamanan Data
14-16
Politeknik Telkom
Pemrograman Web
Rangkuman
1. 2.
3.
4. 5.
Terdapat persamaan antara session dan cookie, keduanya mempunyai tujuan penggunaan yang sama, dimana keduanya digunakan dapat digunakan berulang kali pada halaman halaman di sebuah website. Perbedaan yang paling mencolok antara session dan cookie adalah data session disimpan di sisi server, sedangkan cookie disimpan di sisi klien. Dengan demikian, penggunaan session lebih aman daripada cookie (tidak ada informasi yang bolak balik dari server dan klien) dan session dapat bekerja meskipun setting cookies pada web browser di-disable Ketika memulai session, web server akan membuat sebuah file unik yang mempunyai nama PHPSESSID dan akan tetap ada sampai ada perintah session_destroy yang dapat menghapus file tersebut secara permanen dari server. Ketika membuat cookie menggunakan function setcookie(), pembuat website dapat menambahkan beberapa argumen/atribut yang dibutuhkan. Dengan menggunakan SQL Injection, seorang hacker mampu membobol password baik melalui query atau URL.
Latihan
1. 2.
Buatlah sebuah website dengan tema e-commerce, kemudian analisalah, variabel apa saja yang bisa dijadikan sebagai data session dan cookie. Bagaimana cara menangani dan mencegah SQL Injection !
Keamanan Data
14-17
Politeknik Telkom
Pemrograman Web
DAFTAR PUSTAKA
1. Breedlove, Bob., et.al., Web Programming Unleashed, Sams Publishing,1996 2. Hall, M., Core Web Programming, Prentice Hall, New York, 1998 3. Reiersol, Dagfinn, et.al., PHP In Action : Object, Design, Agility, Manning Publications Co., 2007 4. Siswoutomo, Wiwit, PHP Undercover : Mengungkap Rahasia Pemrograman PHP, PT Elex Media Komputindo, Jakarta, 2005 5. Wilton, Paul, Beginning Java Script, Second Edition, Wrox Press, 2004