P. 1
Pemrograman Web

Pemrograman Web

|Views: 88|Likes:
Published by Azmi Andespa

More info:

Published by: Azmi Andespa on Apr 19, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/22/2013

pdf

text

original

Politeknik Telkom

Pemrograman Web

PEMROGRAMAN WEB

POLITEKNIK TELKOM BANDUNG 2008

i

Politeknik Telkom

Pemrograman Web

PENULIS: SURYATININGSIH, S.T. WARDANI MUHAMAD, S.T.

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
Assalamu‟alaikum 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 c ourseware 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. Wassalamu‟alaikum Wr. Wb. Bandung, Desember 2007

Christanto Triwibisono Wakil Direktur I Bidang Akademik & Pengembangan

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

................................................................. 6-5 6.................................1............. 6-2 6..............4........... 7-11 v .......... 4-1 4................................. 7-8 7.................................................. 5-10 5.................................3 Linked Style Sheet.......................... 6-4 6............1 Integer(bilangan bulat).......................................................................................................3 Aturan Penulisan pada CSS .......... 6-10 6........................1..............................................................................................................2.....................................1.........................................................................................................................................................................1...............................................................1.......... 7-8 7................... 7-10 7..................................................... 3-10 <BR><BR> ........... 3-8 3.........................1 Form .............................................................................................................. 7-1 7....................................................4 CSS Selector ....................................... 3-4 3.............................1.............................1 Membuat Link antar Dokumen HTML ...............1 Tabel . 6-9 6.......................................1 Membuat Tabel....... 7-5 7.....1 Inline Style Sheet ..............................3.................................................................. 5-4 5.................................................................................................................. 5-2 5................................................................... 6-11 6............................................... 5-2 5...1.....................................................1 Struktur Dasar JavaScript ........................... 6-11 6.... 4-2 4......................................1 Pengantar Pemrograman Client Side dan Server Side..........................2 Penempatan CSS ........................2 Jangkauan dari Variabel .....3...............2.............................................................................. 5-5 5...........6 CSS untuk Memanipulasi Color dan Background .........................................................................................2................................................2 Gambar ........................................................................6 Lebih Lanjut dengan Tabel ...........................................2 Pengantar Javascript........................................5 Mengatur CELLSPACING dan CELLPADDING ...............................2 Menambahkan Judul Tabel ...................................... 6-3 6... 5-1 5.................. 5-11 5..................................... 3-10 4 FORM .................2 Frame Target ......................................2................................... 6-2 6................2........9 CSS untuk Memanipulasi Table ................... 3-6 3..........................................................................................3 Tipe Data dasar .................. 6-2 6.................................................................. 6-1 6........2 Meletakkan JavaScript dalam Dokumen HTML .......................1 Keuntungan Menggunakan CSS ...................................................................... 5-3 5...................1.......................... 5-7 5........................................... 5-13 6 CSS ( Cascading Style Sheet) ...................... 5-13 5...............................................................3 Membuat Link ke Bagian Tertentu dalam Dokumen .......................................................................................................... 7-3 7............................................. 7-2 7.....................................2 Frame.................2....Politeknik Telkom Pemrograman Web 3............. 7-3 7................. 4-3 5 LAYOUT HALAMAN WEB ..........................2....................... 6-6 6........8 CSS untuk Memanipulasi Text ..2.....4 Tipe Data (Literal) ..............................1 Frame Syntax ...............................3 Memformat Baris .......................................................4 Memformat Kolom ..... 7-10 7...........2......................................................................................................................................... 3-3 3...........................................2 Embedded Style Sheet ...................................................................3 Penggunaan Frame .........................2 Membuat Input Field .................................................1 Gambar sebagai Hyperlink .........2 Relative Links versus Absolute Pathnames .......... 6-12 7 PEMROGRAMAN JAVASCRIPT ....... 5-8 5..................................................7 CSS untuk Memanipulasi List................................................................................................1 Mendeklarasikan Variabel .......5 CSS untuk Memanipulasi Font ............................................1..................................................................

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

..................................................................................................... 13-8 Gambar 13-5 Hasil eksekusi skrip InputMHS.....php ........................................... 14-6 Gambar 14-4 Membersihkan nilai pada data session ..................................html...................................................................................................php ..................................................................................................................... 13-11 Gambar 13-8 Hasil eksekusi skrip CariMHS.......php ............................................................................................. 12-15 Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL.................................. 14-12 Gambar 14-7 Cookies Array............. 13-9 Gambar 13-6 Hasil eksekusi skrip TampilMHS........ 12-14 Gambar 12-5 Hasil Eksekusi Proses................................................................... 13-17 Gambar 14-1 Mengakses data session-1 ......................php ............................................................... 14-11 Gambar 14-6 Multiple cookies.......................................................................................................................................php ......php ............................................. 13-12 Gambar 13-9 Hasil eksekusi skrip TampilDelete........................Politeknik Telkom Pemrograman Web Gambar 12-2 Hasil eksekusi skrip Hasil.php ...................................................................................................... 14-15 Gambar 14-9 SQL injection melalui URL .......... 12-12 Gambar 12-3 Hasil eksekusi MetodeGet......................... 14-13 Gambar 14-8 Penerapan SQL Injection ...................php ..... 13-13 Gambar 13-10 Hasil eksekusi skrip HapusMHS................. 14-4 Gambar 14-3 Menghapus data session .. 13-16 Gambar 13-12Hasil eksekusi skrip FormEdit.............................php .....................php ......php dengan metode get .......................................................... 13-6 Gambar 13-4 hasil eksekusi skrip FormInput..php dengan metode post .......................................................php saat terhubung dgn server ... 12-13 Gambar 12-4 Hasil eksekusi Proses..... 14-16 x ................................................ 14-4 Gambar 14-2 Mengakses data session-2 ..........php ................................php . 13-10 Gambar 13-7 Hasil eksekusi skrip FormCari........................ 13-3 Gambar 13-2 Hasil eksekusi skrip Database.................................................................................................. 13-16 Gambar 13-13 Hasil eksekusi skrip EditMHS........................php ............... 13-4 Gambar 13-3 Hasil eksekusi skrip BuatTabel........................................ 13-14 Gambar 13-11 Hasil eksekusi skrip TampilUpdate.............. 14-8 Gambar 14-5 Menampilkan nilai cookie .............

................. 8-15 Tabel 9-1 Objek Standar JavaScript ....................... 7-14 Tabel 7-4 Jenis Operator Aritmatika .................................................................................................................... 7-16 Tabel 7-8 Jenis Operator Pembanding ....................................................................................................................................................... 4-5 Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select ............................................................................................. 9-11 xi . 6-12 Tabel 7-1 Cadangan Kata pada Javascript ......................Jenis Atribut dalam Tag <FORM>....... 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 ............................... 5-5 Tabel 5-3 Jenis – Jenis Atribut pada Tag <TD> ............................................. 4-3 Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox ............................................ 9-5 Tabel 9-2 Macam-macam Objek Browser .......................................................................................................... 6-9 Tabel 6-3 Property Background dan Color.................... 9-8 Tabel 9-3 Macam-macam Metoda Objek Window................................................................................................................................................................. 7-12 Tabel 7-3 Daftar Operator Assignment ......................................... 8-6 Tabel 8-5 Contoh Sript Penggunaan Fungsi....... 7-14 Tabel 7-5 Jenis Operator Afektasi...................................... 8-10 Tabel 8-6 Jenis .......................... 7-17 Tabel 7-9 Derajat/Prioritas Operator ......................................................................................................................................................................................................... . 8-2 Tabel 8-2 Penggunaan Pernyataan Switch-Case ....... 3-8 Tabel 4-1 Jenis................................................................................... 2-20 Tabel 3-1 Tabel Atribut dalam Tag <A> ......... 5-13 Tabel 6-1Satuan ukuran untuk value .......................... 8-4 Tabel 8-3 Penggunaan Pernyataan for ......................................................................................................................... 6-10 Tabel 6-4 Property List....................... 3-2 Tabel 3-2 Jenis-Jenis Atribut pada Tag <img> .............................. 4-4 Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio ........................................................................................................................................................................................................................................................................................................................................... 4-6 Tabel 5-1 Jenis-Jenis Atribut pada Tag <TABLE> .................................................... 2-18 Tabel 2-2 Tipe Penomoran pada Ordered List ..................... 8-5 Tabel 8-4 Contoh Script Pengulangan While ........................................................................................................ 6-6 Tabel 6-2 Property Font............. 6-11 Tabel 6-6 Property Table ............................................................................................ 4-2 Tabel 4-2 Jenis........................................ 6-11 Tabel 6-5 Property Text ............................... 5-5 Tabel 5-4 Jenis – Jenis Target Frame .................................... 7-9 Tabel 7-2 Karakter khusus JavaScript......................................... 7-19 Tabel 8-1 Penulisan Menggunakan Pernyataan If ...............................................................................................................................................................................................................Jenis Atribut pada Input Field Tipe Text .............Jenis Kejadian pada JavaScript .................................................Politeknik Telkom Pemrograman Web DAFTAR TABEL Tabel 2-1 Tabel Jenis Bullet ............................................................................................................................................................................. 5-2 Tabel 5-2 Jenis – Jenis Atribut pada Tag <TR> ..................... 7-15 Tabel 7-7 Jenis Operator Logika ........................................ 9-8 Tabel 9-4 Properti dari Objek Element ..................................................... 7-15 Tabel 7-6 Jenis Operator Inkrementasi......................................................................................

................................. 10-9 Tabel 11-1 Statement Kondisional pada PHP ............................ 9-12 Tabel 10-1 Jenis-Jenis Tag PHP ........................... 10-9 Tabel 10-5 Macam-macam Operator Logika ..................................... 11-3 Tabel 13-1 Tipe Data pada MySQL ...................... 14-9 xii ........................................................................................................................................................................................................................................................ 10-3 Tabel 10-2 Jenis-Jenis Komentar pada PHP .................................................................................................. 13-5 Tabel 14-1 Jenis Argumen pada Cookie.................... 10-4 Tabel 10-4 Macam-macam Operator Aritmatika .......................................................... 10-4 Tabel 10-3 PHP Mendukung 8 Tipe Data Primitif .................................................. 11-2 Tabel 11-2 Statement Kondisional pada PHP .................................Politeknik Telkom Pemrograman Web Tabel 9-5 Metode-Metode dari Elemen Objek-Objek ...............................................

3. 4. 6.Politeknik Telkom Pemrograman Web 1 PENGANTAR 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. Web site ini dipergunakan salah satunya untuk tujuan memperkenalkan profil perusahaan atau pemerintahan. 5. Setiap orang dari berbagai latar belakang yang berbeda dapat bertukar informasi tanpa perlu berinteraksi secara fisik. memasukkan ke dalam amplop dan mengirimnya lewat kantor pos. kita dapat berkirim email kepada seseorang di luar negeri tanpa harus repot menulis di kertas. 2. Tujuan 1. Internet ini dimanfaatkan oleh perusahaan. Melalui web site tertentu. pemerintahan maupun perorangan untuk membangun aplikasi yang disebut web site. 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 Pengantar Pemrograman Web . maka segala informasi yang diperlukan dapat dicari dengan mudah.

: Ide ethernet dijabarkan dalam thesis PhD dari Bob Metcalfe. disket dan lain-lain. 1. yang apabila terjadi perang dapat mudah dihancurkan.2 Sejarah Internet Internet bukanlah satu fenomena baru. Untuk melakukan perpindahan informasi dari satu komputer ke komputer lainnya dibutuhkan tape. diusulkan. : Disain dari TCP/IP dijabarkan secara rinci oleh Vint Cerf dan Bob Kahn dalam "A Protocol for Packet Network Intercommunication". atau disebut juga Local Area Network. ARPAnet ( US Defense Advanced Research Projects Agency) atau Departemen Pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat. Setelah itu Internet digunakan oleh kalangan akademis (UCLA) untuk keperluan penelitian dan pengembangan teknologi. Spesifikasi untuk File Transfer.1 Pendahuluan Komputer pertama kali dibuat hanyalah sebagai mesin yang berdiri sendiri (stand alone). 1957 1959 1967 1969 1970 1972 1973 1974 1976 Ringkasan Sejarah : : Advanced Research Projects Agency (ARPA) dibentuk oleh Departement of Defence (DoD) USA.Politeknik Telkom Pemrograman Web 1. Dan baru setelah itu Pemerintah Amerika Serikat memberikan ijin ke arah komersial pada awal tahun 1990. merupakan jaringan komputer terkecil yang menghubungkan 2 atau lebih komputer untuk berbagi informasi. : UNIX-to-UNIX Copy (UUCP) dikembangan oleh Bell Labs. Internet itu sendiri merupakan singkatan dari Interconnected Network of Networks. jalur yang melalui sambungan itu secara otomatis dipindahkan ke sambungan lainnya. dibuatlah koneksi. Dengan konsep koneksi jaringan untuk membentuk jaringan dari jaringan terciptalah internet. disk. : Len Kleinrock menulis paper tentang packet switching. diusulkan. 1-2 Pengantar Pemrograman Web . LAN. Spesifikasi dari telnet. RFC 318. : Disain awal dari ARPANET diterbitkan. Jalan untuk berbagi informasi tersebut. : DoD menggelar pengembangan ARPANET : ARPANET mulai menggunakan Network Control Protocol : InterNetworking Working Group (INWG) dibentuk untuk mempromosikan standar yang sudah disepakati bersama. RFC 454. Jadi bila satu bagian dari sambungan network terganggu dari serangan musuh.

Politeknik Telkom Pemrograman Web 1981 1982 1983 1984 1986 1987 1988 : : : : : : : 1989 1990 : : 1991 : 1992 : 1993 : BITNET mulai beroperasi. National Information Infrastructure Act lolos dan pemerintah Amerika Serikat mulai lebih serius dalam bidang Web. Domain Name Service (DNS) mulai lahir. Brewster Kahle (Thinking Machines) mengembangan Wide Area Information System (WAIS).000.000. 1-3 Pengantar Pemrograman Web . BSD UNIX release 4. University of Nevada mengeluarkan sistem Veronica. Tim Berners-Lee mensirkulasikan proposal World Wide Web (WWW). Paul Lindner dan Mark McCahill (University of Minnesota) meluncurkan Gopher. sekitar 6000 host terkena akibatnya.544 Mbps (T1). Sebuah "Internet Worm" berhasil melumpuhkan Internet. CERN meluncurkan library WWW. Phillip Zimmerman meluncurkan Pretty Good Privacy (PGP). Jumlah Internet hosts melewati batas 100. Tim Berners-Lee dari CERN mensirkulasikan porposalnya yang berjudul "Information Management: A Proposal". White House online. UUNET didirikan untuk memberikan akses komersial untuk Usenet dan UUCP. NSF membuat InterNIC untuk menjalankan Internet servis seperti pendaftaran domain. sebuah WYSIWYG browser dan editor.2 menggunakan TCP/IP. Jumlah Internet hosts melampaui 1. DoD menghentikan ARPANET.000. NSFNET dilahirkan dengan kecepatan backbone 56Kbps. Jumlah Internet hosts melewati batas 1000 host. Versi pertama dari Mosaic (untuk X Window) yang dikembangkan oleh Marc Andreesen dikeluarkan oleh NCSA.000. Sebuah WWW browser yang bernama Viola diluncurkan oleh Pei Wei dan didistribusikan bersama CERN WWW. NSFNET meningkatkan kecepatan backbone menjadi 1. TCP/IP menjadi protokol untuk ARPANET dan ini dispesifikasikan oleh DoD. Dikembangkan sebuat program WWW. Jumlah Internet hosts melewati batas 10.

dan Prodiy mulai memberikan servis akses ke Internet. merupakan contoh pertama dari aplikasi komerisal Internet.3. dan lain-lain) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol / Internet Protocol). Compuserve. Spam mail menjadi kasus besar setelah sebuah lembaga hukum yang bernama Canter & Siegel menyebarkan mail ke seluruh dunia tentang servis untuk mendapatkan "green card". host-to-host transport dan application ) yang memiliki protokolnya sendiri-sendiri. Windows 95. 1. dan line telepon. maka anda bisa bergabung dengan ribuan juta komputer lain di seluruh dunia dan mengakses harta karun informasi di internet.155. Netscape Communication Corporation. Linux. menjadi publik dan menjadi nomor 3 tertinggi untuk harga Initial Public Offering (IPO) share di NASDAQ. Modem. Windows.1 HTTP (Hypertext Transfer Protocol) 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 Pengantar Pemrograman Web 1-4 . 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.jaringan komputer di seluruh dunia.Politeknik Telkom Pemrograman Web 1994 : 1995 : Pizza hut online. internet. Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing . First Virtual menjalankan "CyberBank" yang pertama.masing (Unix.komputer dan jaringan . TCP/IP tersusun atas 4 layer ( network access. Perusahaan Marc Andreesen.230. 1. America Online. Domain mulai membayar $50/tahun. Mac.3 Konsep Dasar Internet Internet yang berasal dari kepanjangan Interconnected Network adalah sebuah sistem komunikasi global yang menghubungkan computer . Contoh: 202.4. Bila anda mempunyai komputer minimal prosessor 486. NFS tidak lagi menggratiskan pendaftaran domain.

protokol yang digunakan untuk login ke suatu server komputer. protokol ini untuk mengunduh (download) dan mengunggah (upload) suatu file di FTP server. dengan kata lain kita bisa melakukan akses jarak jauh (remote access). dimana alamat tersebut terdiri dari: Protokol yang digunakan oleh suatu browser untuk mengambil informasi. Telnet memungkinkan kita dapat mengakses komputer yang letaknya jauh dari komputer kita. dan mempunyai hak untuk mengakses yaitu dengan login name dan password. Path serta nama file dari suatu informasi. Pengantar Pemrograman Web 1-5 . HTTP adalah salah satu protokol transfer yang merupakan standar untuk suatu dokumen web. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML. URL diibaratkan sebagai suatu alamat.3. Telnet. beroperasi melalui TCP dan menyediakan autentifikasi dan komunikasi yang aman. Selain protokol HTTP. Nama dari komputer dimana informasi tersebut tersedia. Dengan hal ini kita dapat bertukar file dengan cepat. Untuk menggunakan Telnet kita harus mempunyai IP address atau domain name. SSH (Secure Shell) didesain untuk menggantikan telnet dengan kelebihan dalam keamanan.3 Protokol Transfer Protokol transfer adalah suatu protokol yang digunakan untuk pengiriman informasi di internet. Pada saat ini banyak program atau software yang bebas untuk di download dari manapun di Internet. Format umum URL : Protokol_transfer://nama_host/path/nama_file 1. 1. dalam internet juga dikenal beberapa protokol lain diantaranya adalah : FTP (File Transfer Protocol ).3. Dengan telnet kita bisa mengetikkan unix command dari satu komputer ke komputer yang lain.Politeknik Telkom Pemrograman Web browser.2 URL (Uniform Resource Locator) URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu Web Server.

4 DNS (Domain Names System) Komputer-komputer di internet menggunakan suatu format penamaan standar untuk mempermudah pengelolaan server komputer di internet yang berkembang dengan cepat. ac.www. Tabel 1.politekniktelkom.politekniktelkom.mi. protokol ini digunakan untuk mendistribusikan berita di Usenet.ac.id gov.www.com : browser anda bertindak sebagai client gopher pada wiretrap.ac. go. protokol ini untuk mengakses server gopher yang menyediakan informasi dengan mengggunakan suatu sistem menu atau melalui hubungan ke telnet News (Network News Transfer Protocol . Contoh : ftp://sgi2. yang merupakan kelompok komputer-komputer yang terhubung ke internet. Usenet adalah suatu sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik yang disebut newsgroup.com news:comp.spies.spies.id gopher://wiretrap.infosystems. Sistem penamaan server komputer ini adalah Domain Names System (DNS).announce 1.infosystems.1 Nama-nama Domain di Indonesia Nama Domain Com edu. NNTP).Politeknik Telkom Pemrograman Web Gopher.3.id/multimedia : Browser anda bertindak sebagai cliet FTP dan mengakses direktori pub pada server sgi2.id int Mil net org Jenis Organisasi Organisasi komersial Lembaga Pendidikan Lembaga Pemerintah Lembaga Internasional Organisasi militer Provider internet Organisasi umum Pengantar Pemrograman Web 1-6 . DNS membuat suatu tingkat-tingkat domain.announce : Browser anda bertindak sebagai client Usenet dan mengakses artikel-artikel pada newsgroup comp.mi.

Untuk melihat isinya dibutuhkan suatu web browser. istilah hypertext menjadi hypermedia. web server mencari file yang diminta tersebut dan kemudian mengirimkan ke browser yang memintanya. WWW adalah aplikasi yang paling menarik di internet. Dengan WWW ini kita dapat dengan mudahnya mendapatkan informasi. Informasi-informasi dalam web mempunyai link-link yang menghubungkan informasi tersebut ke informasi lain di dalam jaringan internet. dan lain-lain. Netscape Navigator. tetapi juga bisa berupa suatu file multimedia seperti gambar. penting dan banyak digunakan. tidak hanya teks.Politeknik Telkom Pemrograman Web 1. gambar bahkan multimedia. Perhatikan ilustrasi di bawah ini : Pengantar Pemrograman Web 1-7 . suara dan video.4 Konsep Dasar World-Wide Web (WWW) World Wide Web merupakan suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan internet. dimana link-link penghubung antar informasi bukan lagi berupa suatu teks. yaitu : Software Web Browser Software Web Server Kedua software ini bekerja seperti sebuah sistem client-server. Opera. Semakin berkembangnya World Wide Web. Web browser bertindak sebagai client yang memungkinkan anda untuk menginterpretasikan dan melihat informasi pada web. misalkan Internet Explorer. World Wide Web menyediakan pengguna Internet akses ke berbagai macam media yang dikemas dengan sederhana. Jika suatu permintaan (request) akan suatu informasi datang. Sistem yang menghubungkan informasi-informasi melalui link ini disebut dengan nama hypertext. sedangkan web server yang bertindak sebagai server memungkinkan anda untuk menerima suatu informasi yang diminta oleh browser. Bekerja pada web mencakup 2 hal penting. Informasi yang diletakkan di WWW disebut homepage ataupun situs (sites) yang memiliki alamatnya masing-masing. Mozilla.

1 Istilah-istilah Internet E-mail (Electronic Mail) E-mail merupakan salah satu aplikasi atau fasilitas yang paling banyak digunakan di Internet. anda akan menemui suatu web page pembuka yang disebut sebagai home page. contoh alamat email adalah emailku@yahoo. dan lain-lain. baik itu di dalam suatu web page yang sama ataupun dalam web page lain pada web site yang berbeda. 1. data.5 1.com. Dengan email ini kita tidak hanya bisa mengirimkan teks saja tapi juga gambar. Setiap informasi ini disimpan dalam suatu file yang berbeda-beda yang disebut Web Page.2 Homepage Setiap perusahaan atau pribadi yang memiliki informasi di WWW memerlukan suatu alamat (URL) khusus yang disebut web site. Sebelum mengakses berbagai macam informasi pada suatu web site. 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. Pengantar Pemrograman Web 1-8 . 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. email memiliki alamat yang bisa dituju secara elektronik. Dalam pengirimannya kita bisa mengirimkan ke lebih dari satu orang sekaligus. Seperti halnya konsep surat melalui pos.Politeknik Telkom Pemrograman Web Request Response Web Browser Web Server Gambar 1.1 Hubungan Client dan Server dalam Web 1. E-mail merupakan alat komunikasi yang murah dan cepat. Di dalam web page inilah tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lainnnya.5.5.

antara lain : Internet Information Server 5.6 1. Ada beberapa jenis web server yang banyak digunakan sekarang ini. MySQL.apache. Sejak kemunculan NCSA Mosaic.Politeknik Telkom Pemrograman Web 1. browser hanya mampu menampilkan inforamsi dalam bentuk teks. Baik Netscape dan IE telah mendukung penggunaan berbagai jenis objek multimedia serta VRML dan Java. SQL Server dan Ms. www mulai berkembang dengan pesat. Pengantar Pemrograman Web 1-9 .0) yang berjalan pada Windows 2000. Untuk mengakses web. Access. Lynx merupakan salah satu contoh browser teks. Netscape memiliki kecepatan jauh lebih bagus daripada Mosaic dalam menampilkan informasi baik teks maupun gambar. NCSA membuat browser Mosaic yang memiliki kemampuan lebih baik dan dapat menampilkan gambar. dimana setiap page bisa memiliki beberapa link yang menghubungkan web page tersebut ke sumber informasi lainnya.6. Informasiinformasi ini biasanya dikemas dalam page-page. Kemudian dunia browser semakin semarak setelah Microsoft mengeluarkan browser Internet Explorer.3 Database Server Database Server merupakan tool yang berada di sisi server yang merupakan perangkat lunak sistem manajemen database (Database Management System – DBMS).1 Tool pada Client/Server Browser Browser merupakan tool yang berada di sisi client. Pertama kali munculnya www.0 (PWS 4.0) yang berjalan pada Windows ‟98.6. Ms. Browser merupakan suatu program yang dirancang untuk mengambil informasiinformasi dari suatu server komputer pada jaringan internet.2 Web Server Web Server merupakan tool yang berada di sisi server yang akan memproses permintaan data dari web browser. 1. Beberapa DBMS yang dapat digunakan untuk membangun database antara lain : Oracle. 1.0 (IIS 5. Apache Web Server (http://httpd. Personal Web Server 4.org) yang merupakan web server gratis yang mendukung PHP.6. anda memerlukan suatu program yang disebut Web Browser. berfungsi untuk pengelolaan data pada sebuah web site. Tahun 1993.Perkembangan ini menjadi jauh lebih cepat lagi setelah muncul browser Netscape Navigator dari Netscape Communication.

yang mencakup software web browser (contohnya Internet Explorer) dan software web server ( contohnya Apache). Latihan 1. tidak hanya teks. gambar bahkan multimedia.id 3. 2. 5.politekniktelkom. Apa yang Anda ketahui mengenai World Wide Web! 4. Apa yang dimaksud dengan E-mail? 7. Jelaskan sistem client-server pada aplikasi web! 6. server komputer di internet mengikuti sistem penamaan yang disebut Domain Names System (DNS). Melalui aplikasi e-mail. WWW adalah aplikasi yang paling menarik di internet. World Wide Web menyediakan pengguna Internet akses ke berbagai macam media yang dikemas dengan sederhana. 4. Gambarkan hubungan client dan server dalam sebuah web! 5. Jelaskan pengertian dari Internet! Siapakah yang pertama kali menerapkan penggunaan internet? Dan digunakan untuk keperluan apakah? 3. Dengan WWW ini kita dapat dengan mudah mendapatkan informasi. Sistem kerja web seperti sebuah sistem pemodelan client/server.Politeknik Telkom Pemrograman Web Rangkuman 1. penting dan banyak digunakan. Apa yang dimaksud dengan web browser? 10. 2. Internet adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.ac. setiap orang dapat saling berkirim surat elektronik tanpa perlu menulis dalam kertas dan mengirimkannya ke kantor pos. Jelaskan minimal dua macam Protokol Transfer yang Anda ketahui! 8. Jelaskan fungsi DNS dan sebutkan beberapa nama domain yang ada di Indonesia! 9. Untuk mempermudah pengelolaan. contoh : www. Apa yang dimaksud dengan web server? Pengantar Pemrograman Web 1-10 .

Politeknik Telkom Pemrograman Web 2 DESIGN HALAMAN WEB Overview Untuk membangun sebuah web site. Membuat teks preformat dan karakter spesial Membuat list pada dokumen HTML Membuat list bersarang pada dokumen HTML Design Halaman Web 2-1 . 3. diperlukan modal dasar berupa bahasa yaitu Hypertext Markup Language(HTML). 5. Setiap tampilan pada halaman web dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna. Tujuan 1. 4. 2. Mengenal dasar-dasar HTML Membuat dokumen HTML dan melakukan pemformatan dokumen yang sederhana.

Adobe GoLive. Gambar 2-1 Lembar Kerja Microsoft FrontPage Design Halaman Web 2-2 . Semua format dokumen. contohnya Macromedia Dreamweaver.1 Pengenalan HTML HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage.Politeknik Telkom Pemrograman Web 2. dokumen multimedia. Microsoft FrontPage. Setiap dokumen dalam Web ditulis dalam format HTML.1 HTML Editor Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa seperti notepad. gambar. 2. hyperlink yang dapat di klik. Namun sekarang ini di pasaran terdapat banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web). form yang dapat di isi dan sebagainya didasarkan atas HTML.1.

Menambahkan paragraf dan gaya karakter ke dalam teks. menghapus dan mengubah teks.Politeknik Telkom Pemrograman Web Kemudahan Microsoft FrontPage : Pengeditan “What You See Is What You Get” (WYSIWYG) Menambahkan. Semua dokumen HTML terdiri dari dua bagian logikal. menunjuk ke suatu hyperlink.1. sehingga mempermudah proses pembacaan. 2. dan lain-lain.2 Struktur Dasar HTML Sebenarnya. Tag HTML ini menggunakan simbol khusus untuk menandakan suatu kode instruksi. gambar. garis horisontal dan hyperlink dalam dokumen web yang anda buat. Kode ini diselipkan ke dalam teks HTML. ukuran dan warnanya. Drag-and-drop hyperlink dan gambar dari dokumen yang lain. Memasukkan tabel. 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. Pada umumnya banyak dari pemakai HTML menggunakan huruf besar dalam penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas. Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Secara umum. simbol ini adalah kurung siku. Struktur dasarnya adalah sebagai berikut: <html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html> Design Halaman Web 2-3 . < dan >. berfungsi untuk mengontrol format dan layout dalam dokumen. yaitu: bagian kepala (head). Mengubah huruf. bagian kepala dari dokumen HTML berisi informasi umum mengenai dokumen dan bagian badan (body) yaitu berisi dokumen yang sebenarnya. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>.

LINK. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML. <head> . link. anda bisa membuka aplikasi notepad ataupun program teks editor yang lain.. vlink. background. </title> Sebagai titel atau judul halaman/form. STYLE & META. digunakan sebagai identifikasi dokumen. Di dalam tag ini kita bisa meletakkan tag-tag TITLE. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor. leftmargin dan topmargin. <title> . Design Halaman Web 2-4 . text. Maka akan terlihat tampilan seperti di bawah ini. SCRIPT. misalkan MyPage. Tuliskan script di atas dan simpan dengan ekstensi *. <body> . </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. </head> Sebagai informasi page header. alink.htm.. misalkan Internet Explorer..Politeknik Telkom Pemrograman Web Keterangan: <html> ..html atau *. ISINDEX. 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. BASE.html. Bukalah dokumen html yang telah anda buat tadi dengan menggunakan web browser.

html 2. background. link. dengan warna putih sebagai default-nya.2. 1) Background : digunakan untuk mengatur latar belakang dengan gambar/image. 2) Bgcolor : digunakan untuk mengatur warna latar belakang dokumen. dengan warna hitam sebagai warna default.6 atau antara <H1> sampai <H6>. "n" mempunyai nilai antara 1 . vlink. alink.1 Memformat Dokumen HTML Bagian Body Pada bagian tag <BODY> digunakan untuk mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. 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 Membuat Heading Heading digunakan untuk mengatur ukuran huruf pada header.2 2.</Hn>. leftmargin dan topmargin. dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil. 3) Teks : digunakan untuk mengatur warna teks dokumen. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor. 2. text. Tag heading <Hn>. Design Halaman Web 2-5 .2.Politeknik Telkom Pemrograman Web Gambar 2-2 Tampilan MyPage.

