pemrograman web.pdf

Politeknik Telkom Pemrograman Web

i

PEMROGRAMAN WEB

POLITEKNIK TELKOM BANDUNG

2008


ii

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


iii

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 courseware ini dapat

tersusun.

Tak ada gading yang tak retak, di dunia ini tidak ada yang sempurna, oleh

karena itu kami harapkan para pengguna buku ini dapat memberikan masukan

perbaikan demi pengembangan selanjutnya.

Semoga courseware ini dapat memberikan manfaat dan membantu seluruh

Sivitas Akademika Politeknik Telkom dalam memahami dan mengikuti materi

perkuliahan di Politeknik Telkom.

Amin.

Wassalamu‟alaikum Wr. Wb.

Bandung, Desember 2007

Christanto Triwibisono

Wakil Direktur I

Bidang Akademik & Pengembangan


iv

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


v

3.1.1 Membuat Link antar Dokumen HTML ............................................................... 3-3

3.1.2 Relative Links versus Absolute Pathnames ........................................................ 3-4

3.1.3 Membuat Link ke Bagian Tertentu dalam Dokumen ....................................... 3-6

3.2 Gambar ..................................................................................................................... 3-8

3.2.1 Gambar sebagai Hyperlink .................................................................................. 3-10

<BR><BR> .......................................................................................................................... 3-10

4 FORM ........................................................................................................................ 4-1

4.1 Form .......................................................................................................................... 4-2

4.2 Membuat Input Field .............................................................................................. 4-3

5 LAYOUT HALAMAN WEB ................................................................................. 5-1

5.1 Tabel .......................................................................................................................... 5-2

5.1.1 Membuat Tabel ........................................................................................................ 5-2

5.1.2 Menambahkan Judul Tabel .................................................................................... 5-3

5.1.3 Memformat Baris .................................................................................................... 5-4

5.1.4 Memformat Kolom ................................................................................................. 5-5

5.1.5 Mengatur CELLSPACING dan CELLPADDING .............................................. 5-7

5.1.6 Lebih Lanjut dengan Tabel .................................................................................... 5-8

5.2 Frame....................................................................................................................... 5-10

5.2.1 Frame Syntax ......................................................................................................... 5-11

5.2.2 Frame Target ......................................................................................................... 5-13

5.2.3 Penggunaan Frame ................................................................................................ 5-13

6 CSS ( Cascading Style Sheet) ................................................................................ 6-1

6.1 Keuntungan Menggunakan CSS ............................................................................ 6-2

6.2 Penempatan CSS ..................................................................................................... 6-2

6.2.1 Inline Style Sheet ..................................................................................................... 6-2

6.2.2 Embedded Style Sheet ........................................................................................... 6-3

6.2.3 Linked Style Sheet ................................................................................................... 6-4

6.3 Aturan Penulisan pada CSS ................................................................................... 6-5

6.4 CSS Selector ............................................................................................................ 6-6

6.5 CSS untuk Memanipulasi Font .............................................................................. 6-9

6.6 CSS untuk Memanipulasi Color dan Background ........................................... 6-10

6.7 CSS untuk Memanipulasi List .............................................................................. 6-11

6.8 CSS untuk Memanipulasi Text ........................................................................... 6-11

6.9 CSS untuk Memanipulasi Table .......................................................................... 6-12

7 PEMROGRAMAN JAVASCRIPT ......................................................................... 7-1

7.1 Pengantar Pemrograman Client Side dan Server Side......................................... 7-2

7.2 Pengantar Javascript................................................................................................ 7-3

7.2.1 Struktur Dasar JavaScript ...................................................................................... 7-3

7.2.2 Meletakkan JavaScript dalam Dokumen HTML ................................................ 7-5

7.3 Tipe Data dasar ....................................................................................................... 7-8

7.3.1 Mendeklarasikan Variabel ...................................................................................... 7-8

7.3.2 Jangkauan dari Variabel ........................................................................................ 7-10

7.4 Tipe Data (Literal) ................................................................................................ 7-10

7.4.1 Integer(bilangan bulat).......................................................................................... 7-11


vi

7.4.2 Float (bilangan desimal)........................................................................................ 7-11

7.4.3 String .................................................................................................................... 7-11

7.4.4 Booleans ................................................................................................................. 7-12

7.5 Konversi Jenis Variabel ........................................................................................ 7-12

7.5.1 parseInt() ................................................................................................................ 7-12

7.5.2 parseFloat() ............................................................................................................ 7-13

7.6 Operator ................................................................................................................ 7-13

7.6.1 Operator Pemberi Nilai (Assignment operator) ............................................ 7-13

7.6.2 Operator Perhitungan (Arithmetic Operator) ............................................... 7-14

7.6.3 Operator Afektasi................................................................................................. 7-15

7.6.4 Operator Inkrementasi ........................................................................................ 7-15

7.6.5 Operator Pemanipulasi Bit (Bitwise operator) ............................................... 7-15

7.6.6 Operator Logika (Logical Operator) ................................................................ 7-16

7.6.7 Operator Pembanding (Comparison Operator) ............................................ 7-17

7.6.8 Operator String ..................................................................................................... 7-18

7.7 Ekspresi ................................................................................................................... 7-18

7.8 Derajat Operator ................................................................................................. 7-19

8 STRUKTUR KONTROL DAN FUNGSI ........................................................... 8-1

8.1 Struktur Kontrol ..................................................................................................... 8-2

8.1.1 Percabangan (Kondisional) .................................................................................... 8-2

8.1.2 Pengulangan (Looping) ............................................................................................. 8-4

8.2 Fungsi ......................................................................................................................... 8-9

8.2.1 Mendefinisikan Fungsi ............................................................................................. 8-9

8.2.2 Pemanggilan Fungsi ............................................................................................... 8-11

8.2.3 Parameter dari Fungsi .......................................................................................... 8-13

8.2.4 Menggunakan Fungsi-fungsi Bawaan (Built-in Function) ................................ 8-14

8.3 Kejadian (Event) ..................................................................................................... 8-15

8.3.1 Macam-macam Kejadian ...................................................................................... 8-15

8.3.2 Contoh Penggunaan Kejadian ............................................................................. 8-16

9 OBJECT, FRAME DAN FORM PADA JAVASCRIPT ...................................... 9-1

9.1 Penggunaan Objek .................................................................................................. 9-2

9.1.1 Menciptakan Objek Sendiri ................................................................................... 9-2

9.1.2 Objek Standar JavaScript ....................................................................................... 9-4

9.1.3 Metoda ...................................................................................................................... 9-5

9.1.4 Object Browser ...................................................................................................... 9-7

9.2 Penanganan Frame dan Form pada JavaScript ................................................... 9-9

9.2.1 Window dan Frame ................................................................................................ 9-9

9.2.2 Properti Objek Window ....................................................................................... 9-9

9.2.3 Metode Objek Form ............................................................................................ 9-11

9.2.4 Objek element ....................................................................................................... 9-11

9.2.5 Metode element .................................................................................................... 9-12

10 PENGANTAR PEMROGRAMAN WEB DENGAN PHP ............................. 10-1

10.1 Pengenalan Lingkungan Kerja Web Server ...................................................... 10-2

10.1.1 Instalasi Apache Web Server, PHP & MySQL sebagai DBMS Pendukung . 10-2


vii

10.1.2 Membuat halaman web sederhana dengan PHP ............................................. 10-3

10.1.3 Penggunaan Komentar pada PHP ...................................................................... 10-4

10.2 Tipe data ................................................................................................................. 10-4

10.2.1 Array .................................................................................................................... 10-5

10.2.2 Object .................................................................................................................... 10-7

10.2.3 Resource ................................................................................................................. 10-7

10.3 Variable PHP .......................................................................................................... 10-8

10.4 Operator ................................................................................................................ 10-9

10.4.1 Menggunakan Operator Aritmatika .................................................................. 10-9

11 STRUKTUR KONTROL DAN FUNGSI (PHP) ............................................. 11-1

11.1 Kondisional ............................................................................................................. 11-2

11.2 Pengulangan ............................................................................................................ 11-2

11.3 Membuat Fungsi .................................................................................................... 11-3

11.4 Menggunakan fungsi bawaan PHP ...................................................................... 11-4

11.4.1 Math Function ........................................................................................................ 11-4

11.4.2 String Function ...................................................................................................... 11-5

11.5 Class ........................................................................................................................ 11-6

12 MENGOLAH DATA DALAM FORM ............................................................ 12-10

12.1 Menyiapkan Form ............................................................................................... 12-11

12.1.1 Menangkap Variabel dari Form ........................................................................ 12-11

12.1.2 Metode Get .......................................................................................................... 12-13

12.1.3 Metode Post......................................................................................................... 12-14

13 MYSQL DENGAN PHP ...................................................................................... 13-1

13.1 Pengenalan MySQL ............................................................................................... 13-2

13.2 Tes Koneksi ke server MySQL .......................................................................... 13-2

13.3 Membuat Database pada MySQL....................................................................... 13-4

13.4 Membuat Tabel pada MySQL ............................................................................. 13-5

13.5 Insert Data ............................................................................................................. 13-7

13.6 View Data ............................................................................................................... 13-9

13.7 Searching Data ..................................................................................................... 13-10

13.8 Delete Data .......................................................................................................... 13-12

13.9 Update Data ......................................................................................................... 13-14

14 KEMANAN DATA ............................................................................................... 14-1

14.1 Session..................................................................................................................... 14-2

14.1.1 Memulai Session ..................................................................................................... 14-2

14.1.2 Menyimpan Data Session..................................................................................... 14-2

14.1.3 Mengakses Data Session ...................................................................................... 14-3

14.1.4 Membersihkan dan Menghapus Session ........................................................... 14-5

14.2 Cookie..................................................................................................................... 14-8

14.2.1 Memulai cookie ....................................................................................................... 14-8

14.2.2 Menggunakan Cookie ......................................................................................... 14-10

14.2.3 Menguji cookie .................................................................................................... 14-10

14.2.4 Menghapus cookie .............................................................................................. 14-11

14.2.5 Multiple cookies .................................................................................................. 14-12


viii

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


ix

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


x

Gambar 12-2 Hasil eksekusi skrip Hasil.php ................................................................... 12-12

Gambar 12-3 Hasil eksekusi MetodeGet.html................................................................ 12-13

Gambar 12-4 Hasil eksekusi Proses.php dengan metode get ...................................... 12-14

Gambar 12-5 Hasil Eksekusi Proses.php dengan metode post ................................... 12-15

Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL.php saat terhubung dgn server . 13-3

Gambar 13-2 Hasil eksekusi skrip Database.php ............................................................ 13-4

Gambar 13-3 Hasil eksekusi skrip BuatTabel.php ............................................................ 13-6

Gambar 13-4 hasil eksekusi skrip FormInput.php ............................................................ 13-8

Gambar 13-5 Hasil eksekusi skrip InputMHS.php ............................................................ 13-9

Gambar 13-6 Hasil eksekusi skrip TampilMHS.php ....................................................... 13-10

Gambar 13-7 Hasil eksekusi skrip FormCari.php .......................................................... 13-11

Gambar 13-8 Hasil eksekusi skrip CariMHS.php .......................................................... 13-12

Gambar 13-9 Hasil eksekusi skrip TampilDelete.php ................................................... 13-13

Gambar 13-10 Hasil eksekusi skrip HapusMHS.php ..................................................... 13-14

Gambar 13-11 Hasil eksekusi skrip TampilUpdate.php ................................................ 13-16

Gambar 13-12Hasil eksekusi skrip FormEdit.php .......................................................... 13-16

Gambar 13-13 Hasil eksekusi skrip EditMHS.php .......................................................... 13-17

Gambar 14-1 Mengakses data session-1 ............................................................................ 14-4

Gambar 14-2 Mengakses data session-2 ............................................................................ 14-4

Gambar 14-3 Menghapus data session ............................................................................... 14-6

Gambar 14-4 Membersihkan nilai pada data session ....................................................... 14-8

Gambar 14-5 Menampilkan nilai cookie ........................................................................... 14-11

Gambar 14-6 Multiple cookies ........................................................................................... 14-12

Gambar 14-7 Cookies Array .............................................................................................. 14-13

Gambar 14-8 Penerapan SQL Injection ........................................................................... 14-15

Gambar 14-9 SQL injection melalui URL ........................................................................ 14-16


xi

DAFTAR TABEL Tabel 2-1 Tabel Jenis Bullet .................................................................................................. 2-18

Tabel 2-2 Tipe Penomoran pada Ordered List ................................................................ 2-20

Tabel 3-1 Tabel Atribut dalam Tag <A> .............................................................................. 3-2

Tabel 3-2 Jenis-Jenis Atribut pada Tag <img> ..................................................................... 3-8

Tabel 4-1 Jenis- Jenis Atribut dalam Tag <FORM>............................................................ 4-2

Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text ................................................ 4-3

Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox ........................................ 4-4

Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio ................................................ 4-4

Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button .............................................. 4-4

Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea .................................................... 4-5

Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select ............................................... 4-6

Tabel 5-1 Jenis-Jenis Atribut pada Tag <TABLE> .............................................................. 5-2

Tabel 5-2 Jenis – Jenis Atribut pada Tag <TR> .................................................................. 5-5

Tabel 5-3 Jenis – Jenis Atribut pada Tag <TD> .................................................................. 5-5

Tabel 5-4 Jenis – Jenis Target Frame .................................................................................. 5-13

Tabel 6-1Satuan ukuran untuk value ..................................................................................... 6-6

Tabel 6-2 Property Font .......................................................................................................... 6-9

Tabel 6-3 Property Background dan Color....................................................................... 6-10

Tabel 6-4 Property List.......................................................................................................... 6-11

Tabel 6-5 Property Text ....................................................................................................... 6-11

Tabel 6-6 Property Table ...................................................................................................... 6-12

Tabel 7-1 Cadangan Kata pada Javascript ............................................................................ 7-9

Tabel 7-2 Karakter khusus JavaScript. ................................................................................ 7-12

Tabel 7-3 Daftar Operator Assignment ............................................................................. 7-14

Tabel 7-4 Jenis Operator Aritmatika .................................................................................. 7-14

Tabel 7-5 Jenis Operator Afektasi....................................................................................... 7-15

Tabel 7-6 Jenis Operator Inkrementasi .............................................................................. 7-15

Tabel 7-7 Jenis Operator Logika ......................................................................................... 7-16

Tabel 7-8 Jenis Operator Pembanding ............................................................................... 7-17

Tabel 7-9 Derajat/Prioritas Operator ................................................................................ 7-19

Tabel 8-1 Penulisan Menggunakan Pernyataan If ................................................................ 8-2

Tabel 8-2 Penggunaan Pernyataan Switch-Case ................................................................. 8-4

Tabel 8-3 Penggunaan Pernyataan for .................................................................................. 8-5

Tabel 8-4 Contoh Script Pengulangan While ...................................................................... 8-6

Tabel 8-5 Contoh Sript Penggunaan Fungsi ....................................................................... 8-10

Tabel 8-6 Jenis - Jenis Kejadian pada JavaScript ................................................................ 8-15

Tabel 9-1 Objek Standar JavaScript ...................................................................................... 9-5

Tabel 9-2 Macam-macam Objek Browser ........................................................................... 9-8

Tabel 9-3 Macam-macam Metoda Objek Window ............................................................ 9-8

Tabel 9-4 Properti dari Objek Element ............................................................................. 9-11


xii

Tabel 9-5 Metode-Metode dari Elemen Objek-Objek .................................................... 9-12

Tabel 10-1 Jenis-Jenis Tag PHP ............................................................................................ 10-3

Tabel 10-2 Jenis-Jenis Komentar pada PHP ....................................................................... 10-4

Tabel 10-3 PHP Mendukung 8 Tipe Data Primitif ............................................................ 10-4

Tabel 10-4 Macam-macam Operator Aritmatika ............................................................. 10-9

Tabel 10-5 Macam-macam Operator Logika .................................................................... 10-9

Tabel 11-1 Statement Kondisional pada PHP ................................................................... 11-2

Tabel 11-2 Statement Kondisional pada PHP ................................................................... 11-3

Tabel 13-1 Tipe Data pada MySQL ..................................................................................... 13-5

Tabel 14-1 Jenis Argumen pada Cookie............................................................................. 14-9


Pengantar Pemrograman Web 1-1

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 komputer-

komputer dan jaringan komputer di seluruh dunia, maka segala informasi yang

diperlukan dapat dicari dengan mudah. Setiap orang dari berbagai latar

belakang yang berbeda dapat bertukar informasi tanpa perlu berinteraksi

secara fisik.

Internet ini dimanfaatkan oleh perusahaan, pemerintahan maupun perorangan

untuk membangun aplikasi yang disebut web site. Web site ini dipergunakan

salah satunya untuk tujuan memperkenalkan profil perusahaan atau pemerintahan. Melalui web site tertentu, kita dapat berkirim email kepada

seseorang di luar negeri tanpa harus repot menulis di kertas, memasukkan ke

dalam amplop dan mengirimnya lewat kantor pos.

Tujuan

1. Mengenal sejarah internet

2. Memahami dasar-dasar internet

3. Mengenal istilah-istilah internet

4. Memahami konsep dasar pada web

5. Memahami pemodelan Client/Server

6. Mengenal Client/Server tools



1.1 Pendahuluan

Komputer pertama kali dibuat hanyalah sebagai mesin yang berdiri

sendiri (stand alone). Untuk melakukan perpindahan informasi dari satu

komputer ke komputer lainnya dibutuhkan tape, disk, disket dan lain-lain.

Jalan untuk berbagi informasi tersebut, dibuatlah koneksi. LAN, atau disebut

juga Local Area Network, merupakan jaringan komputer terkecil yang

menghubungkan 2 atau lebih komputer untuk berbagi informasi. Dengan

konsep koneksi jaringan untuk membentuk jaringan dari jaringan terciptalah

internet. Internet itu sendiri merupakan singkatan dari Interconnected Network

of Networks.

1.2 Sejarah Internet

Internet bukanlah satu fenomena baru. ARPAnet (US Defense Advanced

Research Projects Agency) atau Departemen Pertahanan Amerika pada tahun

1969 membuat jaringan komputer yang tersebar untuk menghindarkan

terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah

dihancurkan. Jadi bila satu bagian dari sambungan network terganggu dari

serangan musuh, jalur yang melalui sambungan itu secara otomatis

dipindahkan ke sambungan lainnya. Setelah itu Internet digunakan oleh

kalangan akademis (UCLA) untuk keperluan penelitian dan pengembangan

teknologi. Dan baru setelah itu Pemerintah Amerika Serikat memberikan ijin

ke arah komersial pada awal tahun 1990.

Ringkasan Sejarah :

1957 : Advanced Research Projects Agency (ARPA) dibentuk oleh

Departement of Defence (DoD) USA.

1959 : Len Kleinrock menulis paper tentang packet switching.

1967 : Disain awal dari ARPANET diterbitkan.

1969 : DoD menggelar pengembangan ARPANET

1970 : ARPANET mulai menggunakan Network Control Protocol

1972 : InterNetworking Working Group (INWG) dibentuk untuk

mempromosikan standar yang sudah disepakati bersama.

Spesifikasi dari telnet, RFC 318, diusulkan.

1973 : Ide ethernet dijabarkan dalam thesis PhD dari Bob Metcalfe.

Spesifikasi untuk File Transfer, RFC 454, diusulkan.

1974 : Disain dari TCP/IP dijabarkan secara rinci oleh Vint Cerf dan

Bob Kahn dalam "A Protocol for Packet Network

Intercommunication".

1976 : UNIX-to-UNIX Copy (UUCP) dikembangan oleh Bell Labs.



1981 : BITNET mulai beroperasi.

1982 : TCP/IP menjadi protokol untuk ARPANET dan ini

dispesifikasikan oleh DoD.

1983 : BSD UNIX release 4.2 menggunakan TCP/IP.

1984 : Jumlah Internet hosts melewati batas 1000 host. Domain Name

Service (DNS) mulai lahir.

1986 : NSFNET dilahirkan dengan kecepatan backbone 56Kbps.

1987 : Jumlah Internet hosts melewati batas 10.000.

UUNET didirikan untuk memberikan akses komersial untuk

Usenet dan UUCP.

1988 : Sebuah "Internet Worm" berhasil melumpuhkan Internet, sekitar

6000 host terkena akibatnya.

NSFNET meningkatkan kecepatan backbone menjadi 1,544

Mbps (T1).

1989 : Jumlah Internet hosts melewati batas 100.000. Tim Berners-Lee

dari CERN mensirkulasikan porposalnya yang berjudul

"Information Management: A Proposal".

1990 : DoD menghentikan ARPANET.

Tim Berners-Lee mensirkulasikan proposal World Wide Web

(WWW).

Dikembangkan sebuat program WWW, sebuah WYSIWYG

browser dan editor.

1991 : Brewster Kahle (Thinking Machines) mengembangan Wide Area

Information System (WAIS).

Paul Lindner dan Mark McCahill (University of Minnesota)

meluncurkan Gopher.

Phillip Zimmerman meluncurkan Pretty Good Privacy (PGP).

CERN meluncurkan library WWW.

1992 : Jumlah Internet hosts melampaui 1.000.000.

University of Nevada mengeluarkan sistem Veronica.

Sebuah WWW browser yang bernama Viola diluncurkan oleh

Pei Wei dan didistribusikan bersama CERN WWW.

1993 : NSF membuat InterNIC untuk menjalankan Internet servis

seperti pendaftaran domain. Versi pertama dari Mosaic (untuk X Window) yang

dikembangkan oleh Marc Andreesen dikeluarkan oleh NCSA.

White House online.

National Information Infrastructure Act lolos dan pemerintah

Amerika Serikat mulai lebih serius dalam bidang Web.



1994 : Pizza hut online, merupakan contoh pertama dari aplikasi

komerisal Internet.

Spam mail menjadi kasus besar setelah sebuah lembaga hukum

yang bernama Canter & Siegel menyebarkan mail ke seluruh

dunia tentang servis untuk mendapatkan "green card".

First Virtual menjalankan "CyberBank" yang pertama.

1995 : Compuserve, America Online, dan Prodiy mulai memberikan servis

akses ke Internet.

Perusahaan Marc Andreesen, Netscape Communication

Corporation, menjadi publik dan menjadi nomor 3 tertinggi untuk

harga Initial Public Offering (IPO) share di NASDAQ.

NFS tidak lagi menggratiskan pendaftaran domain. Domain mulai

membayar $50/tahun.

1.3 Konsep Dasar Internet

Internet yang berasal dari kepanjangan Interconnected Network adalah

sebuah sistem komunikasi global yang menghubungkan computer - komputer

dan jaringan - jaringan komputer di seluruh dunia. Setiap komputer dan

jaringan terhubung secara langsung maupun tidak langsung ke beberapa jalur

utama yang disebut internet backbone dan dibedakan satu dengan yang

lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32

bit. Contoh: 202.155.4.230.

Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing - masing (Unix, Linux, Windows, Mac, dan

lain-lain) bertukar informasi dengan sebuah protokol standar yang

dikenal dengan nama TCP/IP (Transmission Control Protocol / Internet

Protocol). TCP/IP tersusun atas 4 layer ( network access, internet, host-to-host

transport dan application ) yang memiliki protokolnya sendiri-sendiri.

Bila anda mempunyai komputer minimal prosessor 486, Windows 95,

Modem, dan line telepon, maka anda bisa bergabung dengan ribuan juta

komputer lain di seluruh dunia dan mengakses harta karun informasi di

internet.

1.3.1 HTTP (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



browser. Protokol ini merupakan protokol standar yang digunakan untuk

mengakses dokumen HTML.

1.3.2 URL (Uniform Resource Locator)

URL adalah suatu sarana yang digunakan untuk menentukan lokasi

informasi pada suatu Web Server. URL diibaratkan sebagai suatu alamat,

dimana alamat tersebut terdiri dari:

Protokol yang digunakan oleh suatu browser untuk mengambil informasi.

Nama dari komputer dimana informasi tersebut tersedia.

Path serta nama file dari suatu informasi.

Format umum URL :

Protokol_transfer://nama_host/path/nama_file

1.3.3 Protokol Transfer

Protokol transfer adalah suatu protokol yang digunakan untuk

pengiriman informasi di internet. HTTP adalah salah satu protokol transfer

yang merupakan standar untuk suatu dokumen web. Selain protokol HTTP,

dalam internet juga dikenal beberapa protokol lain diantaranya adalah :

FTP (File Transfer Protocol), protokol ini untuk mengunduh

(download) dan mengunggah (upload) suatu file di FTP server. Dengan hal

ini kita dapat bertukar file dengan cepat. Pada saat ini banyak program

atau software yang bebas untuk di download dari manapun di Internet.

Telnet, protokol yang digunakan untuk login ke suatu server komputer. Telnet memungkinkan kita dapat mengakses komputer yang letaknya jauh

dari komputer kita.

Dengan telnet kita bisa mengetikkan unix command dari satu komputer

ke komputer yang lain, dengan kata lain kita bisa melakukan akses jarak

jauh (remote access). Untuk menggunakan Telnet kita harus mempunyai IP

address atau domain name, dan mempunyai hak untuk mengakses yaitu

dengan login name dan password.

SSH (Secure Shell) didesain untuk menggantikan telnet dengan

kelebihan dalam keamanan, beroperasi melalui TCP dan menyediakan

autentifikasi dan komunikasi yang aman.

http://www.rad.net.id/homes/edward/intbasic/6a.htm

http://www.rad.net.id/homes/edward/intbasic/6a.htm



Gopher, protokol ini untuk mengakses server gopher yang menyediakan

informasi dengan mengggunakan suatu sistem menu atau melalui

hubungan ke telnet

News (Network News Transfer Protocol , NNTP), protokol ini

digunakan untuk mendistribusikan berita di Usenet. Usenet adalah suatu

sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada

topik-topik yang disebut newsgroup.

Contoh :

ftp://sgi2.mi.politekniktelkom.ac.id/multimedia : Browser anda bertindak sebagai cliet FTP dan mengakses direktori pub pada server

sgi2.mi.politekniktelkom.ac.id

gopher://wiretrap.spies.com : browser anda bertindak sebagai client

gopher pada wiretrap.spies.com

news:comp.infosystems.www.announce : Browser anda bertindak sebagai

client Usenet dan mengakses artikel-artikel pada newsgroup

comp.infosystems.www.announce

1.3.4 DNS (Domain Names System)

Komputer-komputer di internet menggunakan suatu format penamaan

standar untuk mempermudah pengelolaan server komputer di internet yang

berkembang dengan cepat. Sistem penamaan server komputer ini adalah

Domain Names System (DNS). DNS membuat suatu tingkat-tingkat domain,

yang merupakan kelompok komputer-komputer yang terhubung ke internet.

Tabel 1.1 Nama-nama Domain di Indonesia

Nama Domain Jenis Organisasi

Com Organisasi komersial

edu, ac.id Lembaga Pendidikan

gov, go.id Lembaga Pemerintah

int Lembaga Internasional

Mil Organisasi militer

net Provider internet

org Organisasi umum

ftp://sgi2.mi.politekniktelkom.ac.id/multimedia

gopher://wiretrap.spies.com/

news:comp.infosystems.www.announce



1.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.

Informasi-informasi dalam web mempunyai link-link yang menghubungkan

informasi tersebut ke informasi lain di dalam jaringan internet. Sistem yang

menghubungkan informasi-informasi melalui link ini disebut dengan nama

hypertext.

World Wide Web menyediakan pengguna Internet akses ke berbagai

macam media yang dikemas dengan sederhana. WWW adalah aplikasi yang

paling menarik di internet, penting dan banyak digunakan. Dengan WWW ini

kita dapat dengan mudahnya mendapatkan informasi, tidak hanya teks, gambar

bahkan multimedia.

Informasi yang diletakkan di WWW disebut homepage ataupun situs

(sites) yang memiliki alamatnya masing-masing. Untuk melihat isinya

dibutuhkan suatu web browser, misalkan Internet Explorer, Netscape

Navigator, Opera, Mozilla, dan lain-lain.

Semakin berkembangnya World Wide Web, istilah hypertext menjadi

hypermedia, dimana link-link penghubung antar informasi bukan lagi berupa

suatu teks, tetapi juga bisa berupa suatu file multimedia seperti gambar, suara

dan video. Bekerja pada web mencakup 2 hal penting, yaitu :

Software Web Browser

Software Web Server

Kedua software ini bekerja seperti sebuah sistem client-server. Web

browser bertindak sebagai client yang memungkinkan anda untuk

menginterpretasikan dan melihat informasi pada web, sedangkan web server

yang bertindak sebagai server memungkinkan anda untuk menerima suatu

informasi yang diminta oleh browser. Jika suatu permintaan (request) akan

suatu informasi datang, web server mencari file yang diminta tersebut dan

kemudian mengirimkan ke browser yang memintanya. Perhatikan ilustrasi di

bawah ini :



Web Browser Web Server

Gambar 1.1 Hubungan Client dan Server dalam Web

1.5 Istilah-istilah Internet

1.5.1 E-mail (Electronic Mail)

E-mail merupakan salah satu aplikasi atau fasilitas yang paling banyak

digunakan di Internet, mempunyai konsep yang sama dengan surat dalam

bentuk kertas hanya saja untuk mengirimkannya tidak diperlukan layanan

kantor pos karena e-mail adalah surat berbentuk elektronik yang dikirimkan

melalui internet. E-mail merupakan alat komunikasi yang murah dan cepat.

Seperti halnya konsep surat melalui pos, email memiliki alamat yang bisa

dituju secara elektronik, contoh alamat email adalah [email protected].

Dengan email ini kita tidak hanya bisa mengirimkan teks saja tapi juga gambar,

data, dan lain-lain. Dalam pengirimannya kita bisa mengirimkan ke lebih dari

satu orang sekaligus.

1.5.2 Homepage

Setiap perusahaan atau pribadi yang memiliki informasi di WWW

memerlukan suatu alamat (URL) khusus yang disebut web site. Setiap

informasi ini disimpan dalam suatu file yang berbeda-beda yang disebut Web

Page. Di dalam web page inilah tersimpan berbagai informasi dan link yang

menghubungkan suatu informasi ke informasi lainnnya, baik itu di dalam suatu

web page yang sama ataupun dalam web page lain pada web site yang

berbeda.

Sebelum mengakses berbagai macam informasi pada suatu web site,

anda akan menemui suatu web page pembuka yang disebut sebagai home

page. Home page ini merupakan halaman pertama dari suatu web site yang

biasanya berisi tentang apa dan siapa dari perusahaan atau organisasi pemilik

web site tersebut.

Request

Response

mailto:[email protected]



1.6 Tool pada Client/Server

1.6.1 Browser

Browser merupakan tool yang berada di sisi client. Untuk mengakses

web, anda memerlukan suatu program yang disebut Web Browser. Browser

merupakan suatu program yang dirancang untuk mengambil informasi-

informasi dari suatu server komputer pada jaringan internet. Informasi-

informasi ini biasanya dikemas dalam page-page, dimana setiap page bisa

memiliki beberapa link yang menghubungkan web page tersebut ke sumber

informasi lainnya.

Pertama kali munculnya www, browser hanya mampu menampilkan inforamsi dalam bentuk teks. Lynx merupakan salah satu contoh browser

teks. Tahun 1993, NCSA membuat browser Mosaic yang memiliki

kemampuan lebih baik dan dapat menampilkan gambar. Sejak kemunculan

NCSA Mosaic, www mulai berkembang dengan pesat.Perkembangan ini

menjadi jauh lebih cepat lagi setelah muncul browser Netscape Navigator

dari Netscape Communication. Netscape memiliki kecepatan jauh lebih bagus

daripada Mosaic dalam menampilkan informasi baik teks maupun gambar.

Kemudian dunia browser semakin semarak setelah Microsoft

mengeluarkan browser Internet Explorer. Baik Netscape dan IE telah

mendukung penggunaan berbagai jenis objek multimedia serta VRML dan Java.

1.6.2 Web Server

Web Server merupakan tool yang berada di sisi server yang akan

memproses permintaan data dari web browser. Ada beberapa jenis web

server yang banyak digunakan sekarang ini, antara lain : Internet Information

Server 5.0 (IIS 5.0) yang berjalan pada Windows 2000, Personal Web Server 4.0

(PWS 4.0) yang berjalan pada Windows ‟98, Apache Web Server

(http://httpd.apache.org) yang merupakan web server gratis yang mendukung

PHP.

1.6.3 Database Server

Database Server merupakan tool yang berada di sisi server yang

merupakan perangkat lunak sistem manajemen database (Database

Management System – DBMS), berfungsi untuk pengelolaan data pada sebuah

web site. Beberapa DBMS yang dapat digunakan untuk membangun database

antara lain : Oracle, MySQL, Ms. SQL Server dan Ms. Access.



Rangkuman

1. Internet adalah sebuah sistem komunikasi global yang menghubungkan

komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.

2. World Wide Web menyediakan pengguna Internet akses ke berbagai

macam media yang dikemas dengan sederhana. WWW adalah aplikasi

yang paling menarik di internet, penting dan banyak digunakan. Dengan WWW ini kita dapat dengan mudah mendapatkan informasi, tidak hanya

teks, gambar bahkan multimedia.

3. Sistem kerja web seperti sebuah sistem pemodelan client/server, yang

mencakup software web browser (contohnya Internet Explorer) dan

software web server ( contohnya Apache).

4. Melalui aplikasi e-mail, setiap orang dapat saling berkirim surat elektronik

tanpa perlu menulis dalam kertas dan mengirimkannya ke kantor pos.

5. Untuk mempermudah pengelolaan, server komputer di internet

mengikuti sistem penamaan yang disebut Domain Names System (DNS),

contoh : www.politekniktelkom.ac.id

Latihan

1. Jelaskan pengertian dari Internet!

2. Siapakah yang pertama kali menerapkan penggunaan internet? Dan

digunakan untuk keperluan apakah?

3. Apa yang Anda ketahui mengenai World Wide Web!

4. Gambarkan hubungan client dan server dalam sebuah web!

5. Jelaskan sistem client-server pada aplikasi web!

6. Apa yang dimaksud dengan E-mail?

7. Jelaskan minimal dua macam Protokol Transfer yang Anda ketahui!

8. Jelaskan fungsi DNS dan sebutkan beberapa nama domain yang ada di

Indonesia!

9. Apa yang dimaksud dengan web browser?

10. Apa yang dimaksud dengan web server?


Design Halaman Web 2-1

2 DESIGN HALAMAN WEB

Overview

Untuk membangun sebuah web site, diperlukan modal dasar berupa bahasa

yaitu Hypertext Markup Language(HTML). Setiap tampilan pada halaman web

dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna.

Tujuan

1. Mengenal dasar-dasar HTML

2. Membuat dokumen HTML dan melakukan pemformatan dokumen yang

sederhana.

3. Membuat teks preformat dan karakter spesial

4. Membuat list pada dokumen HTML

5. Membuat list bersarang pada dokumen HTML



2.1 Pengenalan HTML

HyperText Markup Language adalah bahasa yang digunakan untuk

membuat suatu situs web atau homepage. Setiap dokumen dalam Web ditulis

dalam format HTML. Semua format dokumen, hyperlink yang dapat di klik,

gambar, dokumen multimedia, form yang dapat di isi dan sebagainya

didasarkan atas HTML.

2.1.1 HTML Editor

Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi

teks editor biasa seperti notepad. Namun sekarang ini di pasaran terdapat

banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web), contohnya Macromedia Dreamweaver, Adobe

GoLive, Microsoft FrontPage.

Gambar 2-1 Lembar Kerja Microsoft FrontPage



Kemudahan Microsoft FrontPage :

Pengeditan “What You See Is What You Get” (WYSIWYG)

Menambahkan, menghapus dan mengubah teks.

Menambahkan paragraf dan gaya karakter ke dalam teks.

Mengubah huruf, ukuran dan warnanya.

Memasukkan tabel, gambar, garis horisontal dan hyperlink dalam

dokumen web yang anda buat.

Drag-and-drop hyperlink dan gambar dari dokumen yang lain.

2.1.2 Struktur Dasar HTML

Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan

disebut sebagai Markup Language yakni bahasa yang mengandung kode

penanda yang disebut tag HTML yang digunakan untuk mengatur format

tampilan suatu dokumen. Kode ini diselipkan ke dalam teks HTML, berfungsi

untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu

hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk

menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >.

Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat

case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada

umumnya banyak dari pemakai HTML menggunakan huruf besar dalam

penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas,

sehingga mempermudah proses pembacaan. Semua dokumen HTML terdiri

dari dua bagian logikal, yaitu:

bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML

berisi informasi umum mengenai dokumen

dan bagian badan (body) yaitu berisi dokumen yang sebenarnya.

Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur

dasarnya adalah sebagai berikut:

<html>

<head>

<title>Judul Form/Caption</title>

</head>

<body>

ISI WEB

</body>

</html>



Keterangan:

<html> .. </html>

Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut

adalah file HTML.

<head> .. </head>

Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan

tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<title> .. </title>

Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi

dokumen. Kalimat yang terletak di dalam tag ini akan muncul pada

bagian paling atas browser Anda (pada title bar).

<body> .. </body>

Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi

halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti

bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. Contoh

dari penggunaan tag <HTML> seperti ini:

<HTML>

<HEAD>

<TITLE> Judul dari dokumen HTML </TITLE>

</HEAD>

<BODY>

My Homepage

</BODY>

</HTML>

Untuk mencoba script di atas, anda bisa membuka aplikasi notepad

ataupun program teks editor yang lain. Tuliskan script di atas dan simpan

dengan ekstensi *.html atau *.htm, misalkan MyPage.html. Bukalah dokumen

html yang telah anda buat tadi dengan menggunakan web browser, misalkan

Internet Explorer. Maka akan terlihat tampilan seperti di bawah ini.



Gambar 2-2 Tampilan MyPage.html

2.2 Memformat Dokumen HTML

2.2.1 Bagian Body

Pada bagian tag <BODY> digunakan untuk mendefinisikan teks beserta

formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini

bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link,

vlink, alink, leftmargin dan topmargin.

1) Background : digunakan untuk mengatur latar belakang dengan

gambar/image.

2) Bgcolor : digunakan untuk mengatur warna latar belakang

dokumen, dengan warna putih sebagai default-nya.

3) Teks : digunakan untuk mengatur warna teks dokumen,

dengan warna hitam sebagai warna default.

4) Link : Untuk mengatur warna link dokumen dengan warna

biru sebagai warna default

5) Vlink : Untuk mengatur warna visited link dokumen dengan

default ungu

6) Alink : digunakan untuk mengatur warna active link dokumen

dengan default merah.

2.2.2 Membuat Heading

Heading digunakan untuk mengatur ukuran huruf pada header. Tag

heading <Hn>..</Hn>, "n" mempunyai nilai antara 1 - 6 atau antara <H1>

sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6>

merupakan ukuran terkecil.



Dalam banyak dokumen, heading pertama digunakan sebagai judul

tulisan. Heading ini mempunyai atribut untuk menentukan letak tulisan, di kiri,

kanan ataupun tengah. Jika atribut ini tidak ditambahkan, maka heading akan

otomatis rata kiri. Contoh penggunaannya : <HTML>

<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>

<BODY>

My Homepage

<H1>Heading tingkat 1</H1>






<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>

Tampilan dari script diatas dapat dilihat pada gambar berikut ini :

Gambar 2-3 Contoh Heading



2.2.3 Memformat Paragraf

Dalam membuat paragraf, ada beberapa hal yang harus diperhatikan.

Dengan adanya perbedaan browser web yang berjalan pada komputer yang

berbeda, memiliki kemampuan untuk menampilkan grafis yang berbeda

sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda.

Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk

browser web yang memiliki ukuran satu halaman penuh dan yang tidak.

Untuk membuat paragraf ini digunakan tag <P>, hal yang perlu dicatat

adalah tag <P> ini akan mengabaikan spasi dan pindah baris. Dalam

pembuatan paragraf pun, kita bisa menggunakan atribut ALIGN untuk

mengatur letak paragraf, rata kiri, tengah ataupun rata kanan. Attribut align

mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

Contoh penggunaan paragraf dapat dilihat pada script berikut ini.

<HTML>

<HEAD>

<TITLE> Belajar membuat HTML yuk </TITLE>

</HEAD>

<BODY>

<H2>My Homepage</H2>

<h3>Paragraf rata kiri</h3>

<P ALIGN=LEFT>Lajunya perkembangan Teknologi Informasi

semakin meningkatkan penggunaan sumber daya

yang bersifat digital. Sejak kemunculan internet, merupakan

suatu titik terang bukan hanya bagi masyarakat IT, tetapi

sekarang sudah berdampak ke seluruh lapisan masyarakat.

</P>

<h3>Paragraf rata tengah</h3>

<P ALIGN=CENTER>Lajunya perkembangan Teknologi Informasi



suatu titik terang bukan hanya bagi masyarakat IT,

tetapi sekarang sudah berdampak ke seluruh lapisan

masyarakat.

</P>



<h3>Paragraf rata kanan</h3>

<P ALIGN=RIGHT>Lajunya perkembangan Teknologi Informasi



suatu titik terang bukan hanya bagi masyarakat IT, tetapi

sekarang sudah berdampak ke seluruh lapisan masyarakat.

</P>

</BODY>

</HTML>

Tampilan di browser akan seperti ini.

Gambar 2-4 Contoh Format Paragraf

2.2.4 Line Breaks

Line breaks digunakan untuk menambahkan baris baru pada teks dalam

dokumen HTML dengan cara menambahkan tag <BR>. <CENTER>

digunakan untuk membuat teks dalam posisi di tengah. Setiap teks yang



terdapat diantara <CENTER> dan </CENTER> akan ditempatkan di tengah-

tengah margin kiri dan kanan.

Contoh script penggunaan Line Breaks dan <CENTER> :

<HTML>

<HEAD>


</HEAD>

<BODY>


<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



2.2.5 Teks Preformat

Berbeda dengan pembuatan paragraf yang mengabaikan setiap

tambahan spasi, tag <PRE> ini akan membuat spasi ikut diperhitungkan.

Dengan kata lain tag <PRE> akan menampilkan teks pada halaman web sesuai

dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat.

Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom, yang

membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut

ini contoh penggunaan dari tag <PRE>.

<HTML>


<BODY>


<h3>Penggunaan Teks Preformat</h3>

Contoh dibawah adalah penggunaan tag Preformat untuk

membuat tabel<br>

<PRE>

Tabel data mahasiswa

----------------------------------

Nama Umur

----------------------------------

Adi Sasongko 19

Budi Swarga 20

Chev Sampurna 18

Della Rossa 19

----------------------------------

</PRE>

</BODY>

<HTML>

Hasil :

Gambar 2-6 Contoh Penggunaan Teks Preformat



2.2.6 Memformat Bentuk Tulisan

Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan.

Cara menggunakannya adalah awali dengan <tag>, terus masukkan tulisan

yang akan diatur dan akhiri dengan </tag>. Tag-tag yang dapat digunakan

untuk mengatur teks adalah :

<B> Bold text

<I> Italic text

<U> Underscore

<TT> Typewriter

<S> Strikeout - draws a line through the text

<BLINK> Text berkedip (lebih baik jangan digunakan)

<CITE> Digunakan untuk quoting text

<BIG> Ukuran teks akan lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran

<SUP> Membuat tekssuperscript

<SUB> membuat tekssub script

<ABBREV> Abbreviations

<ACRONYM> Untuk akronim

<PERSON> Digunakan untuk indexing

<Q> Membuat short inline quotation

<VAR> Membuat variable name, selalu dalam italics.

Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini. <HTML>


<BODY>


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>



Tampilan dari Script di atas akan terlihat seperti berikut ini.

Gambar 2-7 Contoh Menggunakan Tag pada Teks

2.2.7 Tag Font

Tag <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag

FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.



SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang

digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan

7 merupakan ukuran terbesar.

FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa

memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma.

Bila terdapat spasi yang terletak pada nama font maka harus digunakan

tanda garis bawah (_). Dalam memilih jenis font ini harus

dipertimbangkan apakah font yang kita gunakan pada halaman web kita

nantinya akan terdapat pada komputer pengguna yang lain (pengakses

web kita). Pendeknya kita tidak usah menggunakan font-font yang

bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan

menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama

warna (red misalnya).

Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini.

<html>

<head>

<title>::: Ukuran, Jenis dan Warna Font:::</title>

</head>

<body>

<font size=1 Face=arial color=#FF0000>Ukuran font 1</font><br>

<font size=2 Face=arial color=green>Ukuran font 2</font><br>

<font size=3 Face=arial color=blue>Ukuran font 3</font><br>

<font size=4 Face=verdana color=red>Ukuran font 4</font><br>

<font size=5 Face=verdana color=blue>Ukuran font 5</font><br>

<font size=6 Face=tahoma color=green>Ukuran font 6</font><br>

<font size=7 Face=tahoma color=red>Ukuran font 7</font><br>

</body>

</html>

Hasilnya :



Gambar 2-8 Contoh Tag Font dan Atributnya

2.2.8 Karakter Spesial

Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar

(>), tanda dan (&) dan kutip ganda (“), yang mempunyai arti khusus dan

digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara

langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan

karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu

karakter spesial untuk menggantikan karakter-karakter di atas.

Karakter spesial tersebut antara lain : < karakter spesial untuk <

> karakter spesial untuk >

& karakter spesial untuk &

" karakter spesial untuk "

@ karakter spesial untuk @

© karakter spesial untuk ©

© karakter spesial untuk ©

® karakter spesial untuk ®

® karakter spesial untuk ®

karakter spesial untuk spasi yang tak dapat dipecah



Dibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial

dalam dokumen HTML :

<HTML>

<HEAD>


</HEAD>

<BODY>


<h3>Penggunaan Karakter Spesial</h3>

Berikut ini contoh penggunaan karakter spesial<br>

Sekarang kita mencoba menggunakan tanda lebih kecil seperti

ini < dan

sekarang kita akan coba menggunakan tanda lebih besar

seperti ini >.

Bagaimana? dapat terlihat kan? yang akan ditampilkan saat

ini adalah tanda dan &.

tanda kutip ganda " dan tanda @ seperti yang

sering digunakan dalam alamat email.

Pernah lihat tanda © atau tanda © atau tanda

® atau tanda ®.

Pasti salah satunya sudah pernah lihat kan?

&nbsp

;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa

spasi

di kalimatnya.

</BODY>

</HTML>

Hasilnya akan terlihat seperti gambar di bawah ini.



Gambar 2-9 Contoh Penggunaan Karakter Spesial

2.2.9 Membuat Garis Horizontal

Tag <HR> digunakan untuk membuat garis horizontal pada jendela

browser. Defaultnya adalah membuat garis yang solid.

Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.

<HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D.

<HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel,

default 2.

<HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan

garis.

<HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis

dengan letak sebelah kiri (left), kanan (right) atau tengah (center-default).

Contoh pembuatan garis horizontal :

<HTML>


<BODY>


<h3>Membuat Garis Horizontal</h3>

HarisV3

Sticky Note

continue from here



Garis horizontal biasa (Shade dan solid) <HR>

Garis horizontal No Shade <HR NOSHADE>

Garis horizontal dengan ukuran 10 (berongga, bukan solid)

<HR SIZE=10>

Garis horizontal dengan Lebar 100

<HR WIDTH=100>

Garis horizontal dengan lebar 50% dari lebar dokumen

<HR WIDTH=50%>

Garis horizontal dengan lebar 100 dan diletakkan di

sebelah kiri

<HR WIDTH=100 ALIGN=LEFT>

Garis horizontal dengan ukuran 10, lebar 100 dan

diletakkan di sebelah kanan

<HR SIZE=10 WIDTH=100 ALIGN=RIGHT>

</BODY>

</HTML>


Gambar 2-10 Contoh membuat Garis Horizontal



2.3 List

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian

rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa

tanda-tanda khusus/simbol.

Terdapat tiga tipe list yang dapat digunakan, yaitu:

2.3.1 List Tanpa Urutan (Unordered Lists)

Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak

bernomor). List entri didefinisikan dengan tag <LI>. Pada jenis ini tidak

memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang

akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini :

Tabel 2-1 Tabel Jenis Bullet

Tipe Penjelasan

Disc Bullet berbentuk cakram

Circle Bullet berbentuk lingkaran

Square Bullet berbentuk kotak

Contoh penggunaannya adalah sebagai berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>

<h3>Membuat List tanpa urutan</h3>

<UL>

<LI>apel</LI>

<LI>jeruk</LI>

<LI>mangga</LI>

<LI>jambu</LI>

</UL>

</BODY>

</HTML>




Gambar 2-11 Contoh Unordered List

2.3.2 List Berurut (Ordered Lists)

<OL> Juga digunakan untuk membuat daftar item bernomor, dengan

tiap item dapat menggunakan angka arab atau romawi. List entri juga

didefinisikan dengan tag <LI>.

Contoh pembuatan list berurut adalah sebagai berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>

<h3>Membuat List berurut</h3>

<OL>

<LI>apel</LI>

<LI>jeruk</LI>

<LI>mangga</LI>

<LI>jambu</LI>

</OL>

</BODY>

</HTML>




Gambar 2-12 Contoh Ordered List

Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa

type penomoran yang dapat digunakan pada ordered list ditunjukkan pada

tabel di bawah ini :

Tabel 2-2 Tipe Penomoran pada Ordered List

Tipe Penjelasan

I Angka ditampilkan dalam angka romawi huruf besar

i Angka ditampilkan dalam angka romawi huruf kecil

a Angka ditampilkan dalam abjad huruf kecil

A Angka ditampilkan dalam abjad huruf besar

Pada tag <OL> juga terdapat atribut START untuk memulai list dari nomor

tertentu. Pada tag <LI> terdapat atribut VALUE untuk melewati nomor yang

tidak diinginkan.

Contoh penggunaannya adalah sebagai berikut: <HTML>


<BODY>

<h3>Membuat List berurut</h3>

Contoh penggunaan atribut START dan VALUE<br>

<OL START=3>



<LI>apel</LI>

<LI>jeruk</LI>

<LI VALUE=7>mangga</LI>

<LI>jambu</LI>

</OL>

Contoh penggunaan atribut START dan VALUE dengan

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>

Gambar 2-13 Contoh Penomoran dengan Ordered List



2.3.3 Definition Lists

Definition lists biasanya digunakan untuk membuat suatu list singkatan

dan definisinya atau istilah-istilah. Definition List dinyatakan dengan tag <DL>

dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu

bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan

penjabaran dari istilah.

Contoh :

<HTML>


<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



2.3.4 List Bersarang (Nested Lists)

Dalam pembuatan list bersarang menggunakan tag-tag yang telah

dijelaskan sebelumnya seperti tag <UL>, <OL> dan <LI>. Contoh pembuatan

list bersarang adalah sebagai berikut :

<HTML>


<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



Rangkuman

1. HyperText Markup Language adalah bahasa yang digunakan untuk

membuat suatu situs web atau homepage.

2. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat

case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. 3. Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan

mengatur warna latar belakang, format teks, pewarnaan teks dan

pengaturan paragraf.

4. List ada tiga macam antara lain : ordered list, unordered list dan

definition list. Dari ketiga macam list tersebut dapat dibuat bentuk List

Bersarang.

Latihan

1. Jelaskan masing-masing fungsi dari tag-tag berikut ini :

a. <h3>

b. <br>

c. <sub>

d. <b>

e. <small>

2. Jelaskan perbedaan antara <p> dan <pre>!

3. Untuk pengaturan font dapat digunakan atribut size, face dan color.

Jelaskan masing-masing atribut tersebut dan berikan conroh

penggunaannya!

4. Tuliskan tag HTML untuk karakter spesial @, &, ©, ®, spasi!

5. Sebutkan jenis-jenis list yang ada pada dokumen HTML!

6. Tuliskan perintah HTML untuk membuat list dengan menggunakan

penomoran angka Romawi!


Link dan Gambar 3-1

3 LINK DAN GAMBAR

Overview

Keunggulan dokumen HTML adalah dapat melakukan link ke dokumen yang

berlainan atau ke dokumen yang sama. Selain menggunakan teks sebagai link,

dapat pula menggunakan gambar maupun aplikasi multimedia sebagai link.

Menggunakan relative links lebih memudahkan dalam manajemen file apabila

terjadi perpindahan aplikasi web ke komputer yang berbeda.

Tujuan

1. Membuat link antar dokumen HTML

2. Relative Links versus Absolute Pathnames

3. Membuat link ke bagian tertentu dari dokumen (anchor) yang sama

4. Memasukan gambar ke halaman HTML

5. Membuat link dari gambar


Link dan Gambar 3-2

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. Keterhubungan antara satu dokumen dengan dokumen yang lain

2. Keterhubungan kepada suatu bagian pada dokumen itu sendiri

Sintak tag link adalah sebagai berikut:

<A href=url_tujuan>nama_link</A>

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. Link relatif

Link ini menggunakan alamat relatif file dituju.

Misal : <a href=”tujuan.htm”>Tujuan</a>

2. Link absolut

Link ini menggunakan alamat absolut file yang dituju.

Misal : <a href=”c:/my documents/tujuan.htm”>Tujuan</a>

3. 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 Kegunaan

Href Menunjukkan url yang dituju

Name Memberikan nama pada bagian tertentu pada dokumen

Target Menunjukkan target ditampilkannya link

Title Menunjukkan title dari link ketika cursor digerakkan di

sekitar area hyperlink


Link dan Gambar 3-3

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>


</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-4

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

HarisV3

Sticky Note

this time here


Link dan Gambar 3-5

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:[email protected]”>

Layanan Customer</A>

</BODY>

</HTML>

http://www.mtv.com/jadwal.html

http://www.mtv.com/jadwal.html

http://www.mtv.com/

http://www.mtv.com/index.html

http://www.mtv.com/public/.www/index.html


Link dan Gambar 3-6

Tampilannya sebagai berikut :

Gambar 3-3 Contoh Link untuk Mengirim Email

3.1.3 Membuat Link ke Bagian Tertentu dalam Dokumen

Untuk membuat link ke bagian tertentu dalam dokumen yang sama,

harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen

adalah tujuan / target link, jika dalam dokumen yang sama yang dituju adalah

nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file /

dokumen yang bersangkutan.

Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada

tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah

nama file dalam URL. Misal:

<A HREF=”#sejarah”> Bab 1 </A>

atau dapat ditulis lengkap:

<A HREF=”belajar_html.htm#sejarah”> Bab 1 </A>

dan untuk nama anchornya:

<A NAME=”sejarah”>1.1 Sekilas Sejarah Internet</A>

Contoh penggunaan :

<HTML>

<HEAD>

<TITLE>Membuat Link Ke Bagian dalam Dokumen</TITLE>

</HEAD>


Link dan Gambar 3-7

<BODY>

<H4>Membuat Link ke Bagian dalam Dokumen</H4>

<A NAME="bab1"></A>

<B>Bab 1</B><BR>

Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<BR>

Mulai dari membuat dokumen HTML yang sederhana sampai membuat

sebuah web.<Br>

Sebagai pendahuluan, coba klik link ini untuk

<A HREF="#sejarah">menuju ke bagian lain</A> pada dokumen ini..

<P> </P>

<P> </P>

<P> </P>

<P> </P>

<P> </P>

<P> </P>

<P> </P>

<P> </P>

<P> </P>

<A NAME="sejarah"></A>

<B>1.1 Sekilas Sejarah Internet</B><BR>

Bab ini adalah bagian lain pada dokumen yang dituju ketika link

pada Bab 1 diklik.<BR>

Untuk kembali ke Bab 1, klik <A HREF="#bab1">disini</A>

</BODY>

</HTML>

Hasilnya:

Gambar 3-4 Contoh Link ke Bagian Tertentu dalam Dokumen

HarisV3

Typewritten Text

Finally I Can understand this :-P


Link dan Gambar 3-8

3.2 Gambar

Untuk menampilkan gambar atau animasi gif pada halaman web

menggunakan tag sebagai berikut :

<IMG SRC=”nama_file_gambar”>

Beberapa atribut yang digunakan pada tag <img> antara lain :

Tabel 3-2 Jenis-Jenis Atribut pada Tag <img>

Atribut Kegunaan

Alt Menampilkan alternatif text pada image jika mouse

berada diatasnya

Align Mengatur perataan posisi gambar (center, left, right)

Border Mengatur lebar border/bingkai pada gambar

Height Mengatur tinggi image

Hspace Mengatur letak gambar

Src Menentukan sumber file, lokasi dimana file disimpan

Width Mengatur lebar image

Vspace Mengatur letak gambar

Contoh :

<HTML>

<HEAD>

<TITLE>Judul dari Dokumen HTML</TITLE>

</HEAD>

<BODY>

<img src="BlueLace.gif" ALT="Gambar Gelembung" width="48"

height="48">

<HR>

<img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Midlle

width=30% height="48">

Teks ini di bagian tengah dari tinggi gambar dengan

lebar=30%<HR>

<img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Bottom

width="48" height="48">

Teks ini terletak pada bagian bawah dari tinggi gambar

<HR>

<img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Right



Link dan Gambar 3-9

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


Gambar akan terletak di sebelah kiri teks

<BR><BR><BR><BR>

<img src=" BlueLace.gif" ALT="Gambar Gelembung" ALIGN=Top


Teks ini terletak pada bagian atas dari tinggi gambar

</BODY>

</HTML>

Gambar 3-5 Contoh Penggunaan Atribut pada Tag <img>


Link dan Gambar 3-10

3.2.1 Gambar sebagai Hyperlink

Untuk menjadikan image sebagai hyperlink, dapat dilakukan seperti