Politeknik Telkom Pemrograman Web Dalam banyak dokumen. Heading ini mempunyai atribut untuk menentukan letak tulisan. maka heading akan otomatis rata kiri. kanan ataupun tengah. Jika atribut ini tidak ditambahkan. 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 : Gambar 2-3 Contoh Heading Design Halaman Web 2-6 . di kiri. heading pertama digunakan sebagai judul tulisan.

Dengan adanya perbedaan browser web yang berjalan pada komputer yang berbeda. tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. hal yang perlu dicatat adalah tag <P> ini akan mengabaikan spasi dan pindah baris.3 Memformat Paragraf Dalam membuat paragraf. merupakan suatu titik terang bukan hanya bagi masyarakat IT.Politeknik Telkom Pemrograman Web 2. kita bisa menggunakan atribut ALIGN untuk mengatur letak paragraf. RIGHT.2. Contoh penggunaan paragraf dapat dilihat pada script berikut ini. CENTER dan JUSTIFY. </P> Design Halaman Web 2-7 . ada beberapa hal yang harus diperhatikan. rata kiri. Sejak kemunculan internet. Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk browser web yang memiliki ukuran satu halaman penuh dan yang tidak. </P> <h3>Paragraf rata tengah</h3> <P ALIGN=CENTER>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. <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. Dalam pembuatan paragraf pun. tengah ataupun rata kanan . memiliki kemampuan untuk menampilkan grafis yang berbeda sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda. Untuk membuat paragraf ini digunakan tag <P>. Attribut align mempunyai nilai: LEFT. tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat.

<CENTER> digunakan untuk membuat teks dalam posisi di tengah. merupakan suatu titik terang bukan hanya bagi masyarakat IT. Gambar 2-4 Contoh Format Paragraf 2. </P> </BODY> </HTML> Tampilan di browser akan seperti ini.2.4 Line Breaks Line breaks digunakan untuk menambahkan baris baru pada teks dalam dokumen HTML dengan cara menambahkan tag <BR>. Sejak kemunculan internet. Setiap teks yang Design Halaman Web 2-8 . tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat.Politeknik Telkom Pemrograman Web <h3>Paragraf rata kanan</h3> <P ALIGN=RIGHT>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital.

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 : Gambar 2-5 Contoh Penggunaan Line Break dan Center Design Halaman Web 2-9 .

Dengan kata lain tag <PRE> akan menampilkan teks pada halaman web sesuai dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat. tag <PRE> ini akan membuat spasi ikut diperhitungkan.Politeknik Telkom Pemrograman Web 2. Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom.5 Teks Preformat Berbeda dengan pembuatan paragraf yang mengabaikan setiap tambahan spasi. Berikut ini contoh penggunaan dari tag <PRE>. yang membutuhkan banyak spasi untuk membuat urutan baris dan kolom.2. <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 : Gambar 2-6 Contoh Penggunaan Teks Preformat Design Halaman Web 2-10 .

6 Memformat Bentuk Tulisan Untuk pengaturan teks.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.2. Cara menggunakannya adalah awali dengan <tag>.Politeknik Telkom Pemrograman Web 2. terdapat beberapa tag yang dapat digunakan. terus masukkan tulisan yang akan diatur dan akhiri dengan </tag>. <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 . 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 . Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini. selalu dalam italics.

Design Halaman Web 2-12 . Tag FONT mempunyai attribut. Gambar 2-7 Contoh Menggunakan Tag pada Teks 2. COLOR. yaitu: SIZE.Politeknik Telkom Pemrograman Web Tampilan dari Script di atas akan terlihat seperti berikut ini. FACE.2.7 Tag Font Tag <FONT> digunakan untuk mengatur huruf dokumen HTML.

Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. 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. Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini. <html> <head> <title>::: Ukuran. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). gunakan saja font standar. COLOR: Digunakan untuk mengatur warna font. 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 : Design Halaman Web 2-13 .Politeknik Telkom Pemrograman Web SIZE: Digunakan untuk mengatur ukuran font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. FACE: Digunakan untuk mengatur jenis atau nama font. Ukuran font yang digunakan berkisar antara 1 .

karakter spesial untuk > &amp. karakter spesial untuk < &gt. karakter spesial untuk © &#174. tanda lebih besar (>). karakter spesial untuk " &#64. karakter spesial untuk © &copy. karakter spesial untuk ® &nbsp. 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. karakter spesial untuk spasi yang tak dapat dipecah Design Halaman Web 2-14 .8 Karakter Spesial Terdapat empat karakter yaitu tanda lebih kecil (<).Politeknik Telkom Pemrograman Web Gambar 2-8 Contoh Tag Font dan Atributnya 2.2. Karakter spesial tersebut antara lain : &lt. karakter spesial untuk @ &#169. tanda dan (&) dan kutip ganda (“). diperlukan suatu karakter spesial untuk menggantikan karakter-karakter di atas. karakter spesial untuk ® &reg. karakter spesial untuk & &quot.

&nbsp.&nbsp.&nbsp.&nbsp.&nbsp . Design Halaman Web 2-15 . Pasti salah satunya sudah pernah lihat kan? &nbsp.. dan tanda &#64. seperti yang sering digunakan dalam alamat email.&nbsp.Terlihat perbedaannya tidak? ya. atau tanda &reg. Pernah lihat tanda &#169. atau tanda &copy. </BODY> </HTML> Hasilnya akan terlihat seperti gambar di bawah ini. atau tanda &#174. dan sekarang kita akan coba menggunakan tanda lebih besar seperti ini &gt. tanda kutip ganda &quot.&nbsp.&nbsp..&nbsp. Bagaimana? dapat terlihat kan? yang akan ditampilkan saat ini adalah tanda dan &amp.. saya tambahkan beberapa spasi di kalimatnya.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 &lt.

<HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis dengan letak sebelah kiri (left). Defaultnya adalah membuat garis yang solid. <HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel. kanan (right) atau tengah (center-default). ALIGN dan NOSHADE. default 2.2.9 Membuat Garis Horizontal Tag <HR> digunakan untuk membuat garis horizontal pada jendela browser. <HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan garis. Tag ini mempunyai atribut SIZE. WIDTH. 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 Gambar 2-9 Contoh Penggunaan Karakter Spesial 2. <HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D.

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. Gambar 2-10 Contoh membuat Garis Horizontal Design Halaman Web 2-17 . lebar 100 dan diletakkan di sebelah kanan <HR SIZE=10 WIDTH=100 ALIGN=RIGHT> </BODY> </HTML> Hasilnya akan terlihat seperti gambar di bawah ini.Politeknik Telkom Pemrograman Web Garis horizontal biasa (Shade dan solid) <HR> Garis horizontal No Shade <HR NOSHADE> Garis horizontal dengan ukuran 10 (berongga.

Pada jenis ini tidak memerlukan pengurutan data. yaitu: 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.1 List Tanpa Urutan (Unordered Lists) Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entri didefinisikan dengan tag <LI>.Politeknik Telkom Pemrograman Web 2.3. 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 Contoh penggunaannya adalah sebagai berikut : <HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List tanpa urutan</h3> <UL> <LI>apel</LI> <LI>jeruk</LI> <LI>mangga</LI> <LI>jambu</LI> </UL> </BODY> </HTML> Hasilnya akan terlihat seperti gambar di bawah ini. Design Halaman Web 2-18 . Terdapat tiga tipe list yang dapat digunakan. Kita juga dapat menentukan jenis bullet yang akan digunakan dengan menentukan type-nya.

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> Hasilnya akan terlihat seperti gambar di bawah ini. dengan tiap item dapat menggunakan angka arab atau romawi.Politeknik Telkom Pemrograman Web Gambar 2-11 Contoh Unordered List 2.3.2 List Berurut (Ordered Lists) <OL> Juga digunakan untuk membuat daftar item bernomor. Design Halaman Web 2-19 .

Politeknik Telkom Pemrograman Web Gambar 2-12 Contoh Ordered List Atribut yang ada pada Ordered List adalah TYPE dan START. 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 . Pada tag <LI> terdapat atribut VALUE untuk melewati nomor yang tidak diinginkan. 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.

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 Gambar 2-13 Contoh Penomoran dengan Ordered List Design Halaman Web 2-21 .

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> Gambar 2-14 Contoh Definition List Design Halaman Web 2-22 .Politeknik Telkom Pemrograman Web 2. 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.3 Definition Lists Definition lists biasanya digunakan untuk membuat suatu list singkatan dan definisinya atau istilah-istilah.3.

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> Gambar 2-15 Contoh Nested List Design Halaman Web 2-23 .Politeknik Telkom Pemrograman Web 2.3. <OL> dan <LI>.4 List Bersarang (Nested Lists) Dalam pembuatan list bersarang menggunakan tag-tag yang telah dijelaskan sebelumnya seperti tag <UL>.

d. Latihan 1. b. spasi! Sebutkan jenis-jenis list yang ada pada dokumen HTML! Tuliskan perintah HTML untuk membuat list dengan menggunakan penomoran angka Romawi! Design Halaman Web 2-24 . 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. 2. 3. 6. ©.Politeknik Telkom Pemrograman Web Rangkuman 1. pewarnaan teks dan pengaturan paragraf. 3. ®. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. face dan color. a. c. 2. 4. &. 5. Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan mengatur warna latar belakang. 4. HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. List ada tiga macam antara lain : ordered list. format teks. Jelaskan masing-masing atribut tersebut dan berikan conroh penggunaannya! Tuliskan tag HTML untuk karakter spesial @. Dari ketiga macam list tersebut dapat dibuat bentuk List Bersarang. e. unordered list dan definition list.

2. 4. 5. dapat pula menggunakan gambar maupun aplikasi multimedia sebagai link. 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 Link dan Gambar . Selain menggunakan teks sebagai link. Menggunakan relative links lebih memudahkan dalam manajemen file apabila terjadi perpindahan aplikasi web ke komputer yang berbeda.Politeknik Telkom Pemrograman Web 3 LINK DAN GAMBAR Overview Keunggulan dokumen HTML adalah dapat melakukan link ke dokumen yang berlainan atau ke dokumen yang sama. 3. Tujuan 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

Link dan Gambar

Politeknik Telkom

Pemrograman Web

3.1.1

Membuat Link antar Dokumen HTML

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 :

Gambar 3-1 Tampilan Halaman dok_awal.htm

Link dan Gambar

3-3

Politeknik Telkom

Pemrograman Web

Membuat halaman target link dok_tujuan.htm
<HTML> <HEAD> <TITLE>Relative Link</TITLE> </HEAD> <BODY> <P>Ini dokumen dengan nama file : dok_tujuan.htm, yang dituju oleh Relative Link pada dokumen dok_awal.htm</P> </BODY> </HTML>

Gambar 3-2 Tampilan Halaman dok_tujuan.htm

3.1.2

Relative Links versus Absolute Pathnames

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>

contoh penggunaan port (jika memang dibutuhkan)
<A HREF=http://www.mtv.com/jadwal.html:8000>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>

Contoh penggunaannya adalah sebagai berikut.
<HTML> <TITLE> Judul dari dokumen HTML </TITLE> <HEAD> </HEAD> <BODY> Kritik dan saran dapat anda layangkan ke <A HREF=“mailto:customer_service@mymail.com”> Layanan Customer</A> </BODY> </HTML>

Link dan Gambar

3-5

Misal: <A HREF=”#sejarah”> Bab 1 </A> atau dapat ditulis lengkap: <A HREF=”belajar_html. Untuk memberi nama anchor.1 Sekilas Sejarah Internet</A> Contoh penggunaan : <HTML> <HEAD> <TITLE>Membuat Link Ke Bagian dalam Dokumen</TITLE> </HEAD> Link dan Gambar 3-6 .htm#sejarah”> Bab 1 </A> dan untuk nama anchornya: <A NAME=”sejarah”>1. Perbedaan dengan link yang berbeda dokumen adalah tujuan / target link.3 Membuat Link ke Bagian Tertentu dalam Dokumen Untuk membuat link ke bagian tertentu dalam dokumen yang sama. jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file / dokumen yang bersangkutan.1.Politeknik Telkom Pemrograman Web Tampilannya sebagai berikut : Gambar 3-3 Contoh Link untuk Mengirim Email 3. atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. harus diberikan nama anchor.

<BR> Untuk kembali ke Bab 1.</P> <P>&nbsp..</P> <A NAME="sejarah"></A> <B>1.</P> <P>&nbsp.</P> <P>&nbsp.</P> <P>&nbsp.<Br> Sebagai pendahuluan.</P> <P>&nbsp. klik <A HREF="#bab1">disini</A> </BODY> </HTML> Hasilnya: Gambar 3-4 Contoh Link ke Bagian Tertentu dalam Dokumen Link dan Gambar 3-7 .</P> <P>&nbsp. coba klik link ini untuk <A HREF="#sejarah">menuju ke bagian lain</A> pada dokumen ini.</P> <P>&nbsp.1 Sekilas Sejarah Internet</B><BR> Bab ini adalah bagian lain pada dokumen yang dituju ketika link pada Bab 1 diklik.</P> <P>&nbsp.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. <P>&nbsp.<BR> Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.

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.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" 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.Politeknik Telkom Pemrograman Web 3. lokasi dimana file disimpan Mengatur lebar image Mengatur letak gambar .gif" ALT="Gambar Gelembung" width="48" height="48"> <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. right) Mengatur lebar border/bingkai pada gambar Mengatur tinggi image Mengatur letak gambar Menentukan sumber file. left.

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> Gambar 3-5 Contoh Penggunaan Atribut pada Tag <img> Link dan Gambar 3-9 .

1 Gambar sebagai Hyperlink Untuk menjadikan image sebagai hyperlink. silahkan klik pada gambar berikut <A HREF="contoh_4.Politeknik Telkom Pemrograman Web 3.2.bmp" ALT="Link Menggunakan Image"></A> <BR><BR> Selamat menikmati penjelajahan di situs ini. 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.htm"> <IMG SRC="lambang_poltek_telkom.2. </BODY> </HTML> Hasilnya seperti gambar di bawah ini : Gambar 3-6 Contoh Gambar sebagai Hyperlink Link dan Gambar 3-10 .

Terdapat tiga istilah pengalamatan link. Berikan contoh penggunaan gambar sebagai hyperlink ke suatu alamat tertentu! Link dan Gambar 3-11 . 2. 4.Politeknik Telkom Pemrograman Web Rangkuman 1. yaitu link antara satu dokumen dengan dokumen yang lain dan link kepada suatu bagian pada dokumen itu sendiri. link absolut dan link dalam dokumen yang sama. Untuk menampilkan gambar dalam dokumen HTML menggunakan tag <IMG>. Kelebihan dari HTML adalah kemampuannya untuk link (menyambungkan) daerah teks ataupun gambar ke dokumen yang lain. selain itu akan memudahkan jika diharuskan memindahkan grup dokumen ke lokasi yang lain karena relative path tersebut akan tetap bisa digunakan. jelaskan disertai contohnya! 3. Sebuah gambar dapat dijadikan link ke dokumen tertentu. Berikan contoh penggunaan link yang ditujukan untuk mengirimkan email ke alamat tertentu! 4. 7. 3. 6. Penggunaan relative link penulisannya lebih pendek. 5. Ada tiga istilah dalam pengalamatan link. Link pada dokumen HTML dapat digunakan untuk apa saja? 2. Absolute Pathname digunakan ketika kita diharuskan membuat link ke lokasi yang tidak secara langsung terkait. yaitu link relatif. Untuk penggunaan Absolute Pathname ini diharuskan mencantumkan URL yang menspesifikasikan lokasi suatu file dalam server yang lain. Jelaskan fungsi atribut alt pada penyisipan gambar di dokumen HTML! 5. Latihan 1. Link dibagi dalam dua kategori.

dalam dokumen HTML harus mampu menyediakan fasilitas yang dapat menerima masukan atau isian data dari user. Tujuan 1. Data isian dari pengguna ini untuk kemudian dapat diproses lebih lanjut menjadi informasi yang dibutuhkan baik oleh user maupun oleh pemilik web itu sendiri. Membuat form pada dokumen HTML Mengerti cara penggunaan form pada halaman dokumen HTML. 2. Mampu menggunakan Input Field sesuai kegunaannya. Pengguna web dapat memasukkan inputan pada dokumen HTML melalui elemen form.Politeknik Telkom Pemrograman Web 4 FORM Overview Untuk dapat berinteraksi secara lebih menarik. Form 4-1 . 3.

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.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.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. Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: Memperoleh data-data user baik nama. baik oleh user ataupun pihak yang mempunyai web. Syntax: METHOD=”POST|GET” Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=”URL” ACTION Form 4-2 . Untuk mendaftar pada service yang di sediakan. Memperoleh informasi pembelian secara online. Memperoleh feedback dari user mengenai website anda. Tabel 4-1 Jenis. Dalam sebuah dokumen dapat mempunyai lebih dari satu form HTML. alamat dan data lainnya. POST – data akan di kirim ke server sebagai block data ke script. Elemen dari form HTML adalah <FORM> yang menunjukkan awal dari suatu form HTML dan diakhiri dengan </FORM>.

Form 4-3 . TYPE=PASSWORD Kotak isian bertipe password ini menerima data karakter. tapi tidak akan ditampilkan karena kebutuhan masukan password yang bersifat rahasia. Type=TEXT Kotak isian bertipe teks ini menerima data karakter (default) sebanyak satu baris. Tipe-tipe input yang tersedia adalah sebagai berikut : 1. Tabel 4-2 Jenis. Atribut nya sama dengan input field type text. Tag yang digunakan untuk membuat kotak isian adalah tag <INPUT>.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.Politeknik Telkom Pemrograman Web 4. TYPE=CHECKBOX Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih sama sekali. kita dapat membuat input atau kotak isian yang dapat diisi dengan suatu data oleh user. Contoh : <INPUT TYPE="PASSWORD" NAME="PWD" VALUE="" SIZE=”20”> Tampilan : 3.2 Membuat Input Field Dalam form. dengan memberikan tanda pada checkbox tersebut.

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. Radio button juga harus secara explisit memberikan nilai ke atribut value. sehingga user hanya bisa memilih satu option saja. Setiap radio button control harus memiliki nama yang sama. TYPE=RADIO Hanya mengijinkan memilih satu dari banyak pilihan. 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 Value Size Contoh : <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). Default WRAP=OFF Form 4-5 . Tag <TEXTAREA> Tag ini digunakan untuk membuat input teks yang lebar. 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. bisa menampung lebih banyak karakter dibanding input field bertipe TEXT. Memberikan nama label pada button Menentukan lebar button <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"> Tampilan : <INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"> Tampilan : 6. Teks yang berada diantara tag <TEXTAREA> dan </TEXTAREA> secara default akan ditampilkan sesuai aslinya.

Form 4-6 . TYPE=IMAGE NAME=SUBMIT SRC=”…” Mengirimkan informasi form seperti halnya tombol Submit. default = “Submit Query” Untuk menentukan jumlah baris yang di tampilkan Untuk menentukan apakah user boleh memilih lebih dari satu option atau tidak. Tag <SELECT> dan <OPTIONS> Digunakan untuk membuat input field yang berbentuk pilihan.Politeknik Telkom Pemrograman Web Tampilan : 7. hanya berbentuk gambar. Contoh : <INPUT TYPE="IMAGE" NAME="SUBMIT" SRC="submit. Tag <OPTION> ini mendefinisikan pilihan dari item-item. Tag <SELECTION> dan <OPTION> ini harus digunakan secara bersamasama. 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.jpg"> Tampilan : 8. Pilihan ini dipilih secara default. Tag ini dipasangkan diantara tag <SELECT> dan </SELECT>.

3. 2. 4-7 Form . CHECKBOX. Terdapat dua atribut metoda penanganan form.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 : Jika di klik panah ke bawah Jika size = "3". Kontrol ini dapat berupa input field TEXT. maka tampilannya sebagai berikut : Rangkuman 1. LIST MENU. PASSWORD. yaitu metoda GET dan metoda POST. Form digunakan untuk menerima masukan berupa informasi atau data dari pengguna. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. TEXTAREA. RADIO BUTTON. BUTTON.

2. 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. 5. 4. maka hasilnya akan dikirimkan ke e-mail anda : Form 4-8 .Politeknik Telkom Pemrograman Web Latihan 1. jika ada penekanan tombol kirim. 3.

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. 5.Politeknik Telkom Pemrograman Web 5 LAYOUT HALAMAN WEB Overview Salah satu metode yang dapat dilakukan dalam membuat layout dokumen HTML adalah menggunakan tabel. dirancang dengan menggunakan tabel. yang masing-masing dihubungkan dengan dokumen HTML yang terpisah Mengatur border pada frame Menentukan target frame cells dari hypertext links 5-1 Layout Halaman Web . Tujuan 1. 2. 3. layout halaman web juga dapat dibuat menggunakan frame yang masing-masing bagian frame dihubungkan dengan dokumen HTML yang terpisah. Layaknya sebuah spreadsheet yang memiliki sel dan berisi angka-angka. Selain menggunakan tabel. Dengan menggunakan tabel kita dapat membagi dokumen HTML ke dalam bagian-bagian yang masing-masing bagian tersebut mempunyai ruang. 4. gambar dan text. 6. Hampir semua web site yang berkualitas dan profesional. tabel dalam web juga mempunyai sel yang berisi link.

Table Data Table data adalah bagian yang digunakan untuk mengisikan informasi yang akan ditampilkan di web browser. Diwakili dengan tag <TR>. Elemen pendukung dalam pembuatan tabel di dokumen HTML adalah : 1. Susunan sederhana dalam membuat tabel di dokumen HTML sebagai berikut : <TABLE> <TH>. 2. 5.. 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)...1 Membuat Tabel Untuk membuat tabel dalam dokumen HTML. berisi judul tabel</TH> <TR> <TD> .1 Tabel Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. 3. Diwakili dengan tag <TD>. Biasa disebut kolom.1. Table Row Table row merupakan penyusun baris pada tabel. Table Heading Table heading diwakili dengan tag <TH>. Dalam 1(satu) tabel terdiri atas baris dan kolom.Politeknik Telkom Pemrograman Web 5. Table data selalu berada di dalam table row. digunakan untuk memberikan judul kolom pada tabel.. default=0 5-2 Layout Halaman Web . kita dapat menggunakan tag <TABLE>.

Politeknik Telkom Pemrograman Web Bordercolor Cellpadding Cellspacing Height Width 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.JPG"> <CAPTION ALIGN=bottom> 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.1 Prakiraan cuaca di kota besar </CAPTION> Layout Halaman Web di bawah 5-3 .1.2 Menambahkan Judul Tabel Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas 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. Secara default caption diletakkan dibagian atas suatu tabel.

salah satu elemen pendukung tabel pada dokumen HTML adalah table row. Untuk memudahkan kita sebut Layout Halaman Web 5-4 .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 Gambar 5-1 Contoh Pembuatan Tabel 5.1.3 Memformat Baris Seperti yang sudah dijelaskan di atas.

center. Kolom dalam dokumen HTML diwakili oleh tag <TD>. atau right Mengatur warna yang dijadikan background Mengatur warna border Mengatur tinggi baris Mengatur rataan (vertikal) Terdapat 3 (tiga) pilihan : top.Politeknik Telkom Pemrograman Web saja sebagai baris (row). Untuk selanjutnya kita akan menyebut bagian ini sebagai kolom. middle.4 Memformat Kolom Elemen pada tabel yang digunakan sebagai tempat untuk menuliskan informasi yang nantinya akan ditampilkan di web browser adalah table data. 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.1. 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. Setiap tabel pasti terdiri atas baris – baris yang diwakili dengan tag <TR>. bottom Mengatur lebar kolom Contoh penerapan memformat baris dan kolom : <HTML> <HEAD> <TITLE> Memformat Baris dan Kolom </TITLE> </HEAD> <BODY> <TABLE BORDER=3> <CAPTION>Daftar Order Barang</CAPTION> Layout Halaman Web 5-5 . center. Tabel 5-2 Jenis – Jenis Atribut pada Tag <TR> Atrribut Align Bgcolor Bordercolor Height Valign Kegunaan Mengatur rataan (horizontal) Terdapat 3 (tiga) pilihan : left. middle. bottom 5.

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. 65100</B></TD> </TR> </TABLE> </BODY> </HTML> Layout Halaman Web 5-6 . 12900</TD> </TR> <TR HEIGHT=30 BORDERCOLOR="RED"> <TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD> <TD BGCOLOR="GRAY"><B>Rp. 2750</TD> </TR> <TR> <TD ALIGN=CENTER>5</TD> <TD>Snack Ringan</TD> <TD>Rp. 22500</TD> </TR> <TR> <TD ALIGN=CENTER>2</TD> <TD>Nutrisari Jus Jeruk</TD> <TD>Rp. 6450</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 2450</TD> <TD ALIGN=RIGHT>3</TD> <TD>Rp. 9800</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 4500</TD> <TD ALIGN=RIGHT>5</TD> <TD>Rp. 2750</TD> <TD ALIGN=RIGHT>1</TD> <TD>Rp. 19600</TD> </TR> <TR> <TD ALIGN=CENTER>4</TD> <TD>Tango Coklat</TD> <TD>Rp. 7350</TD> </TR> <TR> <TD ALIGN=CENTER>3</TD> <TD>Kacang Kulit Garuda</TD> <TD ROWSPAN=3>Makanan</TD> <TD>Rp.

Secara default cell padding ini bernilai 1.Politeknik Telkom Pemrograman Web Gambar 5-2 Contoh Memformat Kolom 5.1.5 Mengatur CELLSPACING dan CELLPADDING Atribut CELLSPACING adalah jumlah spasi yang dimasukkan diantara sel-sel dalam tabel. Atribut CELLPADDING adalah jumlah spasi di antara border sel dan isi dari sel. Secara default cell spacing ini bernilai 2. 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 .

1.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 Gambar 5-3 Contoh Pengaturan Cellspacing dan Cellpadding 5. Sebagai contoh. gambar yang menunjuk pada hyperlink dan teks dengan huruf yang berwarna. 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 . gambar.6 Lebih Lanjut dengan Tabel Tabel dalam halaman web dapat berisi hyperlink.

</TD> <TD>Pemandangan Awan</TD> <TD ALIGN=CENTER> <IMG SRC="dock.Politeknik Telkom Pemrograman Web <TABLE BORDER=2> <CAPTION> Dokumentasi Fotograpi </CAPTION> <TR> <TD>1.html"> <IMG SRC="image.jpg" width="100" height="100"></TD> </TR> <TR> <TD>2.jpg" width="100" height="100"></TD> </TR> <TR> <TD>3.jpg" ALT="Pinguin"></A></TD> </TR> </TABLE> </BODY> </HTML> Layout Halaman Web 5-9 .</TD> <TD>Hutan Lindung</TD> <TD ALIGN=CENTER> <IMG SRC="forest.</TD> <TD>Pinguin</TD> <TD ALIGN=CENTER> <A HREF="Student.

Politeknik Telkom Pemrograman Web Gambar 5-4 Contoh Penyisipan Gambar pada Tabel 5. Layout Halaman Web 5-10 .2 Frame Salah satu teknik pengaturan tata letak dokumen web yang telah dipelajari sebelumnya adalah dengan menggunakan tabel. Pada pembahasan ini.

Untuk pengisian nilainya dimungkinkan juga menggunakan nilai pixel selain menggunakan nilai prosentase.Politeknik Telkom Pemrograman Web diperkenalkan teknik lain dalam mengatur tata letak dokumen web dengan menggunakan frame.1 Frame Syntax <FRAMESET> Tag frameset ini mempunyai 2 buah atribut ROWS dan COLS.25%. Sintaks umum yang digunakan untuk membuat frame : <HTML> <HEAD> </HEAD> <FRAMESET BORDER=”#” { [ROWS | COLS] } = { #. jika digunakan frame.. ROWS=”list” Digunakan untuk frame pembagi horizontal. Tiap bagian windows ini akan berisi web page. frame akan membagi web page dalam baris dan kolom. kita dapat menampilkan beberapa web page dalam satu halaman. web page akan terbagi menjadi beberapa windows yang masing – masing bagian mempunyai nama (nantinya akan menjadi target). <FRAMESET ROWS=”10%. untuk menggunakan sisa space pada layar bisa digunakan tanda * <FRAMESET ROWS=”100.[#.2. Secara umum digunakan nilai prosentase. Sama halnya dengan tabel.[. bedanya. 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. Atribut ROWS memakai daftar nilai yang dipisahkan dengan koma. Jadi dengan menggunakan frame. 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.250.65%”> Jika totalnya tidak 100%.]] }> <FRAME SRC=”url” NAME=”FrameName”> </FRAMESET> </HTML> 5..*”> Layout Halaman Web 5-11 . maka semua presentase akan diskalakan sehingga total menjadi 100%. tag FRAME atau tag NOFRAMES.

Tag FRAMESET ini dapat bersarang didalam tag FRAMESET yang lain. semua frame dapat diubah ukurannya. pilih “no” jika tidak menginginkan scrollbar tidak tampak atau pilih “auto” sehingga browser yang nanti menentukan akan menampilkan scrollbar jika dibutuhkan. Atribut COLS memakai daftar nilai yang dipisahkan dengan koma. NAME=”window_name” :Atribut NAME berisi nama frame yang bisa ditunjuk oleh link pada dokumen yang lain.*”> <FRAME> Mendefinisikan frame tunggal dalam frameset. misalkan BORDERCOLOR=green. Atribut ini bersifat optional dan nilai defaultnya adalah auto. Pilih “yes” jika diinginkan scrollbar selalu tampak pada frame. Layout Halaman Web 5-12 . Frame bernama bisa mempunyai isi target window dengan menggunakan atribut TARGET. Secara default. SCROLLING=”yes|no|auto” Atribut SCROLLING mendeskripsikan apakah frame harus mempunyai scrollbar atau tidak. terdapat 8 pixel margin kiri dan kanan untuk setiap frame yang dapat diperkecil ataupun diperbesar.100”> Pemrograman Web COLS=”list” Digunakan untuk frame pembagi vertikal.300. Atribut NAME ini bersifat optional. NORESIZE Atribut NORESIZE ini mengindikasikan jika frame tidak dapat di ubah ukurannya oleh user. BORDERCOLOR=color Memberi warna pada border yang memisahkan frame ini dengan yang lain.*. <FRAMESET COLS=”20%. biasanya dari frame lain pada dokumen yang sama. MARGINWIDTH=pix Secara default.80%”> <FRAMESET COLS=”200.Politeknik Telkom <FRAMESET ROWS=”100. Beberapa atribut yang sering digunakan adalah : SRC=”url” :Atribut SRC ini berisi URL ke dokumen yang akan ditampilkan pada frame ini. BORDERCOLOR dapat digunakan pada satu atau lebih <FRAME> atau dengan <FRAMESET> untuk mengatur warna default pada semua border.

kita akan mencoba menggunakan frame untuk membagi halaman web menjadi 2 (dua) bagian atau lebih secara horizontal.htm <html> <head> <title> Header Politeknik Telkom </title> </head> <body> Layout Halaman Web 5-13 . 5.htm. jur_mi. main.2 Frame Target Target frame digunakan untuk menentukan tujuan ditampilkannya suatu informasi dari suatu link. silahkan buat beberapa dokumen web yang nanti akan ditampilkan di tiap frame. 1.htm.Politeknik Telkom Pemrograman Web MARGINHEIGHT=pix Secara default. Sebelum mencoba frame baris. target frame ini disesuaikan dengan nama frame yang akan dijadikan tujuan menampilkan informasi tersebut. _parent.htm. terdapat 8 pixel margin atas dan bawah pada setiap frame yang dapat diperkecil atau diperbesar. Misalkan terdapat tiga halaman yang akan ditampilkan yang terdiri dari halaman header. 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. header. maka definisi frame yang ada pada window browser akan hilang.2. seperti yang diperlihatkan pada tabel di bawah ini : _self. Dengan menggunakan _top sebagai target. Ada nama frame predefined yang dapat digunakan sebagai target.3 Penggunaan Frame Pada bagian ini. 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. Biasanya. _top. _blank.2.

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. 1 Dayeuh Kolot Bandung</h5> <hr> [ <a href="Jur_mi. Telekomunikasi No.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.Politeknik Telkom Pemrograman Web <center> <h3>Politeknik Telkom</h3> <h5>Jl. main. 1 Dayeuh Kolot Bandung. Layout Halaman Web 5-14 .html"> Manajemen Informatika </a> ] [ <a href="#"> Komputer Akuntansi </a> ] [ <a href="#"> Teknik Komputer </a> ] </center> </body> </html> 2.<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.

75%"> <frame src="header.htm" scrolling="no"> <frame src="main. frame_baris.htm <html> <head> <title>Frame Baris</title> </head> <frameset rows="25%.htm" name="main"> </frameset> <noframes><body> </body></noframes> </html> Layout Halaman Web 5-15 .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.

Pada dokumen HTML Untuk membuat layout ada dua cara. 3. Layout Halaman Web 5-16 . yaitu menggunakan tabel dan menggunakan frame. seperti untuk mengatur ukuran tabel. Tabel. Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. baris dan kolom dapat diformat menggunakan atribut-atribut yang disediakan. memberi warna pada latar belakang baris atau tabel. 4. mengatur letak tulisan di dalam tabel.Politeknik Telkom Pemrograman Web Gambar 5-5 Contoh Penggunaan Frame Rangkuman 1. dimana setiap bagian merupakan satu halaman HTML terpisah. Frame dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML. 2. menyisipkan gambar di dalam tabel dan sebagainya.

4. 5. Layout Halaman Web 5-17 . 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. 2. Untuk menampilkan link yang terdapat pada frame dapat ditentukan letak halaman yang akan dituju dengan menggunakan atribut target. 3.Politeknik Telkom Pemrograman Web 5. Latihan 1.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda. Tujuan 1. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). Memberikan uraian tentang konsep dasar. CSS diperkenalkan untuk pengembangan website pada tahun 1996. baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda.Politeknik Telkom Pemrograman Web 6 CSS ( Cascading Style Sheet) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. sintaks CSS. seperti melalui layar. dan juga alat pembaca braille. suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar). dan pemanfaatannya untuk representasi dan layout dokumen pada lingkungan web 6-1 CSS (Cascading Style Sheet) . Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. yang kemudian akan membentuk hubungan parent-child pada setiap style. Setelah CSS distandarisasikan. cetak.

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. Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web Mempercepat proses rendering/pembacaan HTML.Politeknik Telkom Pemrograman Web 6. 6.1 Keuntungan Menggunakan CSS CSS digunakan untuk mempersingkat penulisan tag HTML seperti font. dan mempunyai ciri – ciri sebagai berikut : Merupakan style yang terlemah karena editing harus dilakukan disemua bagian dimana inline berada Mirip dengan atribut biasa. CSS disediakan untuk memberikan kebebasan bagi para desainer halaman web sesuai dengan yang dikehendakinya.2.text. dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Keuntungan menggunakan CSS : Memisahkan presentastion sebuah dokumen dari content document itu sendiri.color. CSS dituliskan di dalam elemen HTML.2 6. 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 . Bagian dari <BODY> Format Statement : SELECTOR {PROPERTY:VALUE} Nama selector bisa merujuk ke tag HTML yang akan diedit. Cascading Style Sheet.1 Penempatan CSS Inline Style Sheet Pada posisi ini.

Penggunaan embedded style sheet akan memberikan efek terhadap satu halaman saja..</style> yang ditempatkan pada bagian page header atau diantara tag <head>…</head>. } "HTML tag"{ "CSS Property1":"Value1". sans-serif.Politeknik Telkom Pemrograman Web <body> <p style="font-style:italic">Tulisan ini akan tercetak miring</p> </body> </html> Jika source tersebut dijalankan di web browser.2 Embedded Style Sheet Penulisan CSS didalam dokumen HTML dan menggunakan tag <style>…. color:#FF0000} </STYLE> </head> <body> <p>Tulisan ini diformat menggunakan Embedded Style Sheet</p> CSS (Cascading Style Sheet) 6-3 .2. Helvetica. font-size: 12pt. Format Statement : "HTML tag"{ "CSS Property":"Value" .} Contoh penggunaan embedded style sheet : <html> <head> <title>Embedded Style Sheet</title> <STYLE type="text/css"> p {font-family: Arial. "CSS Property2":"Value2". . maka akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini : Gambar 6-1 Contoh inline CSS 6.

Politeknik Telkom </body> </html> Pemrograman Web Jika source tersebut dijalankan di web browser. setidaknya dibutuhkan 2 (dua) file yang masing – masing berfungsi sebagai file css (yang akan dipanggil) dan file HTML (yang akan memanggil).</head> Untuk menggunakan linked style sheet..3 Linked Style Sheet Style disimpan dalam file yang berbeda dari file HTML dan disimpan dalam format ”... font-style:italic} Tahap kedua. Helvetica. font-size: 12pt.2. Tahap pertama. color: #FF0000.css dengan isi script css sebagai berikut : p { font-family: Arial. digunakan tag <link> yang ditempatkan pada bagian page header atau diantara tag <head> . sans-serif. buat sebuah file css dan simpan dengan menggunakan nama file mystyle.css” Secara umum. 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 . 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. maka akan didapatkan hasil seperti yang terlihat pada gambar di bawah ini : Gambar 6-2 Contoh penggunaan embedded style sheet 6.

dan #0000FF merupakan value CSS (Cascading Style Sheet) 6-5 .Politeknik Telkom Pemrograman Web <title>Linked Style Sheet</title> <link rel="stylesheet" href="mystyle.3 Aturan Penulisan pada CSS Sintaks CSS dibagi dalam 3 bagian : Selector {property : value} Dimana : Selector berisi tag HTML yang akan didefinisikan (body. H1. Color merupakan property. 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. font. akan didapatkan hasil seperti yang ditunjukkan pada gambar di bawah ini : Gambar 6-3 Contoh penerapan linked style sheet 6.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.

Contoh : CSS (Cascading Style Sheet) 6-6 . Tag / elemen Semua tag /elemen HTML yang berada pada bagian <body> merupakan selector.Politeknik Telkom Pemrograman Web Contoh penulisan CSS yang salah : H1 { Font-family : “arial”.4 CSS Selector CSS selector adalah bagian terpenting dari CSS.. Color : “#0000FF” } H1 { Font-family : „arial‟. H2 {color : green}.. Ada 4 (empat) macam selector : 1. Contoh : H1.> 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. 6. Color : „#0000FF‟ } Untuk mendeklarasikan properti secara berkelompok.. Selector mendefinisikan elemen – elemen HTML mana saja yang akan dimanipulasi menggunakan kode CSS. H3. menentukan ukuran yang bersifat pixel (layar monitor) seperti ukuran huruf. Menggunakan tanda : /* …. */ 2. Menggunakan tanda : <!-. H4 & H5 {color : red}. dapat menggunakan penghubung koma dan &. Untuk menuliskan komentar pada CSS dapat menggunakan salah satu dari 2 (dua) di bawah ini : 1.

Politeknik Telkom <html> <head> Pemrograman Web <title> Selector . Gambar 6-4 Contoh selector tag Selector bebas Seorang web design dapat membuat tag sendiri yang difungsikan sebagai CSS. text-align:center} </style> </head> <body> <h3> Tag heading ini dimodifikasi menggunakan CSS</h3> </body> </html> Jika script di atas dijalankan pada web browser.Tag</title> <style type="text/css"> h3{text-decoration: underline.Bebas </title> <style type="text/css"> gbawah{text-decoration: underline.} </style> </head> <body> <gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah> </body> </html> CSS (Cascading Style Sheet) 6-7 . maka akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini: 2. Contoh : <html> <head> <title> Selector .

dan pada file HTML yang memanggilnya. Helvetica. text-align:center} </style> </head> <body> <p class="modifikasi">Memodifikasi tag &lt. ditambahkan atribut class. Arial.Politeknik Telkom Pemrograman Web Jika script di atas dijalankan pada web browser. akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini : Gambar 6-6 Contoh selector class CSS (Cascading Style Sheet) 6-8 .modifikasi {font-family:Verdana. akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini : 3. penulisan selector berbentuk class diawali dengan tanda titik (.p&gt.). Contoh : <html> <head> <title> Selector . font-size:16px. menggunakan selector class</p> </body> </html> Jika script di atas dijalankan pada web browser. sans-serif. Gambar 6-5 Contoh selector bebas Class Pada pendeklarasiannya.Class </title> <style type="text/css"> .

Contoh : <html> <head> <title> Selector . Helvetica} 6-9 CSS (Cascading Style Sheet) . dan desain dalam desain web karena didefinisikan dengan ID berbeda. content.Politeknik Telkom Pemrograman Web 4.ID </title> <style type="text/css"> #judul { font-family:Arial.5 CSS untuk Memanipulasi Font Tabel 6-2 Property Font Nama Property Font-family Value Nama font Contoh Penggunaan P { font-family: arial. penulisan selector berbentuk ID diawali dengan tanda pagar (#). dapat digunakan untuk mendefinisikan header. 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. font-size:16px. sans-serif. ID Pada pendeklarasiannya. Helvetica. akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini : Gambar 6-7 Contoh selector ID 6.