contoh di bawah ini: <HTML>

<HEAD>

<TITLE>Halaman Awal</TITLE>

</HEAD>

<BODY>

<H4>Selamat Datang di Situs Pribadi Saya</H4>

untuk bisa menjelajahi situs ini, silahkan klik pada

gambar berikut

<A HREF="contoh_4.2.htm">

<IMG SRC="lambang_poltek_telkom.bmp" ALT="Link

Menggunakan Image"></A>

<BR><BR>

Selamat menikmati penjelajahan di situs ini.

</BODY>

</HTML>

Hasilnya seperti gambar di bawah ini :

Gambar 3-6 Contoh Gambar sebagai Hyperlink


Link dan Gambar 3-11

Rangkuman

1. Kelebihan dari HTML adalah kemampuannya untuk link

(menyambungkan) daerah teks ataupun gambar ke dokumen yang lain.

2. Link dibagi dalam dua kategori, yaitu link antara satu dokumen dengan

dokumen yang lain dan link kepada suatu bagian pada dokumen itu

sendiri. 3. Ada tiga istilah dalam pengalamatan link, yaitu link relatif, link absolut dan

link dalam dokumen yang sama.

4. Penggunaan relative link penulisannya lebih pendek, selain itu akan

memudahkan jika diharuskan memindahkan grup dokumen ke lokasi yang

lain karena relative path tersebut akan tetap bisa digunakan.

5. Absolute Pathname digunakan ketika kita diharuskan membuat link ke

lokasi yang tidak secara langsung terkait. Untuk penggunaan Absolute

Pathname ini diharuskan mencantumkan URL yang menspesifikasikan

lokasi suatu file dalam server yang lain.

6. Untuk menampilkan gambar dalam dokumen HTML menggunakan tag

<IMG>.

7. Sebuah gambar dapat dijadikan link ke dokumen tertentu.

Latihan

1. Link pada dokumen HTML dapat digunakan untuk apa saja?

2. Terdapat tiga istilah pengalamatan link, jelaskan disertai contohnya!

3. Berikan contoh penggunaan link yang ditujukan untuk mengirimkan email

ke alamat tertentu!

4. Jelaskan fungsi atribut alt pada penyisipan gambar di dokumen HTML!

5. Berikan contoh penggunaan gambar sebagai hyperlink ke suatu alamat

tertentu!

HarisV3

Typewritten Text

FUUUUH WHAT A LESSON :-) :-D

HarisV3

Inserted Text


Form 4-1

4 FORM

Overview

Untuk dapat berinteraksi secara lebih menarik, dalam dokumen HTML harus

mampu menyediakan fasilitas yang dapat menerima masukan atau isian data

dari user. Data isian dari pengguna ini untuk kemudian dapat diproses lebih

lanjut menjadi informasi yang dibutuhkan baik oleh user maupun oleh pemilik

web itu sendiri. Pengguna web dapat memasukkan inputan pada dokumen

HTML melalui elemen form.

Tujuan

1. Membuat form pada dokumen HTML

2. Mengerti cara penggunaan form pada halaman dokumen HTML.

3. Mampu menggunakan Input Field sesuai kegunaannya.

HarisV3

Typewritten Text

YEAAAH! LET'S DO IT


Form 4-2

4.1 Form

Form dalam HTML digunakan untuk menerima masukan atau isian dari

user untuk kemudian diolah lebih lanjut menjadi informasi yang dibutuhkan,

baik oleh user ataupun pihak yang mempunyai web. Elemen dari form HTML

adalah <FORM> yang menunjukkan awal dari suatu form HTML dan diakhiri

dengan </FORM>. Dalam sebuah dokumen dapat mempunyai lebih dari satu

form HTML.

Kegunaan Form

Berikut ini beberapa contoh kegunaan Form dalam web:

Memperoleh data-data user baik nama, alamat dan data lainnya.

Untuk mendaftar pada service yang di sediakan.

Memperoleh informasi pembelian secara online.

Memperoleh feedback dari user mengenai website anda.

Sintak penulisan form adalah:

<form method=”post atau get” action=”program_pemroses”>

elemen-elemen FORM

</form>

Tag <FORM> digunakan untuk membuat form dalam dokumen HTML.

Tabel 4-1 Jenis- Jenis Atribut dalam Tag <FORM>

Atribut Deskripsi

METHOD Menentukan bagaimana data akan di kirim ke server.

GET – data akan di kirim dengan menggunakan query string

pada URL.

POST – data akan di kirim ke server sebagai block data ke

script.

Syntax:

METHOD=”POST|GET”

ACTION Menentukan lokasi dari script yang akan memproses data dari

form

Syntax:

ACTION=”URL”


Form 4-3

4.2 Membuat Input Field

Dalam form, kita dapat membuat input atau kotak isian yang dapat diisi

dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isian

adalah tag <INPUT>. Tipe-tipe input yang tersedia adalah sebagai berikut :

1. Type=TEXT

Kotak isian bertipe teks ini menerima data karakter (default) sebanyak

satu baris.

Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text

Atribut Deskripsi

Name Nama variable dari control yang akan menyimpan nilai

dari input field

Type <INPUT TYPE=”TEXT”>

Value Untuk memberikan value ke input field

Size Jumlah karakter dari input field

Maxlength jumlah karakter maksimum untuk input field

Contoh :

<INPUT TYPE=”TEXT” NAME=”textbox1” VALUE=”” SIZE=”20”>

Tampilan :

2. TYPE=PASSWORD

Kotak isian bertipe password ini menerima data karakter, tapi tidak akan

ditampilkan karena kebutuhan masukan password yang bersifat rahasia.

Atribut nya sama dengan input field type text.

Contoh :

<INPUT TYPE="PASSWORD" NAME="PWD" VALUE="" SIZE=”20”>

Tampilan :

3. TYPE=CHECKBOX Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan

atau tidak memilih sama sekali, dengan memberikan tanda pada checkbox

tersebut.


Form 4-4

Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox

Atribut Deskripsi

Checked Untuk memberi default check

Name Nama variable dari control yang akan menyimpan nilai dari input field

Type <INPUT TYPE=”CHECKBOX”>

Value Untuk memberikan value ke input

Size Ukuran control

Tampilan :

4. TYPE=RADIO

Hanya mengijinkan memilih satu dari banyak pilihan. Setiap radio button

control harus memiliki nama yang sama, sehingga user hanya bisa memilih

satu option saja. Radio button juga harus secara explisit memberikan nilai

ke atribut value.

Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio

Atribut Deskripsi

Checked Untuk memberi default check

Name Nama variable dari control yang akan menyimpan

nilai dari input field

Type <INPUT TYPE=”RADIO”>

Value Untuk memberikan value ke input

Size Ukuran control

Tampilan :

5. TYPE=BUTTON

Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button

Atribut Deskripsi

Name Nama variable dari kontrol yang akan menyimpan



Form 4-5

Type <INPUT TYPE=”SUBMIT”> : Mengirimkan

form ke URL yang telah didefinisikan pada atribut

ACTION pada tag <FORM>

<INPUT TYPE=”RESET”> : Browser mengembalikan field dalam form ke dalam nilai

default(mengosongkan nilai semua elemen form).

Value Memberikan nama label pada button

Size Menentukan lebar button

Contoh :

<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT">

Tampilan :

<INPUT TYPE="RESET" NAME="RESET" VALUE="RESET">

Tampilan :

6. Tag <TEXTAREA>

Tag ini digunakan untuk membuat input teks yang lebar, bisa menampung

lebih banyak karakter dibanding input field bertipe TEXT.

Teks yang berada diantara tag <TEXTAREA> dan </TEXTAREA> secara

default akan ditampilkan sesuai aslinya.

Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea

Attribute Deskripsi

Name Nama variable dari control yang akan menyimpan nilai

dari input field

Rows Jumlah baris

Cols Lebar kolom text area

Wrap WRAP=PHYSICAL – tampilan word-wraps. Default

WRAP=OFF

Contoh :

<HTML>

<TEXTAREA NAME=”text1” COLS=20 rows=5></TEXTAREA>

</HTML>


Form 4-6

Tampilan :

7. TYPE=IMAGE NAME=SUBMIT SRC=”…”

Mengirimkan informasi form seperti halnya tombol Submit, hanya

berbentuk gambar.

Contoh :

<INPUT TYPE="IMAGE" NAME="SUBMIT" SRC="submit.jpg">

Tampilan :

8. Tag <SELECT> dan <OPTIONS>

Digunakan untuk membuat input field yang berbentuk pilihan. Tag

<SELECTION> dan <OPTION> ini harus digunakan secara bersama-

sama. Tag <OPTION> ini mendefinisikan pilihan dari item-item. Tag ini

dipasangkan diantara tag <SELECT> dan </SELECT>.

Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select

Atribut Deskripsi

Name Nama variable dari control yang akan menyimpan


Value Teks yang ditampilkan pada tombol, default =

“Submit Query”

Size Untuk menentukan jumlah baris yang di tampilkan

Multiple Untuk menentukan apakah user boleh memilih lebih

dari satu option atau tidak.

Selected Pilihan ini dipilih secara default.


Form 4-7

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 size = "3", maka tampilannya sebagai berikut :

Rangkuman

1. Form digunakan untuk menerima masukan berupa informasi atau data

dari pengguna.

2. User memasukkan informasi melalui sejumlah elemen yang disebut

kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD,

CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU.

3. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan

metoda POST.

Jika di klik panah ke bawah


Form 4-8

Latihan

1. Apa fungsi dari form pada dokumen HTML?

2. Apa perbedaan checkbox dan radio button?

3. Apakah fungsi dari tombol Submit dan Reset?

4. Apa perbedaan penanganan form menggunakan metoda GET dan POST?

5. Buatlah dokumen HTML seperti tampilan di bawah ini, jika ada

penekanan tombol kirim, maka hasilnya akan dikirimkan ke e-mail anda :


Layout Halaman Web 5-1

5 LAYOUT HALAMAN WEB

Overview

Salah satu metode yang dapat dilakukan dalam membuat layout dokumen

HTML adalah menggunakan tabel. Dengan menggunakan tabel kita dapat

membagi dokumen HTML ke dalam bagian-bagian yang masing-masing bagian

tersebut mempunyai ruang. Hampir semua web site yang berkualitas dan

profesional, dirancang dengan menggunakan tabel. Layaknya sebuah

spreadsheet yang memiliki sel dan berisi angka-angka, tabel dalam web juga

mempunyai sel yang berisi link, gambar dan text.

Selain menggunakan tabel, layout halaman web juga dapat dibuat

menggunakan frame yang masing-masing bagian frame dihubungkan dengan

dokumen HTML yang terpisah.

Tujuan

1. Membuat dan memformat tabel pada halaman dokumen HTML

2. Memahami pembuatan frame pada dokumen HTML

3. Memahami penggunaan frame

4. Memahami pembagian tampilan layar ke dalam beberapa bagian, yang masing-masing dihubungkan dengan dokumen HTML yang terpisah

5. Mengatur border pada frame

6. Menentukan target frame cells dari hypertext links



5.1 Tabel

Tabel merupakan cara untuk menampilkan informasi dalam halaman

web dengan bentuk kolom dan baris.

5.1.1 Membuat Tabel

Untuk membuat tabel dalam dokumen HTML, kita dapat menggunakan

tag <TABLE>. Dalam 1(satu) tabel terdiri atas baris dan kolom. Elemen

pendukung dalam pembuatan tabel di dokumen HTML adalah :

1. Table Heading

Table heading diwakili dengan tag <TH>, digunakan untuk memberikan

judul kolom pada tabel. 2. Table Row

Table row merupakan penyusun baris pada tabel.

Diwakili dengan tag <TR>.

3. Table Data

Table data adalah bagian yang digunakan untuk mengisikan informasi

yang akan ditampilkan di web browser. Diwakili dengan tag <TD>.

Table data selalu berada di dalam table row. Biasa disebut kolom.

Susunan sederhana dalam membuat tabel di dokumen HTML sebagai berikut :

<TABLE>

<TH>... berisi judul tabel</TH>

<TR>

<TD>

... berisi informasi yang ditampilkan di web browser

</TD>

</TR>

</TABLE>

Beberapa atribut yang bisa ditambahkan dalam tag <TABLE> adalah

sebagai berikut :

Tabel 5-1 Jenis-Jenis Atribut pada Tag <TABLE>

Atribut Kegunaan

Align Untuk mengatur alignment tabel

Background Menambahkan image sebagai background pada tabel

Bgcolor Untuk mengatur warna background tabel

Border Untuk mengatur besar border table (dalam pixel),

default=0

HarisV3

Sticky Note

Checkpoint



Bordercolor Mengatur warna border

Cellpadding Mengatur jarak antara border dengan isi cell

Cellspacing Mengatur jarak antar cell

Height Mengatur tinggi tabel

Width Mengatur lebar tabel (dalam pixel atau persen)

5.1.2 Menambahkan Judul Tabel

Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel

yang bisa berada dibawah atau diatas tabel. Secara default caption diletakkan

dibagian atas suatu tabel, tetapi juga dapat diletakkan dibawah suatu tabel

dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption

tersebut.

Contoh pembuatan tabel adalah sebagai berikut :

<HEAD>


</HEAD>

<BODY>

<h3>Membuat Tabel dengan Judulnya</h3>

<TABLE BORDER=2 WIDTH=50% BGCOLOR="Sky Blue">

<CAPTION>

Tabel 3.1 Prakiraan cuaca di kota besar

</CAPTION>

<TH>Kota</TH>

<TH>Cuaca</TH>

<TR>

<TD>Bandung</TD>

<TD>Hujan</TD>

</TR>

<TR>

<TD>Jakarta</TD>

<TD>Cerah</TD>

</TR>

</TABLE>

<BR>Contoh penggunaan judul tabel yang terletak di bawah

tabel<BR><BR>

<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER

BACKGROUND="Garden.JPG">

<CAPTION ALIGN=bottom>

Tabel 3.1 Prakiraan cuaca di kota besar

</CAPTION>



<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>

Gambar 5-1 Contoh Pembuatan Tabel

5.1.3 Memformat Baris

Seperti yang sudah dijelaskan di atas, salah satu elemen pendukung

tabel pada dokumen HTML adalah table row. Untuk memudahkan kita sebut



saja sebagai baris (row). Setiap tabel pasti terdiri atas baris – baris yang

diwakili dengan tag <TR>.

Tabel 5-2 Jenis – Jenis Atribut pada Tag <TR>

Atrribut Kegunaan

Align Mengatur rataan (horizontal)

Terdapat 3 (tiga) pilihan : left, center, atau right

Bgcolor Mengatur warna yang dijadikan background


Height Mengatur tinggi baris

Valign Mengatur rataan (vertikal)

Terdapat 3 (tiga) pilihan : top, middle, bottom

5.1.4 Memformat Kolom

Elemen pada tabel yang digunakan sebagai tempat untuk menuliskan

informasi yang nantinya akan ditampilkan di web browser adalah table data.

Untuk selanjutnya kita akan menyebut bagian ini sebagai kolom. Kolom dalam

dokumen HTML diwakili oleh tag <TD>.

Tabel 5-3 Jenis – Jenis Atribut pada Tag <TD>

Atrribut Kegunaan

Align Mengatur rataan (horizontal)

Terdapat 3 (tiga) pilihan : left, center, atau right

Background Menambahkan image sebagai background kolom

Bgcolor Mengatur warna yang dijadikan background


Colspan Menggabungkan kolom

Height Mengatur tinggi kolom

Rowspan Menggabungkan baris

Valign Mengatur rataan (vertikal)

Terdapat 3 (tiga) pilihan : top, middle, bottom

Width 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>



<TH>No</TH>

<TH>Barang</TH>

<TH>Jenis</TH>

<TH>Harga</TH>

<TH>Jumlah</TH>

<TH>Total Harga</TH>

<TR>

<TD ALIGN=CENTER>1</TD>

<TD>Pocari Sweat</TD>

<TD ROWSPAN=2>Minuman</TD>

<TD>Rp. 4500</TD>

<TD ALIGN=RIGHT>5</TD>

<TD>Rp. 22500</TD>

</TR>

<TR>


<TD>Nutrisari Jus Jeruk</TD>

<TD>Rp. 2450</TD>


<TD>Rp. 7350</TD>

</TR>

<TR>


<TD>Kacang Kulit Garuda</TD>

<TD ROWSPAN=3>Makanan</TD>

<TD>Rp. 9800</TD>


<TD>Rp. 19600</TD>

</TR>

<TR>


<TD>Tango Coklat</TD>

<TD>Rp. 2750</TD>


<TD>Rp. 2750</TD>

</TR>

<TR>


<TD>Snack Ringan</TD>

<TD>Rp. 6450</TD>


<TD>Rp. 12900</TD>

</TR>

<TR HEIGHT=30 BORDERCOLOR="RED">

<TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD>

<TD BGCOLOR="GRAY"><B>Rp. 65100</B></TD>

</TR>

</TABLE>

</BODY>

</HTML>



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. Secara default cell spacing ini bernilai 2.

Atribut CELLPADDING adalah jumlah spasi di antara border sel dan isi dari

sel. Secara default cell padding ini bernilai 1.

Contoh penggunaannya adalah seperti ini : <HTML>

<HEAD> <TITLE> Membuat CELLSPACING & CELLPADDING </TITLE> </HEAD>

<BODY>

<TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10>

<CAPTION>Peringkat Kejuaraan Catur</CAPTION>

<TH>Peringkat</TH>

<TH>Medali</TH>

<TH>Pemenang</TH>

<TR>

<TD>1</TD>

<TD>Emas</TD>

<TD>Aditia Warman</TD>

</TR>

<TR>

<TD>2</TD>



<TD>Perak</TD>

<TD>Firmansyah</TD>

</TR>

<TR>

<TD>3</TD>

<TD>Perunggu</TD>

<TD>Indra Bekti</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Gambar 5-3 Contoh Pengaturan Cellspacing dan Cellpadding

5.1.6 Lebih Lanjut dengan Tabel

Tabel dalam halaman web dapat berisi hyperlink, gambar, gambar yang

menunjuk pada hyperlink dan teks dengan huruf yang berwarna. Sebagai

contoh, berikut ini akan ditunjukkan penggunaan tabel dengan berbagai

macam konten : <HTML>

<HEAD> <TITLE> Menyisipkan Gambar pada Tabel </TITLE> </HEAD>

<BODY>



<TABLE BORDER=2>

<CAPTION> Dokumentasi Fotograpi </CAPTION>

<TR>

<TD>1.</TD>

<TD>Pemandangan Awan</TD>

<TD ALIGN=CENTER>

<IMG SRC="dock.jpg" width="100" height="100"></TD>

</TR>

<TR>

<TD>2.</TD>

<TD>Hutan Lindung</TD>

<TD ALIGN=CENTER>

<IMG SRC="forest.jpg" width="100" height="100"></TD>

</TR>

<TR>

<TD>3.</TD>

<TD>Pinguin</TD>

<TD ALIGN=CENTER>

<A HREF="Student.html">

<IMG SRC="image.jpg" ALT="Pinguin"></A></TD>

</TR>

</TABLE>

</BODY>

</HTML>



Gambar 5-4 Contoh Penyisipan Gambar pada Tabel

5.2 Frame

Salah satu teknik pengaturan tata letak dokumen web yang telah

dipelajari sebelumnya adalah dengan menggunakan tabel. Pada pembahasan ini,



diperkenalkan teknik lain dalam mengatur tata letak dokumen web dengan

menggunakan frame.

Sama halnya dengan tabel, frame akan membagi web page dalam baris

dan kolom, bedanya, jika digunakan frame, web page akan terbagi menjadi

beberapa windows yang masing – masing bagian mempunyai nama (nantinya

akan menjadi target). Tiap bagian windows ini akan berisi web page. Jadi

dengan menggunakan frame, kita dapat menampilkan beberapa web page

dalam satu halaman. Sehingga tampilan halaman HTML yang salah satu atau

beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga

dapat menghemat bandwidth internet dan mempercepat proses download

secara keseluruhan.

Sintaks umum yang digunakan untuk membuat frame :

<HTML>

<HEAD>

</HEAD>

<FRAMESET BORDER=”#” { [ROWS | COLS] } = { #,[#,[...]] }>

<FRAME SRC=”url” NAME=”FrameName”>

</FRAMESET>

</HTML>

5.2.1 Frame Syntax

<FRAMESET>

Tag frameset ini mempunyai 2 buah atribut ROWS dan COLS. Frame

document ini tidak mempunyai BODY, tapi memiliki tag <FRAMESET> dan

diakhiri dengan tag </FRAMESET>. Di dalam FRAMESET ini hanya dapat

mempunyai tag FRAMESET lainnya, tag FRAME atau tag NOFRAMES.

ROWS=”list”

Digunakan untuk frame pembagi horizontal. Atribut ROWS memakai

daftar nilai yang dipisahkan dengan koma. Secara umum digunakan nilai

prosentase.

<FRAMESET ROWS=”10%,25%,65%”>

Jika totalnya tidak 100%, maka semua presentase akan diskalakan sehingga

total menjadi 100%. Untuk pengisian nilainya dimungkinkan juga menggunakan

nilai pixel selain menggunakan nilai prosentase, untuk menggunakan sisa space

pada layar bisa digunakan tanda *

<FRAMESET ROWS=”100,250,*”>



<FRAMESET ROWS=”100,*,300,100”>

COLS=”list”

Digunakan untuk frame pembagi vertikal. Atribut COLS memakai

daftar nilai yang dipisahkan dengan koma. Tag FRAMESET ini dapat bersarang

didalam tag FRAMESET yang lain.

<FRAMESET COLS=”20%,80%”>

<FRAMESET COLS=”200,*”>

<FRAME>

Mendefinisikan frame tunggal dalam frameset. Beberapa atribut yang sering digunakan adalah :

SRC=”url” :Atribut SRC ini berisi URL ke dokumen yang akan

ditampilkan pada frame ini.

NAME=”window_name” :Atribut NAME berisi nama frame yang bisa ditunjuk

oleh link pada dokumen yang lain, biasanya dari

frame lain pada dokumen yang sama. Atribut

NAME ini bersifat optional.

Frame bernama bisa mempunyai isi target window dengan menggunakan

atribut TARGET.

SCROLLING=”yes|no|auto”

Atribut SCROLLING mendeskripsikan apakah frame harus mempunyai

scrollbar atau tidak. Pilih “yes” jika diinginkan scrollbar selalu tampak pada

frame, pilih “no” jika tidak menginginkan scrollbar tidak tampak atau pilih

“auto” sehingga browser yang nanti menentukan akan menampilkan scrollbar

jika dibutuhkan. Atribut ini bersifat optional dan nilai defaultnya adalah auto.

NORESIZE

Atribut NORESIZE ini mengindikasikan jika frame tidak dapat di ubah

ukurannya oleh user. Secara default, semua frame dapat diubah ukurannya.

BORDERCOLOR=color

Memberi warna pada border yang memisahkan frame ini dengan yang

lain, misalkan BORDERCOLOR=green.

BORDERCOLOR dapat digunakan pada satu atau lebih <FRAME> atau

dengan <FRAMESET> untuk mengatur warna default pada semua border.

MARGINWIDTH=pix

Secara default, terdapat 8 pixel margin kiri dan kanan untuk setiap

frame yang dapat diperkecil ataupun diperbesar.



MARGINHEIGHT=pix

Secara default, terdapat 8 pixel margin atas dan bawah pada setiap

frame yang dapat diperkecil atau diperbesar.

5.2.2 Frame Target

Target frame digunakan untuk menentukan tujuan ditampilkannya

suatu informasi dari suatu link. Biasanya, target frame ini disesuaikan dengan

nama frame yang akan dijadikan tujuan menampilkan informasi tersebut.

Ada nama frame predefined yang dapat digunakan sebagai target, seperti yang

diperlihatkan pada tabel di bawah ini : _self, _top, _parent, _blank.

Tabel 5-4 Jenis – Jenis Target Frame

Nama Frame Kegunaan

_self Digunakan apabila target frame adalah frame tempat

link berada

_top Digunakan apabila target frame adalah windows

tempat frame berada. Dengan menggunakan _top

sebagai target, maka definisi frame yang ada pada

window browser akan hilang, diganti dengan definisi

frame yang baru jika ada

_parent Target frame adalah setingkat di atas frame link

berada

_blank Digunakan apabila hasil link ingin ditampilkan di

window baru

5.2.3 Penggunaan Frame

Pada bagian ini, kita akan mencoba menggunakan frame untuk membagi

halaman web menjadi 2 (dua) bagian atau lebih secara horizontal.

Sebelum mencoba frame baris, silahkan buat beberapa dokumen web yang

nanti akan ditampilkan di tiap frame. Misalkan terdapat tiga halaman yang akan

ditampilkan yang terdiri dari halaman header.htm, main.htm, jur_mi.htm.

1. header.htm <html>

<head>

<title>

Header Politeknik Telkom

</title>

</head>

<body>



<center>

<h3>Politeknik Telkom</h3>

<h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot

Bandung</h5>

<hr>

[ <a href="Jur_mi.html"> Manajemen Informatika </a> ]

[ <a href="#"> Komputer Akuntansi </a> ]

[ <a href="#"> Teknik Komputer </a> ]

</center>

</body>

</html>

2. main.htm <html>

<head>

<title>Main Politel</title>

</head>

<body>

<h3>Selamat datang di Politeknik Telkom</h3>

Saat ini kami berlokasi di Kampus Politeknik Telkom

<br>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung.<br>

Beberapa jurusan yang terdapat di Politeknik Telkom

diantaranya :

<ol>

<li>Jurusan Manajemen Informatika</li>

<li>Jurusan Komputer Akuntansi</li>

<li>Jurusan Teknik Komputer</li>

</ol>

</body>

</html>

3. jur_mi.htm

<html>

<head>

<title>Jurusan Manajemen Informatika</title>

</head>

<body>

<h3>Jurusan Manajemen Informatika</h3>

<hr>

Jurusan ini berkonsentrasi untuk mencetak lulusan yang

mampu menguasai teknologi ICT yang handal dan siap pakai.



Kurikulum yang dipersiapkan untuk mencapai tujuan tersebut

seperti diperlihatkan pada tabel berikut ini :

<table width="100%" border="1" cellpadding="1"

cellspacing="1">

<tr bgcolor="#e2e2e2">

<td>Tahapan</td>

<td>Mata Kuliah / Praktikum</td>

</tr>

<tr>

<td rowspan="7">Semester 1</td>

<td>Algoritma Pemrograman</td>

</tr>

<tr><td>Bahasa Inggris</td></tr>

<tr><td>Pengenalan Komputer</td></tr>

<tr><td>Praktikum Pascal</td></tr>

<tr><td>Praktikum Pengenalan Komputer</td></tr>

<tr><td>Praktikum Aplikasi Internet</td></tr>

<tr><td>Praktikum Dasar Jaringan Komputer</td></tr>

</table>

</body>

</html>

4. frame_baris.htm <html>

<head>

<title>Frame Baris</title>

</head>

<frameset rows="25%,75%">

<frame src="header.htm" scrolling="no">

<frame src="main.htm" name="main">

</frameset>

<noframes><body>

</body></noframes>

</html>



Gambar 5-5 Contoh Penggunaan Frame

Rangkuman

1. Pada dokumen HTML Untuk membuat layout ada dua cara, yaitu

menggunakan tabel dan menggunakan frame.

2. Tabel merupakan cara untuk menampilkan informasi dalam halaman web

dengan bentuk kolom dan baris.

3. Tabel, baris dan kolom dapat diformat menggunakan atribut-atribut yang

disediakan, seperti untuk mengatur ukuran tabel, mengatur letak tulisan

di dalam tabel, memberi warna pada latar belakang baris atau tabel,

menyisipkan gambar di dalam tabel dan sebagainya.

4. Frame dapat digunakan untuk membuat tampilan halaman HTML yang

terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian

merupakan satu halaman HTML terpisah.

HarisV3

Sticky Note

checkpoint



5. Untuk menampilkan link yang terdapat pada frame dapat ditentukan letak

halaman yang akan dituju dengan menggunakan atribut target.

Latihan

1. Jelaskan perbedaan antara rowspan dan colspan!

2. Jelaskan perbedaan cellspacing dan cellpadding!

3. Apa fungsi dari frame?

4. Apa perbedaan frame dan frameset?

5. Buatlah layout web seperti di bawah ini, layout dapat menggunakan dua

cara yaitu menggunakan tabel atau menggunakan frame.


CSS (Cascading Style Sheet) 6-1

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. CSS diperkenalkan untuk pengembangan website pada tahun 1996.

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat

diletakkan secara berurutan, yang kemudian akan membentuk hubungan

parent-child pada setiap style.

Penggunaan yang paling umum dari CSS adalah untuk memformat halaman

web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World

Wide Web Consortium (W3C). CSS memungkinkan halaman yang sama untuk

ditampilkan dengan cara yang berbeda untuk metode presentasi yang

berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser

basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML

atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi

gaya tampilan atau skema warna dengan menggunakan CSS.

Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas

browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati

dengan standar CSS.

Tujuan

1. Memberikan uraian tentang konsep dasar, sintaks CSS, dan pemanfaatannya untuk representasi dan layout dokumen pada lingkungan web



6.1 Keuntungan Menggunakan CSS

CSS digunakan untuk mempersingkat penulisan tag HTML seperti

font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi

pengulangan tulisan.

Cascading Style Sheet, tahap 1 (CSS1) yang dipopulerkan oleh World

Wide Web Consortium (W3C) telah menetapkan versi terbaru peselancar

Web Netscape dan Microsoft untuk menentukan jenis gaya yang mungkin

atau kenyataan yang menterjemahkan ciri-ciri elemen gaya dalam sebuah

halaman Web. CSS disediakan untuk memberikan kebebasan bagi para

desainer halaman web sesuai dengan yang dikehendakinya.

Keuntungan menggunakan CSS :

Memisahkan presentastion sebuah dokumen dari content document itu sendiri.

Mempermudah dan Mempersingkat pembuatan dan pemeliharaan

dokumen web

Mempercepat proses rendering/pembacaan HTML.

6.2 Penempatan CSS

6.2.1 Inline Style Sheet

Pada posisi ini, CSS dituliskan di dalam elemen HTML, dan mempunyai ciri –

ciri sebagai berikut :

Merupakan style yang terlemah karena editing harus dilakukan disemua bagian dimana inline berada

Mirip dengan atribut biasa.

Bagian dari <BODY>

Format Statement : SELECTOR {PROPERTY:VALUE}

Nama selector bisa merujuk ke tag HTML yang akan diedit, sebagai contoh

jika tag paragraf diubah dengan CSS maka dapat ditulis sebagai berikut :

P {PROPERTY:VALUE}

Contoh penggunaan inline style sheet :

<html>

<head>

<title>Contoh Inline CSS</title>

</head>



<body>

<p style="font-style:italic">Tulisan ini akan tercetak

miring</p>

</body>

</html>

Jika source tersebut dijalankan di web browser, maka akan didapatkan hasil

seperti yang diperlihatkan pada gambar di bawah ini :

Gambar 6-1 Contoh inline CSS

6.2.2 Embedded Style Sheet

Penulisan CSS didalam dokumen HTML dan menggunakan tag <style>….</style> yang ditempatkan pada bagian page header atau diantara

tag <head>…</head>. Penggunaan embedded style sheet akan memberikan

efek terhadap satu halaman saja.

Format Statement :

"HTML tag"{ "CSS Property":"Value" ; }

"HTML tag"{ "CSS Property1":"Value1"; "CSS Property2":"Value2"; ..}

Contoh penggunaan embedded style sheet :

<html>

<head>

<title>Embedded Style Sheet</title>

<STYLE type="text/css">

p {font-family: Arial, Helvetica, sans-serif; font-size: 12pt;

color:#FF0000}

</STYLE>

</head>

<body>

<p>Tulisan ini diformat menggunakan Embedded Style

Sheet</p>



</body>

</html>

Jika source tersebut dijalankan di web browser, maka akan didapatkan hasil

seperti yang terlihat pada gambar di bawah ini :

Gambar 6-2 Contoh penggunaan embedded style sheet

6.2.3 Linked Style Sheet

Style disimpan dalam file yang berbeda dari file HTML dan disimpan

dalam format ”.css”

Secara umum, linked style sheet memiliki ciri – ciri :

Disimpan di file lain sehingga sebuah file CSS dapat dipakai di banyak

file HTML lainnya

File hanya berisi style bukan tag html

Untuk menggunakan file lain yang berisi css pada file HTML, digunakan tag

<link> yang ditempatkan pada bagian page header atau diantara tag <head>

....</head>

Untuk menggunakan linked style sheet, setidaknya dibutuhkan 2 (dua) file yang

masing – masing berfungsi sebagai file css (yang akan dipanggil) dan file HTML

(yang akan memanggil).

Tahap pertama, buat sebuah file css dan simpan dengan menggunakan

nama file mystyle.css dengan isi script css sebagai berikut :

p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt;

color: #FF0000; font-style:italic}

Tahap kedua, buat sebuah file HTML yang disimpan pada direktori yang

sama dengan file css yang sudah dibuat dengan script HTML sebagai

berikut :

<html>

<head>



<title>Linked Style Sheet</title>

<link rel="stylesheet" href="mystyle.css"

type="text/css">

</head>

<body>

<p>Berikut ini contoh penerapan linked style sheet pada

paragraf</p>

</body>

</html>

Jika file HTML dengan script di atas dijalankan pada web browser, akan

didapatkan hasil seperti yang ditunjukkan pada gambar di bawah ini :

Gambar 6-3 Contoh penerapan linked style sheet

6.3 Aturan Penulisan pada CSS

Sintaks CSS dibagi dalam 3 bagian :

Selector {property : value}

Dimana :

Selector berisi tag HTML yang akan didefinisikan (body, H1, font, dll)

Property merupakan atribut yang akan di-set/diubah

Value merupakan nilai dari property

Contoh penulisan CSS :

H1

{

Font-family : arial;

Color : #0000FF

}

Keterangan :

H1 merupakan selector,

Color merupakan property, dan

#0000FF merupakan value

Contoh penulisan CSS yang salah :

H1

{

Font-family : “arial”;

Color : “#0000FF”

}

H1

{

Font-family : „arial‟;

Color : „#0000FF‟

}

Untuk mendeklarasikan properti secara berkelompok, dapat menggunakan

penghubung koma dan &. Contoh :

H1, H2 {color : green};

H3, H4 & H5 {color : red};

Untuk menuliskan komentar pada CSS dapat menggunakan salah satu dari 2

(dua) di bawah ini :

1. Menggunakan tanda : /* ….. */ 2. Menggunakan tanda : <!-- - - >

Satuan ukuran yang disediakan (pada bagian value) adalah :

Tabel 6-1Satuan ukuran untuk value

Satuan Ukuran Keterangan

em Untuk menentukan nilai desimal (pecahan)

Ex x-height, digunakan untuk menentukan ukuran yang

sifatnya vertical

px Pixels, menentukan ukuran yang bersifat pixel (layar

monitor) seperti ukuran huruf.

6.4 CSS Selector

CSS selector adalah bagian terpenting dari CSS. Selector mendefinisikan

elemen – elemen HTML mana saja yang akan dimanipulasi menggunakan kode

CSS.

Ada 4 (empat) macam selector :

1. Tag / elemen

Semua tag /elemen HTML yang berada pada bagian <body> merupakan

selector.

Contoh :



<html>

<head>

<title> Selector - Tag</title>

<style type="text/css">

h3{text-decoration: underline; text-align:center}

</style>

</head>

<body>

<h3> Tag heading ini dimodifikasi menggunakan

CSS</h3>

</body>

</html>

Jika script di atas dijalankan pada web browser, maka akan didapatkan

hasil seperti yang diperlihatkan pada gambar di bawah ini:

Gambar 6-4 Contoh selector tag

2. Selector bebas

Seorang web design dapat membuat tag sendiri yang difungsikan

sebagai CSS.

Contoh : <html>

<head>

<title> Selector - Bebas </title>


gbawah{text-decoration: underline;}

</style>

</head>

<body>

<gbawah> Efect Garis Bawah dengan Selector Bebas

</gbawah>

</body>

</html>



Jika script di atas dijalankan pada web browser, akan didapatkan hasil


Gambar 6-5 Contoh selector bebas

3. Class

Pada pendeklarasiannya, penulisan selector berbentuk class diawali

dengan tanda titik (.), dan pada file HTML yang memanggilnya,

ditambahkan atribut class.

Contoh :

<html>

<head>

<title> Selector - Class </title>


.modifikasi {font-family:Verdana, Arial, Helvetica,

sans-serif; font-size:16px; text-align:center}

</style>

</head>

<body>

<p class="modifikasi">Memodifikasi tag <p>

menggunakan selector class</p>

</body>

</html>



Gambar 6-6 Contoh selector class



4. ID

Pada pendeklarasiannya, penulisan selector berbentuk ID diawali

dengan tanda pagar (#), dapat digunakan untuk mendefinisikan header,

content, dan desain dalam desain web karena didefinisikan dengan ID

berbeda.

Contoh : <html>

<head>

<title> Selector - ID </title>


#judul {

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

font-style:italic

}

</style>

</head>

<body>

<p id="judul">Menggunakan ID Selector untuk

memodifikasi tampilan</p>

</body>

</html>



Gambar 6-7 Contoh selector ID

6.5 CSS untuk Memanipulasi Font

Tabel 6-2 Property Font

Nama Property Value Contoh Penggunaan

Font-family Nama font P { font-family: arial.

Helvetica}



6.6 CSS untuk Memanipulasi Color dan Background

Tabel 6-3 Property Background dan Color

Font-size Nilai integer dengan

pilihan satuan :

em|pt|px|%

P {font-size:24em}

Font-style Oblique|italic|normal P {font-style:italic}

Font-variant Normal|small-caps P {font-variant:small-

caps}

Font-weight Normal|bold|bolder|100-

900

P {font-weight:bold}

Nama

Property

Value Contoh Penggunaan

Background-

color

Rangkaian 6 digit

heksadesimal atau nama

warna

Body {

Background-color : green;

}

Background-

Image

url dimana image disimpan Body {

Background-image :

url(gambar1.jpg);

}

Background-

attachment

Fixed|scroll|inherit Body {

Background-attachment :

scroll;

}

Background-

Repeat

Inherit|repeat|no-

repeat|repeat-x|repeat-y

Body {

Background-repeat :

repeat;

Background-image :

url(image/gambar1.jpg);

}

Background-

position

Bottom|center|left|right|top

|inherit

Body {

Background-repeat : no-

repeat;

Background-image :

url(image/gambar1.jpg);

Background-position :

bottom center

}

Color Rangkaian 6 digit


warna

H1 { color : red }



6.7 CSS untuk Memanipulasi List

Tabel 6-4 Property List

6.8 CSS untuk Memanipulasi Text

Tabel 6-5 Property Text

Nama

Property


List-style-

type

Disc|circle|square|lower-

roman|upper-

roman|none|lower-

alpha|upper-alpha

Ul {

List-style-type : disc ;

}

List-style-

image

url dimana image disimpan

atau none

Ul {

List-style-image :

url(gambar1.jpg) ;

}

List-style-

position

Inside|outside Ul {

List-style-position :

inside;

}

Nama

Property


Color Rangkaian 6 digit


warna

P {

color :red;

}

text-align Left|right|center|justify P {

Text-align :justify;

}

text-

decoration

None|underline|overline|lin

e-through|blink

P {

Text-decoration :overline;

}

text-

transform

None|capitalize|,uppercase|l

owercase)

P {

Text-transform :

capitalize;

}

Letter-

spacing

Nilai integer dengan pilihan

satuan : em|pt|px|%

P {

letter-spacing : 20px;

}

Text-indent Nilai integer dengan pilihan

satuan : em|pt|px|%

P {

Text-indent : 50px;

}



6.9 CSS untuk Memanipulasi Table

Tabel 6-6 Property Table

Rangkuman

1. Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang

digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam

bahasa markup.

2. CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,

color, background, list, text, dan table menjadi lebih ringkas sehingga

tidak terjadi pengulangan tulisan.

3. Ada tiga jenis penempatan CSS, antara lain : Inline Style Sheet, Embedded

Style Sheet dan Linked Style Sheet.

4. Selector mendefinisikan elemen – elemen HTML mana saja yang akan

dimanipulasi menggunakan kode CSS.

Nama

Property


border-style None|dotted|dashed|solid|do

uble|groove|ridge|inset|outset

.b1 {

Border-style-type :

groove ;

}

border-

bottom-style

None|dotted|dashed|solid|do

uble|groove|ridge|inset|outset

.b1 {

Border-bottom-style :

groove ;}

border-

bottom-

width

Nilai integer dan satuan

ukuran

.b1 {

border-bottom-width

:10px;

}

border-

bottom-

color

Rangkaian 6 digit


warna

.b1 {

border-bottom-color

:red;

}



Tugas

1. Kunjungi beberapa website (minimal 10 website). Amatilah website yang

telah anda kunjungi. Yang harus anda amati adalah meliputi:

a. Layout,

- Seberapa besar daya tarik dan unsur seni dari web yang anda

amati.

- Bagaimana model layout web tersebut, berbentuk tabel atau frame?

b. Content/Isi, Apa saja isi dari web tersebut

- Silahkan catat hasil pengamatan anda.

c. Penempatan CSS,

- Bagaimana model penempatan script CSS yang dilakukan oleh

desainer web.

- Buktikan model yang Anda sebutkan pada point di atas dengan

menuliskan penggalan script pada file HTML-nya

d. Selector apa saja yang dimodifikasi oleh desainer web?

2. Pilihlah sebuah website (misal: Perguruan Tinggi, Unit Kegiatan

Mahasiswa, Partai Politik, Pemerintah Kota dan lain-lain) yang menurut

Anda menarik untuk referensi, kemudian buatlah sebuah website (dengan

cara Anda sendiri) dengan memodifikasi website yang Anda jadikan

referensi.

Latihan

1. Ada berapa macam penempatan script CSS?

2. Dari beberapa macam penempatan script CSS, mana yang menurut Anda

paling bagus? Jelaskan alasan Anda!

3. Apa yang dimaksud dengan selector? Ada berapa macam selector?

4. Apa yang dimaksud dengan property dan value? Berikan 2 (dua) contoh

property dan value!


Pemrograman Javascript 7-1

7 PEMROGRAMAN JAVASCRIPT

Overview

Saat ini perkembangan World Wide Web sangat pesat yang memunculkan

banyak homepage dengan halaman-halaman yang sangat menarik, tidak hanya

berupa teks dan gambar saja seperti dahulu, namun sudah menjadi interaktif

dan pintar.

Untuk mendukung hal ini, diperlukan teknologi atau bahasa pemrograman lain

yang juga digunakan untuk meningkatkan interaktivitas halaman web. Secara

umum teknologi di Web dibedakan menjadi dua, yaitu Server-Side contohnya

PHP, ASP, JSP dan Client-Side contohnya JavaScript, VBScript.

Tujuan

1. Mengenal pemrograman server-side dan client-side.

2. Mampu membedakan jenis-jenis dari pemrograman server-side.

3. Mampu membedakan jenis-jenis dari pemrograman client-side.

4. Mengenal Pemrograman JavaScript.

5. Memahami Struktur JavaScript.

6. Mampu menggabungkan JavaScript ke dalam dokumen HTML.

7. Mengenal macam-macam tipe data dan operator.

8. Mampu menerapkannya dalam pemrograman JavaScript.



7.1 Pengantar Pemrograman Client Side dan Server Side

Membahas mengenai web tentunya tidak terlepas dari HTML

(HyperText Markup Language), yaitu suatu bahasa yang menggunakan tanda-

tanda tertentu (disebut sebagai Tag) untuk menyatakan kode-kode yang harus

ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara

benar. Dokumen HTML sebenarnya hanya berupa dokumen teks biasa

(tujuannya agar dapat dengan mudah dipindah-pindahkan antar berbagai

platform). Namun, untuk membuat sebuah halaman web yang interaktif,

HTML saja tidak cukup.

Oleh karena itu diperlukan teknologi atau bahasa pemrograman lain

yang juga digunakan untuk meningkatkan interaktivitas halaman web. Secara

umum teknologi di Web dibedakan menjadi dua, yaitu Server-Side dan Client-

Side. Pada Server-Side proses akan dilakukan di Web Server sementara client

(Web Browser) hanya akan menerima hasilnya dalam bentuk HTML. Contoh

skrip Server-Side adalah CGI/Perl, ASP (Active Server Pages), JSP

(Java Server Pages) dan PHP. Server-side scripting ini merupakan

kebalikan dari client-side scripting, yang seluruh proses programnya dilakukan

di client. Contoh skrip Client-Side antara lain JavaScript, JScript dan

VBScript.

Penggunaan keduanya hendaknya disesuaikan dengan aplikasi Web

yang digunakan. Server-Side digunakan untuk memproses segala sesuatu yang

berhubungan dengan server misalnya manipulasi database. Client-Side digunakan untuk mengadakan interaksi dengan user yang frekuensinya tinggi,

namun data yang diperlukan relatif sedikit atau telah tersedia sebelumnya

misalnya aplikasi untuk permainan atau pemeriksaan event pada browser.

Tidak dianjurkan menggunakan Client-Side untuk aplikasi Web yang

membutuhkan data yang banyak dan selalu berubah-ubah, atau

menggunakannya untuk verifikasi user dan password. Pada server side Karena

seluruh prosesnya berada di server, maka client akan menerima hasil dalam

bentuk HTML biasa. Berbeda dengan client-side scripting, dimana client juga

menerima script. Jelas server-side scripting ini lebih aman dan lebih bebas

untuk dikembangkan. Keunggulan lain dari server side ini adalah dapat

berinteraksi lebih dengan pengunjung situs, Menampilkan informasi

perusahaan yang berasal dari database, Menampilkan halaman yang

memproses informasi dari klien, terupdate otomatis, berbeda tampilan sesuai

kondisi tertentu.

Pada dasarnya skrip tidak berbeda dengan bahasa pemrograman biasa

karena skrip juga berisi kumpulan instruksi program. Hanya saja skrip



memiliki aturan yang lebih lebih sederhana (penulisannya lebih manusiawi) dan

biasanya tidak dikompilasi. Karena kesederhanaannya, waktu yang dibutuhkan

untuk mempelajari skrip jauh lebih singkat dibandingkan waktu yang

dibutuhkan untuk mempelajari bahasa pemrograman. Salah satu contoh skrip

adalah file batch (*.BAT) pada sistem operasi Windows.

7.2 Pengantar Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada

fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet

bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah

bahasa pemrograman untuk memberikan kemampuan tambahan terhadap

bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi

user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser(navigator) yang memanggil

halaman web yang berisi skrip-skrip dari Javascript dan tentu saja terselip

di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator

atau penterjemah khusus untuk menjalankannya (pada kenyataannya

kompilator Javascript sendiri sudah termasuk di dalam browser tersebut).

Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding-

bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya

di sisi user/klien.

Pada bagian ini anda akan belajar menulis program Java-Script

sederhana dan kemudian menjalankannya. JavaScript adalah bahasa berbasis objek, artinya saat menuliskan kode JavaScript, Anda menggunakan objek-

objek bawaan atau objek-objek yang Anda ciptakan sendiri. JavaScript adalah

bahasa yang “case sensitive” artinya membedakan penamaan variabel dan

fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel

atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test.

Dan yang terakhir seperti bahasa Java ataupun C, setiap instruksi diakhiri

dengan karakter titik koma (;).

7.2.1 Struktur Dasar JavaScript

Program JavaScript dituliskan pada file HTML (.html atau .htm) dengan

menggunakan tag <SCRIPT>. Berarti Anda tidak perlu menuliskan program

JavaScript pada file terpisah dengan file HTML (meskipun Anda bisa

melakukannya).

Berikut ini adalah sintak umum penulisan JavaScript :



Dengan meletakkan kode sumber JavaScript dalam tag komentar,

halaman HTML Anda akan kompatibel dengan browser lama. Dengan kata

lain, browser yang mendukung JavaScript akan menjalankannya dan yang tidak

mendukung JavaScript akan mengabaikannya.

7.2.2 Meletakkan JavaScript dalam Dokumen HTML

1. Menggunakan tag <SCRIPT>

Dengan menggunakan cara ini, pada saat mengakses satu halaman

HTML kita harus menunggu sampai proses pemanggilan halaman itu

selesai sepenuhnya, sebelum kita menjalankan program JavaScript tersebut.

Proses eksekusi kode HTML untuk menampilkan satu halaman dilakukan dari

atas ke bawah, semakin banyak user yang mengakses halaman ini dapat

menganggu proses pemanggilan tersebut. Pada kasus dimana pemanggilan

suatu fungsi JavaScript terjadi sebelum proses pemanggilan kode

JavaScript selesai dilakukan oleh navigator, maka akan timbul pesan error.

Oleh karena itu untuk menghindari kejadian diatas, maka pada

umumnya letakkan tag <SCRIPT> diantara bagian kepala dari dokumen

HTML, yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi

JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen

HTML atau bisa disebut diantara tag <BODY> dan </BODY>.

Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis

bahasa yang digunakan dan versinya, contohnya “JavaScript“,

“JavaScript1.1“,“JavaScript1.2“ untuk bahasa JavaScript atau bahasa lainnya, contohnya “VBScript“.

Script dalam tag head

<HTML>

<HEAD>

<TITLE>Script dalam HEAD</TITLE>

<script language="javascript">

//Statemen ditulis disini...

</script>

</HEAD>

<BODY>

</BODY>

</HTML>



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 di-

load ke dalam browser. Script tersebut kemudian dieksekusi melalui user-

action.

Script dalam tag body

<HTML>

<HEAD>

<TITLE>Script dalam BODY</TITLE>

</HEAD>

<BODY>



</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>

</HEAD>

<BODY>



</script>

</BODY>

</HTML>

Ketiklah contoh berikut dan simpan ke file Hello.html

<HTML>

<HEAD>




</SCRIPT>

</HEAD>

</HTML>

Hasilnya sebagai berikut :

Gambar 7-1 Tampilan Halaman Hello.html

1. 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>

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.

2. Melalui event tertentu

Event adalah sebutan dari satu action yang dilakukan oleh user,

contohnya seperti klik tombol mouse. Kodenya dapat di tulis sebagai berikut :



<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 Tipe Data dasar

7.3.1 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”;



var Y = 50;

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 extends int super

boolean False interface switch

break Final long synchronized

byte finally native this

case Float new throw

catch for null throws

char function package transient

class goto private true

const if protected try

continue implements public var

default import return val

do in short while

double instanceof static with

else

7.3.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. Untuk mendeklarasikan suatu variabel lokal,

harus diawali dengan var, seperti contoh berikut ini:

var nilaiTerbesar = 0

JavaScript mengganggap semua variabel yang tidak diawali dengan

var adalah variabel global. Walaupun JavaScript memperbolehkan anda

menggunakan nama variabel yang sama untuk local maupun global, tetapi

dalam praktek hal tersebut tidak disarankan, karena akan membingungkan

anda sendiri.

TIP

Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu

variabel global, deklarasikan semua variabel global tersebut pada awal

dari script.

Contoh (simpan dengan nama file variable.html):

<SCRIPT language="Javascript">



</SCRIPT>

7.4 Tipe Data (Literal)

Pada JavaScript hanya dapat memanipulasi empat jenis data, yaitu :

1. Bilangan : bulat atau desimal, yang kita sebut sebagai integer atau float

2. Kata (kumpulan huruf) : kita sebut string



3. Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk

memeriksa suatu kondisi :

true : jika kondisinya benar

false : jika kondisinya salah

4. variabel dengan jenis null : satu kata khusus (termasuk keyword

juga) untuk menjelaskan bahwa tidak ada data didalamnya.

7.4.1 Integer(bilangan bulat)

Bilangan bulat dapat ditampilan dalam beberapa basis berikut ini :

1. basis desimal : integer di tuliskan dalam urutan unit bilangan (dari 0

sampai dengan 9), permulaan bilangan tidak boleh dimulai oleh angka 0

2. basis heksadesimal : dituliskan dalam urutan unit bilangan dari 0 sampai

dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai

dengan f), permulaan bilangan dimulai oleh 0x atau 0X

3. basis oktal : dituliskan dalam urutan unit angka dari 0 sampai dengan 7,

permulaan bilangan dimulai dengan angka 0

7.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.

Bilangan ini juga bisa di tuliskan dengan beberapa cara berikut :

1. bilangan bulat desimal : 895

2. bilangan dengan tanda koma : 895,12

3. bilangan pembagian : 27/11

4. bilangan eksponensial : bilangan dengan tanda koma , kemudian diikuti

oleh huruf e(atau E), kemudian diikuti oleh bilangan bulat yang artinya

pangkat dari bilangan 10 (+ atau -, pangkat postitif atau negatif),

contoh:

var a = 2.75e-2;

var b = 35.8E+10;

7.4.3 String

String adalah kumpulan dari karakter, kita deklarasikan variabel string