jpg). } Body { Background-attachment : scroll. } Body { Background-image : url(gambar1. } Body { Background-repeat : repeat. Background-image : url(image/gambar1.jpg).6 CSS untuk Memanipulasi Color dan Background Tabel 6-3 Property Background dan Color Nama Property Backgroundcolor BackgroundImage Backgroundattachment BackgroundRepeat Value Rangkaian 6 digit heksadesimal atau nama warna url dimana image disimpan Contoh Penggunaan Body { Background-color : green.Politeknik Telkom Pemrograman Web P {font-size:24em} Font-size Font-style Font-variant Font-weight Nilai integer dengan pilihan satuan : em|pt|px|% Oblique|italic|normal Normal|small-caps Normal|bold|bolder|100900 P {font-style:italic} P {font-variant:smallcaps} P {font-weight:bold} 6. } Body { Background-repeat : norepeat. 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 Rangkaian 6 digit heksadesimal atau nama warna CSS (Cascading Style Sheet) 6-10 . Background-image : url(image/gambar1.jpg).

} 6. } Nama Property Color text-align textdecoration texttransform Letterspacing Text-indent None|underline|overline|lin e-through|blink None|capitalize|.8 CSS untuk Memanipulasi Text Tabel 6-5 Property Text Value Rangkaian 6 digit heksadesimal atau nama warna Left|right|center|justify Contoh Penggunaan P { color :red. } P { Text-decoration :overline.uppercase|l owercase) Nilai integer dengan pilihan satuan : em|pt|px|% Nilai integer dengan pilihan satuan : em|pt|px|% CSS (Cascading Style Sheet) 6-11 . } P { Text-align :justify. } P { letter-spacing : 20px.7 CSS untuk Memanipulasi List Tabel 6-4 Property List Nama Property List-styletype List-styleimage List-styleposition Value Disc|circle|square|lowerroman|upperroman|none|loweralpha|upper-alpha url dimana image disimpan atau none Inside|outside Contoh Penggunaan Ul { List-style-type : disc . } P { Text-indent : 50px.Politeknik Telkom Pemrograman Web 6.jpg) . } P { Text-transform : capitalize. } Ul { List-style-image : url(gambar1. } Ul { List-style-position : inside.

Ada tiga jenis penempatan CSS.Politeknik Telkom Pemrograman Web 6. background. } . CSS digunakan untuk mempersingkat penulisan tag HTML seperti font.b1 { Border-bottom-style : groove .} . dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.b1 { border-bottom-width :10px. antara lain : Inline Style Sheet. 4. } Nama Property border-style borderbottom-style borderbottomwidth borderbottomcolor Rangkuman 1. } . color. CSS (Cascading Style Sheet) 6-12 . text. Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.b1 { Border-style-type : groove .b1 { border-bottom-color :red. Embedded Style Sheet dan Linked Style Sheet. 3. list. 2. Selector mendefinisikan elemen – elemen HTML mana saja yang akan dimanipulasi menggunakan kode CSS.9 CSS untuk Memanipulasi Table Tabel 6-6 Property Table Value None|dotted|dashed|solid|do uble|groove|ridge|inset|outset None|dotted|dashed|solid|do uble|groove|ridge|inset|outset Nilai integer dan satuan ukuran Rangkaian 6 digit heksadesimal atau nama warna Contoh Penggunaan .

2. Yang harus anda amati adalah meliputi: a.Bagaimana model penempatan script CSS yang dilakukan oleh desainer web. kemudian buatlah sebuah website (dengan cara Anda sendiri) dengan memodifikasi website yang Anda jadikan referensi. Latihan 1. Layout. . c. .Bagaimana model layout web tersebut. Penempatan CSS. Partai Politik. Selector apa saja yang dimodifikasi oleh desainer web? Pilihlah sebuah website (misal: Perguruan Tinggi. berbentuk tabel atau frame? b. Ada berapa macam penempatan script CSS? Dari beberapa macam penempatan script CSS.Buktikan model yang Anda sebutkan pada point di atas dengan menuliskan penggalan script pada file HTML-nya d. . 2. Apa saja isi dari web tersebut . Amatilah website yang telah anda kunjungi.Politeknik Telkom Pemrograman Web Tugas 1.Silahkan catat hasil pengamatan anda.Seberapa besar daya tarik dan unsur seni dari web yang anda amati. Kunjungi beberapa website (minimal 10 website). 4. Unit Kegiatan Mahasiswa. . 3. 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 CSS (Cascading Style Sheet) . Content/Isi. Pemerintah Kota dan lain-lain) yang menurut Anda menarik untuk referensi.

diperlukan teknologi atau bahasa pemrograman lain yang juga digunakan untuk meningkatkan interaktivitas halaman web. Tujuan 1. 4. ASP. 2.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. 6. yaitu Server-Side contohnya PHP. 5. Mengenal macam-macam tipe data dan operator. 3. Mampu membedakan jenis-jenis dari pemrograman client-side. Mampu menggabungkan JavaScript ke dalam dokumen HTML. Untuk mendukung hal ini. VBScript. Mampu menerapkannya dalam pemrograman JavaScript. Mengenal pemrograman server-side dan client-side. Memahami Struktur JavaScript. 7-1 Pemrograman Javascript . 7. Mampu membedakan jenis-jenis dari pemrograman server-side. namun sudah menjadi interaktif dan pintar. 8. tidak hanya berupa teks dan gambar saja seperti dahulu. JSP dan Client-Side contohnya JavaScript. Secara umum teknologi di Web dibedakan menjadi dua. Mengenal Pemrograman JavaScript.

Client-Side digunakan untuk mengadakan interaksi dengan user yang frekuensinya tinggi. HTML saja tidak cukup. Secara umum teknologi di Web dibedakan menjadi dua. untuk membuat sebuah halaman web yang interaktif. Dokumen HTML sebenarnya hanya berupa dokumen teks biasa (tujuannya agar dapat dengan mudah dipindah-pindahkan antar berbagai platform). yang seluruh proses programnya dilakukan di client. Jelas server-side scripting ini lebih aman dan lebih bebas untuk dikembangkan. namun data yang diperlukan relatif sedikit atau telah tersedia sebelumnya misalnya aplikasi untuk permainan atau pemeriksaan event pada browser. Contoh skrip Client-Side antara lain JavaScript. berbeda tampilan sesuai kondisi tertentu. maka client akan menerima hasil dalam bentuk HTML biasa. Keunggulan lain dari server side ini adalah dapat berinteraksi lebih dengan pengunjung situs. Server-Side digunakan untuk memproses segala sesuatu yang berhubungan dengan server misalnya manipulasi database. Oleh karena itu diperlukan teknologi atau bahasa pemrograman lain yang juga digunakan untuk meningkatkan interaktivitas halaman web.1 Pengantar Pemrograman Client Side dan Server Side Membahas mengenai web tentunya tidak terlepas dari HTML (HyperText Markup Language). Contoh skrip Server-Side adalah CGI/Perl. ASP (Active Server Pages). 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.Politeknik Telkom Pemrograman Web 7. yaitu Server-Side dan ClientSide. Pada server side Karena seluruh prosesnya berada di server. Server-side scripting ini merupakan kebalikan dari client-side scripting. Pada dasarnya skrip tidak berbeda dengan bahasa pemrograman biasa karena skrip juga berisi kumpulan instruksi program. atau menggunakannya untuk verifikasi user dan password. terupdate otomatis. JScript dan VBScript. Menampilkan informasi perusahaan yang berasal dari database. Penggunaan keduanya hendaknya disesuaikan dengan aplikasi Web yang digunakan. Menampilkan halaman yang memproses informasi dari klien. Hanya saja skrip Pemrograman Javascript 7-2 . dimana client juga menerima script. Pada Server-Side proses akan dilakukan di Web Server sementara client (Web Browser) hanya akan menerima hasilnya dalam bentuk HTML. Tidak dianjurkan menggunakan Client-Side untuk aplikasi Web yang membutuhkan data yang banyak dan selalu berubah-ubah. Namun. Berbeda dengan client-side scripting. JSP (Java Server Pages) dan PHP.

waktu yang dibutuhkan untuk mempelajari skrip jauh lebih singkat dibandingkan waktu yang dibutuhkan untuk mempelajari bahasa pemrograman. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user.2 Pengantar Javascript Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML. artinya saat menuliskan kode JavaScript. Karena kesederhanaannya.html atau . Pada bagian ini anda akan belajar menulis program Java-Script sederhana dan kemudian menjalankannya. Anda menggunakan objekobjek bawaan atau objek-objek yang Anda ciptakan sendiri. contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test. sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. 7.2. Salah satu contoh skrip adalah file batch (*. Berarti Anda tidak perlu menuliskan program JavaScript pada file terpisah dengan file HTML (meskipun Anda bisa melakukannya). Dan yang terakhir seperti bahasa Java ataupun C. JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil.1 Struktur Dasar JavaScript Program JavaScript dituliskan pada file HTML (.Politeknik Telkom Pemrograman Web memiliki aturan yang lebih lebih sederhana (penulisannya lebih manusiawi) dan biasanya tidak dikompilasi. 7. JavaScript adalah bahasa berbasis objek.BAT) pada sistem operasi Windows. setiap instruksi diakhiri dengan karakter titik koma (. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Berikut ini adalah sintak umum penulisan JavaScript : Pemrograman Javascript 7-3 . Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip-skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML.). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di bandingbandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.htm) dengan menggunakan tag <SCRIPT>. yang artinya di sisi browser bukan di sisi server web.

// --> </SCRIPT> Pemrograman Javascript 7-4 . Seperti dalam banyak bahasa pemrograman lainnya. letakkan program Anda di dalam tag komentar. menjadi mengerti dengan petunjuk-petunjuk yang anda buat melalui komentar-komentar. Kegunaannya antara lain adalah : Mengingatkan akan bagian-bagian khusus di dalam skrip tersebut.Menyembunyikan script terhadap browser non-JavaScript Perintah-perintah JavaScript anda diketik disini. sangat dianjurkan untuk menambahkan komentar-komentar di dalam skrip atau kode program yang dibuat. Membuat orang yang tidak mengerti skrip anda. Untuk menuliskan komentar ada dua cara : Untuk menulis komentar dalam satu baris. gunakan /* dan */ /* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */ Contoh : <SCRIPT LANGUAGE="JavaScript"> <!-. Browser lama yang belum mendukung skrip biasanya mengabaikan tag <script>. gunakan double slash // semua karakter di belakang // tidak akan di eksekusi Untuk menulis komentar dalam beberapa baris. mungkin beberapa bulan kemudian dan sudah lupa dengan detail dan alur dari skrip tersebut. jika ingin merubah sesuatu di dalamnya. tentu saja hal ini tidak diinginkan. Namun masalahnya ada beberapa browser lama yang menuliskan teks di antara tag </script> dan </script>. kecuali anda tidak mau mensharing program yang anda miliki.Politeknik Telkom <script language=”JavaScript”> //Perintah JavaScript </script> Pemrograman Web Atribut language=”JavaScript” memberitahukan browser bahwa skrip yang Anda tulis adalah JavaScript. Untuk mencegahnya.

. 7.2“ untuk bahasa JavaScript atau bahasa lainnya. contohnya “VBScript“.2.Politeknik Telkom Pemrograman Web Dengan meletakkan kode sumber JavaScript dalam tag komentar. Oleh karena itu untuk menghindari kejadian diatas. browser yang mendukung JavaScript akan menjalankannya dan yang tidak mendukung JavaScript akan mengabaikannya. halaman HTML Anda akan kompatibel dengan browser lama. Proses eksekusi kode HTML untuk menampilkan satu halaman dilakukan dari atas ke bawah. “JavaScript1. maka akan timbul pesan error. </script> </HEAD> <BODY> </BODY> </HTML> Pemrograman Javascript 7-5 . sebelum kita menjalankan program JavaScript tersebut. maka pada umumnya letakkan tag <SCRIPT> diantara bagian kepala dari dokumen HTML.1“. contohnya “JavaScript“. Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya.2 Meletakkan JavaScript dalam Dokumen HTML 1.“JavaScript1. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa disebut diantara tag <BODY> dan </BODY>. Menggunakan tag <SCRIPT> Dengan menggunakan cara ini. Pada kasus dimana pemanggilan suatu fungsi JavaScript terjadi sebelum proses pemanggilan kode JavaScript selesai dilakukan oleh navigator. Script dalam tag head <HTML> <HEAD> <TITLE>Script dalam HEAD</TITLE> <script language="javascript"> //Statemen ditulis disini. Dengan kata lain.. semakin banyak user yang mengakses halaman ini dapat menganggu proses pemanggilan tersebut. yaitu bagian antara tag <HEAD> dan </HEAD>. pada saat mengakses satu halaman HTML kita harus menunggu sampai proses pemanggilan halaman itu selesai sepenuhnya.

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

Ketiklah contoh berikut dan simpan ke file Hello.html
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Menyembunyikan script terhadap browser non-JavaScript document.write("Hello world.") // akhir dari penyembunyian --> </SCRIPT> </HEAD> </HTML>

Hasilnya sebagai berikut :

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

<tag eventHandler="kode Javascript yang akan dimasukkan">

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

Tipe Data dasar Mendeklarasikan Variabel

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

Politeknik Telkom var Y = 50;

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

seperti contoh berikut ini: var nilaiTerbesar = 0 JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel global . document. deklarasikan semua variabel global tersebut pada awal dari script. tetapi dalam praktek hal tersebut tidak disarankan.3. // --> </SCRIPT> 7.4 1. 2. var b = 4. TIP Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu variabel global.2*b). karena akan membingungkan anda sendiri. Tipe Data (Literal) Pada JavaScript hanya dapat memanipulasi empat jenis data. Contoh (simpan dengan nama file variable.b.write("Dua kali dari ".a). Untuk mendeklarasikan suatu variabel lokal." adalah ".Politeknik Telkom Pemrograman Web 7. yang kita sebut sebagai integer atau float Kata (kumpulan huruf) : kita sebut string 7-10 Pemrograman Javascript . Walaupun JavaScript memperbolehkan anda menggunakan nama variabel yang sama untuk local maupun global. yaitu : Bilangan : bulat atau desimal. document.write(" Nilai dari a adalah ".2 Jangkauan dari Variabel JavaScript memiliki dua jangkauan untuk variabel: variabel Global variabel Lokal Variabel lokal digunakan didalam suatu fungsi dan ruang lingkupnya terbatas pada fungsi tersebut. harus diawali dengan var.html): <SCRIPT language="Javascript"> <!-var a = 12.

var b = 'Sampai Ketemu Lagi !'. 7. kita deklarasikan variabel string menggunakan tanda (') atau (").8E+10. bilangan bulat desimal : 895 bilangan dengan tanda koma : 895.4. 2. 2. var b = 35.75e-2.12 bilangan pembagian : 27/11 bilangan eksponensial : bilangan dengan tanda koma . 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.3 String String adalah kumpulan dari karakter. Bilangan ini juga bisa di tuliskan dengan beberapa cara berikut : 1.Politeknik Telkom Pemrograman Web 3. 3. kedua tanda tersebut harus digunakan secara berpasangan dan tidak bisa digunakan secara tersendiri atau bercampur. permulaan bilangan dimulai oleh 0x atau 0X basis oktal : dituliskan dalam urutan unit angka dari 0 sampai dengan 7. pangkat postitif atau negatif).1 1. 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). kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau -.4.2 Float (bilangan desimal) Bilangan desimal bisa kita sebut juga sebagai bilangan pecahan atau bilangan yang bisa kita tuliskan dalam bentuk menggunakan tanda koma. Berikut ini adalah beberapa cara untuk mendeklarasikan variabel string : var a = "Hallo". permulaan bilangan dimulai dengan angka 0 7. kemudian diikuti oleh huruf e(atau E). 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). 7.4. 4. Pemrograman Javascript 7-11 . 4. contoh: var a = 2.

4.5 Konversi Jenis Variabel Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu : 7. prefiks hexadesimal 0x. Sintaksnya adalah sebagai berikut: parseInt(string[.e. Pemrograman Javascript 7-12 .4 Booleans Boolean adalah satu variabel khusus yang berguna untuk mengevaluasi suatu kondisi tertentu. maka dia akan diabaikan oleh fungsi parseInt(). maka parameter yang dilewatkan harus dimulai dengan karakter bilangan [09]. Selain daripada itu maka fungsi parseInt() akan mengembalikan nilai NaN(Not a Number). Jika karakter berikutnya tidak valid. 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.Politeknik Telkom Pemrograman Web Tabel 7-2 Karakter khusus JavaScript. Agar supaya fungsi parseInt() mengembalikan nilai bilangan bulat. dan/atau karakter +.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.5.-.dan E. basis]). dan akan ditampilkan terpotong jika di bagian depan karakter valid dan bagian belakang karakter tidak valid. oleh karenanya boolean mempunyai dua nilai True : diwakili oleh nilai 1 dan False : diwakili oleh nilai 0 7.

write(a+b.6. Operator JavaScript dapat dibagi menjadi beberapa kategori berikut: 7."<BR>").34 7.6 Operator Operator adalah simbol untuk memanipulasi variabel. Operator unari memiliki dua format: operand operator atau operator operand Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++.34"."<BR>").write(parseFloat(b). dengan kata lain melakukan operasi-operasi. var b = "128. document. Suatu operator binari memiliki format : operand1 operator operand2. Contoh : var a = "128. JavaScript memiliki operator binari maupun unari.write(parseFloat(a). Sebagai contoh. // hasil 123456 document. // hasil 128.Politeknik Telkom Pemrograman Web Contoh : var a = "123".2 parseFloat() Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah variabel yang dilewatkan dengan parameter tertentu menjadi bilangan desimal. 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari. dan lain-lainnya. // hasil 128 document.34". var b = "456".write(parseInt(a)+parseInt(b).1 Operator Pemberi Nilai (Assignment operator) Operator pemberi nilai (=) adalah suatu operator binari yang digunakan untuk memberi nilai ke operand di sisi kiri (biasanya berupa suatu Pemrograman Javascript 7-13 .5."<BR>"). document. // hasil 579 7. mengevaluasi. Sintaks dari fungsi parseFloat adalah sebagai berikut : parseFloat(string)."<BR>").

2 Operator Perhitungan (Arithmetic Operator) Operator penghitungan digunakan untuk memodifikasi nilai dari variabel secara matematika. Tabel 7-4 Jenis Operator Aritmatika Pemrograman Javascript 7-14 .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.

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.4 Operator Inkrementasi Operator ini digunakan untuk menambahkan ataupun mengurangi per unit dari satu variabel. Operasi ini biasanya ditulis dengan cara berikut : x=x+2. JavaScript melakukan konversi terhadap operand menjadi integer 32-bit sebelum melakukan operasi padanya.Politeknik Telkom Pemrograman Web 7. Untuk operator ini.3 Operator Afektasi Operator ini digunakan untuk menyederhanakan operasi penambahan nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri. dan jika nilai awal x=7 maka nilai akhir x menjadi 9.6. Jenis jenis operator seperti ini adalah sebagai berikut : Tabel 7-5 Jenis Operator Afektasi 7. Operator logika bitwise adalah : Pemrograman Javascript 7-15 .6.5 Operator Pemanipulasi Bit (Bitwise operator) Untuk programmer yang perlu menangani bit. Operator ini sangat berguna dalam struktur pemrograman sistem Loop. dengan menggunakan operator afektasi operasi tersebut bisa dituliskan menjadi x+=2. JavaScript menyediakan satu set dari operator bitwise.

Bit yang tergeser melewati bata kanan akan diabaikan. Zero-fill right shift (>>>) sama seperti >>. 7. cuma tidak mempertahankan bit tanda ketika dilakukan pergeseran sesuai dengan jumlah yang ditentukan. Sebagai contoh. Operator logika adalah sebagai berikut : Tabel 7-7 Jenis Operator Logika Pemrograman Javascript 7-16 . kecuali bit tanda. Sebagai contoh . akan mengembalikan nilai dari logika exclusive OR between antara tiap pasangan bit. 0x0f & 0x0a mengembalikan 0x0a. dan suatu bit nol akan digeser dari kanan. akan mengembalikan nilai dari logika AND antara sepasang bit.Politeknik Telkom Pemrograman Web Bitwise AND (&). Sign propagating shift right (>>) mempertahankan bit tanda dari nilai ketika melakukan geser ke kanan sesuai dengan jumlah yang ditentukan. Sebagai contoh. Bitwise OR (|). Operand ini adalah Shift left (<<). 0x0f ^ 0x0a mengembalikan 0x05. Sebagai contoh. Bitwise XOR (^). akan mengeser bit ke kiri dengan jumlah tertentu. JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1 terhadap jumlah yang ditentukan di operand2. 10 >> 2 mengembalikan 2 dan -10 >> 2 mengembalikan -2. Sebagai contoh. Bit yang melewati batas kiri akan diabaikan. 0x05 | 0x0a mengembalikan 0x0f. akan mengembalikan nilai dari logika OR antara setiap pasangan dari bit. bit nol akan digeser dari kiri.6 Operator Logika (Logical Operator) Operator logika membutuhkan operand dengan nilai Boolean (true atau false) dan mereka akan mengembalikan suatu nilai logika.6. 0x0f << 2 mengembalikan 0x3c.

Politeknik Telkom Pemrograman Web 7. Tabel 7-8 Jenis Operator Pembanding Pemrograman Javascript 7-17 .6.7 Operator Pembanding (Comparison Operator) Operator ini digunakan untuk melakukan pemeriksaan suatu nilai dan membandingkannya dengan nilai atau kondisi yang lain.

7 Ekspresi Ekspresi merupakan pengkombinasian beberapa operand dan operator yang dapat dievaluasi agar menghasilkan nilai tertentu. dan temp=B+C adalah ekspresi yang melibatkan operator aritmatik. = adalah operator. /* temp adalah variabel.6. ekspresi akan mengembalikan nilai1. Contoh : temp = (X > Y) ? “Benar” : “Salah” . dan temp=56 adalah ekspresi. jika X lebih besar atau sama dengan Y. Sintaksnya sebagai berikut : (kondisi) ? nilai1 : nilai2 pada ekspresi ini jika kondisi dievaluasi benar. /* temp.Politeknik Telkom Pemrograman Web 7.8 Operator String Operator string (+) menggabung dua nilai string dan mengembalikan satu string dimana merupakan hasil gabungan dari keduanya. Contoh diatas. maka variabel temp bernilai “Salah”. B. Sebaliknya jika kondisi dievaluasi salah. jika nilai X lebih besar dari Y. Pemrograman Javascript 7-18 . ekspresi akan mengembalikan nilai2. Contoh : temp = 56. maka variabel temp akan bernilai “Benar”. = adalah operator.*/ Ekspresi kondisional merupakan ekspresi yang nilainya tergantung pada kondisi tertentu. C adalah variabel. 56 adalah variabel. Literal dan variabel dihubungkan oleh operator dan akan menghasilkan ekspresi. 7. JavaScript menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit.*/ temp = B + C. Sebagai contoh : "Java" + "Script" Menghasilkan "JavaScript" Operator shorthand + mengabung string kiri dengan string dikanan operand dan memberikan nilai baru pada operand disebelah kiri.

member. X = (2 + 4) * 5. programmer dapat mengatur aturan tersebut. Tabel 4 adalah urutan derajat/prioritas operasi dari yang paling rendah sampai yang paling tinggi. indeks Operator .Politeknik Telkom Pemrograman Web 7. Pemrograman Javascript . Dengan menggunakan tanda kurung. 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. Untuk mengakses metode atau properti dari sebuah objek() // hasilnya X = 22 // hasilnya X = 30 7-19 Contoh : X = 2 + 4 * 5. urutan operasi dari operator menentukan nilai hasil evaluasi.8 Derajat Operator Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu operator. = += -= *= /= %= <<= >>= >>>= &= ^= |= ?: || && | ^ & == < << + * / ~ != <= >> % ++ -> >>> >= Negation/increment/decrement ! () Untuk melewatkan parameter ke sebuah fungsi [] Untuk mengakses indeks array .

Pada Client-Side proses akan dilakukan di sisi client. Operator pada JavScript antara lain : a. ASP. Operator Inkrementasi e. Teknologi di Web dibedakan menjadi dua. JSP dan Client-Side contohnya JavaScript. 4. 6. 7. 3. Operator Afektasi d. 2. yaitu : parseInt() dan parseFloat(). JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil. Operator Logika (Logical operator) g. yaitu Server-Side contohnya PHP. string. Operator Pemanipulasi Bit (Bitwise operator) f. 8. Operator String Pemrograman Javascript 7-20 . Pada JavaScript hanya dapat memanipulasi empat jenis data. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML. yaitu : integer/float. Operator Pembanding (Comparison operator) h. boolean dan variabel dengan jenis null. Untuk melakukan konversi jenis variabel ada dua fungsi. VBScript. Operator penghitungan (Arithmetic operator) c.Politeknik Telkom Pemrograman Web Rangkuman 1. Pada Server-Side proses akan dilakukan di Web Server sementara client (Web Browser) hanya akan menerima hasilnya dalam bentuk HTML. Operator Pemberi Nilai (Assignment operator) b. 5.

5. A = X + Y << 2. var A = (X + Y) / Z. document. document. document. 7. 8. 9. var X = 10.writeln ("(X + Y) / Z = " + A). 3.writeln ("X = " + X).writeln ("Y = " + Y). document. </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.writeln ("Z = " + Z + "\n"). document. 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> . var Y = 5. var Z = 0.writeln ("A + A = " + A). document. 6.writeln ("<PRE>").writeln ("X + Y << 2 = " + A). //--> </SCRIPT> </BODY> </HTML> Pemrograman Javascript 7-21 . 2. var A = ++X * Y++.writeln ("</PRE>").::Latihan Tipe Data dan Operator::. var A = A + A. document. 4. document.Politeknik Telkom Pemrograman Web Latihan 1.writeln ("++X * Y++ = " + A).

3. Memahami bentuk umum Percabangan. Walaupun semua kode harus ditulis dalam penanganan event. 1. 6. Struktur Kontrol dan Fungsi 8-1 . perancang halaman web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi. Memahami perbedaan penggunaan Fungsi dan Kejadian. 10. Fungsi dan Kejadian pada suatu studi kasus JavaScript. Memahami parameter pada fungsi dalam JavaScript. tetapi hal ini adalah praktek pemrograman yang kurang baik. 4. JavaScript akan membuat keputusan jalur mana yang akan dieksekusi. Berdasarkan hasil komputasi yang telah dilakukan.Politeknik Telkom Pemrograman Web 8 STRUKTUR KONTROL DAN FUNGSI Overview Untuk membuat suatu halaman yang dinamis dan interaktif. 2. Memahami bentuk umum Pengulangan 5. 9. kode akan menjadi lebih modular dan dapat digunakan kembali (reusable). gunakan fungsi. Mengerti esensi penggunaan Pengulangan (Looping) dalam JavaScript. 7. Pada bagian ini akan dibahas tentang perintah kondisi dan loop dalam JavaScript. Tujuan Mengerti esensi penggunaan Percabangan (pemilihan/kondisional) dalam JavaScript. Sebagai pengantinya. Memahami bentuk–bentuk fungsi bawaan dalam JavaScript 8. Mampu mengimplementasikan Percabangan. Memahami penggunaan Fungsi. Memahami bentuk–bentuk kejadian dalam JavaScript. Pengulangan.

program Anda dapat melompat ke baris lain.} //--> </SCRIPT> </BODY> </HTML> kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false.1 Struktur Kontrol Percabangan (Kondisional) Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian sebelumnya. 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. atau mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi. Pernyataan if. document.} else { status = false .else Pernyataan ini digunakan untuk menguji sebuah kondisi. Struktur Kontrol dan Fungsi 8-2 . Pada JavaScript hasil dari suatu kondisi harus data type Boolean. JavaScript memiliki suatu perintah kondisi if. dan sebaliknya suatu nilai bukan nol tidak sama dengan Boolean false. Perhatian Suatu kondisi numerik yang menghasilkan nol adalah tidak sama dengan suatu Boolean true pada JavaScript. document.1 8. kemudian mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi. Dengan pernyataan percabangan..1.write("j=" + j + "\n"). j = n . if (n > 3) { status = true .write("j=" + j + "\n"). j = 0 .Politeknik Telkom Pemrograman Web 8.

Kata default berarti blok instruksi dibawahnya akan dieksekusi bila nilai variabel yang masuk tidak sama dengan semua kasus (case) yang ada. Kata di dalam tanda kurung sesudah kata switch menunjukkan nama variabel yang akan di test pada kasus nilai yang berbeda. maka x bernilai 0.Politeknik Telkom Pemrograman Web Jika hanya suatu perintah tunggal. Sintaksnya adalah sebagai berikut : Struktur Kontrol dan Fungsi 8-3 . atau !. Dengan cara ini dapat melakukan testing terhadap berbagai nilai variabel lebih sederhana daripada memakai instruksi if. Contoh berikut adalah perintah yang benar: if ( a==b ) j = 0 else j = 1 Pada pernyataan if. Kata break berarti berhentinya atau keluar dari struktur kondisi switch. Anda bisa menggabungkan beberapa kondisi dengan menggunakan operator logika &&. Pada saat nilai variabel yang akan di test sama dengan nilai kasusnya (case) maka blok instruksi di bawahnya akan dieksekusi. Pada contoh diatas..||. bila a dan b lebih besar dari nol.else. Catatan Pada modul sebelumnya telah dibahas mengenai ekspresi. case Instruksi ini memungkinkan untuk melakukan test berbagai nilai dari variabel yang sama. Contoh : if ((a > 0) && (b > 0) j = 1 . tanda kurawal tidak diperlukan. Sebaliknya jika salah satu dari a atau b tidak lebih daripada 0. maka j diberi nilai 1. Perhatikan contoh berikut: if (( a > 0 ) && ( b > 0 ) j = 1 . else j = 0 . dapat ditulis dengan ekspresi menjadi : j = ((a > 0) && (b > 0)) ? 1 : 0 Pernyataan switch …. else j = 0 .

perintah for dan perintah while.2 Pengulangan (Looping) Sebelum berbicara tentang instruksi. Untuk kontrol pada struktur loop. Struktur Kontrol dan Fungsi 8-4 . case Nilai2: //blok instruksi. JavaScript menyediakan perintah break dan continue.. default: //blok instruksi.. Loop adalah struktur instruksi-instruksi yang dapat di eksekusi berulang-ulang selama kondisi syaratnya belum terpenuhi.1. JavaScript mendukung dua struktur loop.Politeknik Telkom Pemrograman Web Tabel 8-2 Penggunaan Pernyataan Switch-Case Blok Pernyataan Switch . case switch (Variabel) { case Nilai1: //blok instruksi. break. case NilaiX: //blok instruksi. 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)). } 8. break. Loop akan berhenti jika variabel penghitung sudah melewati batas nilai tertentu yang dijadikan syarat. break. break. kita bicarakan dulu tentang Loop.

dimana kondisi syaratnya sudah tidak terpenuhi maka loop akan berhenti. modifikasi penghitung) { //daftar instruksi-instruksi atau //blok instruksi } Contoh <HTML> <HEAD> <TITLE>:Latihan Looping:</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document. Loop dimulai dari i=1 dan akan selalu melakukan cek dan verifikasi apakah nilai i kurang dari 6. kondisi dimana nilai penghitung melewati angka tertetu)).5.2.Politeknik Telkom Pemrograman Web 8. } document. Perintah for mengulang suatu loop sampai kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break.writeln ("</PRE>").4. dan yang terakhir instruksi modifikasi penghitung. kendali dilanjutkan ke langkah selanjutnya. i++) { document. Sampai pada i=6. Interpreter menjalankan ekspresi-awal. loop ini akan 5 kali menampilkan nilai dari i. Dalam sintaksnya kita hanya perlu memasukkan nama variabel sebagai penghitung (dan juga nilai awalnya. serta kondisi dimana loop akan berhenti (pada dasarnya. mulai dari i=1.writeln(i). increment (naik per unit) atau decrement (turun per unit).1 Perintah For For adalah salah satu Instruksi yang menggunakan fasilitas Loop. 2. Jika false.3. kondisi loop berhenti. Urutan proses untuk perintah for adalah sebagai berikut: 1.writeln ("<PRE>"). Kemudian interpreter memeriksa kondisi. 8-5 Struktur Kontrol dan Fungsi . Jika true. Ekspresi ini menentukan nilai yang diperlukan untuk kendali perulangan. i<6. kendali diarahkan ke perintah setelah perulangan. Sintaks lengkap dari perintah for adalah : Tabel 8-3 Penggunaan Pernyataan for Blok Pengulangan for for (penghitung. for (i=1.2. //--> </SCRIPT> </BODY> </HTML> Penjelasan dari contoh diatas.1.

writeln ("<PRE>").2. while (i<6) { document. Karena instruksi ini menjalankan program selama kondisi syarat terpenuhi. Ketika hasil test mengembalikan false.Politeknik Telkom Pemrograman Web 3. Interpreter menjalankan ekspresi-penambah. document. seperti juga instruksi For.writeln ("</PRE>").2 Pengulangan While Instruksi while merupakan salah satu cara alternatif untuk menjalankan sekumpulan instruksi. jika ditemukan suatu break atau continue.writeln(i). 8. } document. Struktur Kontrol dan Fungsi 8-6 . //--> </SCRIPT> </BODY> </HTML> Test kondisi terjadi pada perulangan while yang pertama kali dan pada akhir dari setiap loop. maka perlu diperhatikan baik baik syarat yang kita berikan. kendali dilewatkan ke perintah berikutnya setelah loop. agar supaya instruksi tidak menjadi loop tanpa henti (infinity) dan membuat error navigator kita. 4. Sintaks dari instruksi ini adalah sebagai berikut : Tabel 8-4 Contoh Script Pengulangan While Blok Pengulangan While while (kondisi syarat terpenuhi) { //daftar instruksi-instruksi atau //blok instruksi } Contoh <HTML> <HEAD> <TITLE>:Latihan Looping: </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var i = 1. kendali kembali ke langkah 2. i++. Kemudian statement dijalankan dan.1. yang mana melakukan update terhadap variabel yang digunakan untuk kendali perulangan. Perintah while terus mengulangi loop selama kondisi memiliki nilai true.

ada kalanya kita perlu melakukan lompatan (jump) terhadap satu atau beberapa nilai tertentu di dalam loop tanpa menghentikan loop itu sendiri.3 Perintah Continue Perintah continue menghentikan interasi tersebut untuk suatu for atau while loop. Pada suatu for loop. cukup jelas untuk nilai x = 7 maka akan menghasilkan error (pembagian dengan 0). kendali dilewatkan ke condition. Contoh : kita akan mencetak hasil dari persamaan 1/(x-7) untuk nilai x = 1 sampai x = 10. var x=1. Pada suatu while loop. dan meneruskan loop dari program tersebut. Tetapi tidak keluar dari loop. Berikut continue: ini memperlihatkan bagaimana menggunakan perintah i=0 . while (i<10) { if (i==3) continue i++ . dan di letakkan di dalam loop itu sendiri. Sintaks yang digunakan disini adalah continue.Politeknik Telkom Pemrograman Web 8. Namun melakukan interasi berikutnya. } Ada hal yang patut di perhatikan juga.2. while (x<=10) Struktur Kontrol dan Fungsi 8-7 . pada umumnya kita tambahkan juga struktur kondisional sebagai syarat supaya sintaks tersebut berjalan lancar. <HTML> <HEAD> <TITLE>::Latihan Looping:: </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document. berkat instruksi continue kita bisa memperlakukan secara terpisah nilai x = 7.1.writeln ("<PRE>"). dilewatkan ke increment-expression.

x++. } document. } a = 1/(x-7).write ("</PRE>").writeln ("<PRE>"). document. yaitu penambahan struktur kondisional agar supaya loop berhenti dan tidak berulang ulang looping.Politeknik Telkom { Pemrograman Web if (x == 7) { document. Instruksi Break memungkinkan menghentikan suatu loop (baik untuk for ataupun while). x++. Contoh berikut menggambarkan bagaimana menggunakan perintah break: <HTML> <HEAD> <TITLE>::Latihan Looping:: </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document. x++) Struktur Kontrol dan Fungsi 8-8 . //--> </SCRIPT> </BODY> </HTML> 8.writeln("pembagian oleh 0").writeln(a). Pemakaiannya sendiri seperti instruksi continue. Perintah break menghentikan for atau while loop dan mengembalikan kendali ke perintah berikutnya yang mengikuti loop. for (x=1.1.4 Perintah break Sebaliknya kita juga bisa memaksa loop berhenti sebelum waktunya dengan alasan yang dikemukan di bagian awal dari loop.2. x<=10. continue.

writeln ("pembagian oleh 0"). dalam artian mengenali namanya. 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.Politeknik Telkom { Pemrograman Web a = x-7. Sintaks pendeklarasian suatu fungsi adalah sebagai berikut : Struktur Kontrol dan Fungsi 8-9 . suatu fungsi harus di definisikan terlebih dahulu karena untuk memanggil fungsi tersebut dari dalam program. if (a == 0) { document. kalau tidak bisa membahayakan kelangsungan program secara global). argumennya. ini kita sebut dengan fungsi rekursif (akan tetapi jangan lupa untuk meletakkan kondisi khusus supaya fungsi bisa berhenti.2. } document. navigator harus mengenalinya terlebih dahulu. Pendefinisian satu fungsi dinamakan deklarasi. 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).1 Mendefinisikan Fungsi Sebelum digunakan.write ("</PRE>"). //--> </SCRIPT> </BODY> </HTML> 8. kita sebut fungsi ini sebagai metoda (akan dibahas pada bagian lain).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.writeln (1/a). 8. dan instruksi di dalamnya. Di lain pihak suatu fungsi. juga bisa memanggil dirinya sendiri. } document. break.

Penamaan dari fungsi mempunyai aturan yang sama dengan penamaan dari variable Struktur Kontrol dan Fungsi 8-10 . //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Blok Function 2..write("Ini Homepage Saya <br>").write(str) } Tulis ("Ini fungsi dengan parameter")..Politeknik Telkom Pemrograman Web Tabel 8-5 Contoh Sript Penggunaan Fungsi Blok Function 1. //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Penjelasan : Kata kunci function diikuti nama_ fungsi tersebut. parameter2. { // daftar instruksi atau // blok instruksi } Function tanpa Parameter function Nama_Fungsi() Contoh <HTML> <HEAD> <TITLE>:Latihan Function:</TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function myHomepage() { document.) { // daftar instruksi atau // blok instruksi } Contoh <HTML> <HEAD> <TITLE>:Latihan Function: </TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function Tulis(str) { document. function dengan Parameter function Nama_Fungsi (parameter1. document.write("Menggunakan JavaScript <br>").. } myHomepage().

jika argumen tidak ada maka tanda kurung harus tetap ditampilkan. jadi memperhatikan huruf besar dan huruf kecilnya. //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 8. kita cukup memanggil nama dari fungsi tersebut yang diikuti dengan kurung buka.Politeknik Telkom Pemrograman Web o o o Nama harus dimulai oleh huruf. Contoh : <HTML> <HEAD> <TITLE>::Latihan Function:: </TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function Mengembalikan_Nilai() { return 10. Nama fungsi seperti juga nama variabel adalah case sensitive. tapi dapat juga mengembalikan informasi atau nilai. karakter kosong atau spasi tidak diperbolehkan. angka atau karakter _ dan &. boleh ada dan boleh tidak ada.2. argumen(jika ada) dan di tutup dengan kurung tutup. Nama dari fungsi bisa berisi huruf. Struktur Kontrol dan Fungsi 8-11 .2 Pemanggilan Fungsi Untuk mengeksekusi satu fungsi.write(Mengembalikan_Nilai()). Nama_dari_Fungsi() . Parameter adalah optional. } document. Sebuah fungsi tidak hanya bisa menerima informasi. Caranya dengan menambah kata kunci return. Ingat : Titik koma memberikan tanda kepada navigator tentang akhir dari blok instruksi yang berbeda.

Contoh : <HTML> <HEAD> <TITLE>::Latihan Function:: </TITLE> <SCRIPT LANGUAGE="javaScript"> <!-function Tulis(str) { document. Contohnya adalah sebagai berikut : <HTML> <HEAD> <TITLE>::Latihan Function:: </TITLE> Struktur Kontrol dan Fungsi 8-12 .Politeknik Telkom Pemrograman Web Jika anda mendefinisikan suatu argumen untuk suatu fungsi. //--> </SCRIPT> </BODY> </HTML> Dengan adanya event administrator yang bernama onLoad (di letakkan di dalam tag BODY). sebagai contoh inisialisasi nilai awal dari skrip anda atau melakukan test apakah navigator dapat menjalankan fungsi dari skrip atau tidak. kita bisa memanggil fungsi pada saat loading halaman dokumen HTML.5). y) { return (x + y).write(str) } function Tambah(x. } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="javaScript"> <!-var a = Tambah(2. maka pada saat pemanggilannya anda harus memanggil fungsi tersebut lengkap dengan argumentnya. Tulis(a).

3 Parameter dari Fungsi Seperti contoh sebelumnya.2." onClick="Tampilkan(). Pada saat kita melewatkan beberapa parameter ke dalam fungsi."> </BODY> </HTML> 8.">Teks</A> </BODY> </HTML> Struktur Kontrol dan Fungsi 8-13 . dalam artian kita berikan nilai atau nama variabel supaya fungsi itu bisa di eksekusi berdasarkan parameter tersebut. kita bisa melewatkan parameter di dalam suatu fungsi. parameter-parameter tersebut dipisahkan oleh tanda koma. 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').Politeknik Telkom Pemrograman Web <SCRIPT LANGUAGE="javaScript"> <!-function myHomepage() { document.write("Menggunakan JavaScript<br>") } //--> </SCRIPT> </HEAD> <BODY onload="myHomepage(). } //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:.write("Ini Homepage Saya<br>") document. baik pada saat deklarasi ataupun pada saat pemanggilan.

Fungsi unescape yaitu mengembalikan hasil Merupakan kebalikan fungsi escape. yaitu eval. Fungsi eval Fungsi eval digunakan untuk mengevaluasi ekspresi atau pernyataan JavaScript. dimana xx adalah nomor dari k arakter ISO-Latin-1.2. Fungsi ini banyak digunakan sebagai pengevaluasi ekspresi (dapat dianalogikan dengan parser). Tujuannya agar string tersebut dapat dibaca oleh semua komputer. 3. Fungsi escape Fungsi eval digunakan untuk menyandikan string ke himpunan karakter ISO-Latin-1. escape. Sintak umum dari fungsi bawaan adalah sebagai berikut : nama_fungsi_bawaan (str) 1. Kedua fungsi tersebut merupakan fungsi bawaan JavaScript. sebagai contoh karakter spasi akan diganti menjadi “%20”. unescape dan isNaN. Struktur Kontrol dan Fungsi 8-14 . 2.Politeknik Telkom Pemrograman Web Hasilnya : Gambar 8-1 Contoh Tampilan Kotak Dialog 8.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. penyandian ke himpunan karakter ASCII. yaitu parseInt dan parseFloat. selain itu masih ada beberapa fungsi bawaan lainnya. Fungsi eval mengganti semua karakter non-alfanumerik pada parameter string ke bentuk “%xx”. Selain itu dapat digunakan untuk mengeksekusi pernyataan.

Sintaks dari event administrator tersebut adalah sebagai berikut : OnEvenement = "Aksi_Javascript_atau_Fungsi(). maka sintaksnya adalah sebagai berikut : <a href ="onEvenement ='Aksi_Javascript_atau_Fungsi(). pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse (merupakan satu satunya aksi yang dapat diatur oleh HTML)." Untuk penggunaan link hiperteks.Politeknik Telkom Pemrograman Web 4. Jika variabel yang diuji bukan bilangan. JavaScript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas zona tertentu. Fungsi isNaN Digunakan untuk menguji suatu variabel adalah bilangan atau bukan. jika sebaliknya fungsi ini mengembalikan false.3.3 Kejadian (Event) Event adalah aksi dari user yang bisa menghasilkan interaktifitas. Dibawah ini beberapa kode yang harus dimasukkan ke dalam tag event administrator untuk menghasilkan aksi tertentu. Tabel 8-6 Jenis . 8.1 Macam-macam Kejadian Dalam JavaScript terdapat beberapa macam kejadian yang harus ditangani. perubahan nilai dan lain sebagainya. fungsi akan mengembalikan true.Jenis Kejadian pada JavaScript Struktur Kontrol dan Fungsi 8-15 .'">Link</a> 8. Event administrator adalah yang memperbolehkan untuk mengasosiasikan satu aksi ke dalam sebuah event.

3.Politeknik Telkom Pemrograman Web 8.2 Contoh Penggunaan Kejadian 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 .

jadi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain. Tanda antislash (\) di depan tanda petik untuk memperingatkan navigator kalo dianggap sebagai karakter biasa dan bukan di intepretasi sebagai pembatas string." didalam atribut href untuk memberi tahu navigator kalau kita ingin tetap berada di halaman yang sedang di proses tersebut." onClick="window.alert('\'Latihan Event\'').> Tujuan dari skrip ini adalah menampilkan satu kotak dialog. Struktur Kontrol dan Fungsi 8-17 . <HTML> <HEAD> <TITLE>::Latihan Event::</TITLE> </HEAD> <BODY> <A HREF="javascript:. oleh karena itu kita masukkan kode "javascript:."> Klik Disini !</A> </BODY> </HTML> Analisa skrip diatas : Event administrator onClick dimasukkan didalam tag links dari hiperteks <a href=…. Perhatikan penggunaan \' di dalam kalimat \'Latihan Event\'.Politeknik Telkom Pemrograman Web yang mentrigger event untuk mengaktifkan kotak dialog tersebut.

4. pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse. Buatlah program menggunakan JavaScript untuk menampilkan bilangan genap atau bilangan ganjil terhadap sebuah nilai tertentu. Untuk mengatur aliran informasi pada sebuah halaman web yang interaktif diperlukan perintah percabangan dan pengulangan.else dan pernyataan switch. var Lokal = 0. 5. 6. eval. Selain fungsi yang didefinisikan tersendiri. JavaScript juga menyediakan fungsi-fungsi bawaan.. 2. 3. Event adalah aksi dari user yang bisa menghasilkan interaktifitas.Politeknik Telkom Pemrograman Web Rangkuman 1. unescape dan isNaN. 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. antara lain : parseInt. escape. Untuk kontrol pada struktur loop. 4. yaitu pernyataan if. Struktur Kontrol dan Fungsi 8-18 .case. 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. JavaScript menyediakan perintah break dan continue.. perintah for dan perintah while. Latihan 1. JavaScript mendukung dua struktur percabangan. 3. JavaScript mendukung dua struktur pengulangan. parseFloat. 2.

" + Lokal). document. Lokal). fUbahVariabel (). Lokal = 100. fTulisVariabel ("Setelah Pemanggilan fungsi fUbahVariabel"). fTulisVariabel ("Setelah Pemanggilan fungsi fTukarVariabel"). } function fTulisVariabel (str) { document.writeln (str). Pemrograman Web document.writeln ("Global = " + Global).writeln ("</PRE>").writeln ("Lokal = " + Lokal + "\n"). Global = 100. Global = 75. b) { var temp = a. Struktur Kontrol dan Fungsi 8-19 . document. //--> </SCRIPT> </BODY> </HTML> = = " + Global).writeln (" "). } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document. a = b. Lokal = 25. fTukarVariabel (Global.Politeknik Telkom function fUbahVariabel () { var Lokal.writeln ("Global document.writeln ("Di dalam fungsi fUbahVariabel"). b = temp. } function fTukarVariabel (a.writeln ("<PRE>"). fTulisVariabel("Keadaan Awal"). document. document.writeln ("Lokal document.

Mengerti esensi penggunaan Form dalam JavaScript. 4. Tujuan 1. Pada sebuah web berbasis basisdata. JavaScript menyediakan objek-objek yang dapat digunakan sesuai kebutuhan. Mengerti esensi penggunaan Frame dalam JavaScript. 9. Mampu menciptakan objek sendiri. Mengerti esensi penggunaan Objek dalam JavaScript. dibutuhkan pula penanganan form validasi input dari user dan kemudian dilakukan pengiriman ke server. 8. Mampu menggunakan objek-objek bawaan pada JavaScript. Mengenal Macam-macam Objek Browser pada JavaScript. Object. 7. 2.Politeknik Telkom Pemrograman Web 9 OBJECT. 5. 3. FRAME DAN FORM PADA JAVASCRIPT Overview Untuk menangani permintaan dan pengolahan input data dari user. Mampu membuat properti dan metoda untuk suatu objek. 6. Memahami Hirarki Objek Browser dan Objek HTML. Mampu memecahkan masalah dengan menggunakan Frame dan Form serta mengimplementasikan ke dalam program JavaScript. Frame dan Form pada JavaScript 9-1 .

yang artinya adalah elemen yang : Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga bisa diketahui dimana letak/lokasi objek itu sebenarnya.Pohon. Perancang JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru.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. tapi coba lihat contoh berikut ini untuk memperjelas. tetapi bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang telah dibuat dengan suatu bahasa OOP kedalam dokumen HTML.Sarang Burung Bayangkan sekarang untuk mengecat atau mengganti warna sarang burung yang terletak di atas pohon.1. Frame dan Form pada JavaScript 9-2 . Pengertian diatas mungkin sedikit membingungkan bagi anda. dimana pohon itu mempunyai banyak dahan. 2. Dimana kita mengasosiasikan dengan kondisi atau sifat sifat khusus (properti).Politeknik Telkom Pemrograman Web 9. Pohon.1 Penggunaan Objek Menciptakan Objek Sendiri JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan merupakan bahasa object-oriented programming (OOP). inheritance dan abstraction seperti pada bahasa pemrograman C atau Java. maka cukup mengetik perintah berikut ini : Kebun.Dahan. dan di salah satu dahannya terdapat sarang burung.1 9.warna=hijau Object. JavaScript memperlakukan elemen-elemen yang tampil di jendela navigator kita sebagai suatu objek. Selanjutnya Javascript tidak memiliki encapsulation.Dahan. Tetapi class pada JavaScript menyediakan properti dan metode untuk membuat objek. Misal bayangkan ada satu pohon yang terletak di dalam satu kebun.

dimana properti dari objek mahasiswa didefinisikan di fungsi tersebut. objek pegawai memiliki properti sebagai berikut : pegawai.weight=85 Objek juga dapat menggunakan acuan array dengan menggunakan nama propertinya sebagai index: pegawai["name"]="Budi Suseno" pegawai["age"]=35 pegawai["weight"]=85 Juga dapat mengunakan acuan array dengan index secara numerik: pegawai[0]="Budi Suseno" pegawai[1]=35 pegawai[2]=85 9.1.1. 9. dalam contoh yang detailnya dapat anda lihat berikut ini : Object.1.nama_properti Sebagai contoh.1.name="Budi Suseno" pegawai.2 Mendefinisikan Objek dengan Fungsi Suatu objek dapat dibuat dengan properti yang telah didefinisikan. Kita juga menggunakan kata kunci this. Sebagai contoh akan dibuat satu objek mahasiswa dengan properti sebagai berikut : • NIM • Nama • Umur Kita bisa membuat objek mahasiswa dengan menggunakan satu fungsi yang kita beri nama fungsi mahasiswa.age=35 pegawai. Frame dan Form pada JavaScript 9-3 . perbedaannya adalah bukan pohon sebagai bentuk objek kita. properti ini merupakan penunjuk ke objek mahasiswa.1 Mendefinisikan Objek Berikut ini adalah notasi yang digunakan oleh JavaScript untuk menggambarkan suatu objek dan propertinya: nama_objek. akan tetapi navigator kitalah sebagai objek utamanya.Politeknik Telkom Pemrograman Web Penjelasan diatas merupakan ilustrasi tentang bagaimana memperlakukan objek didalam JavaScript.

this. yaitu objek-objek yang telah terdefinisi dan siap dipakai. kita gunakan kata kunci new (maksudnya satu objek yang lain dengan properti sama dengan objek mahasiswa) : Mahasiswa1 = new Mahasiswa("30108010".1. Nama. "Susan".Umur = Umur. Pernyataan with menghilangkan perlunya penulisan nama objek.Nama = Nama. Umur) { this. 18). with nama_objek{ nama_properti = suatu_nilai. operator new.Politeknik Telkom function Mahasiswa(NIM. } Pemrograman Web Untuk seterusnya fungsi diatas disebut konstruktur objek. perintah with. dapat mempersingkat penulisan dengan pernyataan with. nama_metode(). dan kata kunci this.. } 9. Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan dari JavaScript yaitu dengan perintah for. Frame dan Form pada JavaScript 9-4 . karena Anda telah mengkonstruksi sebuah objek dengan fungsi tersebut.NIM = NIM. this.in . Bila Anda ingin menggunakan properti atau memanggil metode beberapa kali.. Objek-objek ini distandarisasikan oleh asosiasi ECMA (European Computer Manufacturer Association). Object. Untuk menciptakan instant dari objek mahasiswa diatas. Berikut ini adalah daftar objek standar JavaScript.2 Objek Standar JavaScript JavaScript telah menyediakan predefined objects.

nama_metoda()) Cara mendefinisikan objek standar JavaScript untuk string adalah sebagai berikut : var nama_variabel_hasil = nama_variabel_string. date adalah sebagai berikut : var nama_variabel = new nama_objek() Cara mendefinisikan objek standar JavaScript untuk math adalah sebagai berikut : document.1. Akan tetapi bisa dibuat metoda yang mempersonalisasikan sendiri untuk Object. 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. Frame dan Form pada JavaScript 9-5 .Politeknik Telkom Pemrograman Web Tabel 9-1 Objek Standar JavaScript Cara mendefinisikan objek standar JavaScript untuk array. boolean.metoda() 9.write(nama_objek.3 Metoda Metoda adalah suatu fungsi yang diasosiasikan dengan satu objek.

write('dia mengucapkan ' + str). Berikut ini adalah sintaks secara umum dari metoda write(): window. Menuliskan secara langsung teks ke dalam parameter : document.write(str). Frame dan Form pada JavaScript 9-6 .2 Metoda Write Metoda write() dari satu objek dokumen memungkinkan untuk memodifikasi secara dinamik isi dokumen HTML. Format berikut meng-asosiasikan fungsi dengan suatu objek : ObjekName.3. dan hasilnya langsung ditampilkan test='akar dari bilangan 2 adalah : '. Perhatikan contoh tentang dokumen HTML. 9.document.1 Deklarasi Metoda Suatu fungsi yang berasosiasikan objek acuan adalah metode. ekspresi2.MetodeName(parameters). 3.3. Maka metoda itu akan di panggil dengan cara berikut : window. document.. document.MetodeName = function_name Kemudian metode tersebut berkerja dengan suatu objek : ObjekName. .write("selamat"). yang terdiri dari objek yang bernama document.Politeknik Telkom Pemrograman Web setiap objek yang di buat. Melewatkan teks tersebut melalui suatu variabel : str='selamat'. yang akan dievaluasi dan dijalankan segera mungkin. Menyisipkan langsung satu ekspresi. 4.document.write() 9. Object. 2.) Secara praktisnya bisa menuliskan metoda write() sebagai berikut : 1.write(ekspresi1..1. objek ini mempunyai metoda yang bernama write() yang berguna untuk memodifikasi isi dari dokumen HTML dengan menampilkan teks tertentu.1. Menggabungkan kedua cara diatas : str='selamat'.

Frame dan Form pada JavaScript 9-7 .3. Cara lain juga bisa dengan memasukkan tag HTML kedalam metoda write: document.1.write(test+sqrt(2)).Politeknik Telkom document. kecuali diantara tag <PRE> dan </PRE> dimana kita memperlakukan teks didalamnya seperti file teks biasa. Karena semua objek adalah merupakan turunan dari objek window. Akan tetapi dokumen HTML tidak mengenal adanya penambahan baris baru dengan cara tradisional.4 Object Browser 9.4. Turunan dari suatu Objek adalah properti dari objek orang tuanya. Object.write('<font color="#FF0000">Hallo</font>').1 Hirarki Objek Browser dan Objek HTML Objek Browser Objek HTML Gambar 9-1 Hirarki objek browser & objek HTML pada JavaScript Hirarki ini penting untuk membuat acuan kepada Objek dan propertinya.1.3 Metoda Writeln Metoda writeln() berfungsi sama persis seperti metoda write dengan penambahan pemindahan ke baris baru setiap kali usai menuliskan metodanya. 9. 9. oleh karena itu metoda ini tidak terlalu berguna di dalam HTML.1. Pemrograman Web 5. penambahan baris baru hanya bisa dilakukan dengan menggunakan tag <BR>.

yang merupakan satu jendela yang tampil di bagian depan (layer paling atas) menyusul satu event yang di jalankan. 3. Object. Contoh : window. seperti nama dan versi browser Menyimpan segala macam informasi tentang jendela browser Properti Objek . Tabel 9-3 Macam-macam Metoda Objek Window Nama Metoda alert() Fungsi Memungkinkan navigator untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan Contoh alert('Input Sukses!').2 Metoda dari Objek Window Metoda dari objek window dapat digunakan untuk menampilkan kotak dialog.Politeknik Telkom Pemrograman Web sehingga objek window sendirinya tidak memiliki acuan ke objek maupun properti apapun. 2.1.forms["frForm"] window.document window.History . Tetapi bagaimanapun.4. Memberikan peringatan kepada user Memberikan pilihan yang harus dipilih oleh user Meminta user untuk mengisi atau melengkapi isian pada suatu form field.Document : Form Anchor Link 9. Frame dan Form pada JavaScript 9-8 .Location . dan memungkinkan untuk : 1.document.location Tabel 9-2 Macam-macam Objek Browser Nama Objek navigator window Fungsi Meyimpan informasi tentang browser yang digunakan pengguna. acuan ke suatu dokumen pada window lain membutuhkan tambahan nama window kepada Objek acuan-nya.

confirm('teks'). Object. 'teks_default').1 Penanganan Frame dan Form pada JavaScript Window dan Frame Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspek-aspek browser lainnya. 9. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut. 9.2.2. timeoutID adalah hanya digunakan oleh metode clearTimeout. close() confirm() prompt() timeoutID = setTimeout( expression.Politeknik Telkom Pemrograman Web window. Ketika dokumen frame ditutup. serta memuat suatu dokumen ke dalam window tersebut. Jika user memilih menu option File|New Web Browser. frame menghilang karena keberadaannya tergantung pada dokumen tersebut.2 Properti Objek Window Seperti telah dijelaskan sebelumnya mengenai objek window. frame dibuat berdasarkan tag <FRAMESET> </FRAMESET> dalam dokumen HTML. 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. evaluasi dari ekspresi adalah jumlah delay dalam milidetik. suatu window akan dibuka. Ketika Netscape Navigator berjalan. Layar akan dibagi menjadi sejumlah frame. suatu window baru akan di buka. dan tergantung bagaimana pengaturan optionnya. prompt('teks_pertanyaan'. Metode ini membatalkan time-out yang ditentukan oleh metode setTimeout.close(). Pada sisi yang lain.2 9. Sama seperti metoda alert. msec) clearTimeout (timeoutID). Dengan metode ini. dengan tambahan dapat melakukan pilihan OK atau cancel Mendapatkan informasi yang diberikan oleh user. Untuk menutup window acuan. Frame dan Form pada JavaScript 9-9 .

3.google. Property ini digunakan sebagai acuan window yang laing atas. status. frames.propertyName top. top.Politeknik Telkom Pemrograman Web Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Dapat digunakan oleh child windows atau embedded filesets untuk mengacu pada window original. Ini adalah sama dengan window atau frame yang sekarang. Jika diset dari onMouseOver event handler. Ini adalah pesan transient yang mana diset dengan onMouseOver event handler.propertyName parent.propertyName windowVar. self. ">Klik disini</A> </BODY> </HTML> Object. nilai dari properti ini adalah jumlah frame dalam frame array. 2.com onMouseOver="window. parent.defaultStatus adalah pesan yang dimunculkan pada status bar ketika tidak ada tulisan yang ditampilkan disana. 6. 4. 8. window. length. 7.propertyName propertyName Lihat contoh penggunaan properti status pada status bar: <HTML> <HEAD> <TITLE> ::Properti Status dari Objek window:: </TITLE> </HEAD> <BODY> <A HREF=http://www. ini adalah window yang mana frameset berada.propertyName self. return true. Frame mewarisi semua properti dan metode dari objek window.status=''. Kemampuan ini tidak hanya terbatas pada menampilkan pesan. Suatu frame diantara frameset tersebut dapat mengacu pada frame lain dalam frameset dengan menggunakan parent. Property ini adalah suatu array yang mengandung objek frame." onMouseOut="window. Dari suatu acuan frame.status='Klik disini untuk keterangan lebih lengkap'. Frame dan Form pada JavaScript 9-10 .frames[index] tanpa memiliki acuan ke nama window. 5. tetapi sangat tergantung pada parameter yang diberikan. Property ini adalah sama dengan window sekarang. Bentuk untuk mengacu properti window adalah : window. event handler harus mengembalikan true untuk perubahan status. Berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser : 1. defaultStatus.

value name. Metode submit melakukan aksi yang sama seperti tombol submit pada HTML form dan memiliki tata cara penulisan sebagai berikut: document. selectedIndex name.submit() 9. defaultChecked name. value. Tabel 9-4 Properti dari Objek Element Element objek button checkbox hidden password radio reset select submit text textarea Properti name.4 Objek element Objek elemen berpengaruh pada isi elemen dalam tag <FORM></FORM>. defaultValue Object. checked. value. value. value. value name.2.Politeknik Telkom Pemrograman Web Output : Gambar 9-2 Contoh Penggunaan Properti Status pada Status Bar 9. value. value name. Tabel 9 memperlihatkan elemen objek dan properti-nya.3 Metode Objek Form Objek form hanya memiliki satu metode-submit. value name. defaultValue name. defaultValue name.formName. checked. defaultChecked.2. options array. length. Frame dan Form pada JavaScript 9-11 . length name.

Ketika mengacu pada element radio. atau document. yaitu penanganan event:  blur(). tetap tidak membuat fokus pada objek lain.metodename().2.Politeknik Telkom Pemrograman Web Properti adalah menggunakan pengalamatan seperti document.elements[index].5 Metode element Metode element melakukan emulasi dari sepupu mereka.formName. 9.property. Frame dan Form pada JavaScript 9-12 .  focus().elementName. metode dialamatkan sebagai document.click(). Kecuali objek radio. Metode ini memindahkan fokus dari objek yang ditentukan. bentuknya adalah document.elementName. Metode ini melakukan suatu simulasi klik mouse pada suatu objek yang ditentukan. dimana elementName adalah nilai dari nama property untuk objek elemen. select Object. focus.  click(). focus click blur. select click click blur.  select(). focus. focus. Metode ini men-select seluruh text area. Metode ini memberikan fokus pada objek tertentu. 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.propertyName. select blur.radioName[index].

Politeknik Telkom Pemrograman Web Rangkuman 1. 3. tetapi JavaScript juga menyediakan objek yang telah terdefinisi. Untuk menangani frame dan form pada JavaScript. Object. Setiap objek mempunyai metoda yaitu suatu fungsi yang diasosiasikan dengan satu objek. programer tinggal menggunakan objek browser beserta metoda ataupun properti yang sesuai dengan kebutuhan. 2. JavaScript memperlakukan elemen-elemen yang tampil di jendela navigator kita sebagai suatu objek. satu aksi yang bisa di eksekusi pada satu objek. Programer dapat menciptakan sendiri objek yang ingin ditampilkan dalam halaman web. 4. Frame dan Form pada JavaScript 9-13 .

Tampilkan hasil keluaran dengan menggunakan metode objek window alert()! Output : Nama : Acer Aspire 4710 Supplier : Acer Harga : 6.890. Pelajari contoh program di bawah ini dan berikan hasil keluarannya : <HTML> <HEAD> <TITLE>Properti bgColor dari Objek document</TITLE> </HEAD> <BODY> <FORM> <SELECT onChange = "document.890. tambahlah dua metoda.000 Nama Barang diubah Nama : Acer Aspire 4720s 4510MGHi Supplier : Acer Harga : 6. yaitu Nama. Supplier.000 3.Politeknik Telkom Pemrograman Web Latihan 1.selectedIndex]. yaitu Tulis untuk menulis nilai dari properti-properti objek ini dan Ubah untuk mengubah properti initBarang. Di samping itu.options[this. Frame dan Form pada JavaScript 9-14 . dan Harga. 2.value"> <OPTION VALUE="40E0D0"> Torquoise <OPTION VALUE="2E8B57"> Sea Green <OPTION VALUE="87CEEB"> Sky Blue <OPTION VALUE="F4A460"> Sandy Brown <OPTION VALUE="FF1493"> Deep Pink <OPTION VALUE="FFFFFF" SELECTED> White </SELECT> Object.bgColor= this. Sebutkan macam-macam objek standar JavaScript yang Anda ketahui! Buatlah objek initBarang yang mempunyai tiga properti.

writeln("<PRE>").lastModified).Politeknik Telkom </FORM> Pemrograman Web <SCRIPT LANGUAGE="JavaScript"> <!-document. document.writeln("URL : " + document. Buatlah halaman HTML dengan sebuah kotak teks yang menampilkan waktu dari mesin lokal pengguna. document. Frame dan Form pada JavaScript 9-15 . Tampilan sebagai berikut : Object.writeln("</PRE>"). // --> </SCRIPT> </BODY> </HTML> 4.writeln(" ").writeln("Title : " + document. document. document.URL).writeln("Update terakhir : " + document. document.title).

Menggunakan Operator Penggabungan String Pengantar Pemrograman Web dengan PHP 10-1 . Menggunakan Operator Aritmatika 7. PHP juga dapat berjalan lintas platform. Memahami cara melakukan konfigurasi pada web server 3. IIS. Mengenal Tipe Data PHP 5. yaitu dapat digunakan dengan sistem operasi (Windows dan Linux) dan web server apapun (misalnya: PWS. Memahami cara melakukan instalasi Apache Web Server. Tujuan 1. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. Jadi anda dapat merubah source code dan mendistribusikan secara bebas dan gratis. 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. Apache). Mengenal Variable PHP 6. Ketika seorang pengguna internet membuka suatu situs yang menggunakan fasilitas server side scripting PHP.Politeknik Telkom Pemrograman Web 10 PENGANTAR PEMROGRAMAN WEB DENGAN PHP Overview PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada serverside. PHP dan MySQL 2. Menggunakan Operator Logika 8. Mampu membuat halaman web sederhana dengan PHP 4.

c.mysql. Apache Web Server PHP (www.net) MySQL (http://www. b. dibutuhkan beberapa perangkat lunak hal sebagai berikut : a. akan dipraktekkan secara langsung pada pelaksanaan praktikum. Langkah-langkah instalasi dan konfigurasi perangkat lunak diatas. 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. PHP & MySQL sebagai DBMS Pendukung Pada umumnya. Berikut ini merupakan ilustrasi komponen yang diperlukan untuk membangun web server apache yang mendukung PHP dan DBMS mysql : Gambar 10-2 Komponen Pendukung Aplikasi Web Pengantar Pemrograman Web dengan PHP 10-2 .1 Pengenalan Lingkungan Kerja Web Server 10.com).1.Politeknik Telkom Pemrograman Web 10.1 Instalasi Apache Web Server.php.

Penulisan lain yang sedikit lebih variatif dijabarkan dibawah ini. cukup mempersiapkan editor teks. Dalam contoh ini. PHP disisipkan pada tag HTML. tulisan yang akan di parsing oleh PHP adalah “server side scripting”. PHP hanya akan menampilkan salah satu dari kalimat “Rajin pangkal pandai. Beberapa contohnya akan diberikan di bawah ini: Tabel 10-1 Jenis-Jenis Tag PHP Tag Pembuka <?php <? <script language=”php”> Contoh penggunaan: 1. Pada contoh dibawah ini. </b> <?php }?> Pengantar Pemrograman Web dengan PHP 10-3 .” atau “Hemat pangkal kaya. <?php if ($pilih) { ?> <i> Rajin pangkal pandai. <p>Mari kita belajar <?php echo ‟server side scripting‟. Terdapat beberapa cara agar anda dapat menulis script PHP.2 Membuat halaman web sederhana dengan PHP Pastikan web server dan skrip PHP anda telah berjalan dengan baik sebelum memulai pemrograman PHP.Politeknik Telkom Pemrograman Web 10.1. Fungsi-fungsi yang ada di PHP uncase sensitive.” tergantung nilai True / false dari variabel $pilih. Untuk membuat web dengan script PHP. tetapi variabelnya case sensitive (membedakan huruf besar dan kecil). Terdapat tag pembuka dan penutup yang menyatakan PHP untuk memulai atau mengakhiri apa yang akan diitepretasikan melalui web browser. ?> menggunakan PHP </p> Tag Penutup ?> ?> </script> 2. Sedangkan tulisan “Mari kita belajar” dan “menggunakan PHP” merupakan tulisan yang ditulis menggunakan HTML. </i> <?php }else{ ?> <b> Hemat pangkal kaya.

/* ini merupakan contoh penggunaan multi-line comment yang memberikan komentar untuk beberapa baris kode PHP */ 10. # contoh dengan jenis one-line shell style echo „komentar multi line‟. 07344733 -2. 30.Politeknik Telkom Pemrograman Web 3. -0xf. Cara berikutnya adalah: <script language=”php”> echo „Semua yang datang berprofesi sebagai PHP Web Programmer‟. Penggunaan seperti tag ASP juga diperbolehkan: <% echo „Tag ASP juga dapat dibaca oleh PHP ‟. Tabel 10-2 Jenis-Jenis Komentar pada PHP Tanda // # /* */ Keterangan echo „komentar PHP‟. -032. 0xfc3da34.2 Tipe data Tabel 10-3 PHP Mendukung 8 Tipe Data Primitif Tipe Data boolean integer Keterangan nilai = TRUE/FALSE Decimal : [1-9][0-9]* | 0 Hexadecimal : 0[xX][0-9a-fA-F]+ Octal : 0[0-7]+ Integer : [+-]?decimal | [+-]?hexadecimal | [+-]?octal Pengantar Pemrograman Web dengan PHP Contoh 0.1. -300040. </script> 4. Komentar ini pun dapat dibuat untuk yang hanya 1 baris script (one-line comment) maupun beberapa baris script (multi-line comment). %> 10. -0X0FOFD32. 032. 0xf.3 Penggunaan Komentar pada PHP PHP memberikan cara agar programer dapat membuat komentar pada scriptnya. 1. // contoh dengan jenis one-line c style echo „komentar PHP‟. 0X0F0FD32 00. 399984 0x0. -07344733 10-4 . 20000. 6.

yaitu indeks numerik (menggunakan angka untuk menandai tiap elemen) dan indeks asosiatif (memberikan nama untuk masing-masing elemen). Array dapat berdimensi satu. Array juga merupakan sebuah set variabel yang terdiri dari sekumpulan jenis data yang sama. Array dimensi satu (one-dimensional array) mewakili bentuk suatu vektor. PHP mengenal dua macam indeks.1 Array Array pada PHP merupakan susunan map (peta). disimpan menggunakan indeks dalam satu variabel. b. queue. list (vector). Selain cara di atas.heredoc qouted sebuah tipe yang memetakan ke suatu nilai Instansiasi dari class Variabel spesial Variable yang tidak mempunyai nilai. dictionary. Ada 3 jenis : . NULL berbeda dengan 0.3e5.variabel di assign dengan NULL . Array dimensi dua (two-dimensional array) mewakili bentuk dari suatu matrik. Array PHP dapat anda gunakan sebagai benar-benar array.single qouted . stack.double qouted . 2. dua.variabel belum diberi value .Array Berindeks Numerik Inisialisasi sebuah array dilakukan dengan cara berikut : $nama_variabel = array(nilai1. 1. tree dan lain sebagainya. nilai3). nilai2. .Politeknik Telkom Pemrograman Web float/double string array object resource NULL Merupakan nilai desimal/pecahan Kumpulan karakter.variabel dilakukan fungsi unset() 5. pembuatan array dapat juga dilakukan dengan cara seperti contoh berikut : Pengantar Pemrograman Web dengan PHP 10-5 . collection.235. atau lebih : a. Array dimensi tiga (three-dimensional array) mewakili bentuk suatu ruang. hashtable. 6E-10 ' " $varnull = NULL Unset $varnull 10.2. c. Array merupakan sebuah tipe yang memetakan ke suatu nilai.

ksort() : Untuk mengurutkan elemen-elemen dalam array berindeks numerik menurut indeksnya. c. Pemrograman Web 2. 14 => 5000 ). $jurusan[] = "Ilmu Komputer". // Blink echo $a["code"].Fungsi-Fungsi Array a.Array Berindeks Asosiatif Untuk membuat array berindeks asosiatif. Contoh penggunaan: <?php /* Contoh simple array dengan key dan value yang Bervariasi */ $a = array("Band" => "Blink". Value dapat berupa apapun. CS=>"Ilmu Komputer". sort() : Untuk mengurutkan elemen-elemen dalam array berindeks numerik. kita membutuhkan label atau nama untuk masing-masing elemen seperti dalam contoh berikut : $jurusan = array(IE=>" Komputerisasi Akuntansi".) 5. echo $a["Band"].$i++){ echo("Array \$jurusan index ke [$i] adalah $jurusan[$i] <br>").Implementasi Array Key dapat berupa integer ataupun string.Politeknik Telkom $jurusan[] = "Komputerisasi Akuntansi". . $jurusan[] = "Teknologi Informasi". Sintak array: array( [key => ] value .} 4.$i<3. // 182 echo $a[5]. for($i=0. . . 3. 5 => " + 311 + ". b. // + 311 + Pengantar Pemrograman Web dengan PHP 10-6 .Navigasi Array Untuk mengakses array berindeks numerik dapat dilakukan dengan mengarahkan urutan indeks dari elemen array yang dituju.IT=>"Teknologi Informasi"). asort() : Untuk mengurutkan elemen-elemen dalam array berindeks numerik menurut isinya. "code" => 182.

$i<=7. } ?> 10.2. $myArray[] = "my own". jika anda melakukan assign nilai pada array dengan key array secara eksplisit tidak ditulis. maka indeks integer maximum akan digunakan.2. // Metal echo $aa["music"][1]. 3=>"airsoftgun") ). dan key baru adalah indeks key maksimum + 1. Beberapa fitur baru yang menyangkut konsep OO ditambahkan. // Jazz echo $aa["sport"][3]. "sport" => array(1=>"basketball". Jika sebelumnya tidak ada indeks yang digunakan maka key adalah 0. XML parser dan lain sebagainya. // 5000 // Contoh penggunaan array didalam array $aa = array("music" => array(1=>"Jazz".3 Resource Resource adalah variable spesial. $myArray[6] = "on ". for ($i=0. // airsoftgun ?> Pada array.net. PDF document. $myArray[3] = "me ".$i++){ echo "Array ke $i: $myArray[$i] <br />". 2=>"golf". OpenSSL. Pengantar Pemrograman Web dengan PHP 10-7 . memegang peranan terhadap external resource seperti melakukan koneksi dengan database.2 Object Hal yang membedakan PHP4 dan PHP5 adalah performansi dari Zend PHP engine yang mengakibatkan script berjalan lebih cepat dan efisien. Contoh penggunaan: <?php $myArray[] = "Please ". echo $aa["music"][3]. Image. Resource lengkap dapat anda lihat pada dokumentasi PHP yang dapat didownload di www. Perubahan lain yang juga menjadi fokus utama PHP5 adalah fitur objectoriented (OO) yang lebih baik.Politeknik Telkom Pemrograman Web echo $a[14]. fungsi-fungsi FTP. 2=>"Classic". Akan dibahas pada bab selanjutnya.php. 10. 3=>"Metal").

?> Pengantar Pemrograman Web dengan PHP 10-8 . echo $komentar. $b="2. echo ("Nilai variabel a adalah = $a <br>"). seperti print. //variabel bertipe real echo ("Nilai variabel komentar adalah = $komentar<br>"). $komentar="Selamat Datang di PHP". //variabel bertipe integer echo ("Nilai variabel b adalah = $b <br>"). Variable pada PHP bersifat casesensitive. "<br>Belajar dengan giat ya. echo $garis.3 Variable PHP Variable pada PHP direpresentasikan oleh karakter dollar ($) dan dilanjutkan dengan nama variable tersebut. " Di Lab ". echo. Nama variable yang valid pada php dimulai dengan huruf atau underscore (_) dan diikuti oleh huruf. Variable tidak boleh menggunakan tanda baca ataupun reserved word PHP. echo $garis. //variabel bertipe tanggal $nama = "Politeknik Telkom". //variabel bertipe double $tgl = date("d F Y"). //variabel bertipe string $hasil=$a+$b. $garis= "=====================================". angka atau underscore..Politeknik Telkom Pemrograman Web 10. Contoh : <?php $a="5". karakter ASCII dari 127 sampai 255 (0x7f sampai 0xff).$tgl. Jika dilihat sebagai regular expression: [a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]* Huruf terdiri dari a sampai z dan A sampai Z... <br>"."<br>". echo ("Hasil jumlah a dan b adalah = $hasil <br>").5". $nama. echo "Tanggal ". echo "<p>"."<br>".

//$y berisikan Politeknik Telkom ?> Contoh $a and $b / $a && $b Nama And Pengantar Pemrograman Web dengan PHP 10-9 .=‟).66666666667 2.4 Operator 10. //$b berisikan “Hallo Selamat datang di PHP” $x = “Politeknik ”.”Selamat Datang di PHP”. maka hasilnya akan selalu n Menggunakan Operator Logika Tabel 10-5 Macam-macam Operator Logika Keterangan TRUE jika $a dan $b TRUE. echo $b.Politeknik Telkom Pemrograman Web 10. $a ditambah $b $a dikurang $b $a dikali $b $a dibagi $b Sisa bagi dari $a dibagi $b Hasil jika $a=5 dan $b=3 -5 8 2 15 1.1 Menggunakan Operator Aritmatika Tabel 10-4 Macam-macam Operator Aritmatika Contoh -$a $a + $b $a .= “Telkom”. Jika n%m dan n<m.‟). &y . echo $y. b.$b $a * $b $a / $b $a % $b Nama Negasi Penjumlahan Pengurangan Perkalian Pembagian Modulo Keterangan Lawan dari $a. Contoh : <?php $a = “Hallo”. $b = $a. Menggunakan operator assignment konkatenasi („.4. Menggunakan operator konkatenasi („. Menggunakan Operator Penggabungan String Terdapat dua cara penggabungan string: a. TRUE jika salah satu saja $a atau $b $a xor $b Xor TRUE ! $a Not TRUE jika $a tidak TRUE. TRUE jika ada salah satu $a atau $b $a or $b / $a || $b Or TRUE.

Variable pada PHP bersifat case-sensitive. Untuk menjalankan PHP dibutuhkan instalasi Web Server. 6. float/double. 4. 3. array. string. software PHP dan Database Server. PHP menyediakan operator aritmatika. Variable dalam PHP tidak perlu dideklarasikan terlebih dahulu sebelum digunakan. 2. object. 3. 5. Dengan berjalan dalam sebuah web server. 4. Latihan 1.Politeknik Telkom Pemrograman Web Rangkuman 1. 7. 6. 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! Pengantar Pemrograman Web dengan PHP 10-10 . Jelaskan kelebihan PHP di bandingkan dengan pemrograman web lainnya. integer. 5. resource dan NULL. logika dan penggabungan string. maka secara otomatis program ini bersifat multiuser. PHP mendukung delapan jenis tipe data. yaitu : boolean. Variable pada PHP direpresentasikan oleh karakter dollar ($) dan dilanjutkan dengan nama variable tersebut. 2. PHP merupakan serverside scripting yang open source dan dapat berjalan lintas platform.

6. 3. 4. 5. 8. 12. 2. Untuk memudahkan pengaturan struktur program dalam PHP. Mengerti esensi penggunaan Pengulangan (Looping) dalam PHP. 7.Politeknik Telkom Pemrograman Web 11 STRUKTUR KONTROL DAN FUNGSI (PHP) Overview 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. Mampu mengimplementasikan Fungsi pada suatu studi kasus PHP. 1. 9. Memahami penggunaan Fungsi. Mengolah Data dalam Form 11-1 . Memahami bentuk umum Pengulangan. 11. Membuat sebuah class yang memiliki field dan fungsi. Memahami bentuk umum Percabangan. Memahami bentuk–bentuk fungsi bawaan dalam PHP. user dapat membuat fungsi maupun menggunakan fungsi bawaan PHP yang dapat dipanggil setiap kali dibutuhkan. Memahami parameter pada fungsi dalam PHP. Mampu memecahkan masalah sederhana dengan menggunakan Percabangan dan mengimplementasikan ke dalam program PHP. 10. Mampu memecahkan masalah sederhana dengan menggunakan Pengulangan dan mengimplementasikan ke dalam program PHP. Mengerti esensi penggunaan class di PHP. Tujuan Mengerti esensi penggunaan Percabangan (pemilihan/kodisional) dalam PHP.

Misalnya anda memiliki beberapa blok statement dan anda hanya ingin mengeksekusi salah satunya. Sintak PHP berkaitan dengan statement kondisional adalah statemen if else elseif dan statemen switch. case 3: echo "bilangan ganjil". PHP dapat membantu menjalankan block yang anda inginkan dengan adanya pengecekan kondisional diawal block statementnya. } ?> <? switch ($bilangan){ case 28: echo "bilangan genap".1 Kondisional Statement kondisional digunakan pada saat anda akan melakukan eksekusi blok statement tertentu. Beberapa sintak PHP berkaitan dengan pengulangan adalah while. break. do-while. foreach.Politeknik Telkom Pemrograman Web 11. default: echo "bukan bilangan". for. break. break. Tabel 11-1 Statement Kondisional pada PHP Statement kondisional if-else-elseif Contoh <?php $nilai = 83. } ?> Switch-case 11. if ($nilai > 70) { echo "Selamat Anda Lulus Ujian". Mengolah Data dalam Form 11-2 . } elseif ($nilai == 70) { echo "Anda harus ujian lagi". Yang perlu diperhatikan jika ingin melakukan pengulangan adalah kondisi apa pengulangan dimulai. kondisi apa pengulangan berhenti dan seperti apa pengulangan dilakukan.2 Pengulangan Terkadang pada saat scripting terdapat statement yang perlu dieksekusi secara berulang agar dapat memperoleh output yang dibutuhkan. } else { echo "Anda Tidak Lulus".

while ($i<=12){ echo "<br />while model 1 ke $i. "Walls of Jericho".". do-while foreach ?> <?php $i = 1. $i++. do { echo "<br />do-while ke $i". while ($i<=12): echo "<br />while model 2 $i++.". Aturan penamaan fungsi Mengolah Data dalam Form 11-3 . "Deftones".$i++){ echo "<br />for ke $i. } // Contoh while model 2 $i=1.". } ?> <?php // Contoh while model 1 $i=1. while ke $i.3 Membuat Fungsi PHP menyediakan beberapa fungsi bawaan. } while ($i <= 10). foreach ($arr as $varr){ echo "<br />$varr".$i<=12. $i++. } ?> 11. ?> <?php $arr = array("Strife". "Poison The Well". "As I Lay Dying" ). endwhile.Politeknik Telkom Pemrograman Web Tabel 11-2 Statement Kondisional pada PHP Statement Pengulangan for Contoh <?php for ($i=1. selain itu programmer PHP juga dibebaskan untuk dapat membuat fungsi sendiri.

misalnya fungsi mysql_connect() butuh extension mysql pada paket PHP5. // menghasilkan 6 echo ceil(2.Politeknik Telkom Pemrograman Web sama dengan aturan penamaan variable. Pada bagian ini. } dowrite(). Extension yang didukung oleh engine PHP yang anda install dapat dilihat menggunakan fungsi phpinfo().5). 11. Contoh : <?php echo ceil(5. string decbin (int number) Melakukan konversi dari decimal ke binary.4. // menghasilkan 3 echo ceil(-10. // Pemanggilan fungsi // Contoh fungsi dengan parameter function dosum($a.$b){ return $a+$b. Contoh : Mengolah Data dalam Form 11-4 .1 Math Function a. // menghasilkan -10 ?> b. float ceil (float value) Melakukan pembulatan ke nilai yang lebih besar. // Menampilkan nilai dari fungsi yang dipanggil ?> 11.4 Menggunakan fungsi bawaan PHP Terdapat beberapa fungsi bawaan PHP atau fungsi lain yang membutuhkan PHP extension yang secara default tidak disertakan. imagerotate() butuh extention GD.2). Berikut contoh bentuk fungsi pada PHP : <?php // Contoh fungsi tanpa parameter function dowrite(){ echo "Simple PHP function". } echo dosum(4.2). akan dikenalkan fungsi bawaan PHP yang secara default telah disertakan pada PHP5.2).

foreach ($arr as $vass) { echo "<br/>$vass". <?php $mahasiswa = "budi dewi susi sinta surya donita angga deni dedi peri desi".4. foreach ($brr as $vass) { echo "<br/>$vass". int mt_rand ([int min. int limit] ) Melakukan pemisahan string oleh string pemisahnya dan menghasilkan array dari string yang telah dipisahkan tersebut. } ?> b. anda dapat menulis batas minimal dan maximal pada parameternya. string string [.$mahasiswa. $arr = explode(" ".$mahasiswa). array explode ( string delimiter. string nl2br ( string string ) Merubah new line (\n) menjadi <br /> <?php echo nl2br("Politeknik \n Telkom"). 5).2 String Function a. ?> Mengolah Data dalam Form 11-5 . 5). "<br />". <?php echo mt_rand() . ?> Pemrograman Web // menghasilkan 1010 // menghasilkan 11111111 c. // menghasilkan angka random antara 1-5 ?> 11. "<br />". Jika tidak terdapat parameter yang diinput maka fungsi ini akan melakukan random dari range 0 sampai maximal angka random yang diberikan oleh engine PHP. int max]) Melakukan random angka integer. echo decbin(255). // menghasilkan angka random 2 echo mt_rand(1. // menghasilkan angka random 1 echo mt_rand() . } // Contoh explode dengan limit $brr = explode(" ". Untuk memberi range random.Politeknik Telkom <?php echo decbin(10).

} } Mengolah Data dalam Form 11-6 . $kalimat = str_replace($client_side.5 Class Class adalah sekumpulan variabel/property dan fungsi/method yang mengolah variabel-variabel ini. 2. $server_side.385. string penanda ribuan]] ) Memformat bilangan dan mengelompokan ribuan serta angka setelah penanda decimal. Struktur class di PHP adalah sebagai berikut : class namaobjek { var $property. string penanda decimal. $nbilangan = number_format($bilangan. mixed str_replace ( mixed search. function method($arg) { //definisi method. ?> 11. string number_format ( float number [. ?> d. <?php $bilangan = 2362454. int strlen ( string string ) Menghasilkan nilai berupa jumlah string pada parameter input. Class sering disebut juga sebagai objek. Dengan menggunakan objek proses pembuatan program menjadi lebih cepat. int &count] ) Melakukan replace kata yang dicari dengan kata baru.Politeknik Telkom Pemrograman Web c. echo $kalimat. // Setelah direplace ?> e. mixed replace. $jumlah = strlen($kalimat). mixed subject [. '.'). echo $nbilangan. karena objek-objek yang sudah ada dapat dipakai untuk membuat objek yang lain. <?php echo $kalimat. int decimal [. <?php $kalimat = "Giving and caring the world". $kalimat).'. echo "Terdapat $jumlah karakter". '. // Sebelum direplace echo "<br />".

Pada bagian ini akan diberikan contoh tipe data object/class. Baris selanjutnya variable object $mobil dan $kapal memanggil method lihat_penumpang yang akan menampilkan value pada properti object tersebut di layar. } } $mobil = new kendaraan. $kapal->isi_penumpang("Putri Salju"). ?> 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.Politeknik Telkom Pemrograman Web Sintaksis di atas mendefinisikan sebuah objek yang bernama namaobjek dengan satu property $property dan satu method yaitu method(). Baris selanjutnya $mobil melakukan create instance dari class kendaraan. Mengolah Data dalam Form 11-7 . Kemudian melakukan pemanggilan method isi_penumpang dan mengisinya dengan value “Hartawan” serta “Budiman”. $kapal->isi_penumpang("Kapten Hook"). function isi_penumpang($nama){ $this->penumpang[] = $nama. $kapal->lihat_penumpang(). Barisan selanjutnya. $mobil->isi_penumpang("Hartawan"). <? class kendaraan { var $penumpang. $kapal juga mengcreate instance / membuat object baru dari class kendaraan dengan value yang berbeda sebanyak 3 kali. $kapal->isi_penumpang("Peterpan"). $kapal = new kendaraan. $mobil->lihat_penumpang(). $mobil->isi_penumpang("Budiman"). } function lihat_penumpang(){ print_r($this->penumpang).

2. foreach. 5. 4. Sedangkan struktur kontrol pengulangan terdiri dari while. Pemrograman PHP menyediakan fungsi bawaan dan fungsi yang dapat dibuat sendiri oleh user. 3. sama halnya seperti pada bahasa pemrograman lainnya. for.Politeknik Telkom Pemrograman Web Rangkuman 1. Mengolah Data dalam Form 11-8 . do-while. Fungsi bawaan dalam PHP antara lain untuk fungsi pengolahan matematika dan fungsi untuk pengolahan string. Struktur kondisional terdiri dari statemen if else elseif dan statemen switch. PHP menyediakan struktur kontrol berupa kondisional dan pengulangan.

Politeknik Telkom Pemrograman Web Latihan 1. dengan pilihan balok. tampilkan kata sebelum dan sesudah berubah : Penyakit diare sampai kini masih menjadi masalah kesehatan masyarakat. 2. 6. walaupun secara umum angka kesakitan masih berfluktuasi. Class tersebut mempunyai method yang digunakan untuk mengubah umur dan method untuk mengubah jabatan. Diare dapat dicegah dengan menjaga kebersihan lingkungan Buatlah sebuah class untuk pegawai yang mempunyai property nama=Ananda. kubus dan bola! Buatlah program untuk menampilkan jumlah karakter pada tulisan berikut ini dan ganti kata diare dengan kata tubercolosis. Buatlah fungsi untuk menghitung volume suatu bangun ruang. 3. tabung. 5. Tampilkan data awal pegawai dan data setelah diubah! 11-9 Mengolah Data dalam Form . umur=25 dan jabatan=staf operasional. 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.

Tujuan 1. Proses request dimulai ketika user memasukkan data melalui media inputan pada form kemudian men-submit form. Berbeda dengan server side scripting. Dalam pengolahan data menggunakan server side scripting. 2. Respond merupakan hasil pengolahan oleh web server yang dikirimkan ke client. Memahami kegunaan elemen – elemen dalam form Mengolah data yang dimasukkan melalui form Mengolah Data dalam Form 12-10 . pengolahan data client side scripting dilakukan oleh web browser. jadi semua pengolahan data dilakukan di sisi client. dikenal istilah requests dan responds. yang menjadi pemroses adalah web server) untuk kemudian hasilnya dikembalikan kembali ke client dalam format html. Request merupakan permintaan layanan dari sisi client kepada server.Politeknik Telkom Pemrograman Web 12 MENGOLAH DATA DALAM FORM Overview Pengolahan data pada server side scripting dilakukan di sisi server (dalam hal ini.

php> Isikan Nama Anda : <input type = text name = nama size = 15> <input type = submit value = Proses> </FORM> </BODY> </HTML> Skrip Hasil.1. Atribut METHOD mendefinisikan bagaimana data yang dikirimkan dari form ini akan dibaca untuk diproses oleh script PHP.$nama. cobalah skrip-skrip berikut : Skrip variabel. ACTION diisi dengan nama file tujuan yang akan memproses data yang dimasukkan dalam form.. </FORM>").....php <HTML> <HEAD> <TITLE>Menangkap variabel dari form</TITLE> </HEAD> <BODY> <FORM METHOD = GET ACTION = Hasil...</FORM> Kita juga bisa menyisipkan tag HTML form ini ke dalam skrip PHP. Untuk lebih jelasnya. '</B> ?> Mengolah Data dalam Form ya? – Nama yang bagus euy').. Pada prinsipnya penanganan form pada PHP menggunakan tag-tag FORM dari HTML. ACTION = .php <?php echo('Namanya <B>'.. bisa diperoleh dari sumbersumber yang membahas form pada HTML.1 Menangkap Variabel dari Form Penggunaan variabel akan terlihat nyata kegunaannya pada saat kita mengolah data dari form. contohnya: echo("<FORM METHOD = ...... Untuk penjelasan atribut-atribut yang dimiliki oleh form.. 12. ACTION = . Jadi bagi yang telah menguasai pembuatan form di HTML.Politeknik Telkom Pemrograman Web 12...... terutama mengolah database.1 Menyiapkan Form Form adalah sebuah tempat bagi komponen-komponen yang berfungsi untuk menerima masukkan data dari user. maka tidak akan kesulitan di dalam pengolahan form di PHP. 12-11 . Tag HTML untuk membuat form adalah : <FORM METHOD = ..

Setelah tombol Proses di klik. dan klik tombol Proses. lalu masukkan nama. jalankan dulu skrip variabel. Gambar 12-1 Hasil ekekusi skrip variabel. sehingga dapat diolah dan ditampilkan sesuai dengan keinginan.php. Lihat gambar 12-2. nama yang dimasukkan akan disimpan sebagai variabel.php Mengolah Data dalam Form 12-12 . Lihat gambar 12-1.php Gambar 12-2 Hasil eksekusi skrip Hasil.Politeknik Telkom Pemrograman Web Pertama-tama.

html <HTML> <HEAD> <TITLE>Mencoba metode GET</TITLE> </HEAD> <BODY> <FORM METHOD = GET ACTION = Proses. } Else { echo(“Username atau Password anda masih salah”).1. Lihat gambar 12-3. } ?> Jalankan MetodeGet.php> Username : <INPUT TYPE=text NAME=nama><BR> Password : <INPUT TYPE=password NAME=rahasia><BR> <INPUT TYPE=submit VALUE=”Login”> </FORM> <BODY> </HTML> Skrip Proses. Gambar 12-3 Hasil eksekusi MetodeGet. lalu isikan Username : Purnama dan Password : Winnie.html Mengolah Data dalam Form 12-13 . maka data yang diisi di dalam form akan dikirimkan ke server dengan cara diletakkan di belakang URL.html. Bila METHOD dalam form diisi dengan GET. cobalah skrip-skrip berikut : Skrip MetodeGet.Politeknik Telkom Pemrograman Web 12.php <?php If ($nama==”Purnama” && $rahasia==”Winnie”) { echo(“Anda telah berhasil login”). Untuk lebih jelasnya. lalu tekan tombol login.2 Metode Get Get merupakan sebuah atribut yang dimiliki oleh form.

maka data yang diisi di dalam form akan dikirim ke server secara terpisah.html. Untuk lebih jelasnya. Bila METHOD dalam form diisi dengan POST.php. data yang telah diisi di dalam form akan terlihat pada URL seperti ditunjukkan pada gambar 12-4.php> Jalankan lagi skrip MetodeGet. Gambar 12-4 Hasil eksekusi Proses.Politeknik Telkom Pemrograman Web Setelah tombol Login ditekan.3 Metode Post Sama halnya seperti get.1. metode post juga merupakan atribut yang dimiliki oleh form. dan hasilnya seperti pada gambar 12-4. data yang dimasukkan di form akan diproses skrip Proses. coba ubah METHOD pada skrip MetodeGet. 12. artinya data tidak terlihat di belakang URL. masukkan username dan password. pada baris kode : <FORM METHOD = GET ACTION = Proses.html.php dengan metode get Dengan menggunakan metode get. Mengolah Data dalam Form 12-14 .php> Menjadi : <FORM METHOD = POST ACTION = Proses. lalu tekan tombol Login. maka hasilnya seperti pada gambar 12-5.

Apabila data yang dikirim ke server bersifat rahasia. misalnya membuat aplikasi pencarian (Search Engine) atau polling. gunakan metode GET. misalnya mengirimkan data Password. Jika data yang dimasukkan banyak. 3.php dengan metode post Dari penjelasan di atas. Mengolah Data dalam Form 12-15 . Apabila data yang dikirim ke server berupa data biasa saja dan biasanya untuk memperjelas data yang dimasukkan di form. dapat terlihat bahwa ada perbedaan antara metode GET dan metode POST. yaitu : 1. 2. Di bawah ini adalah pertimbangan kapan kita menggunakan metode GET dan metode POST.Politeknik Telkom Pemrograman Web Gambar 12-5 Hasil Eksekusi Proses. gunakan metode POST. dianjurkan untuk menggunakan metode POST.

pengolahan data client side scripting dilakukan oleh web browser. yaitu metode get dan metode post. 5. Metode post tepat digunakan ketika data yang akan dikirimkan ke server bersifat rahasia dan jika data yang dimasukkan banyak. 3. Metode get tepat digunakan apabila data yang dikirim ke server berupa data biasa saja dan biasanya untuk memperjelas data yang dimasukkan di form Mengolah Data dalam Form 12-16 . Pengolahan data pada server side scripting dilakukan di sisi server (dalam hal ini yang menjadi pemroses adalah web server). 2.Politeknik Telkom Pemrograman Web Rangkuman 1. 4. Berbeda dengan server side scripting. Terdapat dua cara menangkap variabel dari form.

ACTION dari form adalah halaman proses.php yang akan menampilkan seluruh data masukkan dari user : Mengolah Data dalam Form 12-17 .Politeknik Telkom Pemrograman Web Latihan 1. gunakan metode yang sesuai dengan kebutuhan Anda. 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.

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 . MySQL merupakan database yang digunakan oleh situs-situs terkemuka di Internet untuk menyimpan datanya. 8. 3. 4. 7. 2. MySQL merupakan database yang paling populer digunakan untuk membangun aplikasi web yang menggunakan database sebagai sumber dan pengelola datanya.DBMS) yang sangat populer di kalangan pemrogram web. 6.Politeknik Telkom Pemrograman Web 13 MYSQL DENGAN PHP Overview MySQL merupakan software sistem manajemen database (Database Management System . Kepopuleran MySQL dimungkinkan karena kemudahannya untuk digunakan. Software database ini kini telah tersedia juga pada platform sistem operasi Windows (98/Me atau pun NT/2000/XP). terutama di lingkungan Linux dengan menggunakan script PHP dan Perl. Tujuan 1. dan mencukupi untuk kebutuhan database perusahaan-perusahaan skala menengah kecil. 5. cepat secara kinerja query.

Tanda bahwa server MySQL sudah aktif akan terlihat ikon traffic light (lampu lalu lintas) dengan warna hijau di systray Windows (terletak di sebelah kanan bawah dari desktop Windows).yahoo.linuxtoday.org).32bitsonline. Yahoosuck (http://www.exe. Keamanan Data 13-2 . Linuxtoday (http://www.com). antara lain : Yahoo! (http://www.Politeknik Telkom Pemrograman Web 13. Shareware adalah suatu software yang dapat didistribusikan secara bebas untuk keperluan penggunaan secara pribadi.com). Khusus bagi yang menggunakan PHPTriad. hal ini dapat menunjukkan bahwa Oracle telah memperhitungkan database MySQL sebagai database alternatif masa depan.spylog. Freshmeat : Berita tentang softwaresoftware versi terbaru (http://freshmeat. Demikian juga dengan pengguna dari database MySQL. 32Bits Online (http://www. Berikut ini adalah beberapa situs portal yang menggunakan database MySQL.com). menunjukkan makin banyaknya perusahaan besar menggunakannya.spider. MySQL digunakan oleh banyak portal-portal Internet sebagai basis data dari informasi yang ditampilkan pada situs web.linux.ru/). pastikan server MySQL telah aktif. cara mengaktifkannya dari Windows Explorer.de). The Music Database (http://www. Slashdot : situs diskusi/komentar dan berita teknologi yang pro-Linux (http://slashdot.yahoosuck.com).musicdatabase. Spider (http://www. termasuk di dalamnya source code dari software tersebut. tetapi jika digunakan secara komersial maka pemakai harus mempunyai lisensi dari pembuatnya. sebelumnya merupakan software database yang shareware. Database MySQL merupakan database yang menjanjikan sebagai alternatif pilihan database yang dapat digunakan untuk sistem database personal atau organisasi kita. klik ganda pada file winmysqladmin.com). SpyLOG : A very popular Web counter site (http://www. semua tentang Linux (http://www. 13.exe yang terletak di folder C:\apache\mysql\bin\winmysqladmin.2 Tes Koneksi ke server MySQL Sebelum mencoba melakukan koneksi. Oracle sebagai database besar telah membuat kit (modul) untuk memudahkan proses migrasi dari MySQL ke dalam Oracle.net). Software open source menjadikan software dapat didistribusikan secara bebas dan dapat dipergunakan untuk keperluan pribadi atau pun komersial.com).1 Pengenalan MySQL Software database MySQL kini dilepas sebagai software manajemen database yang open source.

””). yaitu (“localhost”. Untuk lebih jelasnya. if ($koneksi_oke) { echo("Koneksi ke server MySQL berhasil").php <?php $koneksi_oke = mysql_connect(("localhost". Isilah nama_user dan password dengan user dan password sendiri. maka akan muncul tulisan “Koneksi ke server MySQL berhasil” di browser bila seandainya terhubung dengan server. Namun jika belum membuatnya.Politeknik Telkom Pemrograman Web Sebelum membuat aplikasi yang melibatkan database MySQL. $nama_variabel akan bernilai FALSE.php saat terhubung dgn server Keamanan Data 13-3 . harus terlebih dahulu melakukan koneksi ke server MySQL. kosongkan saja.php dijalankan. yaitu : $nama_variabel = mysql_connect("localhost". Namun akan muncul tulisan “Koneksi ke server MySQL gagal” di browser bila seandainya tidak terhubung dengan server. } ?> Pada saat skrip KoneksiMySQL. } else { echo("Koneksi ke server MySQL gagal"). Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL. Jika koneksi berhasil. cobalah skrip berikut : Skrip KoneksiMySQL.""."password"). Gunakan fungsi dari PHP.””."nama_user".""). dan jika koneksi gagal. $nama_variabel akan bernilai TRUE.

Jika proses pembuatan database berhasil. if ($buat_db) { echo(“<BR><BR>Database dengan nama : <B>COBA_DB</B> sukses dibuat”). $buat_db = mysql_create_db(“COBA_DB”). Untuk lebih jelasnya. maka akan muncul pesan seperti yang tampil pada gambar 13-2. } else { echo(“<BR><BR>Database dengan nama : <B>COBA_DB</B> gagal dibuat”). Gambar 13-2 Hasil eksekusi skrip Database. maka database bisa dibuat. Database digunakan sebagai tempat untuk menampung data atau tabel-tabel. $nama_variabel akan bernilai TRUE.php dijalankan dan database telah berhasil dibuat. cobalah skrip berikut : Skrip Database.php <?php include(“KoneksiMySQL. gunakan fungsi : $nama_variabel = mysql_create_db(“nama_database”). } ?> Bila skrip Database. dan jika proses pembuatan database gagal.3 Membuat Database pada MySQL Setelah koneksi ke server MySQL berhasil. $nama_variabel akan bernilai FALSE. Untuk membuat database.Politeknik Telkom Pemrograman Web 13.php”).php Keamanan Data 13-4 .

seperti yang terlihat pada tabel berikut ini : Tabel 13-1 Tipe Data pada MySQL Tipe data TINYINT SMALLINT MEDIUMINT INT atau INTEGER FLOAT DOUBLE CHAR(jumlah_karakter) VARCHAR(jumlah_karakter) LONGTEXT DATE TIME YEAR Definisi Bilangan bulat antara -128 sampai 127 atau 0 sampai 255 untuk bulat positif saja Bilangan bulat antara -32768 sampai 32767 atau 0 sampai 65535 untuk bulat positif saja Bilangan bulat antara -8388608 sampai 8388607 atau 0 sampai 16777215 untuk bulat positif saja Bilangan bulat antara -2147483648 sampai 2147483647 atau 0 sampai 4294967295 untuk bulat positif saja Tipe data berukuran 4 Byte Tipe data berukuran 8 Byte Jumlah karakter dari 1-255 Jumlah karakter dari 1-255 Tipe TEXT dengan jumlah karakter maksimum sebanyak 4294967295 karakter Tanggal dari „1001-01-01‟ hingga „9999-12-31‟ Waktu dari „-838:59:59‟ Tahun dari 1901 hingga 2155 Untuk membuat tabel. gunakan fungsi : $variabel1 = “CREATE TABLE nama_tabel(kolom1 tipedata1. Sebenarnya PHP tidak menyediakan fungsi khusus untuk membuat suatu tabel. kita harus menggunakan perintah internal dari MySQL. $nama_var = mysql_query($perintah_internal). kolom2 tipedata2. sehingga untuk membuat suatu tabel. Perintah internal pada MySQL dapat disisipkan di skrip PHP menggunakan fungsi : $nama_var = mysql_db_query(“nama_database”.Politeknik Telkom Pemrograman Web 13. dst)”.$perintah_internal).$variabel1). Sebelumnya perlu dimengerti tipe-tipe data dalam MySQL.4 Membuat Tabel pada MySQL Langkah selanjutnya adalah membuat tabel-tabel pada database yang telah dibuat. $variabel2 = mysql_db_query(“nama_database”. Keamanan Data 13-5 .

Mysql_db_query() digunakan untuk menyisipkan perintah internal yang terkait dengan database.Politeknik Telkom Pemrograman Web $perintah_internal diisi dengan perintah internal MySQL. $buat_tabel = “CREATE TABLE mahasiswa(nim int(9) PRIMARY KEY. $pilih_db = mysql_select_db(“COBA_DB”) or die(“Database COBA_DB tidak ditemukan”). seperti membuat tabel. alamat char(50) )”. cobalah skrip berikut : Skrip BuatTabel.php”).$buat_tabel). Untuk lebih jelasnya. nama char(50). maka tampilan seperti pada gambar 13-3 akan muncul. $tabel = mysql_db_query(“COBA_DB”. seperti mendeteksi jumlah kolom suatu tabel. } ?> Bila tabel mahasiswa telah berhasil dibuat. Sedangkan mysql_query() digunakan untuk menyisipkan perintah internal yang terkait dengan tabel. if($tabel){ echo(“<BR><BR>Tabel dengan nama : <B>mahasiswa</B> sukses dibuat”). Gambar 13-3 Hasil eksekusi skrip BuatTabel. } else { echo(“<BR><BR>Tabel dengan nama : <B>mahasiswa</B> gagal dibuat”).php <?php include(“KoneksiMySQL.php Keamanan Data 13-6 .

) VALUES (data1. field2.5 Insert Data Tabel yang telah dibuat pada pembahasan sebelumnya yaitu tabel mahasiswa masih berupa tabel kosong yang belum memiliki data apa-apa.). Untuk mengisi data ke tabel mahasiswa tersebut..Politeknik Telkom Pemrograman Web 13.. gunakan fungsi : $variabel1 = INSERT INTO nama_tabel(field1.php> <TABLE BORDER = 0> <TR> <TD>NIM :</TD> <TD><INPUT TYPE = TEXT NAME = nim SIZE = 10></TD> </TR> <TR> <TD>NAMA :</TD> <TD><INPUT TYPE = TEXT NAME = nama SIZE = 20></TD> </TR> <TR> <TD>ALAMAT :</TD> <TD><INPUT TYPE = TEXT NAME = alamat SIZE = 50></TD> </TR> <TR> <TD><INPUT TYPE = SUBMIT NAME =submit VALUE =INPUT></TD> <TD><INPUT TYPE = RESET NAME = reset VALUE = BATAL></TD> </TR> </TABLE> </FORM> </BODY> </HTML> Keamanan Data 13-7 .php <HTML> <HEAD> <TITLE>Memasukkan data ke tabel mahasiswa</TITLE> </HEAD> <BODY> <B>INPUT DATA MAHASISWA</B><BR> <FORM METHOD = POST ACTION = InputMHS.. Untuk lebih jelasnya. $variabel2 = mysql_query($variabel1). cobalah skrip-skrip berikut : Skrip FormInput.. data2.

nama. echo("NAMA : $nama<BR>"). Lihat gambar 13-4. echo("<FORM METHOD = POST ACTION = FormInput. $isi_data=mysql_query($perintah). echo("<INPUT TYPE=SUBMIT NAME=SUBMIT VALUE='Daftar Lagi'></FORM>").php. echo("ALAMAT : $alamat<BR>").'$alamat')". NAMA.php>").alamat) VALUES('$nim'.""). echo("NIM : $nim<BR>").Politeknik Telkom Pemrograman Web Skrip InputMHS.php Keamanan Data 13-8 . kemudian tekan tombol Input. if(isset($isi_data)) { echo("Data mahasiswa :<BR>"). echo("Telah dimasukan ke dalam table mahasiswa<BR>"). mysql_select_db("COBA_DB") or die("Database tidak ada")."".'$nama'. dan ALAMAT. } else { echo("Data mahasiswa gagal dimasukkan ke dalam tabel").php <?php mysql_connect("localhost". $perintah="INSERT INTO mahasiswa(nim. Gambar 13-4 hasil eksekusi skrip FormInput. lalu isikan NIM. } ?> Jalankan skrip FormInput.

gunakan fungsi : $variabel1 = “SELECT * FROM nama_tabel ORDER BY nama_field”.. echo(“</TABLE>”).. Caranya : While ($variabel3=mysql_fetch_row($variabel2)) { echo(“<TR><TD>$variabel3[0]</TD><TD>$variabel3[1]</TD> . Agar lebih rapi..php 13.Politeknik Telkom Pemrograman Web Setelah tombol Input ditekan. 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. Gambar 13-5 Hasil eksekusi skrip InputMHS. data yang akan dipanggil akan ditampilkan ke dalam bentuk tabel... dan hasilnya seperti pada gambar 13-5.... cobalah skrip berikut : Keamanan Data 13-9 .</TR>”).. ?> Untuk lebih jelasnya. $variabel2 = mysql_query($variabel1)..php.6 View Data Untuk melihat/menampilkan data yang ada di dalam tabel.. data yang dimasukkan di form akan diproses skrip InputMHS.

maka skrip akan menampilkan data yang ada di dalam tabel mahasiswa. mysql_connect("localhost". while($data=mysql_fetch_row($tampil_data)){ echo("<TR> <TD>$data[0]</TD> <TD>$data[1]</TD> <TD>$data[2]</TD></TR>"). Lihat gambar 13-6.php <?php echo("DATA MAHASISWA<HR><BR><BR>").""). (Asumsi tabel mahasiswa tidak kosong sebelumnya). Gambar 13-6 Hasil eksekusi skrip TampilMHS. Keamanan Data 13-10 . Fasilitas ini biasanya selalu ada dalam setiap aplikasi sistem informasi. ?> Pada saat skrip TampilMHS.php dijalankan. mysql_select_db("COBA_DB"). $perintah="SELECT * FROM mahasiswa ORDER BY nim". $tampil_data=mysql_query($perintah). echo("<TR><TD>NIM</TD><TD>NAMA</TD><TD>ALAMAT</TD></TR>"). } echo("</TABLE>").php 13. echo("<TABLE BORDER=1>").7 Searching Data Searching data dimaksudkan untuk mencari data yang ada pada tabel sehingga bisa menemukan informasi dengan cepat."". karena data yang dimiliki biasanya dalam ukuran besar.Politeknik Telkom Pemrograman Web Skrip TampilMHS.

mysql_select_db("COBA_DB"). $jumlah=mysql_num_rows($hasil). if($jumlah>0) { echo("Data yang ditemukan : $jumlah<BR><HR>"). } } else { echo("Maaf. data yang anda cari tidak ada").Politeknik Telkom Pemrograman Web Untuk mengimplementasikan fasilitas searching data ini.php dijalankan. mysql_connect("localhost". } ?> Pada saat skrip FormCari. maka ada perintah untuk memasukkan nim mahasiswa yang akan dicari. $perintah="SELECT * FROM mahasiswa WHERE nim like '%$cari%'".php <?php echo("<H3>HASIL PENCARIAN</H3>")."". cobalah skrip berikut: Skrip FormCari. while($data=mysql_fetch_row($hasil)) { echo("Nama : $data[1]<BR>"). echo("Alamat : $data[2]<BR>"). $hasil=mysql_query($perintah). Lihat gambar 13-7.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 Keamanan Data 13-11 .""). Gambar 13-7 Hasil eksekusi skrip FormCari.

Untuk lebih jelasnya. maka akan ditampilkan nama dan alamat dari mahasiswa yang bersangkutan. $variabel2 = mysql_query($variabel1).php 13.”.. Gambar 13-8 Hasil eksekusi skrip CariMHS. Keamanan Data 13-12 .php <?php echo("DATA MAHASISWA<HR><BR><BR>"). echo("<TR><TD>NIM</TD><TD>NAMA</TD><TD>ALAMAT</TD></TR>").."". echo("<TABLE BORDER=1>"). cobalah skrip-skrip berikut : Skrip TampilDelete. syarat2."").8 Delete Data Data yang ada di dalam tabel tidak hanya bisa ditambah atau bahkan diubah. Untuk menghapus data. Data tersebut juga bisa untuk dihapus.Politeknik Telkom Pemrograman Web Bila nim yang dimasukkan pada tampilan skrip FormCari.php ada pada tabel mahasiswa. Lihat gambar 13-8. gunakan fungsi : $variabel1 = “DELETE FROM nama_tabel where syarat1. mysql_connect("localhost"...

$perintah="SELECT * FROM mahasiswa ORDER BY nim".Politeknik Telkom Pemrograman Web mysql_select_db("COBA_DB"). maka akan ditampilkan data yang ada di dalam tabel mahasiswa. mysql_select_db("COBA_DB"). Link untuk hapus terletak di setiap baris pada data yang ditampilkan. $hapus=mysql_query($perintah). ?> Skrip HapusMHS. ?> Jika skrip TampilDelete. Lihat gambar 13-9.php <?php mysql_connect("localhost". while($data=mysql_fetch_row($tampil_data)){ echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD> <TD>$data[2]</TD>").php"). header("Location:TampilDelete. echo("<TD><a href=\"HapusMHS. Gambar 13-9 Hasil eksekusi skrip TampilDelete.php dijalankan.php Keamanan Data 13-13 . } echo("</TABLE>")."".""). $perintah="DELETE FROM mahasiswa where nim=$id".php?id=$data[0]\">Hapus</a> </TD></TR>"). $tampil_data=mysql_query($perintah).

syarat2.Politeknik Telkom Pemrograman Web Bila link hapus di pilih... gunakan fungsi : $variabel1 = “UPDATE nama_tabel SET nama_kolom1 = „data1‟.. where syarat1.php 13.nama_kolom2 = „data2‟.. maka data yang berada satu baris dengan link hapus tersebut akan dihapus dari tabel mahasiswa.. cobalah skrip-skrip berikut : Skrip TampilUpdate.. Keamanan Data 13-14 . Gambar 13-10 Hasil eksekusi skrip HapusMHS. Untuk mengubah data.. pada pengolahan data diperlukan suatu antarmuka untuk menampilkan data yang akan diubah. Lihat gambar 13-10 dimana mahasiswa dengan nim 113040567 dihapus.9 Update Data Update data dilakukan untuk mengubah data yang ada di dalam tabel.. echo("<TABLE BORDER=1>").”.php <?php echo("DATA MAHASISWA<HR><BR><BR>"). Mysql_query($variabel1). Untuk lebih jelasnya. Seperti halnya input data.

php maka akan ditampilkan data yang berada di dalam tabel mahasiswa.php"). $perintah="SELECT * FROM mahasiswa where nim='$id'".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. mysql_select_db("COBA_DB"). } echo("</TABLE>"). while($data=mysql_fetch_row($tampil_data)) { echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD> <TD>$data[2]</TD>"). mysql_query($ubah).alamat='$alamat' where nim='$id'"."")."". Lihat gambar 13-11. ?> Pada saat menjalankan skrip TampilUpdate. $baris=mysql_fetch_array($hasil).""."".php <?php mysql_connect("localhost". header("location:TampilUpdate."").php?id=$data[0]\">Ubah</a> </TD></TR>"). mysql_select_db("COBA_DB"). $hasil=mysql_query($perintah). mysql_connect("localhost".php <?php mysql_connect("localhost". mysql_select_db("COBA_DB").Politeknik Telkom Pemrograman Web echo("<TR><TD>NIM</TD><TD>NAMA</TD><TD>ALAMAT</TD></TR>"). Keamanan Data 13-15 . $perintah="SELECT * FROM mahasiswa ORDER BY nim". ?> <HTML> <B>Pengeditan Data Mahasiswa</B><HR><BR> <FORM method=post action=EditMHS. $ubah = "UPDATE mahasiswa SET nama='$nama'.""). echo("<TD><ahref=\"FormEdit. $tampil_data=mysql_query($perintah). ?> Skrip FormEdit.

Pada saat link diklik. (NIM 113030184 yang diubah).php akan mengupdate data sesuai dengan inputan user pada skrip FormEdit. Bila tombol Simpan di klik pada FormEdit.php.php.Politeknik Telkom Pemrograman Web Untuk mengubah data.php Gambar 13-12Hasil eksekusi skrip FormEdit.php. maka akan merefer ke skrip FormEdit.php (ada perubahan nama) Keamanan Data 13-16 . Gambar 13-11 Hasil eksekusi skrip TampilUpdate. Lihat gambar 13-12. Skrip EditMHS. maka akan menjalankan skrip EditMHS. pilih link ubah yang berada satu baris dengan data yang ingin diubah.php.

Politeknik Telkom Pemrograman Web Gambar 13-13 Hasil eksekusi skrip EditMHS.php (nama sudah berubah) Keamanan Data 13-17 .

Politeknik Telkom Pemrograman Web Rangkuman 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. 5. Membuat table MySQL yang akan menyimpan isi buku tamu b. 6. Web server dan database server terpisah sehingga menyulitkan pihak luar untuk mengakses data yang terdapat didalam database. Bahasa program PHP dan MySQL adalah open source sehingga kita tidak perlu mengeluarkan biaya tambahan untuk membeli software tersebut. Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat diakses oleh sistem operasi Windows maupun Linux. Keamanan Data 13-18 . Latihan 1. Membuat form pengisian buku tamu c. Database MySQL menyimpan data didalam direktori khusus yang terpisah dari file program PHP sehingga keamanan data lebih terjamin. 2. Membuat program untuk menampilkan isi buku tamu. 4. Membuat program untuk menerima masukan data dari form yang telah kita buat sebelumnya d. 3. 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.

Memahami kegunaan cookies pada aplikasi web. Penggunaan session dan cookie biasanya berupa penyimpanan informasi yang bersifat private dan informasi ini digunakan secara berulang oleh user. variabel dapat dikenali dan digunakan di semua halaman web tanpa harus dideklarasi ulang. Membuat cookies pada aplikasi web. atau aplikasi lainnya yang biasanya membutuhkan autentikasi. Variabel global ini disebut session dan cookie. 2. 4. menyimpan informasi barang yang sudah masuk keranjang belanja pada aplikasi e-commerce. pembuat website juga harus mengantisipasi dari kemungkinan kegiatan – kegiatan yang berusaha membobol password melalui SQL injection untuk mengamankan data. Memahami kegunaan session pada aplikasi web. Dengan menggunakan variabel global ini.Politeknik Telkom Pemrograman Web 14 KEMANAN DATA Overview PHP menawarkan metode dalam menyimpan variabel yang mempunyai sifat global. 3. Contoh penerapan session dan cookies adalah penyimpanan login account. Mampu melakukan konfigurasi runtime untuk membuat session. Tujuan 1. Keamanan Data 14-1 . Dalam membuat sebuah website.

menyimpan.2 Menyimpan Data Session Setelah menetapkan session.1. Nama default yang diberikan kepada session id yang terbentuk adalah PHPSESSID. selanjutnya dapat membuat. 14. Data session disimpan dalam direktori khusus di server. Berikut ini adalah contoh untuk mendaftarkan data session : Keamanan Data 14-2 . atau menerima informasi atau data yang dibutuhkan. Session memungkinkan untuk mendaftarkan sejumlah variabel untuk tetap dapat digunakan dalam halaman situs yang berbeda. path dari direktori yang dimaksud sesuai dengan konfigurasi pada web server.1.beda. Mekanisme ini memungkinkan pembuat web untuk membangun aplikasi yang lebih terkostumisasi dan lebih menarik. Seorang pengunjung yang mengunjungi sebuah website akan diberikan sebuah identitas yang unik.1 Memulai Session Sebelum dapat menggunakan session untuk menyimpan informasi – informasi yang dibutuhkan oleh pengguna. Ketika menggunakan session. data (variabel) akan tersimpan dan dikelola oleh server. Berikut ini merupakan script yang harus ditempatkan pada permulaan kode PHP untuk memulai session pada PHP. Data session dibuat dengan mendaftarkan data session yang akan digunakan dengan menggunakan function session_register. harus dimulai dengan memulai (start) session. 14. akan tetapi nama ini dapat diubah pada konfigurasi PHP.Politeknik Telkom Pemrograman Web 14. Memulai session harus dilakukan paling awal sebelum HTML atau text dituliskan.1 Session Session dalam PHP mengandung suatu mekanisme untuk menjaga sejumlah data tetap dapat diakses dalam serangkaian halaman website. dan disebut dengan session id. <? Session_start(). ?> Function session_start() akan men-generate session id secara acak.

pengisian nilai atau pengubahan nilai kepada data session dapat dilakukan dengan menggunakan function $_SESSION.Politeknik Telkom <? Session_start()."<br>". data session ini dapat diakses pada setiap halaman pada website selama data session tersebut tidak dihapus.". Untuk selanjutnya.$_SESSION['counter']. $_SESSION['counter']++. $_SESSION['nama_pengunjung'] = "Adul". session_register("counter"). selanjutnya. ?> Pemrograman Web Melalui script tersebut di atas. Berikut ini adalah contoh untuk mengkakses data session : <? session_start()." kali. echo "Anda telah mengunjungi halaman ini sebanyak ". ?> <html> <head> <title>Mengakses Data Session</title> </head> <body> <? session_register("nama_pengunjung"). ?> </body> </html> Keamanan Data 14-3 .3 Mengakses Data Session Setelah sebuah data session dibuat. 14. sebuah data session yang bernama nama_pengunjung sudah terbentuk. Session_register(“nama_pengunjung”). echo "Selamat Datang ".$_SESSION['nama_pengunjung']. Aturan pembuatan nama untuk data session sama seperti aturan penamaan variabel pada umumnya.1.

akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini : Gambar 14-2 Mengakses data session-2 Pada contoh di atas. yaitu dengan menggunakan tanda sam dengan (=). Variabel nama_pengunjung akan menyimpan nama pengunjung dan variabel counter akan menghitung berapa kali pengunjung tersebut telah mengunjungi halaman web tersebut.Politeknik Telkom Pemrograman Web Jika script di atas dijalanlan di web browser. seperti yang ditunjukkan pada potongan script : $_SESSION['nama_pengunjung'] = "Adul". 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. Keamanan Data 14-4 . Memberikan nilai kepada data session sama mudahnya dengan memberikan nilai kepada variabel biasa. dibuat 2 (dua) buah data session yang masing – masing bernama nama_pengunjung dan counter.

4 Membersihkan dan Menghapus Session Ketika sebuah session dimulai pada sebuah website melalui perintah session_start().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). Dengan menggunakan function session_destroy().”. file PHPSESSID secara otomatis akan terhapus dari server secara permanen. Keamanan Data 14-5 . ?> 14. Function yang digunakan untuk menghapus session dari server adalah session_destroy(). 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?‟. $id_session = session_id(). Berikut ini adalah contoh untuk menghapus data session pada website 1 2 3 4 5 <? session_start(). file PHPSESSID akan selamanya tersimpan di server sampai pembuat website menghapus session tersebut. else echo ”Terima kasih telah lebih dari satu kali mengunjungi website kami. seperti yang ditunjukkan pada potongan script : $_SESSION['counter']++. echo "Session ID Anda adalah ".$id_session. dan semua session data yang ada tidak dapat digunakan lagi. echo "<br><br>".1.

?> 9 Pada script di atas terdapat perintah session_destroy() pada baris ke-6 yang akan menghapus data session dan file PHPSESSID secara permanen. tapi data session ini masih dapat digunakan atau diisi dengan nilai yang baru. Dengan menggunakan function session_unregister(). nilai yang tersimpan pada data session akan dihilangkan. Pemrograman Web echo "Session ID Anda setelah data session di-destroy : ". variabel $id_session2 tidak lagi berisi nilai session id karena data session sudah dihapus.$id_session2. variabel $id_session berisi nilai session id. Pada baris ke-3. Berikut ini adalah cara untuk membersihkan nilai pada data session : Keamanan Data 14-6 .Politeknik Telkom 6 7 8 session_destroy(). dapat digunakan function session_unregister(). 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. $id_session2 = session_id(). akan tetapi pada baris ke-7.

kunjungi website kami lagi y??". Pemrograman Web echo "Selamat Datang". sehingga baris perintah yang akan dijalankan adalah baris ke-10. if (isset($_SESSION['nama_pengunjung'])) echo "Terima kasih ".$_SESSION['nama_pengunjung']." masih berada pada website kami". session_register("nama_pengunjung").Politeknik Telkom 1 2 3 4 5 <? session_start(). Perintah ini akan membersihkan nilai data session nama_pengunjung yang semula bernilai Adul. else echo "Terima kasih atas kunjungannya. session_unregister("nama_pengunjung"). Jika script di atas dijalankan di web browser. terdapat pemanggilan function session_unregister(“nama_pengunjung”) pada baris ke-6. $_SESSION['nama_pengunjung'] = "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”))."<br><br>". ?> kapan kapan 6 7 8 9 10 11 Pada script di atas.$_SESSION['nama_pengunjung']. akan didapatkan hasil seperti yang diperlihatkan pada gambar di bawah ini : Keamanan Data 14-7 .

Informasi ini dilewatkan melalui HTTP header diantara web server dan web browser. 14.Politeknik Telkom Pemrograman Web Gambar 14-4 Membersihkan nilai pada data session 14. seperti : nama. Jika setcookie() berhasil. dan sebagainya. informasi keranjang belanja. biadanya tidak lebih dari 1K (1024 byte). Sintaks (aturan penulisan) untuk membuat cookie menggunakan function setcookie() sebagai berikut : Keamanan Data 14-8 .2 Cookie Cookie merupakan sebagian informasi yang disimpan pada klien (web browser) ketika melakukan request terhadap suatu halaman web. Sebagai tambahan informasi yang disimpan. tetapi secara umum. 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.2. domain. Ukuran dari cookie bergantung pada web browser. masing – masing cookie mempunyai sekumpulan atribut : masa kadaluwarsa.1 Memulai cookie Untuk membuat cookie digunakan function setcookie(). dan penanda keamanan. function ini akan mengembalikan nilai TRUE. Informasi yang disimpan di dalam cookie bisa apa saja. banyaknya kunjungan ke website. Atribut ini akan membantu web browser untuk mengirimkan cookie yang tepat ketika ada request ke server. path.

Path Path cookie digunakan untuk mengorganisasikan cookie berdasarkan path di web server.com‟ Keamanan Data 14-9 . string value [. Nama Argumen Keterangan Merupakan nama dari cookie. misal : mycookie.Politeknik Telkom Pemrograman Web bool setcookie ( string name [. c.com. counter_pengunjung.sub-domain Agar cookie dapat diakses di seluruh subdomain dari mydomain. Sebagai contoh time()+60*30  akan mengatur masa kadaluwarsa cookie selama 30 menit. Ukuran waktu yang digunakan disesuaikan dengan standar pengaturan waktu di Unix menggunakan fungsi time(). int secure]]]]]) Tabel 14-1 Jenis Argumen pada Cookie No a.mydomain. Jika domin bernilai www. maka cookie hanya ditemukan di dorektori dir1 dan sub direktori dibawah dir1 e. string path [.com. Jika masa kadaluwarsa cookie tidak diatur. maka cookie akan ditemukan di semua direktori. Domain Argumen ini akan menentukan secara spesifik domain yang dapat mengakses cookie. domain harus bernilai ‟. Nilai cookie ini akan disimpan di sisi klien (web browser) Digunakan untuk mengatur masa kadaluwarsa cookie.mydomain. Name Value Expire d. b. maka cookie hanya dapat diakses di www. int expire [. cookie akan terhapus ketika web browser ditutup. string domain [. nama Merupakan nilai dari cookie. jika path bernilai /dir1/. Jika path di web server bernilai /.

?> 5 Pada baris perintah ke-2. “/dir1/”).2.Politeknik Telkom Pemrograman Web f. Pada baris perintah ke-4.2. digunakan function $_COOKIE. akan terbentuk cookie yang mempunyai nama mycookie dengan nilaiTest mycookie dan akan hilang (expire) ketika web browser ditutup. setcookie(‟mycookie‟. mempunyai masa kadaluarsa 1 (satu) hari. setcookie(‟mycookie‟. berarti cookie harus diakses pada koneksi yang aman (https). „Test mycookie‟. Secure Jika value bernilai 1(satu). Pada baris perintah ke-3.3 Menguji cookie Untuk menguji keberhasilan pembuatan cookie yang sudah dibuat menggunakan function setcookie(). seperti yang diperlihatkan pada contoh di bawah ini : <? setcookie('pengunjung'. „Test mycookie‟. dan tersimpan di direktori /dir1 dan subdirektori di bawahnya 14. akan terbentuk cookie yang mempunyai nama mycookie dengan nilai Test mycookie dan mempunyai masa kadaluarsa selama 1 (satu) hari. 'Adul dan Komeng'). Nilai default secure adalah 0 (nol) 14. Keamanan Data 14-10 .2 Menggunakan Cookie Contoh pembuatan cookie : 1 2 3 4 <? setcookie(‟mycookie‟. time()+3600*24). „Test mycookie‟). akan terbentuk cookie yang mempunyai nama mycookie dengan nilai Test mycookie. time()+3600*24.

?> Pemrograman Web Gambar 14-5 Menampilkan nilai cookie 14. “”. ". Keamanan Data 14-11 .3600). Berikut ini adalah contoh untuk menghapus cookie : 1 2 3 4 <? setcookie (”mycookie”.$_COOKIE['pengunjung'].Politeknik Telkom echo "Selamat datang. “”.2.3600. time() . setcookie (”mycookie”. ?> Perintah pada baris ke-2 digunakan untuk menghapus cookie yang dikirimkan 1 (satu) jam yang lalu. Pembuat website harus memastikan bahwa nilai masa kadaluarsa yang diisikan sudah lampau ketika cookie tersebut dihapus. “/dir1/”). time() . Perintah pada baris ke-3 digunakan untuk menghapus cookie yang dikirimkan 1 (satu) jam yang lalu dan berada di direktori /dir1 dan subdirektori di bawahnya.4 Menghapus cookie Cookies dapat dihapus dengan memberikan “” (empty) pada bagian value dan semua parameter yang lain (yang berhubungan dengan masa kadaluarsa) harus dikembalikan sama seperti ketika cookie dikirimkan.

5 Multiple cookies Untuk membuat multiple cookies dapat dilakukan dengan cara seperti di bawah ini : <? setcookie(‟mycookie1′.2. setcookie(‟mycookie2′.”<br>”. echo $_COOKIE["mycookie4"]. setcookie(‟mycookie3′. ?> Untuk mengakses cookie tersebut. setcookie(‟mycookie4′. dapat dilakukan dengan cara : <? echo $_COOKIE["mycookie1"]. „Test mycookie3′). akan didapatkan hasil sebagai berikut : Gambar 14-6 Multiple cookies Keamanan Data 14-12 .”<br>”.”<br>”. „Test mycookie4′).Politeknik Telkom Pemrograman Web 14. echo $_COOKIE["mycookie3"]. „Test mycookie2′). ?> Jika baris perintah di atas dijalankan di web browser. „Test mycookie1′). echo $_COOKIE["mycookie2"].

"value15"). "value1"). akan didapatkan hasil seperti yang ditampilkan pada gambar di bawah ini : Gambar 14-7 Cookies Array Keamanan Data 14-13 . setcookie("mycookie1['one']".6 Cookies Array. Dengan menggunakan PHP. setcookie("mycookie1['five']". setcookie("mycookie[1]". "value2"). } ?> Jika perintah tersebut dijalankan di web browser. ?> Untuk menampilkan nilai dari cookie pada contoh di atas dapat digunakan perintah di bawah ini : <? foreach ($_COOKIE['mycookie'] as $key => $value) { echo “$key:$value “. "value11").2. dimungkinkan untuk membuat cookies dalam array.Politeknik Telkom Pemrograman Web 14. seperti yang diperlihatkan pada contoh di bawah ini : <? setcookie("mycookie[0]".

3. 3) Bahkan yang lebih berbahaya lagi yaitu mematikan database itu sendiri.5 Contoh sintaks SQL Injection Urutan cara untuk meneraplam SQL Injection dalam PHP : Keamanan Data 14-14 .3. 14.3.3 Bug SQL Injection berbahaya ? 1) Teknik ini memungkinkan seseorang dapat login kedalam sistem tanpa harus memiliki account.3. maupun menambahkan data–data yang berada didalam database. 14.Politeknik Telkom Pemrograman Web 14.3 SQL Injection 14.1 Pengertian SQL Injection 1) SQL injection adalah sebuah aksi hacking yang dilakukan di aplikasi client dengan cara memodifikasi perintah SQL yang ada di memori aplikasi client. menghapus.yang menyebabkan suatu aplikasi dapat disisipi dengan perintah SQL. 2) Selain itu SQL injection juga memungkinkan seseorang merubah. 14.4 Apa saja yang diperlukan untuk melakukan SQL Injection ? 1) Internet Exploler / Browser 2) PC yang terhubung internet 3) Program atau software seperti softice 14. sehingga tidak bisa memberi layanan kepada web server. 2) SQL Injection merupakan teknik mengeksploitasi web aplikasi yang didalamnya menggunakan database untuk penyimpanan data.2 Sebab terjadinya SQL Injection 1) Tidak adanya penanganan terhadap karakter – karakter tanda petik satu ‟ dan juga karakter double minus -. 2) Sehingga seorang Hacker menyisipkan perintah SQL kedalam suatu parameter maupun suatu form.3.

setelah nama username 2) Query database awal : Berubah menjadi : b. contohnya : Keamanan Data 14-15 . Melalui URL SQL Injection melalui URL. . Melalui query 1) Sintaks SQL string „-. { 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. {dari GET atau POST variable } 2) isikan password dengan string ‟ or ‟‟ = ‟ 3) hasilnya maka SQL akan seperti ini = “select * from logi n where username = ‟$username‟ and password=‟pass‟ or „=′ ”.Politeknik Telkom Pemrograman Web 1) $SQL = “select * from login where username =‟$username‟ and password = „$password‟”. .

Politeknik Telkom Pemrograman Web Gambar 14-9 SQL injection melalui URL Keamanan Data 14-16 .

pembuat website dapat menambahkan beberapa argumen/atribut yang dibutuhkan. 2. variabel apa saja yang bisa dijadikan sebagai data session dan cookie. 4. kemudian analisalah.Politeknik Telkom Pemrograman Web Rangkuman 1. keduanya mempunyai tujuan penggunaan yang sama. 3. seorang hacker mampu membobol password baik melalui query atau URL. 5. sedangkan cookie disimpan di sisi klien. Buatlah sebuah website dengan tema e-commerce. 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. Dengan menggunakan SQL Injection. Latihan 1. 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. Dengan demikian. 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. 2. Bagaimana cara menangani dan mencegah SQL Injection ! Keamanan Data 14-17 . Ketika membuat cookie menggunakan function setcookie(). Terdapat persamaan antara session dan cookie.

Agility. Paul.al. PHP Undercover : Mengungkap Rahasia Pemrograman PHP. Second Edition.Politeknik Telkom Pemrograman Web DAFTAR PUSTAKA 1. Wrox Press.. Beginning Java Script. Reiersol. et. Jakarta. Sams Publishing. PT Elex Media Komputindo. PHP In Action : Object.. Siswoutomo. 1998 3.. Design. New York. Wilton. Hall.al. Core Web Programming. Dagfinn.. et. 2004 . Prentice Hall.1996 2. M. 2005 5. Breedlove. 2007 4. Bob. Manning Publications Co. Wiwit.. Web Programming Unleashed.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->