menggunakan tanda (') atau ("), kedua tanda tersebut harus digunakan secara

berpasangan dan tidak bisa digunakan secara tersendiri atau bercampur.

Berikut ini adalah beberapa cara untuk mendeklarasikan variabel string :

var a = "Hallo";

var b = 'Sampai Ketemu Lagi !';



Tabel 7-2 Karakter khusus JavaScript.

Keterangan Spesial Karakter

Backspace \b

Form feed \f

Newline \n

Menekan tombol ENTER \r

Karakter Antislash \\

Tanda petik ganda \"

Tanda petik tunggal \'

Tab \t

7.4.4 Booleans

Boolean adalah satu variabel khusus yang berguna untuk mengevaluasi

suatu kondisi tertentu, oleh karenanya boolean mempunyai dua nilai True :

diwakili oleh nilai 1 dan False : diwakili oleh nilai 0

7.5 Konversi Jenis Variabel

Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang

dilewatkan dengan parameter tertentu :

7.5.1 parseInt()

Fungsi ini memungkinkan merubah satu variabel yang dilewatkan

dengan parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk

bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan

bulat. Sintaksnya adalah sebagai berikut:

parseInt(string[, basis]);

Agar supaya fungsi parseInt() mengembalikan nilai bilangan bulat,

maka parameter yang dilewatkan harus dimulai dengan karakter bilangan [0-

9], prefiks hexadesimal 0x, dan/atau karakter +,-,e,dan E. Selain daripada itu

maka fungsi parseInt() akan mengembalikan nilai NaN(Not a Number). Jika

karakter berikutnya tidak valid, maka dia akan diabaikan oleh fungsi parseInt(),

dan akan ditampilkan terpotong jika di bagian depan karakter valid dan bagian

belakang karakter tidak valid.



Contoh :

var a = "123";

var b = "456";

document.write(a+b,"<BR>"); // hasil 123456

document.write(parseInt(a)+parseInt(b),"<BR>"); // hasil 579

7.5.2 parseFloat()

Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah

variabel yang dilewatkan dengan parameter tertentu menjadi bilangan desimal,

Sintaks dari fungsi parseFloat adalah sebagai berikut :

parseFloat(string);

Contoh :

var a = "128,34";

var b = "128.34";

document.write(parseFloat(a),"<BR>"); // hasil 128

document.write(parseFloat(b),"<BR>"); // hasil 128.34

7.6 Operator

Operator adalah simbol untuk memanipulasi variabel, dengan kata lain

melakukan operasi-operasi, mengevaluasi, dan lain-lainnya.

JavaScript memiliki operator binari maupun unari. Suatu operator

binari memiliki format : operand1 operator operand2. Sebagai contoh, 9 * 7 atau temp = 24 adalah ekspresi dengan operator binari.

Operator unari memiliki dua format:

operand operator

atau

operator operand

Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++.

Operator JavaScript dapat dibagi menjadi beberapa kategori berikut:

7.6.1 Operator Pemberi Nilai (Assignment operator)

Operator pemberi nilai (=) adalah suatu operator binari yang digunakan untuk memberi nilai ke operand di sisi kiri (biasanya berupa suatu



variabel) yang didasarkan pada nilai operand sebelah kanan (seperti

NamaDepan = "Hendra" atau x = y * 9).

Tabel 7-3 Daftar Operator Assignment

Shorthand operator Artinya Contoh

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 x = x << y x <<=

x >>= y x = x >> y x >>=

x >>>= y x = x >>> y x >>>=

x &= y x = x & y x &= 0xC0

x |= y x = x | y x |= 0x0F

x ^= y x = x ^ y x ^= 0XFF

7.6.2 Operator Perhitungan (Arithmetic Operator)

Operator penghitungan digunakan untuk memodifikasi nilai dari

variabel secara matematika.

Tabel 7-4 Jenis Operator Aritmatika



7.6.3 Operator Afektasi

Operator ini digunakan untuk menyederhanakan operasi penambahan

nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri.

Operasi ini biasanya ditulis dengan cara berikut : x=x+2, dengan

menggunakan operator afektasi operasi tersebut bisa dituliskan menjadi

x+=2, dan jika nilai awal x=7 maka nilai akhir x menjadi 9. Jenis jenis operator

seperti ini adalah sebagai berikut :

Tabel 7-5 Jenis Operator Afektasi

7.6.4 Operator Inkrementasi

Operator ini digunakan untuk menambahkan ataupun mengurangi per

unit dari satu variabel. Operator ini sangat berguna dalam struktur

pemrograman sistem Loop, yang membutuhkan penghitung (variabel yang

nilainya naik/turun satu persatu).

Operator dengan model x++ bisa menggantikan notasi x=x+1 atau x+=1

Tabel 7-6 Jenis Operator Inkrementasi

7.6.5 Operator Pemanipulasi Bit (Bitwise operator)

Untuk programmer yang perlu menangani bit. JavaScript menyediakan

satu set dari operator bitwise. Untuk operator ini, JavaScript melakukan

konversi terhadap operand menjadi integer 32-bit sebelum melakukan

operasi padanya. Operator logika bitwise adalah :



Bitwise AND (&), akan mengembalikan nilai dari logika AND antara

sepasang bit. Sebagai contoh , 0x0f & 0x0a mengembalikan 0x0a.

Bitwise OR (|), akan mengembalikan nilai dari logika OR antara setiap

pasangan dari bit. Sebagai contoh, 0x05 | 0x0a mengembalikan 0x0f.

Bitwise XOR (^), akan mengembalikan nilai dari logika exclusive OR between antara tiap pasangan bit. Sebagai contoh, 0x0f ^ 0x0a

mengembalikan 0x05.

JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1

terhadap jumlah yang ditentukan di operand2. Operand ini adalah

Shift left (<<), akan mengeser bit ke kiri dengan jumlah tertentu. Bit

yang melewati batas kiri akan diabaikan, dan suatu bit nol akan digeser

dari kanan. Sebagai contoh, 0x0f << 2 mengembalikan 0x3c.

Sign propagating shift right (>>) mempertahankan bit tanda dari nilai

ketika melakukan geser ke kanan sesuai dengan jumlah yang

ditentukan. Bit yang tergeser melewati bata kanan akan diabaikan,

kecuali bit tanda, bit nol akan digeser dari kiri. Sebagai contoh, 10 >> 2

mengembalikan 2 dan -10 >> 2 mengembalikan -2.

Zero-fill right shift (>>>) sama seperti >>, cuma tidak

mempertahankan bit tanda ketika dilakukan pergeseran sesuai dengan

jumlah yang ditentukan.

7.6.6 Operator Logika (Logical Operator)

Operator logika membutuhkan operand dengan nilai Boolean (true

atau false) dan mereka akan mengembalikan suatu nilai logika. Operator

logika adalah sebagai berikut :

Tabel 7-7 Jenis Operator Logika



7.6.7 Operator Pembanding (Comparison Operator)

Operator ini digunakan untuk melakukan pemeriksaan suatu nilai dan

membandingkannya dengan nilai atau kondisi yang lain.

Tabel 7-8 Jenis Operator Pembanding



7.6.8 Operator String

Operator string (+) menggabung dua nilai string dan mengembalikan

satu string dimana merupakan hasil gabungan dari keduanya. Sebagai contoh : "Java" + "Script"

Menghasilkan

"JavaScript"

Operator shorthand + mengabung string kiri dengan string dikanan

operand dan memberikan nilai baru pada operand disebelah kiri.

7.7 Ekspresi

Ekspresi merupakan pengkombinasian beberapa operand dan operator

yang dapat dievaluasi agar menghasilkan nilai tertentu. Literal dan variabel

dihubungkan oleh operator dan akan menghasilkan ekspresi. JavaScript

menyediakan berbagai operator yang memungkinkan programmer menulis

sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit.

Contoh :

temp = 56;

/* temp adalah variabel, 56 adalah variabel, = adalah operator, dan temp=56 adalah ekspresi.*/

temp = B + C;

/* temp, B, C adalah variabel, = adalah operator, dan

temp=B+C adalah ekspresi yang melibatkan operator aritmatik.*/

Ekspresi kondisional merupakan ekspresi yang nilainya tergantung pada

kondisi tertentu. Sintaksnya sebagai berikut :

(kondisi) ? nilai1 : nilai2

pada ekspresi ini jika kondisi dievaluasi benar, ekspresi akan mengembalikan

nilai1. Sebaliknya jika kondisi dievaluasi salah, ekspresi akan mengembalikan

nilai2. Contoh :

temp = (X > Y) ? “Benar” : “Salah” ;

Contoh diatas, jika nilai X lebih besar dari Y, maka variabel temp akan

bernilai “Benar”, jika X lebih besar atau sama dengan Y, maka variabel temp

bernilai “Salah”.



7.8 Derajat Operator

Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu

operator, urutan operasi dari operator menentukan nilai hasil evaluasi.

Dengan menggunakan tanda kurung, programmer dapat mengatur aturan

tersebut. Tabel 4 adalah urutan derajat/prioritas operasi dari yang paling

rendah sampai yang paling tinggi.

Tabel 7-9 Derajat/Prioritas Operator

Keterangan Operator

Coma ,

Assignment = += -= *= /= %= <<= >>=

>>>= &= ^= |=

Conditional ?:

Logical OR ||

Logical AND &&

Bitwise OR |

Bitwise XOR ^

Bitwise AND &

Equality == !=

Relational < <= > >=

Bitwise shift << >> >>>

Addition/subtraction + -

Multiply/divide * / %

Negation/increment/decrement ! ~ - ++ --

Call, member, indeks () Untuk melewatkan parameter ke sebuah

fungsi

[] Untuk mengakses indeks array

. Untuk mengakses metode atau properti dari

sebuah objek()

Contoh :

X = 2 + 4 * 5; // hasilnya X = 22

X = (2 + 4) * 5; // hasilnya X = 30



Rangkuman

1. Teknologi di Web dibedakan menjadi dua, yaitu Server-Side contohnya

PHP, ASP, JSP dan Client-Side contohnya JavaScript, VBScript.

2. Pada Server-Side proses akan dilakukan di Web Server sementara client

(Web Browser) hanya akan menerima hasilnya dalam bentuk HTML. 3. Pada Client-Side proses akan dilakukan di sisi client.

4. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada

fungsinya berjalan pada suatu dokumen HTML.

5. JavaScript adalah bahasa yang “case sensitive” artinya membedakan

penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf

kecil.

6. Pada JavaScript hanya dapat memanipulasi empat jenis data, yaitu :

integer/float, string, boolean dan variabel dengan jenis null.

7. Untuk melakukan konversi jenis variabel ada dua fungsi, yaitu : parseInt()

dan parseFloat().

8. Operator pada JavScript antara lain :

a. Operator Pemberi Nilai (Assignment operator)

b. Operator penghitungan (Arithmetic operator)

c. Operator Afektasi

d. Operator Inkrementasi

e. Operator Pemanipulasi Bit (Bitwise operator)

f. Operator Logika (Logical operator)

g. Operator Pembanding (Comparison operator)

h. Operator String

Latihan

1. Jelaskan perbedaan antara server-side-scripting dengan client-side-

scripting!

2. Jelaskan perbedaan variabel global dan variable lokal!

3. Buatlah script untuk menampilkan tulisan berikut ini di browser :

Ada apa di dalam "c:\windows\"

4. Jelaskan beserta contohnya macam-macam tipe data pada Javascript!

5. Tuliskan hasil dari parseInt(24Halo56)!

6. Tuliskan hasil dari parseFloat(0024566)!

7. Jelaskan fungsi operator inkrementasi beserta contohnya!

8. Jelaskan beserta contohnya macam-macam operator pembanding yang

terdapat pada Javascript!

9. Analisa hasil keluaran dari program berikut ini :

<HTML>

<HEAD>

<TITLE> .::Latihan Tipe Data dan Operator::. </TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>


Struktur Kontrol dan Fungsi 8-1

8 STRUKTUR KONTROL DAN FUNGSI

Overview

Untuk membuat suatu halaman yang dinamis dan interaktif, perancang

halaman web membutuhkan perintah-perintah yang dapat mengatur aliran

dari informasi. Berdasarkan hasil komputasi yang telah dilakukan, JavaScript

akan membuat keputusan jalur mana yang akan dieksekusi. Pada bagian ini

akan dibahas tentang perintah kondisi dan loop dalam JavaScript.

Walaupun semua kode harus ditulis dalam penanganan event, tetapi hal ini

adalah praktek pemrograman yang kurang baik. Sebagai pengantinya, gunakan

fungsi, kode akan menjadi lebih modular dan dapat digunakan kembali

(reusable).

Tujuan

1. Mengerti esensi penggunaan Percabangan (pemilihan/kondisional) dalam JavaScript.

2. Memahami bentuk umum Percabangan. 3. Mengerti esensi penggunaan Pengulangan (Looping) dalam JavaScript. 4. Memahami bentuk umum Pengulangan 5. Memahami penggunaan Fungsi. 6. Memahami parameter pada fungsi dalam JavaScript. 7. Memahami bentuk–bentuk fungsi bawaan dalam JavaScript 8. Memahami perbedaan penggunaan Fungsi dan Kejadian. 9. Memahami bentuk–bentuk kejadian dalam JavaScript. 10. Mampu mengimplementasikan Percabangan, Pengulangan, Fungsi dan

Kejadian pada suatu studi kasus JavaScript.

8.1 Struktur Kontrol

8.1.1 Percabangan (Kondisional)

Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan

bagian sebelumnya. JavaScript memiliki suatu perintah kondisi if. Dengan

pernyataan percabangan, program Anda dapat melompat ke baris lain.

Pernyataan if..else

Pernyataan ini digunakan untuk menguji sebuah kondisi, kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, atau

mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi. Tata cara

penulisan dari perintah kondisi tersebut adalah sebagai berikut:

Tabel 8-1 Penulisan Menggunakan Pernyataan If

Blok Pernyataan if Contoh

If (kondisi1)

{ //pernyataan yang dieksekusi

//jika kondisi1 terpenuhi

}

[else if (kondisi2)


//jika kondisi1 TIDAK terpenuhi

//dan kondisi2 terpenuhi

}

else


//jika kondisi2 TIDAK terpenuhi

}

]

<HTML>

<HEAD>

<TITLE>:Latihan Percabangan:</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai

Boolean true atau false.

Perhatian

Suatu kondisi numerik yang menghasilkan nol adalah tidak sama dengan

suatu Boolean true pada JavaScript, dan sebaliknya suatu nilai bukan nol

tidak sama dengan Boolean false. Pada JavaScript hasil dari suatu kondisi

harus data type Boolean.



Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan.

Contoh berikut adalah perintah yang benar:

if ( a==b )

j = 0

else j = 1

Pada pernyataan if..else, Anda bisa menggabungkan beberapa kondisi

dengan menggunakan operator logika &&,||, atau !. Perhatikan contoh berikut:

if (( a > 0 ) && ( b > 0 )

j = 1 ;

else

j = 0 ;

Pada contoh diatas, bila a dan b lebih besar dari nol, maka j diberi nilai

1. Sebaliknya jika salah satu dari a atau b tidak lebih daripada 0, maka x

bernilai 0.

Catatan

Pada modul sebelumnya telah dibahas mengenai ekspresi. Contoh : if ((a > 0) && (b > 0)

j = 1 ;

else

j = 0 ;

dapat ditulis dengan ekspresi menjadi : j = ((a > 0) && (b > 0)) ? 1 : 0

Pernyataan switch …. case

Instruksi ini memungkinkan untuk melakukan test berbagai nilai dari

variabel yang sama. Dengan cara ini dapat melakukan testing terhadap

berbagai nilai variabel lebih sederhana daripada memakai instruksi if.

Kata di dalam tanda kurung sesudah kata switch menunjukkan nama

variabel yang akan di test pada kasus nilai yang berbeda. Pada saat nilai

variabel yang akan di test sama dengan nilai kasusnya (case) maka blok

instruksi di bawahnya akan dieksekusi. Kata break berarti berhentinya atau

keluar dari struktur kondisi switch. Kata default berarti blok instruksi

dibawahnya akan dieksekusi bila nilai variabel yang masuk tidak sama dengan

semua kasus (case) yang ada.

Sintaksnya adalah sebagai berikut :



Tabel 8-2 Penggunaan Pernyataan Switch-Case

8.1.2 Pengulangan (Looping)

Sebelum berbicara tentang instruksi, kita bicarakan dulu tentang Loop.

Loop adalah struktur instruksi-instruksi yang dapat di eksekusi berulang-ulang

selama kondisi syaratnya belum terpenuhi. Cara yang paling umum dalam

melakukan Loop adalah dengan menambahkan variabel penghitung/counter

(variabel yang bertambah satu unit nilai selama satu kali Loop instruksi

dijalankan (increment)), Loop akan berhenti jika variabel penghitung sudah

melewati batas nilai tertentu yang dijadikan syarat.

JavaScript mendukung dua struktur loop, perintah for dan perintah

while. Untuk kontrol pada struktur loop, JavaScript menyediakan perintah

break dan continue.

Blok Pernyataan Switch ... case

switch (Variabel)

{

case Nilai1:

//blok instruksi;

break;

case Nilai2:

//blok instruksi;

break;

case NilaiX:

//blok instruksi;

break;

default:

//blok instruksi;

break;

}

8.1.2.1 Perintah For

For adalah salah satu Instruksi yang menggunakan fasilitas Loop. Dalam

sintaksnya kita hanya perlu memasukkan nama variabel sebagai penghitung

(dan juga nilai awalnya, serta kondisi dimana loop akan berhenti (pada

dasarnya, kondisi dimana nilai penghitung melewati angka tertetu)), dan

yang terakhir instruksi modifikasi penghitung, increment (naik per unit) atau

decrement (turun per unit). Perintah for mengulang suatu loop sampai

kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break.

Sintaks lengkap dari perintah for adalah :

Tabel 8-3 Penggunaan Pernyataan for

Blok Pengulangan for Contoh

for (penghitung; kondisi loop

berhenti; modifikasi penghitung)

{

//daftar instruksi-instruksi atau

//blok instruksi

}

<HTML>

<HEAD>

<TITLE>:Latihan Looping:</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Penjelasan dari contoh diatas, loop ini akan 5 kali menampilkan nilai

dari i, mulai dari i=1,2,3,4,5. Loop dimulai dari i=1 dan akan selalu melakukan

cek dan verifikasi apakah nilai i kurang dari 6. Sampai pada i=6, dimana kondisi

syaratnya sudah tidak terpenuhi maka loop akan berhenti.

Urutan proses untuk perintah for adalah sebagai berikut:

1. Interpreter menjalankan ekspresi-awal. Ekspresi ini menentukan nilai

yang diperlukan untuk kendali perulangan.

2. Kemudian interpreter memeriksa kondisi. Jika true, kendali dilanjutkan

ke langkah selanjutnya. Jika false, kendali diarahkan ke perintah setelah

perulangan.

3. Interpreter menjalankan ekspresi-penambah, yang mana melakukan

update terhadap variabel yang digunakan untuk kendali perulangan.

4. Kemudian statement dijalankan dan, jika ditemukan suatu break atau

continue, kendali kembali ke langkah 2.

8.1.2.2 Pengulangan While

Instruksi while merupakan salah satu cara alternatif untuk menjalankan

sekumpulan instruksi, seperti juga instruksi For. Perintah while terus mengulangi loop selama kondisi memiliki nilai true.

Sintaks dari instruksi ini adalah sebagai berikut :

Tabel 8-4 Contoh Script Pengulangan While

Blok Pengulangan While Contoh

while (kondisi syarat terpenuhi)

{

//daftar instruksi-instruksi atau

//blok instruksi

}

<HTML>

<HEAD>

<TITLE>:Latihan Looping: </TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Test kondisi terjadi pada perulangan while yang pertama kali dan pada

akhir dari setiap loop. Ketika hasil test mengembalikan false, kendali

dilewatkan ke perintah berikutnya setelah loop. Karena instruksi ini

menjalankan program selama kondisi syarat terpenuhi, maka perlu

diperhatikan baik baik syarat yang kita berikan, agar supaya instruksi tidak

menjadi loop tanpa henti (infinity) dan membuat error navigator kita.

8.1.2.3 Perintah Continue

Perintah continue menghentikan interasi tersebut untuk suatu for atau

while loop. Tetapi tidak keluar dari loop. Namun melakukan interasi

berikutnya.

Pada suatu while loop, kendali dilewatkan ke condition.

Pada suatu for loop, dilewatkan ke increment-expression.

Berikut ini memperlihatkan bagaimana menggunakan perintah

continue:

i=0 ;

while (i<10)

{

if (i==3)

continue i++ ;

}

Ada hal yang patut di perhatikan juga, ada kalanya kita perlu

melakukan lompatan (jump) terhadap satu atau beberapa nilai tertentu di

dalam loop tanpa menghentikan loop itu sendiri. Sintaks yang digunakan

disini adalah continue, dan di letakkan di dalam loop itu sendiri, pada umumnya

kita tambahkan juga struktur kondisional sebagai syarat supaya sintaks

tersebut berjalan lancar.

Contoh : kita akan mencetak hasil dari persamaan 1/(x-7) untuk nilai x = 1

sampai x = 10, cukup jelas untuk nilai x = 7 maka akan menghasilkan error

(pembagian dengan 0), berkat instruksi continue kita bisa memperlakukan

secara terpisah nilai x = 7, dan meneruskan loop dari program

tersebut.

<HTML>

<HEAD>

<TITLE>::Latihan Looping:: </TITLE>

</HEAD>

<BODY>


<!--


var x=1;

while (x<=10)

{

if (x == 7)

{

document.writeln("pembagian oleh 0");

x++;

continue;

}

a = 1/(x-7);

document.writeln(a);

x++;

}

document.write ("</PRE>");

//-->

</SCRIPT>

</BODY>

</HTML>

8.1.2.4 Perintah break

Sebaliknya kita juga bisa memaksa loop berhenti sebelum

waktunya dengan alasan yang dikemukan di bagian awal dari loop. Instruksi

Break memungkinkan menghentikan suatu loop (baik untuk for ataupun

while). Pemakaiannya sendiri seperti instruksi continue, yaitu penambahan

struktur kondisional agar supaya loop berhenti dan tidak berulang ulang

looping.

Perintah break menghentikan for atau while loop dan mengembalikan

kendali ke perintah berikutnya yang mengikuti loop. Contoh berikut

menggambarkan bagaimana menggunakan perintah break:

<HTML>

<HEAD>

<TITLE>::Latihan Looping:: </TITLE>

</HEAD>

<BODY>


<!--


for (x=1; x<=10; x++)



{

a = x-7;

if (a == 0)

{

document.writeln ("pembagian oleh 0");

break;

}

document.writeln (1/a);

}

document.write ("</PRE>");

//-->

</SCRIPT>

</BODY>

</HTML>

8.2 Fungsi

Fungsi merupakan subprogram yang memungkinkan untuk menjalankan

sekelompok instruksi dengan satu pemanggilan sederhana nama fungsi

tersebut dari satu atau beberapa bagian di dalam badan suatu program.

Bentuk subprogram yang kita sebut fungsi ini sangat umum di pakai di banyak

bahasa pemrograman (tentu saja dengan cara yang sedikit berbeda antara satu

dengan lainnya). Di lain pihak suatu fungsi, juga bisa memanggil dirinya sendiri,

ini kita sebut dengan fungsi rekursif (akan tetapi jangan lupa untuk meletakkan

kondisi khusus supaya fungsi bisa berhenti, kalau tidak bisa membahayakan

kelangsungan program secara global).

Fungsi pada JavaScript pada dasarnya dibagi ke dalam dua macam yaitu

fungsi yang Anda definisikan sendiri dan fungsi bawaan (built-in function).

JavaScript sendiri mempunyai fungsi native (predefined) yang dapat

diaplikasikan untuk satu atau banyak jenis obyek spesifik, kita sebut fungsi ini

sebagai metoda (akan dibahas pada bagian lain).

8.2.1 Mendefinisikan Fungsi

Sebelum digunakan, suatu fungsi harus di definisikan terlebih dahulu

karena untuk memanggil fungsi tersebut dari dalam program, navigator harus

mengenalinya terlebih dahulu, dalam artian mengenali namanya, argumennya,

dan instruksi di dalamnya. Pendefinisian satu fungsi dinamakan deklarasi.

Sintaks pendeklarasian suatu fungsi adalah sebagai berikut :

Tabel 8-5 Contoh Sript Penggunaan Fungsi

Blok Function Contoh

1. Function tanpa Parameter

function Nama_Fungsi()

{

// daftar instruksi atau

// blok instruksi

}

<HTML>

<HEAD>

<TITLE>:Latihan Function:</TITLE>

<SCRIPT LANGUAGE="javaScript">



</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Blok Function Contoh

2. function dengan

Parameter

function Nama_Fungsi

(parameter1, parameter2,...)

{

// daftar instruksi atau

// blok instruksi

}

<HTML>

<HEAD>

<TITLE>:Latihan Function: </TITLE>




</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Penjelasan :

Kata kunci function diikuti nama_ fungsi tersebut.

Penamaan dari fungsi mempunyai aturan yang sama dengan penamaan

dari variable

o Nama harus dimulai oleh huruf.

o Nama dari fungsi bisa berisi huruf, angka atau karakter _ dan &,

karakter kosong atau spasi tidak diperbolehkan.

o Nama fungsi seperti juga nama variabel adalah case sensitive, jadi

memperhatikan huruf besar dan huruf kecilnya.

Parameter adalah optional, boleh ada dan boleh tidak ada, jika argumen

tidak ada maka tanda kurung harus tetap ditampilkan.

Sebuah fungsi tidak hanya bisa menerima informasi, tapi dapat juga

mengembalikan informasi atau nilai. Caranya dengan menambah kata kunci

return. Contoh :

<HTML>

<HEAD>

<TITLE>::Latihan Function:: </TITLE>




</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

8.2.2 Pemanggilan Fungsi

Untuk mengeksekusi satu fungsi, kita cukup memanggil nama dari

fungsi tersebut yang diikuti dengan kurung buka, argumen(jika ada) dan di

tutup dengan kurung tutup.

Nama_dari_Fungsi() ;

Ingat :

Titik koma memberikan tanda kepada navigator tentang akhir dari blok

instruksi yang berbeda.

Jika anda mendefinisikan suatu argumen untuk suatu fungsi, maka

pada saat pemanggilannya anda harus memanggil fungsi tersebut

lengkap dengan argumentnya.

Contoh :

<HTML>

<HEAD>





</SCRIPT>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Dengan adanya event administrator yang bernama onLoad (di

letakkan di dalam tag BODY), kita bisa memanggil fungsi pada saat loading

halaman dokumen HTML, sebagai contoh inisialisasi nilai awal dari skrip anda

atau melakukan test apakah navigator dapat menjalankan fungsi dari skrip atau

tidak. Contohnya adalah sebagai berikut :

<HTML>

<HEAD>

</SCRIPT>

</HEAD>

<BODY onload="myHomepage();">

</BODY>

</HTML>

8.2.3 Parameter dari Fungsi

Seperti contoh sebelumnya, kita bisa melewatkan parameter di dalam

suatu fungsi, dalam artian kita berikan nilai atau nama variabel supaya fungsi

itu bisa di eksekusi berdasarkan parameter tersebut. Pada saat kita

melewatkan beberapa parameter ke dalam fungsi, parameter-parameter

tersebut dipisahkan oleh tanda koma, baik pada saat deklarasi ataupun pada

saat pemanggilan.

Kita lihat contoh di bawah ini, kita akan membuat program JavaScript

yang menampilkan kotak dialog :

<HTML>

<HEAD>

<SCRIPT language="Javascript">



</SCRIPT>

</HEAD>

<BODY>

<A href="javascript:;" onClick="Tampilkan();">Teks</A>

</BODY>

</HTML>



Hasilnya :

Gambar 8-1 Contoh Tampilan Kotak Dialog

8.2.4 Menggunakan Fungsi-fungsi Bawaan (Built-in Function)

Pada pembahasan sebelumnya telah diperkenalkan fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter

tertentu, yaitu parseInt dan parseFloat. Kedua fungsi tersebut merupakan

fungsi bawaan JavaScript, selain itu masih ada beberapa fungsi bawaan lainnya,

yaitu eval, escape, unescape dan isNaN.

Sintak umum dari fungsi bawaan adalah sebagai berikut :

nama_fungsi_bawaan (str)

1. Fungsi eval

Fungsi eval digunakan untuk mengevaluasi ekspresi atau pernyataan

JavaScript. Fungsi ini banyak digunakan sebagai pengevaluasi ekspresi (dapat

dianalogikan dengan parser). Selain itu dapat digunakan untuk mengeksekusi

pernyataan.

2. Fungsi escape

Fungsi eval digunakan untuk menyandikan string ke himpunan karakter

ISO-Latin-1. Tujuannya agar string tersebut dapat dibaca oleh semua

komputer. Fungsi eval mengganti semua karakter non-alfanumerik pada

parameter string ke bentuk “%xx”, dimana xx adalah nomor dari karakter

ISO-Latin-1. sebagai contoh karakter spasi akan diganti menjadi “%20”.

3. Fungsi unescape

Merupakan kebalikan fungsi escape, yaitu mengembalikan hasil

penyandian ke himpunan karakter ASCII.



4. Fungsi isNaN

Digunakan untuk menguji suatu variabel adalah bilangan atau bukan. Jika

variabel yang diuji bukan bilangan, fungsi akan mengembalikan true, jika

sebaliknya fungsi ini mengembalikan false.

8.3 Kejadian (Event)

Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada

kenyataannya event di dalam JavaScript adalah klik dari tombol mouse

(merupakan satu satunya aksi yang dapat diatur oleh HTML). JavaScript

memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode

seperti lewatnya mouse pointer diatas zona tertentu, perubahan nilai dan lain

sebagainya.

Event administrator adalah yang memperbolehkan untuk

mengasosiasikan satu aksi ke dalam sebuah event. Sintaks dari event

administrator tersebut adalah sebagai berikut :

OnEvenement = "Aksi_Javascript_atau_Fungsi();"

Untuk penggunaan link hiperteks, maka sintaksnya adalah sebagai

berikut :

<a href ="onEvenement ='Aksi_Javascript_atau_Fungsi();'">Link</a>

8.3.1 Macam-macam Kejadian

Dalam JavaScript terdapat beberapa macam kejadian yang harus

ditangani. Dibawah ini beberapa kode yang harus dimasukkan ke dalam tag

event administrator untuk menghasilkan aksi tertentu.

Tabel 8-6 Jenis - Jenis Kejadian pada JavaScript



8.3.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



yang mentrigger event untuk mengaktifkan kotak dialog tersebut.

<HTML>

<HEAD>

<TITLE>::Latihan Event::</TITLE>

</HEAD>

<BODY>

<A HREF="javascript:;" onClick="window.alert('\'Latihan

Event\'');">

Klik Disini !</A>

</BODY>

</HTML>

Analisa skrip diatas :

Event administrator onClick dimasukkan didalam tag links dari hiperteks

<a href=….>

Tujuan dari skrip ini adalah menampilkan satu kotak dialog, jadi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain,

oleh karena itu kita masukkan kode "javascript:;" didalam atribut href

untuk memberi tahu navigator kalau kita ingin tetap berada di halaman

yang sedang di proses tersebut.

Perhatikan penggunaan \' di dalam kalimat \'Latihan Event\'. Tanda

antislash (\) di depan tanda petik untuk memperingatkan navigator

kalo dianggap sebagai karakter biasa dan bukan di intepretasi sebagai

pembatas string.

Rangkuman

1. Untuk mengatur aliran informasi pada sebuah halaman web yang

interaktif diperlukan perintah percabangan dan pengulangan.

2. JavaScript mendukung dua struktur percabangan, yaitu pernyataan if..else

dan pernyataan switch..case.

3. JavaScript mendukung dua struktur pengulangan, perintah for dan perintah while. Untuk kontrol pada struktur loop, JavaScript

menyediakan perintah break dan continue.

4. 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.

5. Selain fungsi yang didefinisikan tersendiri, JavaScript juga menyediakan

fungsi-fungsi bawaan, antara lain : parseInt, parseFloat, eval, escape,

unescape dan isNaN.

6. Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada

kenyataannya event di dalam JavaScript adalah klik dari tombol mouse.

Latihan

1. Buatlah program menggunakan JavaScript untuk menampilkan bilangan

genap atau bilangan ganjil terhadap sebuah nilai tertentu.

2. Buatlah program menggunakan JavaScript untuk menghasilkan bilangan

fibonaci!

3. Buatlah program kalkulator menggunakan fungsi dalam JavaScript!

4. Analisa hasil keluaran dari program berikut ini : <HTML>

<HEAD>

<TITLE> ::Latihan Fungsi dan Event:: </TITLE>


<!--

var Global = 0;

var Lokal = 0;


Object, Frame dan Form pada JavaScript 9-1

9 OBJECT, FRAME DAN FORM PADA

JAVASCRIPT

Overview

Untuk menangani permintaan dan pengolahan input data dari user, JavaScript

menyediakan objek-objek yang dapat digunakan sesuai kebutuhan. Pada

sebuah web berbasis basisdata, dibutuhkan pula penanganan form validasi

input dari user dan kemudian dilakukan pengiriman ke server.

Tujuan

1. Mengerti esensi penggunaan Objek dalam JavaScript.

2. Mampu menciptakan objek sendiri.

3. Mampu membuat properti dan metoda untuk suatu objek.

4. Mampu menggunakan objek-objek bawaan pada JavaScript.

5. Memahami Hirarki Objek Browser dan Objek HTML.

6. Mengenal Macam-macam Objek Browser pada JavaScript.

7. Mengerti esensi penggunaan Frame dalam JavaScript.

8. Mengerti esensi penggunaan Form dalam JavaScript.

9. Mampu memecahkan masalah dengan menggunakan Frame dan Form serta

mengimplementasikan ke dalam program JavaScript.



9.1 Penggunaan Objek

9.1.1 Menciptakan Objek Sendiri

JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan

merupakan bahasa object-oriented programming (OOP). Perancang

JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi

bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang

telah dibuat dengan suatu bahasa OOP kedalam dokumen HTML. Selanjutnya

Javascript tidak memiliki encapsulation, inheritance dan abstraction seperti

pada bahasa pemrograman C atau Java. Tetapi class pada JavaScript

menyediakan properti dan metode untuk membuat objek.

JavaScript memperlakukan elemen-elemen yang tampil di jendela

navigator kita sebagai suatu objek, yang artinya adalah elemen yang :

1. Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga bisa

diketahui dimana letak/lokasi objek itu sebenarnya.

2. Dimana kita mengasosiasikan dengan kondisi atau sifat sifat khusus

(properti). Pengertian diatas mungkin sedikit membingungkan bagi

anda, tapi coba lihat contoh berikut ini untuk memperjelas. Misal

bayangkan ada satu pohon yang terletak di dalam satu kebun, dimana

pohon itu mempunyai banyak dahan, dan di salah satu dahannya

terdapat sarang burung. Hirarkinya sebagai berikut :

Pohon

Dahan

Daun

Sarang Burung

o Panjang = 20

o Warna = kuning

o Tinggi = 4

Batang

Akar

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut :

Pohon.Dahan.Sarang Burung

Bayangkan sekarang untuk mengecat atau mengganti warna sarang burung

yang terletak di atas pohon, maka cukup mengetik perintah berikut ini :

Kebun.Pohon.Dahan.Sarang Burung.warna=hijau



Penjelasan diatas merupakan ilustrasi tentang bagaimana memperlakukan

objek didalam JavaScript, perbedaannya adalah bukan pohon sebagai bentuk

objek kita, akan tetapi navigator kitalah sebagai objek utamanya.

9.1.1.1 Mendefinisikan Objek

Berikut ini adalah notasi yang digunakan oleh JavaScript untuk

menggambarkan suatu objek dan propertinya:

nama_objek.nama_properti

Sebagai contoh, objek pegawai memiliki properti sebagai berikut :

pegawai.name="Budi Suseno"

pegawai.age=35

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.2 Mendefinisikan Objek dengan Fungsi

Suatu objek dapat dibuat dengan properti yang telah didefinisikan.

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, dimana properti dari objek mahasiswa

didefinisikan di fungsi tersebut. Kita juga menggunakan kata kunci this,

properti ini merupakan penunjuk ke objek mahasiswa, dalam contoh yang

detailnya dapat anda lihat berikut ini :



function Mahasiswa(NIM, Nama, Umur)

{

this.NIM = NIM;

this.Nama = Nama;

this.Umur = Umur;

}

Untuk seterusnya fungsi diatas disebut konstruktur objek, karena Anda telah

mengkonstruksi sebuah objek dengan fungsi tersebut.

Untuk menciptakan instant dari objek mahasiswa diatas, kita gunakan

kata kunci new (maksudnya satu objek yang lain dengan properti sama

dengan objek mahasiswa) :

Mahasiswa1 = new Mahasiswa("30108010", "Susan", 18);

Untuk melakukan manipulasi pada objek membutuhkan fasilitas

tambahan dari JavaScript yaitu dengan perintah for...in , perintah with,

operator new, dan kata kunci this. Bila Anda ingin menggunakan properti

atau memanggil metode beberapa kali, dapat mempersingkat penulisan

dengan pernyataan with. Pernyataan with menghilangkan perlunya penulisan

nama objek.

with nama_objek{

nama_properti = suatu_nilai;

nama_metode();

}

9.1.2 Objek Standar JavaScript

JavaScript telah menyediakan predefined objects, yaitu objek-objek

yang telah terdefinisi dan siap dipakai. Objek-objek ini distandarisasikan oleh

asosiasi ECMA (European Computer Manufacturer Association). Berikut ini

adalah daftar objek standar JavaScript.



Tabel 9-1 Objek Standar JavaScript

Cara mendefinisikan objek standar JavaScript untuk array, boolean,

date adalah sebagai berikut :

var nama_variabel = new nama_objek()

Cara mendefinisikan objek standar JavaScript untuk math adalah

sebagai berikut :

document.write(nama_objek.nama_metoda())

Cara mendefinisikan objek standar JavaScript untuk string adalah

sebagai berikut :

var nama_variabel_hasil = nama_variabel_string.metoda()

9.1.3 Metoda

Metoda adalah suatu fungsi yang diasosiasikan dengan satu objek,

satu aksi yang bisa di eksekusi pada satu objek. Metoda pada objek dari

navigator adalah fungsi-fungsi yang sudah didefinisikan sebelumnya

(predefined) berdasarkan aturan-aturan HTML dan tidak bisa dimodifikasi.

Akan tetapi bisa dibuat metoda yang mempersonalisasikan sendiri untuk



setiap objek yang di buat. Perhatikan contoh tentang dokumen HTML, yang

terdiri dari objek yang bernama document, objek ini mempunyai metoda

yang bernama write() yang berguna untuk memodifikasi isi dari dokumen

HTML dengan menampilkan teks tertentu. Maka metoda itu akan di panggil

dengan cara berikut :

window.document.write()

9.1.3.1 Deklarasi Metoda

Suatu fungsi yang berasosiasikan objek acuan adalah metode. Format

berikut meng-asosiasikan fungsi dengan suatu objek :

ObjekName.MetodeName = function_name

Kemudian metode tersebut berkerja dengan suatu objek :

ObjekName.MetodeName(parameters);

9.1.3.2 Metoda Write

Metoda write() dari satu objek dokumen memungkinkan untuk

memodifikasi secara dinamik isi dokumen HTML. Berikut ini adalah sintaks

secara umum dari metoda write():

window.document.write(ekspresi1, ekspresi2, ...)

Secara praktisnya bisa menuliskan metoda write() sebagai berikut :

1. Menuliskan secara langsung teks ke dalam parameter :

document.write("selamat");

2. Melewatkan teks tersebut melalui suatu variabel :

str='selamat';

document.write(str);

3. Menggabungkan kedua cara diatas :

str='selamat';

document.write('dia mengucapkan ' + str);

4. Menyisipkan langsung satu ekspresi, yang akan dievaluasi dan dijalankan

segera mungkin, dan hasilnya langsung ditampilkan

test='akar dari bilangan 2 adalah : ';



document.write(test+sqrt(2));

5. Cara lain juga bisa dengan memasukkan tag HTML kedalam metoda

write:

document.write('<font color="#FF0000">Hallo</font>');

9.1.3.3 Metoda Writeln

Metoda writeln() berfungsi sama persis seperti metoda write

dengan penambahan pemindahan ke baris baru setiap kali usai menuliskan

metodanya. Akan tetapi dokumen HTML tidak mengenal adanya penambahan

baris baru dengan cara tradisional, penambahan baris baru hanya bisa

dilakukan dengan menggunakan tag <BR>, oleh karena itu metoda ini tidak

terlalu berguna di dalam HTML, kecuali diantara tag <PRE> dan </PRE>

dimana kita memperlakukan teks didalamnya seperti file teks biasa.

9.1.4 Object Browser

9.1.4.1 Hirarki Objek Browser dan Objek HTML

Gambar 9-1 Hirarki objek browser & objek HTML pada JavaScript

Hirarki ini penting untuk membuat acuan kepada Objek dan

propertinya. Turunan dari suatu Objek adalah properti dari objek orang

tuanya. Karena semua objek adalah merupakan turunan dari objek window,

Objek

Browser

Objek

HTML

Objek Browser

Objek HTML



sehingga objek window sendirinya tidak memiliki acuan ke objek maupun

properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada

window lain membutuhkan tambahan nama window kepada Objek acuan-nya.

Contoh :

window.document

window.document.forms["frForm"]

window.location

Tabel 9-2 Macam-macam Objek Browser

Nama

Objek Fungsi

Properti

Objek

navigator Meyimpan informasi tentang browser yang

digunakan pengguna, seperti nama dan versi

browser

window Menyimpan segala macam informasi tentang

jendela browser

- Location

- History

- Document :

Form

Anchor

Link

9.1.4.2 Metoda dari Objek Window

Metoda dari objek window dapat digunakan untuk menampilkan

kotak dialog, yang merupakan satu jendela yang tampil di bagian depan (layer

paling atas) menyusul satu event yang di jalankan, dan memungkinkan untuk :

1. Memberikan peringatan kepada user

2. Memberikan pilihan yang harus dipilih oleh user

3. Meminta user untuk mengisi atau melengkapi isian pada suatu form

field.

Tabel 9-3 Macam-macam Metoda Objek Window

Nama

Metoda Fungsi Contoh

alert() Memungkinkan navigator

untuk menampilkan satu

kotak dialog yang berisi satu

tombol OK dan teks

keterangan

alert('Input Sukses!');



close() Untuk menutup window

acuan. window.close();

confirm() Sama seperti metoda alert,

dengan tambahan dapat

melakukan pilihan OK atau

cancel

confirm('teks');

prompt() Mendapatkan informasi yang

diberikan oleh user. prompt('teks_pertanyaan',

'teks_default');

timeoutID =

setTimeout(

expression,

msec)

Dengan metode ini, evaluasi

dari ekspresi adalah jumlah

delay dalam milidetik.

timeoutID adalah hanya

digunakan oleh metode

clearTimeout.

clearTimeout

(timeoutID).

Metode ini membatalkan

time-out yang ditentukan

oleh metode setTimeout.

9.2 Penanganan Frame dan Form pada JavaScript

9.2.1 Window dan Frame

Window dan frame membuat bingung banyak pengembang halaman

Web dari pada aspek-aspek browser lainnya. Ketika Netscape Navigator

berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan

optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika

user memilih menu option File|New Web Browser, suatu window baru akan

di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup

jendela yang baru tersebut.

Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET>

</FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah

frame. Ketika dokumen frame ditutup, frame menghilang karena

keberadaannya tergantung pada dokumen tersebut.

9.2.2 Properti Objek Window

Seperti telah dijelaskan sebelumnya mengenai objek window, pada

bagian ini akan dijelaskan lebih lanjut lagi mengenai Objek window tersebut,

karena objek ini sangat berhubungan dengan frame dan form yang akan

dibangun pada sebuah halaman HTML.



Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk

membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas

pada menampilkan pesan, tetapi sangat tergantung pada parameter yang

diberikan. Berikut ini adalah properti dari objek window yang akan

mempengaruhi fleksibilitas dari jendela browser :

1. defaultStatus.defaultStatus adalah pesan yang dimunculkan pada

status bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset

dari onMouseOver event handler, event handler harus

mengembalikan true untuk perubahan status.

2. frames. Property ini adalah suatu array yang mengandung objek

frame. Frame mewarisi semua properti dan metode dari objek

window.

3. length. nilai dari properti ini adalah jumlah frame dalam frame array.

4. parent. Dari suatu acuan frame, ini adalah window yang mana

frameset berada. Suatu frame diantara frameset tersebut dapat

mengacu pada frame lain dalam frameset dengan menggunakan

parent.frames[index] tanpa memiliki acuan ke nama window.

5. self. Ini adalah sama dengan window atau frame yang sekarang.

6. status. Ini adalah pesan transient yang mana diset dengan

onMouseOver event handler.

7. top. Property ini digunakan sebagai acuan window yang laing atas.

Dapat digunakan oleh child windows atau embedded filesets untuk

mengacu pada window original.

8. window. Property ini adalah sama dengan window sekarang.

Bentuk untuk mengacu properti window adalah :

window.propertyName self.propertyName

top.propertyName parent.propertyName

windowVar.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.google.com onMouseOver="window.status='Klik

disini untuk keterangan lebih lengkap'; return true;"

onMouseOut="window.status=''; ">Klik disini</A>

</BODY>

</HTML>

http://www.google.com/



Output :

Gambar 9-2 Contoh Penggunaan Properti Status pada Status Bar

9.2.3 Metode Objek Form

Objek form hanya memiliki satu metode-submit. Metode submit

melakukan aksi yang sama seperti tombol submit pada HTML form dan

memiliki tata cara penulisan sebagai berikut:

document.formName.submit()

9.2.4 Objek element

Objek elemen berpengaruh pada isi elemen dalam tag

<FORM></FORM>. Tabel 9 memperlihatkan elemen objek dan properti-nya.

Tabel 9-4 Properti dari Objek Element

Element objek Properti

button name, value

checkbox name, value, checked, defaultChecked

hidden name, value

password name, value, defaultValue

radio name, value, checked, defaultChecked, length

reset name, value

select name, length, options array, selectedIndex

submit name, value

text name, value, defaultValue

textarea name, value, defaultValue



Properti adalah menggunakan pengalamatan seperti

document.elementName.property, atau

document.formName.elements[index].propertyName,

dimana elementName adalah nilai dari nama property untuk objek elemen.

9.2.5 Metode element

Metode element melakukan emulasi dari sepupu mereka, yaitu

penanganan event:

blur(). Metode ini memindahkan fokus dari objek yang ditentukan, tetap

tidak membuat fokus pada objek lain.

click(). Metode ini melakukan suatu simulasi klik mouse pada suatu objek

yang ditentukan. Ketika mengacu pada element radio, bentuknya adalah

document.radioName[index].click().

focus(). Metode ini memberikan fokus pada objek tertentu.

select(). Metode ini men-select seluruh text area.

Kecuali objek radio, metode dialamatkan sebagai

document.elementName.metodename(). Tabel 10 mendaftarkan element

objek-objek dan metode yang bersesuaian

Tabel 9-5 Metode-Metode dari Elemen Objek-Objek

Elemen objek Metode

button click

checkbox click

hidden (tidak ada metode)

password blur, focus, select

radio click

reset click

select blur, focus

submit click

text blur, focus, select

textarea blur, focus, select



Rangkuman

1. JavaScript memperlakukan elemen-elemen yang tampil di jendela

navigator kita sebagai suatu objek.

2. Programer dapat menciptakan sendiri objek yang ingin ditampilkan dalam halaman web, tetapi JavaScript juga menyediakan objek yang telah

terdefinisi.

3. Setiap objek mempunyai metoda yaitu suatu fungsi yang diasosiasikan

dengan satu objek, satu aksi yang bisa di eksekusi pada satu objek.

4. Untuk menangani frame dan form pada JavaScript, programer tinggal

menggunakan objek browser beserta metoda ataupun properti yang

sesuai dengan kebutuhan.



Latihan

1. Sebutkan macam-macam objek standar JavaScript yang Anda ketahui!

2. Buatlah objek initBarang yang mempunyai tiga properti, yaitu Nama,

Supplier, dan Harga. Di samping itu, tambahlah dua metoda, yaitu

Tulis untuk menulis nilai dari properti-properti objek ini dan Ubah untuk mengubah properti initBarang. Tampilkan hasil keluaran dengan

menggunakan metode objek window alert()!

Output :

Nama : Acer Aspire 4710

Supplier : Acer

Harga : 6.890.000

Nama Barang diubah

Nama : Acer Aspire 4720s 4510MGHi

Supplier : Acer

Harga : 6.890.000

3. 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.bgColor= this.options[this.selectedIndex].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>

</FORM>




</SCRIPT>

</BODY>

</HTML>

4. Buatlah halaman HTML dengan sebuah kotak teks yang menampilkan

waktu dari mesin lokal pengguna. Tampilan sebagai berikut :


Pengantar Pemrograman Web dengan PHP 10-1

10 PENGANTAR PEMROGRAMAN WEB

DENGAN PHP

Overview

PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada

serverside. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan

pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. Ketika

seorang pengguna internet membuka suatu situs yang menggunakan fasilitas

server side scripting PHP, maka terlebih dahulu server yang bersangkutan akan

memproses semua perintah PHP di server lalu mengirimkan hasilnya dalam

format HTML ke web server pengguna internet tadi. Sehingga kode asli yang

ditulis dengan PHP tidak terlihat di browser pengguna.

PHP merupakan software yang open source bebas. Jadi anda dapat merubah

source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat

berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi

(Windows dan Linux) dan web server apapun (misalnya: PWS, IIS, Apache).

Tujuan

1. Memahami cara melakukan instalasi Apache Web Server, PHP dan MySQL

2. Memahami cara melakukan konfigurasi pada web server

3. Mampu membuat halaman web sederhana dengan PHP

4. Mengenal Tipe Data PHP

5. Mengenal Variable PHP

6. Menggunakan Operator Aritmatika

7. Menggunakan Operator Logika

8. Menggunakan Operator Penggabungan String



10.1 Pengenalan Lingkungan Kerja Web Server

10.1.1 Instalasi Apache Web Server, PHP & MySQL sebagai

DBMS Pendukung

Pada umumnya, prinsip hubungan client (web browser) dan server

(web server) dalam web dapat digambarkan sebagai berikut :

Gambar 10-1 Hubungan Client dan Server dalam Web

Untuk menjalankan PHP, dibutuhkan beberapa perangkat lunak hal

sebagai berikut :

a. Apache Web Server b. PHP (www.php.net)

c. MySQL (http://www.mysql.com).

Langkah-langkah instalasi dan konfigurasi perangkat lunak diatas, akan

dipraktekkan secara langsung pada pelaksanaan praktikum. Berikut ini

merupakan ilustrasi komponen yang diperlukan untuk membangun web

server apache yang mendukung PHP dan DBMS mysql :

Gambar 10-2 Komponen Pendukung Aplikasi Web



10.1.2 Membuat halaman web sederhana dengan PHP

Pastikan web server dan skrip PHP anda telah berjalan dengan baik

sebelum memulai pemrograman PHP. Untuk membuat web dengan script

PHP, cukup mempersiapkan editor teks.

Fungsi-fungsi yang ada di PHP uncase sensitive, tetapi variabelnya

case sensitive (membedakan huruf besar dan kecil).

Terdapat beberapa cara agar anda dapat menulis script PHP.

Terdapat tag pembuka dan penutup yang menyatakan PHP untuk memulai

atau mengakhiri apa yang akan diitepretasikan melalui web browser. Beberapa

contohnya akan diberikan di bawah ini:

Tabel 10-1 Jenis-Jenis Tag PHP

Contoh penggunaan:

1. Pada contoh dibawah ini, tulisan yang akan di parsing oleh PHP adalah

“server side scripting”. Sedangkan tulisan “Mari kita belajar” dan

“menggunakan PHP” merupakan tulisan yang ditulis menggunakan HTML.

Dalam contoh ini, PHP disisipkan pada tag HTML.

<p>Mari kita belajar

<?php echo ‟server side scripting‟; ?>

menggunakan PHP </p>

2. Penulisan lain yang sedikit lebih variatif dijabarkan dibawah ini. PHP hanya

akan menampilkan salah satu dari kalimat “Rajin pangkal pandai.” atau

“Hemat pangkal kaya.” tergantung nilai True / false dari variabel $pilih.

<?php

if ($pilih) {

?>

<i> Rajin pangkal pandai. </i>

<?php

}else{

?>

<b> Hemat pangkal kaya. </b>

<?php

}?>

Tag Pembuka Tag Penutup

<?php ?>

<? ?>

<script language=”php”> </script>



3. Cara berikutnya adalah:

<script language=”php”>

echo „Semua yang datang berprofesi sebagai PHP

Web Programmer‟;

</script>

4. Penggunaan seperti tag ASP juga diperbolehkan:

<%

echo „Tag ASP juga dapat dibaca oleh PHP ‟;

%>

10.1.3 Penggunaan Komentar pada PHP

PHP memberikan cara agar programer dapat membuat komentar

pada scriptnya. Komentar ini pun dapat dibuat untuk yang hanya 1 baris script

(one-line comment) maupun beberapa baris script (multi-line comment).

Tabel 10-2 Jenis-Jenis Komentar pada PHP

Tanda Keterangan

// echo „komentar PHP‟; // contoh dengan jenis one-line c style

# echo „komentar PHP‟; # contoh dengan jenis one-line shell style

/*

*/

echo „komentar multi line‟; /* ini merupakan contoh penggunaan

multi-line comment yang memberikan komentar untuk beberapa

baris kode PHP

*/

10.2 Tipe data

Tabel 10-3 PHP Mendukung 8 Tipe Data Primitif

Tipe Data Keterangan Contoh

boolean nilai = TRUE/FALSE

integer Decimal : [1-9][0-9]* | 0 0, 1, 6, 30, 20000, 399984

Hexadecimal : 0[xX][0-9a-fA-F]+ 0x0, 0xf, 0xfc3da34,

0X0F0FD32

Octal : 0[0-7]+ 00, 032, 07344733

Integer : [+-]?decimal |

[+-]?hexadecimal |

[+-]?octal

-2, -300040,

-0xf, -0X0FOFD32,

-032, -07344733



float/double Merupakan nilai desimal/pecahan 5.235, 2.3e5, 6E-10

string Kumpulan karakter. Ada 3 jenis :

- single qouted

- double qouted

- heredoc qouted

'

"

array sebuah tipe yang memetakan ke

suatu nilai

object Instansiasi dari class

resource Variabel spesial

NULL Variable yang tidak mempunyai

nilai. NULL berbeda dengan 0.

- variabel di assign dengan NULL

- variabel belum diberi value

- variabel dilakukan fungsi unset()

$varnull = NULL

Unset $varnull

10.2.1 Array

Array pada PHP merupakan susunan map (peta). Array merupakan

sebuah tipe yang memetakan ke suatu nilai. Array juga merupakan sebuah set

variabel yang terdiri dari sekumpulan jenis data yang sama, disimpan

menggunakan indeks dalam satu variabel. PHP mengenal dua macam indeks,

yaitu indeks numerik (menggunakan angka untuk menandai tiap elemen) dan

indeks asosiatif (memberikan nama untuk masing-masing elemen). Array PHP

dapat anda gunakan sebagai benar-benar array, list (vector), hashtable,

dictionary, collection, stack, queue, tree dan lain sebagainya.

Array dapat berdimensi satu, dua, atau lebih :

a. Array dimensi satu (one-dimensional array) mewakili bentuk suatu

vektor.

b. Array dimensi dua (two-dimensional array) mewakili bentuk dari suatu

matrik.

c. Array dimensi tiga (three-dimensional array) mewakili bentuk suatu

ruang.

1.Array Berindeks Numerik

Inisialisasi sebuah array dilakukan dengan cara berikut :

$nama_variabel = array(nilai1, nilai2, nilai3);

Selain cara di atas, pembuatan array dapat juga dilakukan dengan cara

seperti contoh berikut :



$jurusan[] = "Komputerisasi Akuntansi";

$jurusan[] = "Ilmu Komputer";

$jurusan[] = "Teknologi Informasi";

2.Array Berindeks Asosiatif

Untuk membuat array berindeks asosiatif, kita membutuhkan label

atau nama untuk masing-masing elemen seperti dalam contoh berikut :

$jurusan = array(IE=>" Komputerisasi Akuntansi",

CS=>"Ilmu Komputer",IT=>"Teknologi Informasi");

3.Navigasi Array

Untuk mengakses array berindeks numerik dapat dilakukan dengan

mengarahkan urutan indeks dari elemen array yang dituju.

for($i=0;$i<3;$i++){

echo("Array \$jurusan index ke [$i] adalah

$jurusan[$i] <br>");}

4.Fungsi-Fungsi Array

a. sort() : Untuk mengurutkan elemen-elemen dalam array berindeks

numerik.

b. asort() : Untuk mengurutkan elemen-elemen dalam array berindeks

numerik menurut isinya.

c. ksort() : Untuk mengurutkan elemen-elemen dalam array berindeks

numerik menurut indeksnya.

5.Implementasi Array

Sintak array:

array( [key => ] value , . . .)

Key dapat berupa integer ataupun string. Value dapat berupa apapun.

Contoh penggunaan:

<?php

/* Contoh simple array dengan key dan value yang

Bervariasi */

$a = array("Band" => "Blink",

"code" => 182,

5 => " + 311 + ",

14 => 5000

);

echo $a["Band"]; // Blink

echo $a["code"]; // 182

echo $a[5]; // + 311 +



echo $a[14]; // 5000

// Contoh penggunaan array didalam array

$aa = array("music" => array(1=>"Jazz", 2=>"Classic",

3=>"Metal"),

"sport" => array(1=>"basketball", 2=>"golf",

3=>"airsoftgun")

);

echo $aa["music"][3]; // Metal

echo $aa["music"][1]; // Jazz

echo $aa["sport"][3]; // airsoftgun

?>

Pada array, jika anda melakukan assign nilai pada array dengan key

array secara eksplisit tidak ditulis, maka indeks integer maximum akan

digunakan, dan key baru adalah indeks key maksimum + 1. Jika

sebelumnya tidak ada indeks yang digunakan maka key adalah 0. Contoh

penggunaan:

<?php

$myArray[] = "Please ";

$myArray[3] = "me ";

$myArray[6] = "on ";

$myArray[] = "my own";

for ($i=0;$i<=7;$i++){

echo "Array ke $i: $myArray[$i] <br />";

}

?>

10.2.2 Object

Hal yang membedakan PHP4 dan PHP5 adalah performansi dari

Zend PHP engine yang mengakibatkan script berjalan lebih cepat dan efisien.

Perubahan lain yang juga menjadi fokus utama PHP5 adalah fitur object-

oriented (OO) yang lebih baik. Beberapa fitur baru yang menyangkut konsep

OO ditambahkan. Akan dibahas pada bab selanjutnya.

10.2.3 Resource

Resource adalah variable spesial, memegang peranan terhadap

external resource seperti melakukan koneksi dengan database, fungsi-fungsi

FTP, OpenSSL, PDF document, Image, XML parser dan lain sebagainya.

Resource lengkap dapat anda lihat pada dokumentasi PHP yang dapat

didownload di www.php.net.

http://www.php.net/



10.3 Variable PHP

Variable pada PHP direpresentasikan oleh karakter dollar ($) dan

dilanjutkan dengan nama variable tersebut. Variable pada PHP bersifat case-

sensitive. Nama variable yang valid pada php dimulai dengan huruf atau

underscore (_) dan diikuti oleh huruf, angka atau underscore. 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, karakter ASCII dari 127 sampai

255 (0x7f sampai 0xff). Variable tidak boleh menggunakan tanda baca ataupun

reserved word PHP, seperti print, echo.

Contoh :

<?php

$a="5";

$b="2.5";

$komentar="Selamat Datang di PHP";

echo ("Nilai variabel a adalah = $a <br>");

//variabel bertipe integer

echo ("Nilai variabel b adalah = $b <br>");

//variabel bertipe real

echo ("Nilai variabel komentar adalah = $komentar<br>");

//variabel bertipe string

$hasil=$a+$b;

echo ("Hasil jumlah a dan b adalah = $hasil <br>");

//variabel bertipe double

$tgl = date("d F Y");

//variabel bertipe tanggal

$nama = "Politeknik Telkom";

$garis= "=====================================";

echo "<p>";

echo $garis."<br>";

echo $komentar. " Di Lab ". $nama. "<br>Belajar dengan giat

ya.... <br>";

echo $garis."<br>";

echo "Tanggal ".$tgl;

?>



10.4 Operator

10.4.1 Menggunakan Operator Aritmatika

Tabel 10-4 Macam-macam Operator Aritmatika

Contoh Nama Keterangan Hasil jika $a=5 dan $b=3

-$a Negasi Lawan dari $a. -5

$a + $b Penjumlahan $a ditambah $b 8

$a - $b Pengurangan $a dikurang $b 2

$a * $b Perkalian $a dikali $b 15

$a / $b Pembagian $a dibagi $b 1.66666666667

$a % $b Modulo Sisa bagi dari $a

dibagi $b

2.

Jika n%m dan n<m, maka

hasilnya akan selalu n

Menggunakan Operator Logika

Tabel 10-5 Macam-macam Operator Logika

Contoh Nama Keterangan

$a and $b / $a && $b And TRUE jika $a dan $b TRUE.

$a or $b / $a || $b Or TRUE jika ada salah satu $a atau $b

TRUE.

$a xor $b Xor TRUE jika salah satu saja $a atau $b

TRUE

! $a Not TRUE jika $a tidak TRUE.

Menggunakan Operator Penggabungan String

Terdapat dua cara penggabungan string:

a. Menggunakan operator konkatenasi („.‟).

b. Menggunakan operator assignment konkatenasi („.=‟).

Contoh :

<?php

$a = “Hallo”;

$b = $a.”Selamat Datang di PHP”;

echo $b; //$b berisikan “Hallo Selamat datang di PHP”

$x = “Politeknik ”;

&y .= “Telkom”;

echo $y; //$y berisikan Politeknik Telkom

?>



Rangkuman

1. PHP merupakan serverside scripting yang open source dan dapat

berjalan lintas platform.

2. Untuk menjalankan PHP dibutuhkan instalasi Web Server, software PHP

dan Database Server. 3. Dengan berjalan dalam sebuah web server, maka secara otomatis

program ini bersifat multiuser.

4. PHP mendukung delapan jenis tipe data, yaitu : boolean, integer,

float/double, string, array, object, resource dan NULL.

5. Variable pada PHP direpresentasikan oleh karakter dollar ($) dan

dilanjutkan dengan nama variable tersebut. Variable pada PHP bersifat

case-sensitive.

6. Variable dalam PHP tidak perlu dideklarasikan terlebih dahulu sebelum

digunakan.

7. PHP menyediakan operator aritmatika, logika dan penggabungan string.

Latihan

1. Jelaskan kelebihan PHP di bandingkan dengan pemrograman web lainnya,

misal dengan ASP!

2. Apa saja yang diperlukan untuk dapat menjalankan aplikasi web dengan

PHP?

3. Jelaskan beserta contoh jenis tipe data yang Anda ketahui!

4. Sebutkan syarat-syarat yang berlaku untuk membuat variable di PHP!

5. Buatlah program untuk menghitung volume balok!

6. Buatlah program untuk menghitung luas persegi panjang!


Mengolah Data dalam Form 11-1

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.

Untuk memudahkan pengaturan struktur program dalam PHP, user dapat

membuat fungsi maupun menggunakan fungsi bawaan PHP yang dapat

dipanggil setiap kali dibutuhkan.

Tujuan

1. Mengerti esensi penggunaan Percabangan (pemilihan/kodisional) dalam

PHP.

2. Memahami bentuk umum Percabangan. 3. Mampu memecahkan masalah sederhana dengan menggunakan

Percabangan dan mengimplementasikan ke dalam program PHP.

4. Mengerti esensi penggunaan Pengulangan (Looping) dalam PHP.

5. Memahami bentuk umum Pengulangan.

6. Mampu memecahkan masalah sederhana dengan menggunakan

Pengulangan dan mengimplementasikan ke dalam program PHP.

7. Memahami penggunaan Fungsi.

8. Memahami parameter pada fungsi dalam PHP.

9. Memahami bentuk–bentuk fungsi bawaan dalam PHP.

10. Mampu mengimplementasikan Fungsi pada suatu studi kasus PHP.

11. Mengerti esensi penggunaan class di PHP.

12. Membuat sebuah class yang memiliki field dan fungsi.



11.1 Kondisional

Statement kondisional digunakan pada saat anda akan melakukan

eksekusi blok statement tertentu. Misalnya anda memiliki beberapa blok

statement dan anda hanya ingin mengeksekusi salah satunya. PHP dapat

membantu menjalankan block yang anda inginkan dengan adanya pengecekan

kondisional diawal block statementnya. Sintak PHP berkaitan dengan

statement kondisional adalah statemen if else elseif dan statemen switch.

Tabel 11-1 Statement Kondisional pada PHP

Statement

kondisional Contoh

if-else-elseif <?php

$nilai = 83;

if ($nilai > 70) {

echo "Selamat Anda Lulus Ujian";

} elseif ($nilai == 70) {

echo "Anda harus ujian lagi";

} else {

echo "Anda Tidak Lulus"; }

?> Switch-case <?

switch ($bilangan){

case 28:

echo "bilangan genap";

break;

case 3:

echo "bilangan ganjil";

break;

default:

echo "bukan bilangan";

break; }

?>

11.2 Pengulangan

Terkadang pada saat scripting terdapat statement yang perlu

dieksekusi secara berulang agar dapat memperoleh output yang dibutuhkan.

Yang perlu diperhatikan jika ingin melakukan pengulangan adalah kondisi apa

pengulangan dimulai, kondisi apa pengulangan berhenti dan seperti apa

pengulangan dilakukan. Beberapa sintak PHP berkaitan dengan pengulangan

adalah while, for, do-while, foreach.



Tabel 11-2 Statement Kondisional pada PHP

Statement

Pengulangan Contoh

for <?php

for ($i=1;$i<=12;$i++){

echo "<br />for ke $i.";

}

?> while <?php

// Contoh while model 1

$i=1;

while ($i<=12){

echo "<br />while model 1 ke $i.";

$i++;

}

// Contoh while model 2

$i=1;

while ($i<=12):

echo "<br />while model 2 ke $i.";

$i++;

endwhile;

?> do-while <?php

$i = 1;

do {

echo "<br />do-while ke $i";

$i++;

} while ($i <= 10);

?> foreach <?php

$arr = array("Strife",

"Deftones",

"Poison The Well",

"Walls of Jericho",

"As I Lay Dying"

);

foreach ($arr as $varr){

echo "<br />$varr";

}

?>

11.3 Membuat Fungsi

PHP menyediakan beberapa fungsi bawaan, selain itu programmer PHP

juga dibebaskan untuk dapat membuat fungsi sendiri. Aturan penamaan fungsi



sama dengan aturan penamaan variable. Berikut contoh bentuk fungsi pada

PHP :

<?php

// Contoh fungsi tanpa parameter

function dowrite(){

echo "Simple PHP function";

}

dowrite(); // Pemanggilan fungsi

// Contoh fungsi dengan parameter

function dosum($a,$b){

return $a+$b;

}

echo dosum(4,2); // Menampilkan nilai dari fungsi yang dipanggil

?>

11.4 Menggunakan fungsi bawaan PHP

Terdapat beberapa fungsi bawaan PHP atau fungsi lain yang

membutuhkan PHP extension yang secara default tidak disertakan, misalnya

fungsi mysql_connect() butuh extension mysql pada paket PHP5,

imagerotate() butuh extention GD. Extension yang didukung oleh engine PHP

yang anda install dapat dilihat menggunakan fungsi phpinfo(). Pada bagian ini,

akan dikenalkan fungsi bawaan PHP yang secara default telah disertakan pada

PHP5.

11.4.1 Math Function

a. float ceil (float value)

Melakukan pembulatan ke nilai yang lebih besar.

Contoh : <?php

echo ceil(5.2); // menghasilkan 6

echo ceil(2.5); // menghasilkan 3

echo ceil(-10.2); // menghasilkan -10

?>

b. string decbin (int number)

Melakukan konversi dari decimal ke binary. Contoh :



<?php

echo decbin(10); // menghasilkan 1010

echo decbin(255); // menghasilkan 11111111

?>

c. int mt_rand ([int min, int max])

Melakukan random angka integer. Jika tidak terdapat parameter yang

diinput maka fungsi ini akan melakukan random dari range 0 sampai

maximal angka random yang diberikan oleh engine PHP. Untuk memberi

range random, anda dapat menulis batas minimal dan maximal pada

parameternya. <?php

echo mt_rand() . "<br />"; // menghasilkan angka random 1

echo mt_rand() . "<br />"; // menghasilkan angka random 2

echo mt_rand(1, 5); // menghasilkan angka random antara 1-5

?>

11.4.2 String Function

a. array explode ( string delimiter, string string [, int limit] )

Melakukan pemisahan string oleh string pemisahnya dan menghasilkan

array dari string yang telah dipisahkan tersebut. <?php

$mahasiswa = "budi dewi susi sinta surya donita

angga deni dedi peri desi";

$arr = explode(" ",$mahasiswa);

foreach ($arr as $vass) {

echo "<br/>$vass";

}

// Contoh explode dengan limit

$brr = explode(" ",$mahasiswa, 5);

foreach ($brr as $vass) {

echo "<br/>$vass";

}

?>

b. string nl2br ( string string )

Merubah new line (\n) menjadi <br /> <?php

echo nl2br("Politeknik \n Telkom");

?>



c. string number_format ( float number [, int decimal [, string penanda

decimal, string penanda ribuan]] )

Memformat bilangan dan mengelompokan ribuan serta angka setelah

penanda decimal. <?php

$bilangan = 2362454.385;

$nbilangan = number_format($bilangan, 2, ',', '.');

echo $nbilangan;

?>

d. mixed str_replace ( mixed search, mixed replace, mixed subject [, int

&count] )

Melakukan replace kata yang dicari dengan kata baru. <?php

echo $kalimat; // Sebelum direplace

echo "<br />";

$kalimat = str_replace($client_side, $server_side,

$kalimat);

echo $kalimat; // Setelah direplace

?>

e. int strlen ( string string )

Menghasilkan nilai berupa jumlah string pada parameter input. <?php

$kalimat = "Giving and caring the world";

$jumlah = strlen($kalimat);

echo "Terdapat $jumlah karakter";

?>

11.5 Class

Class adalah sekumpulan variabel/property dan fungsi/method yang

mengolah variabel-variabel ini. Class sering disebut juga sebagai objek.

Dengan menggunakan objek proses pembuatan program menjadi lebih cepat,

karena objek-objek yang sudah ada dapat dipakai untuk membuat objek yang

lain. Struktur class di PHP adalah sebagai berikut :

class namaobjek {

var $property;

function method($arg) {

//definisi method;

}

}



Sintaksis di atas mendefinisikan sebuah objek yang bernama namaobjek

dengan satu property $property dan satu method yaitu method().

Pada bagian ini akan diberikan contoh tipe data object/class.

<?

class kendaraan {

var $penumpang;

function isi_penumpang($nama){

$this->penumpang[] = $nama;

}

function lihat_penumpang(){

print_r($this->penumpang);

}

}

$mobil = new kendaraan;

$mobil->isi_penumpang("Hartawan");

$mobil->isi_penumpang("Budiman");

$kapal = new kendaraan;

$kapal->isi_penumpang("Peterpan");

$kapal->isi_penumpang("Putri Salju");

$kapal->isi_penumpang("Kapten Hook");

$mobil->lihat_penumpang();

$kapal->lihat_penumpang();

?>

Pada contoh diatas diberikan sebuah kelas kendaraan yang

mempunyai properti (yang dituliskan berupa variable) $penumpang dan 2

method (ditulis sebagai function) yaitu isi_penumpang yang akan menyimpan

value dari parameter input (berupa variable $nama) ke properti $penumpang

dan lihat_penumpang yang akan menampilkan semua value dari properti

$penumpang.

Baris selanjutnya $mobil melakukan create instance dari class

kendaraan. Kemudian melakukan pemanggilan method isi_penumpang dan

mengisinya dengan value “Hartawan” serta “Budiman”. Barisan selanjutnya,

$kapal juga mengcreate instance / membuat object baru dari class kendaraan

dengan value yang berbeda sebanyak 3 kali. Baris selanjutnya variable object

$mobil dan $kapal memanggil method lihat_penumpang yang akan

menampilkan value pada properti object tersebut di layar.



Rangkuman

1. PHP menyediakan struktur kontrol berupa kondisional dan pengulangan,

sama halnya seperti pada bahasa pemrograman lainnya.

2. Struktur kondisional terdiri dari statemen if else elseif dan statemen

switch. 3. Sedangkan struktur kontrol pengulangan terdiri dari while, for, do-while,

foreach.

4. Pemrograman PHP menyediakan fungsi bawaan dan fungsi yang dapat

dibuat sendiri oleh user.

5. Fungsi bawaan dalam PHP antara lain untuk fungsi pengolahan

matematika dan fungsi untuk pengolahan string.



Latihan

1. Jelaskan macam-macam struktur kontrol yang terdapat pada PHP dan apa

fungsinya!

2. Buatlah program untuk melakukan pengecekan hari menurut jam dari

sistem pada komputer Anda!

3. Buatlah program untuk menampilkan pilihan tanggal seperti tampilan di

bawah ini :

4. Buatlah fungsi untuk menghitung volume suatu bangun ruang, dengan

pilihan balok, tabung, kubus dan bola!

5. Buatlah program untuk menampilkan jumlah karakter pada tulisan berikut

ini dan ganti kata diare dengan kata tubercolosis, tampilkan kata sebelum

dan sesudah berubah :

Penyakit diare sampai kini masih menjadi masalah kesehatan masyarakat,

walaupun secara umum angka kesakitan masih berfluktuasi. Diare dapat

dicegah dengan menjaga kebersihan lingkungan

6. Buatlah sebuah class untuk pegawai yang mempunyai property

nama=Ananda, umur=25 dan jabatan=staf operasional. Class tersebut

mempunyai method yang digunakan untuk mengubah umur dan method untuk mengubah jabatan. Tampilkan data awal pegawai dan data setelah

diubah!



12 MENGOLAH DATA DALAM FORM

Overview

Pengolahan data pada server side scripting dilakukan di sisi server (dalam hal ini,

yang menjadi pemroses adalah web server) untuk kemudian hasilnya

dikembalikan kembali ke client dalam format html. Dalam pengolahan data

menggunakan server side scripting, dikenal istilah requests dan responds.

Request merupakan permintaan layanan dari sisi client kepada server. Proses

request dimulai ketika user memasukkan data melalui media inputan pada

form kemudian men-submit form.

Respond merupakan hasil pengolahan oleh web server yang dikirimkan ke

client.

Berbeda dengan server side scripting, pengolahan data client side scripting

dilakukan oleh web browser, jadi semua pengolahan data dilakukan di sisi

client.

Tujuan

1. Memahami kegunaan elemen – elemen dalam form

2. Mengolah data yang dimasukkan melalui form



12.1 Menyiapkan Form

Form adalah sebuah tempat bagi komponen-komponen yang berfungsi

untuk menerima masukkan data dari user. Pada prinsipnya penanganan form

pada PHP menggunakan tag-tag FORM dari HTML. Jadi bagi yang telah

menguasai pembuatan form di HTML, maka tidak akan kesulitan di dalam

pengolahan form di PHP.

Tag HTML untuk membuat form adalah :

<FORM METHOD = .......... ACTION = .........</FORM>

Kita juga bisa menyisipkan tag HTML form ini ke dalam skrip PHP, contohnya:

echo("<FORM METHOD = ... ACTION = ... </FORM>");

Atribut METHOD mendefinisikan bagaimana data yang dikirimkan dari form

ini akan dibaca untuk diproses oleh script PHP. ACTION diisi dengan nama

file tujuan yang akan memproses data yang dimasukkan dalam form. Untuk

penjelasan atribut-atribut yang dimiliki oleh form, bisa diperoleh dari sumber-

sumber yang membahas form pada HTML.

12.1.1 Menangkap Variabel dari Form

Penggunaan variabel akan terlihat nyata kegunaannya pada saat kita

mengolah data dari form, terutama mengolah database.

Untuk lebih jelasnya, cobalah skrip-skrip berikut :

Skrip variabel.php

<HTML>

<HEAD> <TITLE>Menangkap variabel dari form</TITLE> </HEAD>

<BODY>

<FORM METHOD = GET ACTION = Hasil.php>

Isikan Nama Anda : <input type = text name = nama size = 15>

<input type = submit value = Proses>

</FORM>

</BODY>

</HTML>

Skrip Hasil.php

<?php

echo('Namanya <B>'.$nama. '</B> ya? – Nama yang bagus euy');

?>



Pertama-tama, jalankan dulu skrip variabel.php, lalu masukkan nama, dan klik

tombol Proses. Lihat gambar 12-1.

Setelah tombol Proses di klik, nama yang dimasukkan akan disimpan sebagai

variabel, sehingga dapat diolah dan ditampilkan sesuai dengan keinginan. Lihat

gambar 12-2.

Gambar 12-1 Hasil ekekusi skrip variabel.php

Gambar 12-2 Hasil eksekusi skrip Hasil.php



12.1.2 Metode Get

Get merupakan sebuah atribut yang dimiliki oleh form. Bila

METHOD dalam form diisi dengan GET, maka data yang diisi di dalam form

akan dikirimkan ke server dengan cara diletakkan di belakang URL.


Skrip MetodeGet.html

<HTML>

<HEAD> <TITLE>Mencoba metode GET</TITLE> </HEAD>

<BODY>

<FORM METHOD = GET ACTION = Proses.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.php

<?php

If ($nama==”Purnama” && $rahasia==”Winnie”)

{

echo(“Anda telah berhasil login”);

}

Else

{

echo(“Username atau Password anda masih salah”);

}

?>

Jalankan MetodeGet.html, lalu isikan Username : Purnama dan Password :

Winnie, lalu tekan tombol login. Lihat gambar 12-3.

Gambar 12-3 Hasil eksekusi MetodeGet.html



Setelah tombol Login ditekan, data yang dimasukkan di form akan diproses

skrip Proses.php, dan hasilnya seperti pada gambar 12-4.

Gambar 12-4 Hasil eksekusi Proses.php dengan metode get

Dengan menggunakan metode get, data yang telah diisi di dalam form akan

terlihat pada URL seperti ditunjukkan pada gambar 12-4.

12.1.3 Metode Post

Sama halnya seperti get, metode post juga merupakan atribut yang

dimiliki oleh form. Bila METHOD dalam form diisi dengan POST, maka data

yang diisi di dalam form akan dikirim ke server secara terpisah, artinya data

tidak terlihat di belakang URL.

Untuk lebih jelasnya, coba ubah METHOD pada skrip MetodeGet.html, pada

baris kode :

<FORM METHOD = GET ACTION = Proses.php>

Menjadi :

<FORM METHOD = POST ACTION = Proses.php>

Jalankan lagi skrip MetodeGet.html, masukkan username dan password, lalu

tekan tombol Login, maka hasilnya seperti pada gambar 12-5.



Gambar 12-5 Hasil Eksekusi Proses.php dengan metode post

Dari penjelasan di atas, dapat terlihat bahwa ada perbedaan antara

metode GET dan metode POST. Di bawah ini adalah pertimbangan kapan kita

menggunakan metode GET dan metode POST, yaitu :

1. Apabila data yang dikirim ke server bersifat rahasia, gunakan metode

POST, misalnya mengirimkan data Password.

2. Apabila data yang dikirim ke server berupa data biasa saja dan biasanya

untuk memperjelas data yang dimasukkan di form, gunakan metode GET,

misalnya membuat aplikasi pencarian (Search Engine) atau polling.

3. Jika data yang dimasukkan banyak, dianjurkan untuk menggunakan

metode POST.



Rangkuman

1. Pengolahan data pada server side scripting dilakukan di sisi server (dalam

hal ini yang menjadi pemroses adalah web server).

2. Berbeda dengan server side scripting, pengolahan data client side

scripting dilakukan oleh web browser,

3. Terdapat dua cara menangkap variabel dari form, yaitu metode get dan

metode post.

4. Metode post tepat digunakan ketika data yang akan dikirimkan ke server

bersifat rahasia dan jika data yang dimasukkan banyak.

5. Metode get tepat digunakan apabila data yang dikirim ke server berupa

data biasa saja dan biasanya untuk memperjelas data yang dimasukkan di

form



Latihan

1. Jelaskan konsep pengolahan data pada server side scripting!

2. Jelaskan perbedaan cara menangkap variabel dari form dengan

menggunakan metode get dan metode post!

3. Buatlah form di bawah ini, gunakan metode yang sesuai dengan

kebutuhan Anda, ACTION dari form adalah halaman proses.php yang

akan menampilkan seluruh data masukkan dari user :


Keamanan Data 13-1

13 MYSQL DENGAN PHP

Overview

MySQL merupakan software sistem manajemen database (Database

Management System - DBMS) yang sangat populer di kalangan pemrogram

web, terutama di lingkungan Linux dengan menggunakan script PHP dan Perl.

Software database ini kini telah tersedia juga pada platform sistem operasi

Windows (98/Me atau pun NT/2000/XP).

MySQL merupakan database yang paling populer digunakan untuk

membangun aplikasi web yang menggunakan database sebagai sumber dan

pengelola datanya. Kepopuleran MySQL dimungkinkan karena kemudahannya

untuk digunakan, cepat secara kinerja query, dan mencukupi untuk kebutuhan

database perusahaan-perusahaan skala menengah kecil. MySQL merupakan

database yang digunakan oleh situs-situs terkemuka di Internet untuk

menyimpan datanya.

Tujuan

1. Menggunakan MySQL untuk mengelola database

2. Mampu membuat database pada MySQL

3. Mampu membuat tabel pada MySQL melalui aplikasi web

4. Mampu memasukkan data ke dalam tabel di database MySQL

5. Mampu menampilkan data dari table

6. Mampu melakukan proses pencarian data pada table

7. Mampu melakukan delete data pada tabel

8. Mampu melakukan update data pada tabel


Keamanan Data 13-2

13.1 Pengenalan MySQL

Software database MySQL kini dilepas sebagai software manajemen

database yang open source, sebelumnya merupakan software database yang

shareware. Shareware adalah suatu software yang dapat didistribusikan secara

bebas untuk keperluan penggunaan secara pribadi, tetapi jika digunakan

secara komersial maka pemakai harus mempunyai lisensi dari pembuatnya.

Software open source menjadikan software dapat didistribusikan secara

bebas dan dapat dipergunakan untuk keperluan pribadi atau pun komersial,

termasuk di dalamnya source code dari software tersebut.

Database MySQL merupakan database yang menjanjikan sebagai

alternatif pilihan database yang dapat digunakan untuk sistem database

personal atau organisasi kita. Oracle sebagai database besar telah membuat

kit (modul) untuk memudahkan proses migrasi dari MySQL ke dalam Oracle,

hal ini dapat menunjukkan bahwa Oracle telah memperhitungkan database

MySQL sebagai database alternatif masa depan. Demikian juga dengan

pengguna dari database MySQL, menunjukkan makin banyaknya perusahaan

besar menggunakannya.

MySQL digunakan oleh banyak portal-portal Internet sebagai basis

data dari informasi yang ditampilkan pada situs web. Berikut ini adalah

beberapa situs portal yang menggunakan database MySQL, antara lain :

Yahoo! (http://www.yahoo.com), Slashdot : situs diskusi/komentar dan berita

teknologi yang pro-Linux (http://slashdot.org), semua tentang Linux (http://www.linux.com), Linuxtoday (http://www.linuxtoday.com), 32Bits

Online (http://www.32bitsonline.com), Freshmeat : Berita tentang software-

software versi terbaru (http://freshmeat.net), Spider (http://www.spider.de),

Yahoosuck (http://www.yahoosuck.com), SpyLOG : A very popular Web

counter site (http://www.spylog.ru/), The Music Database

(http://www.musicdatabase.com).

13.2 Tes Koneksi ke server MySQL

Sebelum mencoba melakukan koneksi, pastikan server MySQL telah

aktif. Khusus bagi yang menggunakan PHPTriad, cara mengaktifkannya dari

Windows Explorer, klik ganda pada file winmysqladmin.exe yang terletak di

folder C:\apache\mysql\bin\winmysqladmin.exe. 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).

http://www.yahoo.com/

http://www.linux.com/

http://www.linuxtoday.com/

http://www.32bitsonline.com/

http://freshmeat.net/

http://www.spider.de/

http://www.yahoosuck.com/

http://www.spylog.ru/


Keamanan Data 13-3

Sebelum membuat aplikasi yang melibatkan database MySQL, harus

terlebih dahulu melakukan koneksi ke server MySQL. Gunakan fungsi dari

PHP, yaitu :

$nama_variabel =

mysql_connect("localhost","nama_user","password");

Jika koneksi berhasil, $nama_variabel akan bernilai TRUE, dan jika

koneksi gagal, $nama_variabel akan bernilai FALSE. Isilah nama_user dan

password dengan user dan password sendiri. Namun jika belum membuatnya,

kosongkan saja, yaitu (“localhost”,””,””).

Untuk lebih jelasnya, cobalah skrip berikut :

Skrip KoneksiMySQL.php

<?php

$koneksi_oke = mysql_connect(("localhost","","");

if ($koneksi_oke) {

echo("Koneksi ke server MySQL berhasil");

}

else {

echo("Koneksi ke server MySQL gagal");

}

?>

Pada saat skrip KoneksiMySQL.php dijalankan, maka akan muncul

tulisan “Koneksi ke server MySQL berhasil” di browser bila seandainya

terhubung dengan server. Namun akan muncul tulisan “Koneksi ke server

MySQL gagal” di browser bila seandainya tidak terhubung dengan server.

Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL.php saat terhubung dgn server


Keamanan Data 13-4

13.3 Membuat Database pada MySQL

Setelah koneksi ke server MySQL berhasil, maka database bisa dibuat.

Database digunakan sebagai tempat untuk menampung data atau tabel-tabel.

Untuk membuat database, gunakan fungsi :

$nama_variabel = mysql_create_db(“nama_database”);

Jika proses pembuatan database berhasil, $nama_variabel akan bernilai

TRUE, dan jika proses pembuatan database gagal, $nama_variabel akan

bernilai FALSE.


Skrip Database.php

<?php

include(“KoneksiMySQL.php”);

$buat_db = mysql_create_db(“COBA_DB”);

if ($buat_db) {

echo(“<BR><BR>Database dengan nama :

<B>COBA_DB</B> sukses dibuat”);

}

else {

echo(“<BR><BR>Database dengan nama :

<B>COBA_DB</B> gagal dibuat”);

}

?>

Bila skrip Database.php dijalankan dan database telah berhasil dibuat,

maka akan muncul pesan seperti yang tampil pada gambar 13-2.

Gambar 13-2 Hasil eksekusi skrip Database.php


Keamanan Data 13-5

13.4 Membuat Tabel pada MySQL

Langkah selanjutnya adalah membuat tabel-tabel pada database yang

telah dibuat. Sebelumnya perlu dimengerti tipe-tipe data dalam MySQL,

seperti yang terlihat pada tabel berikut ini :

Tabel 13-1 Tipe Data pada MySQL

Tipe data Definisi

TINYINT Bilangan bulat antara -128 sampai 127 atau 0

sampai 255 untuk bulat positif saja

SMALLINT Bilangan bulat antara -32768 sampai 32767

atau 0 sampai 65535 untuk bulat positif saja

MEDIUMINT Bilangan bulat antara -8388608 sampai

8388607 atau 0 sampai 16777215 untuk bulat

positif saja

INT atau INTEGER Bilangan bulat antara -2147483648 sampai

2147483647 atau 0 sampai 4294967295 untuk

bulat positif saja

FLOAT Tipe data berukuran 4 Byte

DOUBLE Tipe data berukuran 8 Byte

CHAR(jumlah_karakter) Jumlah karakter dari 1-255

VARCHAR(jumlah_karakter) Jumlah karakter dari 1-255

LONGTEXT Tipe TEXT dengan jumlah karakter

maksimum sebanyak 4294967295 karakter

DATE Tanggal dari „1001-01-01‟ hingga „9999-12-31‟

TIME Waktu dari „-838:59:59‟

YEAR Tahun dari 1901 hingga 2155

Untuk membuat tabel, gunakan fungsi :

$variabel1 = “CREATE TABLE nama_tabel(kolom1 tipedata1, kolom2

tipedata2, dst)”;

$variabel2 = mysql_db_query(“nama_database”,$variabel1);

Sebenarnya PHP tidak menyediakan fungsi khusus untuk membuat

suatu tabel, sehingga untuk membuat suatu tabel, kita harus menggunakan

perintah internal dari MySQL. Perintah internal pada MySQL dapat disisipkan

di skrip PHP menggunakan fungsi :

$nama_var = mysql_db_query(“nama_database”,$perintah_internal);

$nama_var = mysql_query($perintah_internal);


Keamanan Data 13-6

$perintah_internal diisi dengan perintah internal MySQL. Mysql_db_query()

digunakan untuk menyisipkan perintah internal yang terkait dengan database,

seperti membuat tabel. Sedangkan mysql_query() digunakan untuk

menyisipkan perintah internal yang terkait dengan tabel, seperti mendeteksi

jumlah kolom suatu tabel.


Skrip BuatTabel.php

<?php

include(“KoneksiMySQL.php”);

$pilih_db = mysql_select_db(“COBA_DB”) or die(“Database COBA_DB

tidak ditemukan”);

$buat_tabel = “CREATE TABLE mahasiswa(nim int(9) PRIMARY KEY,

nama char(50), alamat char(50) )”;

$tabel = mysql_db_query(“COBA_DB”,$buat_tabel);

if($tabel){

echo(“<BR><BR>Tabel dengan nama : <B>mahasiswa</B> sukses

dibuat”);

}

else {

echo(“<BR><BR>Tabel dengan nama : <B>mahasiswa</B> gagal

dibuat”);

}

?>

Bila tabel mahasiswa telah berhasil dibuat, maka tampilan seperti pada gambar

13-3 akan muncul.

Gambar 13-3 Hasil eksekusi skrip BuatTabel.php


Keamanan Data 13-7

13.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, gunakan fungsi :

$variabel1 = INSERT INTO nama_tabel(field1, field2,..) VALUES

(data1, data2,..);

$variabel2 = mysql_query($variabel1);


Skrip FormInput.php

<HTML>

<HEAD> <TITLE>Memasukkan data ke tabel mahasiswa</TITLE> </HEAD>

<BODY>

<B>INPUT DATA MAHASISWA</B><BR>

<FORM METHOD = POST ACTION = InputMHS.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-8

Skrip InputMHS.php

<?php

mysql_connect("localhost","","");

mysql_select_db("COBA_DB") or die("Database tidak ada");

$perintah="INSERT INTO mahasiswa(nim,nama,alamat)

VALUES('$nim','$nama','$alamat')";

$isi_data=mysql_query($perintah);

if(isset($isi_data)) {

echo("Data mahasiswa :<BR>");

echo("NIM : $nim<BR>");

echo("NAMA : $nama<BR>");

echo("ALAMAT : $alamat<BR>");

echo("Telah dimasukan ke dalam table mahasiswa<BR>");

echo("<FORM METHOD = POST ACTION = FormInput.php>");

echo("<INPUT TYPE=SUBMIT NAME=SUBMIT VALUE='Daftar

Lagi'></FORM>");

}

else {

echo("Data mahasiswa gagal dimasukkan ke dalam tabel");

}

?>

Jalankan skrip FormInput.php, lalu isikan NIM, NAMA, dan ALAMAT,

kemudian tekan tombol Input. Lihat gambar 13-4.

Gambar 13-4 hasil eksekusi skrip FormInput.php


Keamanan Data 13-9

Setelah tombol Input ditekan, data yang dimasukkan di form akan diproses

skrip InputMHS.php, dan hasilnya seperti pada gambar 13-5.

Gambar 13-5 Hasil eksekusi skrip InputMHS.php

13.6 View Data

Untuk melihat/menampilkan data yang ada di dalam tabel, gunakan

fungsi :

$variabel1 = “SELECT * FROM nama_tabel ORDER BY nama_field”;


Tanda asterik (*) di atas menandakan bahwa semua data akan ditampilkan dan

ORDER BY nama_field berfungsi untuk mengurutkan data sesuai dengan

nama_field sebagai field acuannya. Agar lebih rapi, data yang akan dipanggil

akan ditampilkan ke dalam bentuk tabel. Caranya :

While ($variabel3=mysql_fetch_row($variabel2))

{

echo(“<TR><TD>$variabel3[0]</TD><TD>$variabel3[1]</TD>

............</TR>”);

echo(“</TABLE>”);

?>



Keamanan Data 13-10

Skrip TampilMHS.php

<?php

echo("DATA MAHASISWA<HR><BR><BR>");

echo("<TABLE BORDER=1>");

echo("<TR><TD>NIM</TD><TD>NAMA</TD><TD>ALAMAT</TD></TR>");


mysql_select_db("COBA_DB");

$perintah="SELECT * FROM mahasiswa ORDER BY nim";

$tampil_data=mysql_query($perintah);

while($data=mysql_fetch_row($tampil_data)){

echo("<TR> <TD>$data[0]</TD> <TD>$data[1]</TD>

<TD>$data[2]</TD></TR>");

}

echo("</TABLE>");

?>

Pada saat skrip TampilMHS.php dijalankan, maka skrip akan menampilkan data

yang ada di dalam tabel mahasiswa. Lihat gambar 13-6. (Asumsi tabel

mahasiswa tidak kosong sebelumnya).

Gambar 13-6 Hasil eksekusi skrip TampilMHS.php

13.7 Searching Data

Searching data dimaksudkan untuk mencari data yang ada pada tabel

sehingga bisa menemukan informasi dengan cepat. Fasilitas ini biasanya selalu

ada dalam setiap aplikasi sistem informasi, karena data yang dimiliki biasanya

dalam ukuran besar.


Keamanan Data 13-11

Untuk mengimplementasikan fasilitas searching data ini, cobalah skrip berikut:

Skrip FormCari.php

<HTML>

<HEAD> <TITLE> Mencari data mahasiswa </TITLE> </HEAD>

<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>

Skrip CariMHS.php

<?php

echo("<H3>HASIL PENCARIAN</H3>");



$perintah="SELECT * FROM mahasiswa WHERE nim like '%$cari%'";

$hasil=mysql_query($perintah);

$jumlah=mysql_num_rows($hasil);

if($jumlah>0) {

echo("Data yang ditemukan : $jumlah<BR><HR>");

while($data=mysql_fetch_row($hasil)) {

echo("Nama : $data[1]<BR>");

echo("Alamat : $data[2]<BR>");

}

} else {

echo("Maaf, data yang anda cari tidak ada"); }

?>

Pada saat skrip FormCari.php dijalankan, maka ada perintah untuk

memasukkan nim mahasiswa yang akan dicari. Lihat gambar 13-7.

Gambar 13-7 Hasil eksekusi skrip FormCari.php


Keamanan Data 13-12

Bila nim yang dimasukkan pada tampilan skrip FormCari.php ada pada

tabel mahasiswa, maka akan ditampilkan nama dan alamat dari mahasiswa

yang bersangkutan. Lihat gambar 13-8.

Gambar 13-8 Hasil eksekusi skrip CariMHS.php

13.8 Delete Data

Data yang ada di dalam tabel tidak hanya bisa ditambah atau bahkan

diubah. Data tersebut juga bisa untuk dihapus. Untuk menghapus data, gunakan fungsi :

$variabel1 = “DELETE FROM nama_tabel

where syarat1, syarat2,....”;



Skrip TampilDelete.php

<?php






Keamanan Data 13-13




while($data=mysql_fetch_row($tampil_data)){

echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD>

<TD>$data[2]</TD>");

echo("<TD><a href=\"HapusMHS.php?id=$data[0]\">Hapus</a>

</TD></TR>");

}

echo("</TABLE>");

?>

Skrip HapusMHS.php

<?php



$perintah="DELETE FROM mahasiswa where nim=$id";

$hapus=mysql_query($perintah);

header("Location:TampilDelete.php");

?>

Jika skrip TampilDelete.php dijalankan, maka akan ditampilkan data

yang ada di dalam tabel mahasiswa. Link untuk hapus terletak di setiap baris

pada data yang ditampilkan. Lihat gambar 13-9.

Gambar 13-9 Hasil eksekusi skrip TampilDelete.php


Keamanan Data 13-14

Bila link hapus di pilih, maka data yang berada satu baris dengan link

hapus tersebut akan dihapus dari tabel mahasiswa. Lihat gambar 13-10 dimana

mahasiswa dengan nim 113040567 dihapus.

Gambar 13-10 Hasil eksekusi skrip HapusMHS.php

13.9 Update Data

Update data dilakukan untuk mengubah data yang ada di dalam tabel.

Untuk mengubah data, gunakan fungsi :

$variabel1 = “UPDATE nama_tabel SET nama_kolom1 =

„data1‟,nama_kolom2 = „data2‟,... where syarat1, syarat2......”;

Mysql_query($variabel1);

Seperti halnya input data, pada pengolahan data diperlukan suatu

antarmuka untuk menampilkan data yang akan diubah. Untuk lebih jelasnya,

cobalah skrip-skrip berikut : Skrip TampilUpdate.php

<?php




Keamanan Data 13-15






while($data=mysql_fetch_row($tampil_data)) {

echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD>

<TD>$data[2]</TD>");

echo("<TD><ahref=\"FormEdit.php?id=$data[0]\">Ubah</a>

</TD></TR>");

}

echo("</TABLE>");

?>

Skrip FormEdit.php

<?php



$perintah="SELECT * FROM mahasiswa where nim='$id'";

$hasil=mysql_query($perintah);

$baris=mysql_fetch_array($hasil);

?>

<HTML>

<B>Pengeditan Data Mahasiswa</B><HR><BR>

<FORM method=post action=EditMHS.php>

<input type=hidden name="id" value="<?echo"$baris[nim]"?>">

Nama : <input type=text name=nama size=20

value="<?echo"$baris[nama]" ?>"><BR>

Alamat : <input type=text name=alamat size=20

value="<?echo"$baris[alamat]" ?>"><BR><BR>

<input type=submit name=edit value=Simpan>

</HTML>

Skrip EditMHS.php

<?php



$ubah = "UPDATE mahasiswa SET nama='$nama',alamat='$alamat'

where nim='$id'";

mysql_query($ubah);

header("location:TampilUpdate.php");

?>

Pada saat menjalankan skrip TampilUpdate.php maka akan ditampilkan data

yang berada di dalam tabel mahasiswa. Lihat gambar 13-11.


Keamanan Data 13-16

Untuk mengubah data, pilih link ubah yang berada satu baris dengan data yang

ingin diubah. Pada saat link diklik, maka akan merefer ke skrip FormEdit.php.

Lihat gambar 13-12. (NIM 113030184 yang diubah).

Bila tombol Simpan di klik pada FormEdit.php, maka akan menjalankan skrip

EditMHS.php. Skrip EditMHS.php akan mengupdate data sesuai dengan

inputan user pada skrip FormEdit.php.

Gambar 13-11 Hasil eksekusi skrip TampilUpdate.php

Gambar 13-12Hasil eksekusi skrip FormEdit.php

(ada perubahan nama)


Keamanan Data 13-17

Gambar 13-13 Hasil eksekusi skrip EditMHS.php

(nama sudah berubah)


Keamanan Data 13-18

Rangkuman

1. Database MySQL menyimpan data didalam direktori khusus yang

terpisah dari file program PHP sehingga keamanan data lebih terjamin.

2. Web server dan database server terpisah sehingga menyulitkan pihak luar untuk mengakses data yang terdapat didalam database.

3. Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat

diakses oleh sistem operasi Windows maupun Linux.

4. Bahasa program PHP dan MySQL adalah open source sehingga kita tidak

perlu mengeluarkan biaya tambahan untuk membeli software tersebut.

5. Untuk membuat tabel dan memanipulasi isi tabel pada database MySQL

dapat dilakukan secara langsung melalui halaman web dengan

pemrograman PHP

6. Pengaksesan database MySQL melalui halaman web dengan menggunakan

fungsi-fungsi yang telah disediakan oleh PHP.

Latihan

1. Jelaskan kelebihan database MySQL yang Anda ketahui!

2. Apakah PHP dapat diaplikasikan untuk DBMS selain MySQL? Jelaskan!

3. Buatlah buku tamu (guestbook) dengan langkah-langkah pembuatan buku

tamu sebagai berikut:

a. Membuat table MySQL yang akan menyimpan isi buku tamu

b. Membuat form pengisian buku tamu

c. Membuat program untuk menerima masukan data dari form yang telah kita buat sebelumnya

d. Membuat program untuk menampilkan isi buku tamu.


Keamanan Data 14-1

14 KEMANAN DATA

Overview

PHP menawarkan metode dalam menyimpan variabel yang

mempunyai sifat global. Dengan menggunakan variabel global ini, variabel

dapat dikenali dan digunakan di semua halaman web tanpa harus dideklarasi

ulang. Variabel global ini disebut session dan cookie.

Penggunaan session dan cookie biasanya berupa penyimpanan

informasi yang bersifat private dan informasi ini digunakan secara berulang

oleh user. Contoh penerapan session dan cookies adalah penyimpanan login

account, menyimpan informasi barang yang sudah masuk keranjang belanja

pada aplikasi e-commerce, atau aplikasi lainnya yang biasanya membutuhkan

autentikasi.

Dalam membuat sebuah website, pembuat website juga harus mengantisipasi

dari kemungkinan kegiatan – kegiatan yang berusaha membobol password

melalui SQL injection untuk mengamankan data.

Tujuan

1. Memahami kegunaan session pada aplikasi web.

2. Mampu melakukan konfigurasi runtime untuk membuat session.

3. Memahami kegunaan cookies pada aplikasi web.

4. Membuat cookies pada aplikasi web.


Keamanan Data 14-2

14.1 Session

Session dalam PHP mengandung suatu mekanisme untuk menjaga

sejumlah data tetap dapat diakses dalam serangkaian halaman website.

Mekanisme ini memungkinkan pembuat web untuk membangun aplikasi yang

lebih terkostumisasi dan lebih menarik.

Session memungkinkan untuk mendaftarkan sejumlah variabel untuk

tetap dapat digunakan dalam halaman situs yang berbeda- beda. Ketika

menggunakan session, data (variabel) akan tersimpan dan dikelola oleh server.

Seorang pengunjung yang mengunjungi sebuah website akan diberikan

sebuah identitas yang unik, dan disebut dengan session id.

14.1.1 Memulai Session

Sebelum dapat menggunakan session untuk menyimpan informasi –

informasi yang dibutuhkan oleh pengguna, harus dimulai dengan memulai

(start) session. Memulai session harus dilakukan paling awal sebelum HTML

atau text dituliskan.

Berikut ini merupakan script yang harus ditempatkan pada permulaan

kode PHP untuk memulai session pada PHP.

<?

Session_start();

?>

Function session_start() akan men-generate session id secara acak.

Nama default yang diberikan kepada session id yang terbentuk adalah

PHPSESSID, akan tetapi nama ini dapat diubah pada konfigurasi PHP.

14.1.2 Menyimpan Data Session

Setelah menetapkan session, selanjutnya dapat membuat, menyimpan,

atau menerima informasi atau data yang dibutuhkan. Data session disimpan

dalam direktori khusus di server, path dari direktori yang dimaksud sesuai

dengan konfigurasi pada web server.

Data session dibuat dengan mendaftarkan data session yang akan

digunakan dengan menggunakan function session_register. Berikut ini adalah

contoh untuk mendaftarkan data session :


Keamanan Data 14-3

<?

Session_start();

Session_register(“nama_pengunjung”);

?>

Melalui script tersebut di atas, sebuah data session yang bernama

nama_pengunjung sudah terbentuk. Untuk selanjutnya, data session ini dapat

diakses pada setiap halaman pada website selama data session tersebut tidak

dihapus. Aturan pembuatan nama untuk data session sama seperti aturan

penamaan variabel pada umumnya.

14.1.3 Mengakses Data Session

Setelah sebuah data session dibuat, selanjutnya, pengisian nilai atau

pengubahan nilai kepada data session dapat dilakukan dengan menggunakan

function $_SESSION.

Berikut ini adalah contoh untuk mengkakses data session :

<?

session_start();

?>

<html>

<head>

<title>Mengakses Data Session</title>

</head>

<body>

<?

session_register("nama_pengunjung");

session_register("counter");

$_SESSION['counter']++;

$_SESSION['nama_pengunjung'] = "Adul";

echo "Selamat Datang ",$_SESSION['nama_pengunjung'],"<br>";

echo "Anda telah mengunjungi halaman ini sebanyak

",$_SESSION['counter']," kali.";

?>

</body>

</html>


Keamanan Data 14-4

Jika script di atas dijalanlan di web browser, akan didapatkan hasil seperti

yang diperlihatkan pada gambar di bawah ini :

Gambar 14-1 Mengakses data session-1

Jika pengunjung me-refresh halaman web tersebut,akan didapatkan

hasil seperti yang diperlihatkan pada gambar di bawah ini :

Gambar 14-2 Mengakses data session-2

Pada contoh di atas, dibuat 2 (dua) buah data session yang masing –

masing bernama nama_pengunjung dan counter. Variabel nama_pengunjung

akan menyimpan nama pengunjung dan variabel counter akan menghitung

berapa kali pengunjung tersebut telah mengunjungi halaman web tersebut.

Memberikan nilai kepada data session sama mudahnya dengan

memberikan nilai kepada variabel biasa, yaitu dengan menggunakan tanda sam

dengan (=), seperti yang ditunjukkan pada potongan script :

$_SESSION['nama_pengunjung'] = "Adul";


Keamanan Data 14-5

Pada data session juga dapat dikenakan operasi aritmatika (yang akan

menambahkan 1 nilai pada nilai terakhir yang disimpan pada data session),

seperti yang ditunjukkan pada potongan script :

$_SESSION['counter']++;

Nilai yang tersimpan pada data session juga dapat digunakan untuk

operasi logika, seperti yang diperlihatkan pada contoh di bawah ini :

<?

if ($_SESSION[‟counter‟] == 1

echo ”Ini baru pertama kali berkunjung y?‟;

else

echo ”Terima kasih telah lebih dari satu kali mengunjungi

website kami.”;

?>

14.1.4 Membersihkan dan Menghapus Session

Ketika sebuah session dimulai pada sebuah website melalui perintah

session_start(), file PHPSESSID akan selamanya tersimpan di server sampai

pembuat website menghapus session tersebut. Function yang digunakan untuk

menghapus session dari server adalah session_destroy().

Dengan menggunakan function session_destroy(), file PHPSESSID

secara otomatis akan terhapus dari server secara permanen, dan semua

session data yang ada tidak dapat digunakan lagi.

Berikut ini adalah contoh untuk menghapus data session pada website

1 <?

2 session_start();

3 $id_session = session_id();

4 echo "Session ID Anda adalah ",$id_session;

5 echo "<br><br>";


Keamanan Data 14-6

6 session_destroy();

7 $id_session2 = session_id();

8 echo "Session ID Anda setelah data session di-destroy :

",$id_session2;

9 ?>

Pada script di atas terdapat perintah session_destroy() pada baris ke-6

yang akan menghapus data session dan file PHPSESSID secara permanen. Pada

baris ke-3, variabel $id_session berisi nilai session id, akan tetapi pada baris

ke-7, variabel $id_session2 tidak lagi berisi nilai session id karena data session

sudah dihapus.

Jika script di atas dijalankan di web browser akan didapatkan hasil


Gambar 14-3 Menghapus data session

Untuk membersihkan nilai yang terdapat pada data session tanpa

menghapus secara permanen file PHPSESSID, dapat digunakan function

session_unregister().

Dengan menggunakan function session_unregister(), nilai yang

tersimpan pada data session akan dihilangkan, tapi data session ini masih

dapat digunakan atau diisi dengan nilai yang baru.

Berikut ini adalah cara untuk membersihkan nilai pada data session :


Keamanan Data 14-7

1 <?

2 session_start();

3 session_register("nama_pengunjung");

4 $_SESSION['nama_pengunjung'] = "Adul";

5 echo "Selamat

Datang",$_SESSION['nama_pengunjung'],"<br><br>";

6 session_unregister("nama_pengunjung");

7 if (isset($_SESSION['nama_pengunjung']))

8 echo "Terima kasih ",$_SESSION['nama_pengunjung']," masih

berada pada website kami";

9 else

10 echo "Terima kasih atas kunjungannya, kapan - kapan

kunjungi website kami lagi y??";

11 ?>

Pada script di atas, terdapat pemanggilan function

session_unregister(“nama_pengunjung”) pada baris ke-6. Perintah ini akan

membersihkan nilai data session nama_pengunjung yang semula bernilai Adul.

Selanjutnya, di baris ke-7 dilakukan pengecekan terhadap nilai yang ada pada

data session nama_pengunjung yang ternyata sudah tidak ada nilainya (akibat

dari perintah session_unregister(“nama_pengunjung”)), sehingga baris

perintah yang akan dijalankan adalah baris ke-10.

Jika script di atas dijalankan di web browser, akan didapatkan hasil



Keamanan Data 14-8

Gambar 14-4 Membersihkan nilai pada data session

14.2 Cookie

Cookie merupakan sebagian informasi yang disimpan pada klien (web

browser) ketika melakukan request terhadap suatu halaman web. Informasi

ini dilewatkan melalui HTTP header diantara web server dan web browser.

Web browser akan mengirimkan cookie sebagai bagian dari request ke server

dan server akan mengirimkan kembali cookie yang sudah di-update sebagai

bagian dari response ke klien.

Ukuran dari cookie bergantung pada web browser, tetapi secara

umum, biadanya tidak lebih dari 1K (1024 byte). Informasi yang disimpan di

dalam cookie bisa apa saja, seperti : nama, banyaknya kunjungan ke website,

informasi keranjang belanja, dan sebagainya.

Sebagai tambahan informasi yang disimpan, masing – masing cookie

mempunyai sekumpulan atribut : masa kadaluwarsa, path, domain, dan

penanda keamanan. Atribut ini akan membantu web browser untuk mengirimkan cookie yang tepat ketika ada request ke server.

14.2.1 Memulai cookie

Untuk membuat cookie digunakan function setcookie(). Jika

setcookie() berhasil, function ini akan mengembalikan nilai TRUE. Sintaks

(aturan penulisan) untuk membuat cookie menggunakan function setcookie()

sebagai berikut :


Keamanan Data 14-9

bool setcookie ( string name [, string value [, int expire [, string path [, string

domain [, int secure]]]]])

Tabel 14-1 Jenis Argumen pada Cookie

No Nama Argumen Keterangan

a. Name Merupakan nama dari cookie, misal : mycookie,

counter_pengunjung, nama

b. Value Merupakan nilai dari cookie. Nilai cookie ini akan

disimpan di sisi klien (web browser)

c. Expire Digunakan untuk mengatur masa kadaluwarsa

cookie. Ukuran waktu yang digunakan disesuaikan

dengan standar pengaturan waktu di Unix

menggunakan fungsi time().

Sebagai contoh time()+60*30 akan mengatur

masa kadaluwarsa cookie selama 30 menit.

Jika masa kadaluwarsa cookie tidak diatur, cookie

akan terhapus ketika web browser ditutup.

d. Path Path cookie digunakan untuk mengorganisasikan

cookie berdasarkan path di web server.

Jika path di web server bernilai /, maka cookie

akan ditemukan di semua direktori, jika path

bernilai /dir1/, maka cookie hanya ditemukan di

dorektori dir1 dan sub direktori dibawah dir1

e. Domain Argumen ini akan menentukan secara spesifik

domain yang dapat mengakses cookie.

Jika domin bernilai www.mydomain.com, maka

cookie hanya dapat diakses di www.sub-domain

Agar cookie dapat diakses di seluruh subdomain

dari mydomain.com, domain harus bernilai

‟.mydomain.com‟

http://www.mydomain.com/

http://www.sub-domain/


Keamanan Data 14-10

f. Secure Jika value bernilai 1(satu), berarti cookie harus

diakses pada koneksi yang aman (https). Nilai

default secure adalah 0 (nol)

14.2.2 Menggunakan Cookie

Contoh pembuatan cookie :

1 <?

2 setcookie(‟mycookie‟, „Test mycookie‟);

3 setcookie(‟mycookie‟, „Test mycookie‟, time()+3600*24);

4 setcookie(‟mycookie‟, „Test mycookie‟, time()+3600*24,

“/dir1/”);

5 ?>

Pada baris perintah ke-2, akan terbentuk cookie yang mempunyai nama mycookie dengan nilaiTest mycookie dan akan hilang (expire) ketika

web browser ditutup.

Pada baris perintah ke-3, akan terbentuk cookie yang mempunyai nama

mycookie dengan nilai Test mycookie dan mempunyai masa kadaluarsa

selama 1 (satu) hari.

Pada baris perintah ke-4, akan terbentuk cookie yang mempunyai nama

mycookie dengan nilai Test mycookie, mempunyai masa kadaluarsa 1

(satu) hari, dan tersimpan di direktori /dir1 dan subdirektori di

bawahnya

14.2.3 Menguji cookie

Untuk menguji keberhasilan pembuatan cookie yang sudah dibuat

menggunakan function setcookie(), digunakan function $_COOKIE, seperti

yang diperlihatkan pada contoh di bawah ini :

<?

setcookie('pengunjung', 'Adul dan Komeng');


Keamanan Data 14-11

echo "Selamat datang, ",$_COOKIE['pengunjung'];

?>

Gambar 14-5 Menampilkan nilai cookie

14.2.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.

Pembuat website harus memastikan bahwa nilai masa kadaluarsa yang diisikan

sudah lampau ketika cookie tersebut dihapus.

Berikut ini adalah contoh untuk menghapus cookie :

1 <?

2 setcookie (”mycookie”, “”, time() - 3600);

3 setcookie (”mycookie”, “”, time() - 3600, “/dir1/”);

4 ?>

Perintah pada baris ke-2 digunakan untuk menghapus cookie yang

dikirimkan 1 (satu) jam yang lalu.

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.


Keamanan Data 14-12

14.2.5 Multiple cookies

Untuk membuat multiple cookies dapat dilakukan dengan cara seperti

di bawah ini :

<?

setcookie(‟mycookie1′, „Test mycookie1′);




?>

Untuk mengakses cookie tersebut, dapat dilakukan dengan cara :

<?

echo $_COOKIE["mycookie1"],”<br>”;



echo $_COOKIE["mycookie4"];

?>

Jika baris perintah di atas dijalankan di web browser, akan

didapatkan hasil sebagai berikut :

Gambar 14-6 Multiple cookies


Keamanan Data 14-13

14.2.6 Cookies Array.

Dengan menggunakan PHP, dimungkinkan untuk membuat cookies

dalam array, seperti yang diperlihatkan pada contoh di bawah ini :

<?

setcookie("mycookie[0]", "value1");

setcookie("mycookie[1]", "value2");

setcookie("mycookie1['one']", "value11");

setcookie("mycookie1['five']", "value15");

?>

Untuk menampilkan nilai dari cookie pada contoh di atas dapat

digunakan perintah di bawah ini :

<?

foreach ($_COOKIE['mycookie'] as $key => $value) {

echo “$key:$value “;

}

?>

Jika perintah tersebut dijalankan di web browser, akan didapatkan hasil

seperti yang ditampilkan pada gambar di bawah ini :

Gambar 14-7 Cookies Array


Keamanan Data 14-14

14.3 SQL Injection

14.3.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.

2) SQL Injection merupakan teknik mengeksploitasi web aplikasi yang

didalamnya menggunakan database untuk penyimpanan data.

14.3.2 Sebab terjadinya SQL Injection

1) Tidak adanya penanganan terhadap karakter – karakter tanda petik satu

‟ dan juga karakter double minus -- yang menyebabkan suatu aplikasi

dapat disisipi dengan perintah SQL.

2) Sehingga seorang Hacker menyisipkan perintah SQL kedalam suatu

parameter maupun suatu form.

14.3.3 Bug SQL Injection berbahaya ?

1) Teknik ini memungkinkan seseorang dapat login kedalam sistem tanpa

harus memiliki account.

2) Selain itu SQL injection juga memungkinkan seseorang merubah,

menghapus, maupun menambahkan data–data yang berada didalam

database.

3) Bahkan yang lebih berbahaya lagi yaitu mematikan database itu sendiri,

sehingga tidak bisa memberi layanan kepada web server.

14.3.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.3.5 Contoh sintaks SQL Injection

Urutan cara untuk meneraplam SQL Injection dalam PHP :


Keamanan Data 14-15

1) $SQL = “select * from login where username =‟$username‟ and

password = „$password‟”; , {dari GET atau POST variable }

2) isikan password dengan string ‟ or ‟‟ = ‟

3) hasilnya maka SQL akan seperti ini = “select * from login where

username = ‟$username‟ and password=‟pass‟ or „=′ ”; , { dengan SQL

ini hasil selection akan selalu TRUE }

4) maka kita bisa inject sintax SQL (dalam hal ini OR) kedalam SQL

Gambar 14-8 Penerapan SQL Injection

Contoh sintaks SQL Injection

a. Melalui query

1) Sintaks SQL string „-- setelah nama username

2) Query database awal :

Berubah menjadi :

b. Melalui URL

SQL Injection melalui URL, contohnya :


Keamanan Data 14-16

Gambar 14-9 SQL injection melalui URL


Keamanan Data 14-17

Rangkuman

1. Terdapat persamaan antara session dan cookie, keduanya mempunyai

tujuan penggunaan yang sama, dimana keduanya digunakan dapat

digunakan berulang kali pada halaman – halaman di sebuah website.

2. Perbedaan yang paling mencolok antara session dan cookie adalah data session disimpan di sisi server, sedangkan cookie disimpan di sisi klien.

Dengan demikian, penggunaan session lebih aman daripada cookie (tidak

ada informasi yang bolak – balik dari server dan klien) dan session dapat

bekerja meskipun setting cookies pada web browser di-disable

3. Ketika memulai session, web server akan membuat sebuah file unik yang

mempunyai nama PHPSESSID dan akan tetap ada sampai ada perintah

session_destroy yang dapat menghapus file tersebut secara permanen

dari server.

4. Ketika membuat cookie menggunakan function setcookie(), pembuat

website dapat menambahkan beberapa argumen/atribut yang dibutuhkan.

5. Dengan menggunakan SQL Injection, seorang hacker mampu membobol

password baik melalui query atau URL.

Latihan

1. Buatlah sebuah website dengan tema e-commerce, kemudian analisalah,

variabel apa saja yang bisa dijadikan sebagai data session dan cookie.

2. Bagaimana cara menangani dan mencegah SQL Injection !


DAFTAR PUSTAKA

1. Breedlove, Bob., et.al., Web Programming Unleashed, Sams Publishing,1996

2. Hall, M., Core Web Programming, Prentice Hall, New York, 1998

3. Reiersol, Dagfinn, et.al., PHP In Action : Object, Design, Agility, Manning

Publications Co., 2007

4. Siswoutomo, Wiwit, PHP Undercover : Mengungkap Rahasia Pemrograman

PHP, PT Elex Media Komputindo, Jakarta, 2005

5. Wilton, Paul, Beginning Java Script, Second Edition, Wrox Press, 2004

pemrograman web.pdf

Documents