1 DESAIN HALAMAN WEB. Overview. Tujuan

Politeknik Telkom

Praktikum Pemrograman Web

1 DESAIN HALAMAN WEB

Overview

Sebuah aplikasi web dibangun menggunakan tag HTML. Pada praktikum pertama ini akan dipelajari bagaimana membuat dokumen HTML sederhana, memformat tampilan pada dokumen HTML dan membuat list yang yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertentu. Untuk praktikum ini akan menggunakan notepad sebagai HTML editornya.

Tujuan

1. 2. 3. 4. 5. 6.

Mengenal dasar-dasar HTML Mengenal HTML Editor Membuat dokumen HTML dan melakukan pemformatan dokumen yang sederhana. Membuat teks preformat dan karakter spesial Membuat list pada dokumen HTML Membuat list bersarang pada dokumen HTML

Desain Halaman Web

1-1

Politeknik Telkom

1.1


Pengenalan HTML

1.1.1

Format Penulisan Dokumen HTML

Untuk membuat suatu halaman HTML standar digunakan tag , , beserta tag penutupnya masing-masing. Susunan tag – tag tersebut membentuk dokumen HTML sebagai berikut : ... informasi tentang dokumen HTML ... informasi yang akan ditampilkan di web browser

1.1.2

Memulai Membuat Dokumen dengan Format HTML

Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut : 1. Buka notepad sebagai editor dokumen HTML. 2. Buat skrip sederhana seperti di bawah ini di notepad : Contoh 1.1 Dokumen HTML Sederhana Halaman Web Pertamaku Ini adalah halaman web pertamaku

3.

Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau .html

Desain Halaman Web

1-2

Politeknik Telkom


Gambar 1.1 Penyimpanan Dokumen HTML Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut menggunakan web browser. Judul Dokumen HTML 4.

Informasi yang dituliskan pada tag Gambar 1.2 Hasil Eksekusi Contoh 1.1 Desain Halaman Web

1-3

Politeknik Telkom

5.

1.2 1.2.1


Alamat file yang diakses ditunjukkan pada url. Untuk contoh diatas, url yang dimaksud adalah D:\WDM\TPSDP 2005\HTML\contoh_1.1.htm

Tag – Tag Dasar HTML Heading

Contoh 1.2 Menggunakan Heading Menggunakan Heading Dokumen HTML berikut ini menggunakan heading
Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :

Gambar 1.3 Hasil Eksekusi Contoh 1.2 Desain Halaman Web

1-4

Politeknik Telkom

1.2.2


Paragraf

Contoh 1.3 Memformat paragraf Memformat Paragraf
Paragraf Pertama

Paragraf pertama ini menggunakan rataan kiri.

Paragraf Kedua

Paragraf kedua ini menggunakan rataan tengah

Paragraf Ketiga

Paragraf ketiga ini menggunakan rataan kanan

Hasil :

Gambar 1.4 Hasil Eksekusi Contoh 1.3

1.2.3

Line Break

Contoh 1.4 Menggunakan Line Break Desain Halaman Web

1-5

Politeknik Telkom


Menggunakan Line Break Menggunakan Line Break

Dengan menggunakan line break, kita dapat memindahkan kalimat
setelah elemen tersebut satu baris di bawahnya.
seperti halnya menggunakan ENTER pada word processing.

Hasil :


1.2.4

Preformatted Text

Contoh 1.5 Menggunakan Preformatted Text Menggunakan Preformatted Text <pre> Dokumen HTML ini menggunakan Preformatted Text Dimana informasi yang ditampilkan pada web browser Sesuai dengan apa yang dituliskan pada editor Apakah tag ini mempermudah penyampaian informasi Melalui dokumen HTML ?

Desain Halaman Web

1-6

Politeknik Telkom


Hasil :


1.2.5

Memformat Bentuk Tulisan

Contoh 1.6 Memformat Tulisan Memformat Tulisan Tulisan ini akan tercetak tebal
Tulisan ini akan tercetak miring
Pada tulisan ini terdapat garis bawah
Dalam matematika, x pangkat 2 ditulis dengan X 2
Rumus kimia untuk oxygen adalah O 2

Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini : Desain Halaman Web

1-7

Politeknik Telkom


D:/dokumen/contoh_1.6.htm


1.2.6

Tag Font

Contoh 1.7 Menambahkan atribut pada tag font Mengolah Font dengan Properties Font Tulisan ini dengan font size adalah 1, face Verdana dan berwarna merah
Tulisan ini dengan font size adalah 4,
face arial dan berwarna hijau

Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini : Desain Halaman Web

1-8

Politeknik Telkom



1.2.7

Horizontal Rules

Contoh 1.8 Menambahkan Garis Horisontal Horizontal Rules Menambahkan garis horisontal pada dokumen HTML

Hasil :

Gambar 1.9 Hasil Eksekusi Contoh 1.8 Desain Halaman Web

1-9

Politeknik Telkom

1.3


List

List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list, unordered list dan definition list.

1.3.1

List Tanpa Urutan (Unordered Lists)

Contoh 1.9 Menggunakan Unordered List Menggunakan List
Menggunakan Unordered List

Ordered List dengan Type Default

Manchester United

Chelsea

Arsenal

Unordered List dengan Type Circle

Juventus

AC Milan

AS Roma

Unordered List dengan Type Disc

Real Madrid

Barcelona

Malaga

Unordered List dengan Type Square

PSV

Ajax Amsterdam

Feyenord


Desain Halaman Web

1-10

Politeknik Telkom



Desain Halaman Web

1-11

Politeknik Telkom

1.3.2


List Berurut (Ordered Lists)

Contoh 1.10 Menggunakan Ordered List Menggunakan List
Menggunakan Ordered List

Ordered List dengan Type Default

Nasi Goreng

Nasi Rames

Pecel Lele

Ordered List dengan Type a

Nasi Goreng

Nasi Rames

Pecel Lele

Ordered List dengan Type I

Nasi Goreng

Nasi Rames

Pecel Lele

Ordered List dengan Menambahkan Atribut Start

Nasi Goreng

Nasi Rames

Pecel Lele


Desain Halaman Web

1-12

Politeknik Telkom



Desain Halaman Web

1-13

Politeknik Telkom

1.3.3


Definition Lists

Contoh 1.11 Menggunakan Definition List : <TITLE> Belajar membuat HTML yuk
Membuat Definition Lists

HTTP
HyperText Transfer Protocol
FTP
File Transfer Protocol

Hasil :


1.3.4

List Bersarang (Nested Lists)

Dalam pemakaian list, kita dapat menggabungkan penggunaan unordered list dan ordered list dalam bentuk list bersarang.

Desain Halaman Web

1-14

Politeknik Telkom


Jurnal 1.

Buatlah halaman HTML untuk menampilkan teks di bawah ini : H2O X2 + 4X + 4 Linux adalah sistem operasi yang bersifat open source.

2.

Buatlah dokumen HTML dengan tampilan sebagai berikut : Keterangan : garis berwarna merah

Desain Halaman Web

1-15

Politeknik Telkom


2 LINK DAN GAMBAR

Overview

Kemudahan dalam aplikasi berbasis web salah satunya adalah bisa menghubungkan satu dokumen dengan dokumen lainnya, baik dalam satu server aplikasi web maupun dengan server aplikasi web yang berbeda di seluruh dunia maya. HTML menyediakan hypertext link yang merupakan daerah teks (ataupun gambar) yang bisa link (menyambungkan) ke dokumen HTML yang lain. Seiring berkembangnya teknologi internet, bukan hanya teks dan gambar yang bisa link ke dokumen tertentu, file multimedia pun sudah dapat dibuat link ke dokumen yang diinginkan.

Tujuan

1. 2. 3. 4. 5.

Membuat link antar dokumen HTML Relative Links versus Absolute Pathnames. Membuat link ke bagian tertentu dari dokumen (anchor) yang sama Memasukan gambar ke halaman HTML Membuat link dari gambar

Link dan Gambar

2-1

Politeknik Telkom

2.1


Link

Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan : nama_link

Beberapa atribut yang dapat ditambahkan dalam tag diantaranya : Atribut Href Name Target Title

2.1.1

Kegunaan Menunjukkan url yang dituju Memberikan nama pada bagian tertentu pada dokumen Menunjukkan target ditampilkannya link Menunjukkan title dari link ketika cursor digerakkan di sekitar area hyperlink

Membuat Link antar Dokumen HTML

Contoh membuat link ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman html dengan nama jur_MI.htm, jur_KA.htm, jur_TK.htm (disimpan di direktori /web/prodi/) dan simpan script dibawah ini dengan nama file Link.htm : Politeknik Telkom
Politeknik Telkom

Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung

[ Manajemen Informatika ] [ Komputer Akuntansi ] [ Teknik Komputer ]

Link dan Gambar

2-2

Politeknik Telkom


[ BAA ] [ Dikti ]

Pada contoh diatas menu „Manajemen Informatika‟ dan „Komputerisasi Akuntansi‟ merupakan Relative Link, menu „BAA‟ merupakan link ke alamat email, menu „Teknik Komputer‟ dan menu „Dikti‟ merupakan link dengan Absolute Pathnames sedangkan logo Politeknik Telkom merupakan gambar yang bisa link ke alamat web tertentu. Untuk tampilan script diatas pada browsernya akan tampak seperti ini :

Gambar 2-1 Contoh link ke dokumen tertentu

2.1.2

Membuat Link ke Bagian Tertentu dalam Dokumen

Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu sebuah halaman web. Caranya dengan menyisipkan Tag Anchor dengan atribut "name" di bagian dokumen yang akan dituju. Berikut ini sintaksisnya :

Link dan Gambar

2-3

Politeknik Telkom


Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan '#nama_section" menjadi : langsung ke nama section

Cobalah script berikut ini : <TITLE>Membuat Link Ke Bagian dalam Dokumen
Membuat Link ke Bagian dalam Dokumen
Bab 1
Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.
Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.
Sebagai pendahuluan, coba klik link ini untuk menuju ke bagian lain pada dokumen ini..

1.1 Sekilas Sejarah Internet
Bab ini adalah bagian lain pada dokumen yang dituju ketika link pada Bab 1 diklik.
Untuk kembali ke Bab 1, klik disini

Link dan Gambar

2-4

Politeknik Telkom


Gambar 2-2 Contoh link ke dokumen yang sama

2.2

Gambar

Untuk menyisipkan gambar kita dapat memanfaatkan tag . Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd, dan sebagainya. Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan psd. Sintaksis: Link dan Gambar

2-5

Politeknik Telkom


Contoh Menambahkan Image ke Dokumen HTML Menambahkan Image
Menambahkan image ke dalam dokumen HTML

Mengatur border pada image

Alternating Text pada image di bawah ini terdapat alternating text. silahkan gerakkan mouse melewati image


Gambar 2-3 Menambahkan image Link dan Gambar

2-6

Politeknik Telkom

2.2.1


Gambar sebagai Hyperlink Contoh penerapan gambar sebagai hyperlink adalah sebagai berikut :

<TITLE>Halaman Awal
Selamat Datang di Situs Pribadi Saya
2untuk bisa menjelajahi situs ini, silahkan klik pada gambar berikut

Selamat menikmati penjelajahan di situs ini.

Hasilnya seperti gambar di bawah ini :

Gambar 2-4 Menambahkan image

Link dan Gambar

2-7

Politeknik Telkom


Jurnal 3.

Buatlah link untuk masing-masing menu pada gambar di bawah ini :

Gambar 2-5 Studi Kasus Hyperlink 4.

Berikan contoh penggunaan gambar sebagai hyperlink ke dokumen yang sama!

Link dan Gambar

2-8

Politeknik Telkom


3 FORM

Overview

Pada praktikum ini akan mempelajari pembuatan dokumen HTML yang lebih interaktif dan menarik. 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

7. 8. 9.

Membuat form pada dokumen HTML Mengerti cara penggunaan form pada halaman dokumen HTML. Mampu menggunakan Input Field sesuai kegunaannya.

Form

3-1

Politeknik Telkom

3.1


Form

Form merupakan media untuk menampung elemen - elemen yang terdapat didalamnya. Informasi yang diisikan oleh pengguna akan dikirimkan ke server melalui form ini. Sintaks umum pembuatan form pada dokumen HTML :
... elemen – elemen yang ditambahkan dalan form ...

3.2

Jenis Inputan dalam Form

3.2.1

Text Jenis inputan type text digunakan untuk menerima masukan dari user berupa data yang berupa huruf, angka dan simbol untuk dikirim ke server. Contoh 4.1 Menambahkan Elemen Text Menambahkan Elemen Text nama :
nim :


Gbr. Hasil Eksekusi Contoh 4.1 Form

3-2

Politeknik Telkom


3.2.2

Password Dengan menggunakan elemen input dengan type password, isian pada text box akan diubah menjadi tanda bintang (*). Elemen ini biasanya digunakan untuk pengisian password. Contoh 4.2 Menyembunyikan Password Menyembunyikan Password Password Anda :


Gbr. Hasil Eksekusi Contoh 4.2 3.2.3

Radio Dengan menggunakan elemen radio, pada form disediakan beberapa pilihan, namun hanya satu yang dapat dipilih dari pilihan tersebut. Contoh 4.3 Menampilkan Pilihan pada Dokumen HTML Menambahkan Pilihan pada Dokumen HTML Jenis kelamin : Form

3-3

Politeknik Telkom


Laki- laki
Perempuan



Checkbox Berbeda dengan elemen radio, elemen checkbox menyediakan beberapa pilihan yang dapat dipilih lebih dari 1 (satu). Masing – masing elemen checkbox harus mempunyai nama yang berbeda satu sama lain. Contoh 4.4 Pilihan Ganda pada Dokumen HTML Pilihan Ganda pada Dokumen HTML Hobi Anda :
Baca
Belanja
Coding
Nonton Form

3-4

Politeknik Telkom



Gbr. Hasil Eksekusi Contoh 4.4 3.2.5 Button Ada 4 (empat) jenis varian pada elemen ini : - Submit Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action. - Reset Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai semua elemen yang ada pada form) - Button Tombol ini berfungsi untuk membuat form lebih interaktif dengan memanggil script lain. - Image Menggunakan gambar sebagai pengganti tombol. Contoh 4.5 Menambahkan Tombol di Dokumen HTML Menambahkan Tombol di Dokumen HTML Form

3-5

Politeknik Telkom




Textarea Untuk mendapatkan masukan dari user dengan karakter dalam jumlah banyak (masukan berupa kalimat yang panjangnya lebih dari 255 karakter) dibutuhkan elemen yang mampu menampung inputan tersebut. Dalam dokumen HTML disediakan elemen yang mampu menampung inputan tersebut. Elemen tersebut dinamai textarea. Contoh 4.6 Menerima Masukan yang Panjang Menerima Masukan yang Panjang Form

3-6

Politeknik Telkom


Deskripsi diri :
</body> </html> rows="5">Tuliskan Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini : Gbr. Hasil Eksekusi Contoh 4.6 3.2.7 Select Pada dokumen HTML disediakan elemen untuk membentuk pilihan dalam bentuk dropdown. Tag yang digunakan untuk membuat pilihan dalam bentuk dropdown adalah tag <select>. Contoh 4.7 Pilihan Menggunakan Dropdown <html> <head> <title>Pilihan Menggunakan Dropdown</title> </head> <body> Peminatan pilih salah satu: <select name="peminatan"> <option value="wm">Web Master</option> <option value="db">Database Management</option> Form 3-7 Politeknik Telkom Praktikum Pemrograman Web <option value="cnm">Computer Network Management</option> </select> Kemampuan : <select size="4" name="kemampuan" multiple> <option value="asp">asp</option> <option value="php">php</option> <option value="mysql">mysql</option> <option value="oracle">oracle</option> <option value="hardware">hardware</option> <option value="jaringan">jaringan</option> </select> </body> </html> Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini : Gbr. Hasil Eksekusi Contoh 4.7 Form 3-8 Politeknik Telkom Praktikum Pemrograman Web Rangkuman 1. 2. 3. Form digunakan untuk menerima masukan berupa informasi atau data dari pengguna. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD, CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan metoda POST. Form 3-9 Politeknik Telkom Praktikum Pemrograman Web Jurnal 5. Buatlah sebuah form lengkap seperti pada gambar di bawah ini : Form 3-10 Politeknik Telkom Praktikum Pemrograman Web 4 LAYOUT HALAMAN WEB Overview Untuk membuat desain halaman web, dapat dibuat menggunakan tabel dan frame. Hasil tampilan tidak ada perbedaan, namun pada proses pengaksesan halaman web mungkin akan berpengaruh terhadap waktu yang diperlukan. Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. 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. Frame akan membagi satu halaman HTML menjadi beberapa dokumen HTML, yang masing-masing bagian frame dihubungkan dengan dokumen HTML yang terpisah. Tujuan 10. 11. 12. 13. Membuat dan memformat tabel pada halaman dokumen HTML Memahami pembuatan frame pada dokumen HTML Memahami penggunaan frame Memahami pembagian tampilan layar ke dalam beberapa bagian, yang masing-masing dihubungkan dengan dokumen HTML yang terpisah 14. Mengatur border pada frame 15. Menentukan target frame cells dari hypertext links Tabel dan Frame 4-1 Politeknik Telkom 4.1 4.1.1 Praktikum Pemrograman Web Tabel Membuat Tabel dan Judul Tabel Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> . 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> Cobalah eksekusi contoh penerapan pembuatan tabel berikut ini : <html> <head> <title>::: Pembuatan Table:::</title> </head> <body> <table border=1> <caption align=top>Daftar Alamat</caption> <tr bgcolor=yellow> <th width=40>No.</td> <th width=150>Nama</td> <th width=200>Alamat</td> </tr> <tr> <td align=center>1.</td> <td>Raihan Umar</td> <td>Tarogong Garut</td> </tr> <tr bgcolor='sky blue'> <td align=center>2.</td> <td>Ari Mulyaningsih</td> <td>Wringin Anom Gresik</td> </tr> <tr> <td align=center>3.</td> <td>Ananda Denira</td> <td>Cicadas Bandung</td> </tr> <tr bgcolor='sky blue'> Tabel dan Frame 4-2 Politeknik Telkom Praktikum Pemrograman Web <td align=center>4.</td> <td>Ari Wibowo</td> <td>Sariwangi Tangerang</td> </tr> </table> </body> </html> Gambar 4-1 Hasil eksekusi pembuatan Tabel 4.1.2 Memformat Baris dan Kolom Setiap tabel pasti terdiri atas baris – baris yang diwakili dengan tag <TR> dan juga kolom-kolom yang diwakili oleh tag <TD>. Setiap baris dan kolom pada tabel memiliki atribut masing-masing. Contoh penerapan memformat baris dan kolom : <HTML> <HEAD> <TITLE> Memformat Baris dan Kolom </TITLE> </HEAD> <BODY> <TABLE BORDER=3 CELLSPACING=3 CELLPADDING=5> <CAPTION>Daftar Order Barang</CAPTION> <TH>No</TH> <TH>Barang</TH> <TH>Jenis</TH> <TH>Harga</TH> <TH>Jumlah</TH> <TH>Total Harga</TH> Tabel dan Frame 4-3 Politeknik Telkom Praktikum Pemrograman Web <TR> <TD ALIGN=CENTER>1</TD> <TD>Pocari Sweat</TD> <TD ROWSPAN=2>Minuman</TD> <TD>Rp. 4500</TD> <TD ALIGN=RIGHT>5</TD> <TD>Rp. 22500</TD> </TR> <TR> <TD ALIGN=CENTER>2</TD> <TD>Nutrisari Jus Jeruk</TD> <TD>Rp. 2450</TD> <TD ALIGN=RIGHT>3</TD> <TD>Rp. 7350</TD> </TR> <TR> <TD ALIGN=CENTER>3</TD> <TD>Kacang Kulit Garuda</TD> <TD ROWSPAN=3>Makanan</TD> <TD>Rp. 9800</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 19600</TD> </TR> <TR> <TD ALIGN=CENTER>4</TD> <TD>Tango Coklat</TD> <TD>Rp. 2750</TD> <TD ALIGN=RIGHT>1</TD> <TD>Rp. 2750</TD> </TR> <TR> <TD ALIGN=CENTER>5</TD> <TD>Snack Ringan</TD> <TD>Rp. 6450</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 12900</TD> </TR> <TR HEIGHT=30 BORDERCOLOR="RED"> <TD COLSPAN=5 BGCOLOR="GRAY">TOTAL</TD> <TD BGCOLOR="GRAY">Rp. 65100</TD> </TR> </TABLE> </BODY> </HTML> Tabel dan Frame 4-4 Politeknik Telkom Praktikum Pemrograman Web Gambar 4-2 Hasil eksekusi pembuatan Tabel 4.1.3 Lebih Lanjut dengan Tabel Pada bagian ini kita akan mempelajari bagaimana menambahkan gambar pada sebuah 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> <TH>1.</TH> <TH>2.</TH> Tabel dan Frame 4-5 Politeknik Telkom Praktikum Pemrograman Web <TH>3.</TH> </TR> <TR> <TD>Pemandangan Awan</TD> <TD>Hutan Lindung</TD> <TD>Pinguin</TD> </TR> <TR> <TD ALIGN=CENTER> <IMG SRC="dock.jpg" width="100" height="100"></TD> <TD ALIGN=CENTER> <IMG SRC="forest.jpg" width="100" height="100"></TD> <TD ALIGN=CENTER> <A HREF="Student.html" rel="nofollow"> <IMG SRC="image.jpg" ALT="Pinguin"></A></TD> </TR> </TABLE> </BODY> </HTML> Gambar 4-3 Hasil eksekusi pembuatan Tabel Tabel dan Frame 4-6 Politeknik Telkom 4.2 Praktikum Pemrograman Web Frame Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah. 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> Tabel 4-1 Atribut-atribut pada Frame Atribut Fungsi FRAMESET COLS Membuat frame vertikal dengan lebar kolom tertentu FRAMESET ROWS Membuat frame horizontal dengan tinggi baris tertentu FRAME SRC Memasukkan dokumen HTML ke dalam FRAME NOFRAME Memasukkan body teks untuk browser yang tidak dapat menampilkan frame Contoh Penerapan : Sebelum mencoba membuat frame, 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, menu.htm, main.htm, jur_mi.htm. 1. header.htm <html> <head> <title> Header Politeknik Telkom </title> </head> Tabel dan Frame 4-7 Politeknik Telkom Praktikum Pemrograman Web <body> <center> <h3>Politeknik Telkom</h3> <h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung</h5> <hr> </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 Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung. 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"> Tabel dan Frame 4-8 Politeknik Telkom Praktikum Pemrograman Web <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. menu.htm <html> <head> <title> Header Politeknik Telkom </title> </head> <body> [ <a href="_menu.html" rel="nofollow"> Home </a> ] [ <a href="Jur_MI.htm" target="main" rel="nofollow"> Informatika </a> ] [ <a href="#" rel="nofollow"> Komputer Akuntansi </a> ] [ <a href="#" rel="nofollow"> Teknik Komputer </a> ] </center> </body> </html> 5. Manajemen home.htm <html> <head> <title>Menggunakan Frame</title> </head> <frameset rows=100,*> <frame src="header.htm" scrolling="no" name="atas"> <frameset cols=250,*> <frame src="menu.htm" name="kiri"> <frame src="main.htm" name="main"> Tabel dan Frame 4-9 Politeknik Telkom Praktikum Pemrograman Web </frameset> </frameset> <noframes><body> </body></noframes> </html></html> Gambar 4-4 Hasil eksekusi pembuatan Frame Tabel dan Frame 4-10 Politeknik Telkom Praktikum Pemrograman Web Jurnal Gambar 4-5 Halaman Studi Kasus Layout Web 6. 7. Buatlah layout web seperti di atas dengan menggunakan tabel! Buatlah layout web seperti di atas dengan menggunakan frame! Ketentuan : untuk target frame dari menu ‟Program Keahlian‟ adalah di bagian kanan. Untuk target frame dari ‟Unit Kegiatan Mahasiswa‟ adalah di halaman window yang baru Tabel dan Frame 4-11 Politeknik Telkom Praktikum Pemrograman Web 5 CSS (CASCADING STYLE SHEETS) 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 16. Memberikan uraian tentang konsep dasar, sintaks CSS, dan pemanfaatannya untuk representasi dan layout dokumen pada lingkungan web 17. Mahasiswa mampu membuat halaman web dan mengimplementasikan CSS untuk menambahkan style pada halaman web tersebut Cascading Style Sheet (CSS) 5-1 Politeknik Telkom 5.1 Praktikum Pemrograman Web Penempatan CSS Terdapat 3 (tiga) cara penempatan CSS pada halaman web, ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang diinginkan. 5.1.1 Inline Style Sheet CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen. Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi. 5.1.2 Embedded Style Sheet Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag <head>) dengan menambahkan tag <style type=”text/css”>. Dengan menggunakan model penempatan CSS sebagai embedded style sheet, pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan pembuat web menentukan style pada tag – tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut. 5.1.3 Linked Style Sheet Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang terpisah dari halaman web. File ini Cascading Style Sheet (CSS) 5-2 Politeknik Telkom Praktikum Pemrograman Web nantinya akan dipanggil oleh halaman web yang membutuhkan pengaturan style. Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS. 5.2 Penggunaan CSS pada Halaman Web Seorang pembuat web dapat memilih salah satu dari ketiga penempatan CSS yang tersedia, atau bahkan dapat menggunakan dua atau tiga penempatan secara bersama – sama dalam sebuah halaman web jika diperlukan. 5.2.1 Memanipulasi Font Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf (). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi tulisan / text, seperti : <th><td>, <a>, <li>, <h1>…<h6>, dan tag – tag lain yang memungkinkan berisi text. Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini : Tabel 5-1 Property Font Nama Property Font-family Value Nama font Font-size Nilai integer dengan pilihan satuan : em|pt|px|% Oblique|italic|normal Normal|small-caps Font-style Font-variant Font-weight Normal|bold|bolder|100900 Cascading Style Sheet (CSS) Contoh Penggunaan P { font-family: arial. Helvetica} P {font-size:24em} P {font-style:italic} P {font-variant:smallcaps} P {font-weight:bold} 5-3 Politeknik Telkom Praktikum Pemrograman Web 5.2.1.1 Menggunakan Inline Style Sheet Contoh penggunaan CSS untuk memanipulasi memposisikan CSS pada inline style sheet sebagai berikut : font dengan Contoh 5-1 Menggunakan sebuah property untuk memanipulasi font. <htm> <head> <title>CSS untuk memanipulasi font</title> </head> <body> <h3 style="font-family:'Courier New', Courier ">Peresmian Politeknik Telkom</h3> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom </body> </html> Jika dijalankan pada web browser, akan didapatkan hasil seperti yang ditampilkan pada gambar di bawah ini : Cascading Style Sheet (CSS) 5-4 Politeknik Telkom Praktikum Pemrograman Web Gambar 5-1 CSS sebuah property untuk memanipulasi font. 5.2.1.2 Menggunakan Embedded Style Sheet Jika akan memanipulasi font menggunakan CSS yang ditempatkan pada embedded style sheet, pembuat website harus mendefinisikan semua property yang akan digunakan pada tag <style> pada bagian header. Berikut ini adalah contoh CSS untuk memanipulasi font dan ditempatkan pada embedded style sheet : Contoh 5-2 Memanipulasi font dengan memberikan sebuah nilai pada selector <html> <head> <title>CSS untuk memanipulasi font</title> <style type="text/css"> p { font-family:Verdana, Arial, Helvetica, sans-serif } td { font-weight:bold } a { font-size:24px } </style> </head> <body> Cascading Style Sheet (CSS) 5-5 Politeknik Telkom Praktikum Pemrograman Web <h2>Peresmian Politeknik Telkom</h2> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati <table width="100%"> <tr> <td> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) </td> </tr> <tr> <td> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom </td> </tr> </table> Untuk mencoba menggunakan aplikasi Online Test, silahkan klik link di bawah ini : <a href="http://www.politekniktelkom.ac.id/olt" rel="nofollow">Online Test</a> </body> </html> Gambar 5-2 Memanipulasi font dengan memberikan sebuah nilai pada selector Cascading Style Sheet (CSS) 5-6 Politeknik Telkom Praktikum Pemrograman Web Selain mengisikan sebuah nilai pada selector, ketika menempatkan CSS sebagai embedded style sheet, pembuat website dapat mengisikan beberapa nilai sekaligus pada selector yang diinginkan. Contoh berikut ini menunjukkan penggunaan beberapa nilai pada sebuah selector. Contoh 5-3 Memanipulasi font dengan mengisikan beberapa nilai pada sebuah selector <html> <head> <title>CSS untuk memanipulasi font</title> <style type="text/css"> td { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; } a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold } </style> </head> <body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr> <td> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati </td> </tr><tr><td> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) </td> </tr> <tr> <td> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom </td> </tr> <tr> <td>Untuk kembali ke berita sebelumnya, <a Cascading Style Sheet (CSS) 5-7 Politeknik Telkom Praktikum Pemrograman Web href="CSS_manipulasi_font2.html">silahkan klik disini</a></td> </tr> </table> </body> </html> Gambar 5-3 Memanipulasi font dengan mengisikan beberapa nilai pada sebuah selector Selain menggunakan selector yang bertipe tag/elemen, jika penempatan CSS pada embedded style sheet, pembuat website dapat pula menggunakan selector tipe lain, seperti : selector bebas, class, atau ID. Contoh di bawah ini menunjukkan penggunaan tipe selector selain tag/elemen untuk memanipulasi font. Contoh 5-4 Memanipulasi font dengan menggunakan selector bebas, class, dan ID <html> <head> <title>CSS untuk memanipulasi font</title> <style type="text/css"> tulisan_miring { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; } . cetak_tebal { font-family:Verdana, Arial, Helvetica, sans-serif; Cascading Style Sheet (CSS) 5-8 Politeknik Telkom Praktikum Pemrograman Web font-size:12px; font-weight:bold } #14pt { font-size:14pt; } </style> </head> <body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr> <td> <tulisan_miring> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl.Japati </tulisan_miring> </td> </tr> <tr> <td class="cetak_tebal"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) </td> </tr> <tr> <td id="14pt"> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom </td> </tr> </table> </body> </html> Cascading Style Sheet (CSS) 5-9 Politeknik Telkom Praktikum Pemrograman Web Gambar 5-4 Memanipulasi font dengan menggunakan selector bebas, class, dan ID 5.2.1.3 Menggunakan Linked Style Sheet Menggunakan linked style sheet sama halnya memindahkan style – style yang didefinisikan pada selector di bagian header menjadi sebuah file yang akan digunakan secara berulang – ulang oleh halaman web yang membutuhkan. Berikut adalah langkah – langkah yang dapat digunakan dalam menggunakan linked style sheet untuk memanipulasi font. Langkah 1. Menyiapkan file untuk mendefinisikan style /* CSS Document */ tulisan_miring { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; } .cetak_tebal { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold } #14pt { font-size:14pt; Cascading Style Sheet (CSS) 5-10 Politeknik Telkom Praktikum Pemrograman Web } p { font-family:Verdana, Arial, Helvetica, sans-serif } td { font-weight:bold } a { font-size:24px } Langkah 2. Simpan file yang berisi define style tersebut dengan nama mystle.css Langkah 3. Pemanggilan file CSS ke dalam halaman web <html> <head> <title>CSS untuk memanipulasi font</title> <link href="mystyle.css" rel="stylesheet" type="text/css"> </head> <body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr> <td> <tulisan_miring> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl.Japati </tulisan_miring> </td> </tr> <tr> <td class="cetak_tebal"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) </td> </tr> <tr> <td id="14pt"> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom </td> </tr> </table> Cascading Style Sheet (CSS) 5-11 Politeknik Telkom Praktikum Pemrograman Web </body> </html> Jika script pada langkah ketiga dijalankan di web browser, hasil yang akan didapatkan sama seperti yang diperlihatkan pada Gambar 5-4. Coba perhatikan perbedaan penggunaan CSS pada contoh 5-4 dengan langkah 3 menggunakan linked style sheet ! 5.2.2 Memanipulasi Color dan Background Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada tulisan, menambahkan warna background, atau dengan menambahkan gambar sebagai background. Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di atas, ditampilkan pada tabel di bawah ini. Tabel 5-2 Property Color dan Background Nama Property Backgroundcolor BackgroundImage Value Contoh Penggunaan Rangkaian 6 digit heksadesimal atau nama warna url dimana image disimpan Body { Background-color : green; } Backgroundattachment Fixed|scroll|inherit BackgroundRepeat Inherit|repeat|norepeat|repeat-x|repeat-y Backgroundposition Bottom|center|left|right|top |inherit Color Rangkaian 6 digit Cascading Style Sheet (CSS) Body { Background-image : url(gambar1.jpg); } Body { Background-attachment : scroll; } Body { Background-repeat : repeat; Background-image : url(image/gambar1.jpg); } Body { Background-repeat : norepeat; Background-image : url(image/gambar1.jpg); Background-position : bottom center } H1 { color : red } 5-12 Politeknik Telkom Praktikum Pemrograman Web heksadesimal atau nama warna Seorang pembuat website dapat menerapkan property – property (yang tertera pada tabel di atas) kepada selector secara individu ataupun menggunakan beberapa property secara bersama – sama pada sebuah selector. Contoh 5-5 Memanipulasi color dan background halaman web <html> <head> <title>CSS untuk memanipulasi color dan background</title> <style type="text/css"> .warna_background { background-color:#00CCFF } .mewarnai_tulisan { color:red } .background_bergambar { background-image:url(mawar.jpg); background-repeat:no-repeat } .background_bergambar_bawah { background-image:url(mawar.jpg); background-position:right; background-repeat:repeat-y } </style> </head> <body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr> <td class="mewarnai_tulisan"> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati </td> </tr> <tr> <td class="warna_background"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) Cascading Style Sheet (CSS) 5-13 Politeknik Telkom Praktikum Pemrograman Web </td> </tr> </table> <table width="100%" border=”1”> <tr> <td height="350" width="50%" class="background_bergambar" valign="bottom"> Acara yang diselenggarakan terasa meriah dengan dihadir kurang lebih 450 tamu undangan dan sekitar 100 wartawan dari media cetak dan elektronik </td> <td class="background_bergambar_bawah"> </td> </tr> </table> </body> </html> Cascading Style Sheet (CSS) 5-14 Politeknik Telkom Praktikum Pemrograman Web Gambar 5-5 Memanipulasi color dan background halaman web Cascading Style Sheet (CSS) 5-15 Politeknik Telkom 5.2.3 Praktikum Pemrograman Web Memanipulasi List Memanipulasi list juga dapat dilakukan dengan menggunakan CSS. Bentuk manipulasi yang diperbolehkan kepada list adalah menentukan bentuk bullet dari list dan posisi list. Tabel berikut menunjukkan property – property yang dapat digunakan untuk memanipulasi list. Tabel 5-3 Property list Nama Property List-styletype List-styleimage List-styleposition Value Contoh Penggunaan Disc|circle|square|lowerroman|upperroman|none|loweralpha|upper-alpha url dimana image disimpan atau none Ul { List-style-type : disc ; } Inside|outside Ul { List-style-image : url(gambar1.jpg) ; } Ul { List-style-position : inside; } Contoh penggunaan property untuk memanipulasi list diperlihatkan pada contoh di bawah ini : Contoh 5-6 Memanipulasi list <html> <head> <title>CSS untuk memanipulasi list</title> <style type="text/css"> .bullet1 { list-style-type:square } .bullet2 { list-style-position:inside; list-style-type:circle } .bullet_image { list-style-image:url(mawar2.gif) } </style> </head> Cascading Style Sheet (CSS) 5-16 Politeknik Telkom Praktikum Pemrograman Web <body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr> <td> Pada peresmian Poiteknik Telkom dihadiri : <ul> <li class="bullet1">Dirjen DIKTI</li> <li class="bullet1">Jajaran PT Telkom</li> <li class="bullet2">GM Keuangan</li> <li class="bullet2">GM Pemasaran</li> </ul> </td> </tr> <tr> <td> Selain itu juga dihadiri beberapa wartawan dari media cetak dan media elektronik : <ul class="bullet_image"> <li>Media Cetak</li> <li class="bullet2">Pikiran Rakyat</li> <li class="bullet2">Kompas</li> <li>Media Elektronik</li> <ul class="bullet1"> <li>RCTI</li> <li>Trans TV</li> </ul> </ul> </td> </tr> </table> </body> </html> Cascading Style Sheet (CSS) 5-17 Politeknik Telkom Praktikum Pemrograman Web Gambar 5-6 Memanipulasi list 5.2.4 Memanipulasi Text Bentuk manipulasi text merupakan pelengkap yang dapat digunakan untuk memanipulasi tulisan secara lebih kompleks. Jika pada manipulasi font hanya menentukan jenis dan ukuran font yang digunakan, maka pada manipulasi text, bentuk tulisan secara keseluruhan dapat dimanipulasi dengan lebih kompleks. Tabel di bawah ini menggambarkan property yang digunakan untuk memanipulasi text. Tabel 5-4 Property text Cascading Style Sheet (CSS) 5-18 Politeknik Telkom Nama Property Color Praktikum Pemrograman Web Value Contoh Penggunaan P { color :red; } text-align Rangkaian 6 digit heksadesimal atau nama warna Left|right|center|justify textdecoration None|underline|overline|lin e-through|blink texttransform None|capitalize|,uppercase|l owercase) Letterspacing Nilai integer dengan pilihan satuan : em|pt|px|% Text-indent Nilai integer dengan pilihan satuan : em|pt|px|% P { Text-decoration :overline; } P { Text-transform : capitalize; } P { letter-spacing : 20px; } P { Text-indent : 50px; } P { Text-align :justify; } Contoh 5-7 Memanipulasi text <html> <head> <title>CSS untuk memanipulasi text</title> <style type="text/css"> td { text-align:justify; color:#000000 } .lowercase { text-transform:lowercase; text-indent:30px } .capitalize { text-transform:capitalize } h3 { text-decoration:overline; text-align:center; text-transform:uppercase; letter-spacing:4px; } </style> </head> Cascading Style Sheet (CSS) 5-19 Politeknik Telkom Praktikum Pemrograman Web <body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr> <td class="lowercase"> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati </td> </tr><tr> <td class="capitalize"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) </td> </tr> </table> </body> </html> 5.2.5 Gambar 5-7 Memanipulasi text Memanipulasi Tabel Bentuk manipulasi pada tabel yang paling sering digunakan adalah memanipulasi border (garis tepi) tabel. Cascading Style Sheet (CSS) 5-20 Politeknik Telkom Praktikum Pemrograman Web Tabel berikut ini menampilkan property yang dapat digunakan untuk memanipulasi tabel. Tabel 5-5 Property tabel Nama Property border-style Value Contoh Penggunaan None|dotted|dashed|solid|do uble|groove|ridge|inset|outset borderbottom-style None|dotted|dashed|solid|do uble|groove|ridge|inset|outset borderbottomwidth borderbottomcolor Nilai integer dan satuan ukuran .b1 { Border-style-type : groove ; } .b1 { Border-bottom-style : groove ;} .b1 { border-bottom-width :10px; } .b1 { border-bottom-color :red; } Rangkaian 6 digit heksadesimal atau nama warna Contoh 5-8 Memanipulasi tabel <html> <head> <title>CSS untuk memanipulasi text</title> <style type="text/css"> td { border-color:#000099; border-spacing:10px; } .garis_putus { border-left-style:dashed; border-bottom-style:dashed; border-right-style:dashed; border-top-style:dashed } .garis2 { border:double; border-color:#000000 } </style> </head> <body> <h3>Daftar Perusahaan Rekanan Politeknik Telkom</h3> <table width="100%" border="0"> Cascading Style Sheet (CSS) 5-21 Politeknik Telkom Praktikum Pemrograman Web <tr> <td>Bank BNI 46</td> </tr> <tr> <td class="garis_putus" height="60">PT Bumida Bumi Putera</td> </tr> <tr> <td class="garis2" height="40">PT Telkom</td> </tr> </table> </body> </html> Gambar 5-8 Memanipulasi tabel Cascading Style Sheet (CSS) 5-22 Politeknik Telkom Praktikum Pemrograman Web Rangkuman 4. Untuk memanipulasi elemen – elemen yang ada dalam halaman web dapat menggunakan CSS (Cascading Style Sheets) 5. Terdapat 3 (tiga) penempatan CSS pada halaman web dengan perbedaan 6. – perbedaan yang ditampilkan pada tabel perbandingan di bawah ini : Inline Style Embedded Style Linked Style Sheet Sheet Sheet Penulisan CSS Dalam elemen Menjadi bagian Terpisah dengan / tag pada file header dari file file HTML HTML HTML Pengubahan Pada setiap tag Pada bagian Pada file yang style pada tiap file header tiap file digunakan untuk HTML HTML menyimpan style-nya saja, tanpa merubah file HTML Penggunaan Hanya satu Memungkinkan Memungkinkan property property yang penggunaan penggunaan bisa digunakan beberapa beberapa property property sekaligus sekaligus Kemudahan Lebih susah Lebih mudah Paling mudah, peng-update-an karena harus daripada inline karena style mengganti style sheet pengubahan semua style karena yang style dilakukan pada tag yang pengubahan pada satu file ada dalam file style dilakukan saja HTML pada bagian header Dalam memanipulasi objek – objek yang ada pada file HTML, diperbolehkan menggunakan beberapa property secara bersamaan. Cascading Style Sheet (CSS) 5-23 Politeknik Telkom Praktikum Pemrograman Web Jurnal Amati penggunaan CSS pada website yang sudah Anda pilih, kemudian lakukanlah modifikasi – modifikasi style pada website tersebut. Minimal modifikasi yang dilakukan adalah 15 (lima belas) bentuk, kemudian tulis dan laporkan modifikasi yang Anda lakukan dan perubahan yang dihasilkan dari modifikasi tersebut. Cascading Style Sheet (CSS) 5-24 Politeknik Telkom Praktikum Pemrograman Web 6 Javascript -1 Cascading Style Sheet (CSS) 6-25 Politeknik Telkom Praktikum Pemrograman Web 7 Javascript -2 Cascading Style Sheet (CSS) 7-26 Politeknik Telkom Praktikum Pemrograman Web 8 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. 2. 3. 4. 5. 6. 7. 8. 9. Mengerti esensi penggunaan Objek dalam JavaScript. Mampu menciptakan objek sendiri. Mampu membuat properti dan metoda untuk suatu objek. Mampu menggunakan objek-objek bawaan pada JavaScript. Memahami Hirarki Objek Browser dan Objek HTML. Mengenal Macam-macam Objek Browser pada JavaScript. Mengerti esensi penggunaan Frame dalam JavaScript. Mengerti esensi penggunaan Form dalam JavaScript. Mampu memecahkan masalah dengan menggunakan Frame dan Form serta mengimplementasikan ke dalam program JavaScript. Cascading Style Sheet (CSS) 8-27 Politeknik Telkom 8.1 Praktikum Pemrograman Web Penggunaan Object Cara mendefinisikan objek : nama_objek.nama_properti Mendefinisikan objek dengan fungsi : function nama_objek(nama_properti1, nama_properti2) { this.nama_properti1 = nama_properti1; this.nama_properti = nama_properti2; } Contoh : <HTML> <HEAD> <TITLE> ::Menciptakan Objek:: </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-// Definisi objek Mahasiswa function Mahasiswa(NIM, Nama, Umur) { this.NIM = NIM; this.Nama = Nama; this.Umur = Umur; } //Menulis properti-properti objek function Tulis (objek) { for (var j in objek) document.writeln (objek[j]); document.writeln (" "); } //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.writeln ("<PRE>"); Cascading Style Sheet (CSS) 8-28 Politeknik Telkom Praktikum Pemrograman Web // menciptakan instan objek mahasiswa var Mahasiswa1 = new Mahasiswa("90401010", "Adhit", 18); var Mahasiswa2 = new Mahasiswa("90101013", "Budi", 18); var Mahasiswa3 = new Mahasiswa("90201025", "Wati", 19); //menuliskan masing-masing instan objek ke jendela browser document.writeln ('Nilai objek Mahasiswa1'); Tulis (Mahasiswa1); document.writeln ('Nilai objek Mahasiswa2'); Tulis (Mahasiswa2); document.writeln ('Nilai objek Mahasiswa3'); Tulis (Mahasiswa3); /*mengisi kembali objek Mahasiswa1 dengan nilai baru --> array assosiatif */ document.writeln ('Nilai Baru objek Mahasiswa1'); Mahasiswa1["NIM"] = "90401056"; Mahasiswa1["Nama"] = "Faishal"; Mahasiswa1["Umur"] = 17; Tulis (Mahasiswa1); document.writeln ("</PRE>"); //--> </SCRIPT> </BODY> </HTML> Output : Cascading Style Sheet (CSS) 8-29 Politeknik Telkom 8.1.1 Praktikum Pemrograman Web Metoda Pada JavaScript kita dapat membuat satu metoda untuk satu jenis objek yang kita buat sendiri, dengan menggunakan fungsi sebagai properti dari satu objek, perhatikan contoh di bawah ini : <HTML> <HEAD> <TITLE> ::Menciptakan Objek:: </TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.writeln ("<PRE>"); Cascading Style Sheet (CSS) 8-31 Politeknik Telkom Praktikum Pemrograman Web // menciptakan instan objek mahasiswa var Mahasiswa1 = new Mahasiswa("30401010", "Adhit", 18); var Mahasiswa2 = new Mahasiswa("30101013", "Budi", 18); var Mahasiswa3 = new Mahasiswa("30201025", "Wati", 19); // mengisi metoda Universitas pada objek Mahasiswa1 Mahasiswa1.Universitas("Politeknik Telkom", "Jl.Telekomunikasi No.1 Bandung"); Mahasiswa1.TampilkanInfo(); document.writeln ("</PRE>"); //--> </SCRIPT> </BODY> </HTML> Output : Untuk menghapus instan objek yang telah kita buat yaitu dengan memberi nilai null, contoh : Mahasiswa1 Mahasiswa2 Mahasiswa3 = null; = null; = null; Cascading Style Sheet (CSS) 8-32 Politeknik Telkom 8.1.2 Praktikum Pemrograman Web Object Browser Objek ini telah disediakan oleh JavaScript, sehingga memudahkan programmer untuk penggunaannya. Berikut ini adalah contoh penerapannya : <HTML> <HEAD> <TITLE> ::Properti Status dari Objek window:: </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var tanda = 0; var posisi = 0; var IsAnim = false; var IsKanan = true; var kata = ""; function evTimeOut(){ if (IsKanan) status = kata.substring(0,posisi); else status = kata.substring(posisi, posisi + kata.length); if (posisi++ > kata.length) { posisi = 0; IsKanan = !IsKanan; } tanda = setTimeout("evTimeOut()",250); IsAnim = true; } function evMulai(){ kata = document.frform.txKata.value; evSelesai(); evTimeOut(); } function evSelesai(){ if (IsAnim) { clearTimeout (tanda); IsAnim = false; posisi = 0; IsKanan = true; Cascading Style Sheet (CSS) 8-33 Politeknik Telkom Praktikum Pemrograman Web status = ""; } } //--> </SCRIPT></HEAD> <BODY> <FORM NAME="frform"> Teks berikut akan ditampilkan pada status bar <INPUT TYPE="text" NAME="txKata" SIZE=50 MAXLENGTH=100> <INPUT TYPE="button" VALUE="Mulai" onClick="evMulai()"> <INPUT TYPE="button" VALUE="Selesai" onClick="evSelesai()"> </FORM> </BODY> </HTML> Output : 8.2 Penanganan Frame dan Form pada JavaScript 8.2.1 Window dan Frame Contoh penerapan menggunakan frame : 1. objek window pada halaman web yang Buat halaman frameset, beri nama frame_javascript.html Cascading Style Sheet (CSS) 8-34 Politeknik Telkom Praktikum Pemrograman Web <html> <head> <title>Tutorial JavaScript</title> <frameset cols=175,*> <frame src="menu.html" name="kiri"> <frame src="topik1.html" name="kanan"> </frameset> </head> </html> 2. Buat halaman untuk frame bagian kiri <html> <head> <script language="JavaScript"> function buka(x) { top.kanan.location=x; // membuka halaman x pada frame kanan return false } </script> </head> <body> <h1>Daftar Isi</h1> <a href="" onclick="return buka('topik1.html')" rel="nofollow"> Memasukan JavaScript ke dalam HTML</a><hr> <a href="" onclick="return buka('topik2.html')" rel="nofollow"> Variabel dan Literal</a><hr> <a href="" onclick="return buka('topik3.html')" rel="nofollow"> Ekspresi dan Operator</a><hr> <a href="" onclick="return buka('topik4.html')" rel="nofollow"> Struktur Kendali dan Fungsi</a><hr> </body> </html> 3. Buat halaman untuk frame bagian kanan <html> <head> <title> New Document </title> </head> <body> Ini Halaman untuk Topik 1 </body> </html> Cascading Style Sheet (CSS) 8-35 Politeknik Telkom 8.2.2 Praktikum Pemrograman Web Form Contoh penerapan objek window pada form HTML : <html> <head> <title> Mengubah Temperatur </title> </head> <body> <form> Farenheit: <input type="text" name="F" value="32"> Celcius: <input type="text" name="C" value="0" > <input type="button" name="FtoC" value="To Celcius" onClick="C.value = 100/(212-32) * (F.value - 32 )"> <input type="button" name="CtoF" value="To Farenheit" onClick="F.value = (212-32)/100 * C.value + 32 "> </form> </body> </html> Hasil keluaran : Cascading Style Sheet (CSS) 8-36 Politeknik Telkom Praktikum Pemrograman Web Rangkuman 7. JavaScript memperlakukan elemen-elemen yang tampil di jendela navigator kita sebagai suatu objek. 8. Programer dapat menciptakan sendiri objek yang ingin ditampilkan dalam halaman web, tetapi JavaScript juga menyediakan objek yang telah terdefinisi. 9. Setiap objek mempunyai metoda yaitu suatu fungsi yang diasosiasikan dengan satu objek, satu aksi yang bisa di eksekusi pada satu objek. 10. Untuk menangani frame dan form pada JavaScript, programer tinggal menggunakan objek browser beserta metoda ataupun properti yang sesuai dengan kebutuhan. Cascading Style Sheet (CSS) 8-37 Politeknik Telkom Praktikum Pemrograman Web Jurnal 8. Buatlah objek initBuku yang mempunyai tiga properti, yaitu Judul, Penulis, dan Harga. Di samping itu, tambahlah dua metoda, yaitu Tulis untuk menulis nilai dari properti-properti objek ini dan Ubah untuk mengubah properti initBuku. Tampilkan hasil keluaran dengan menggunakan metode objek window alert()! Output : Judul : Tip dan Trik Pemrograman JavaScript Penulis : Budi Raharjo Harga : 25500 Judul Buku diubah Judul : Dasar-dasar Pemrograman JavaScript Penulis : Budi Raharjo Harga : 25500 9. Buat sebuah program pengecekan tanggal, yang meminta user memasukkan suatu tanggal (pada kotak teks Tanggal, Bulan dan Tahun). Tambahkan sebuah tombol dengan value [Tekan ini]. Setelah memasukkan sembarang tanggal dan klik tombol [Tekan ini], halaman akan menampilkan informasi yang berhubungan dengan tanggal yang user masukkan. Perhatikan : a. Tanggal yang dimasukkan antara 1 – 31 b. Bulan yang dimasukkan antara 1 – 12 c. Tahun yang dimasukkan minimal tahun 1970 d. Program dapat mengecek sah tidaknya tanggal yang dimasukkan user, sebagai contoh, bila user memasukkan tanggal 31 Juni 2004, program menyatakan bahwa tanggal yang dimasukkan salah (Juni hanya memiliki tanggal sampai dengan 30). Contoh lain, tanggal 29 Februari 2003 juga tidak sah (2003 bukan tahun kabisat sehingga bulan Februari hanya sampai tanggal 28) Cascading Style Sheet (CSS) 8-38 Politeknik Telkom Praktikum Pemrograman Web Output : 10. Modifikasi program no.2 dimana tanggal, bulan dan tahun dimasukkan melalui objek window dengan metoda prompt()! Cascading Style Sheet (CSS) 8-39 Politeknik Telkom Praktikum Pemrograman Web 9 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 10. Memahami cara melakukan instalasi Apache Web Server, PHP dan 11. 12. 13. 14. 15. 16. 17. MySQL Memahami cara melakukan konfigurasi pada web server Mampu membuat halaman web sederhana dengan PHP Mengenal Tipe Data PHP Mengenal Variable PHP Menggunakan Operator Aritmatika Menggunakan Operator Logika Menggunakan Operator Penggabungan String Pengantar Pemrograman Web dengan PHP 9-1 Politeknik Telkom 9.1 Praktikum Pemrograman Web Pengenalan Lingkungan Kerja Web Server 9.1.1 Instalasi Apache Web Server, PHP dan MySQL sebagai DBMS pendukung Untuk menjalankan PHP, dibutuhkan beberapa perangkat lunak hal sebagai berikut : a. b. c. Apache Web Server PHP (www.php.net) MySQL (http://www.mysql.com). Tiap versi paket baik apache, php ataupun mysql terkadang mempunyai cara instalasi yang berbeda-beda. Pada praktikum ini, kita akan menggunakan versi paket dibawah ini: apache_2.2.3-win32-x86-no_ssl.msi php-5.2.0-Win32.zip mysql-5.0.27-win32.exe Berikut ini merupakan langkah-langkah instalasi pada platform windows xp profesional edtion service pack 2. 1. Install web server Lakukan instalasi apache web server dan pilih typical installation. Setelah selesai jalankan web browser dan ketikan (pilih salah satu cara dibawah ini) http://localhost http://127.0.0.1 http://[ip komputer anda] misal http://192.168.0.5 Setelah anda tekan enter, apa yang anda lihat? Pada kondisi normal, web server anda telah aktif, untuk mengetahui status web server apakah dalam keadaan start atau stop. Anda dapat melihatnya dari windows service. Gambar 10.1 Window Service Pengantar Pemrograman Web dengan PHP 9-2 Politeknik Telkom Praktikum Pemrograman Web Sekarang anda coba membuat file web html yang kemudian anda letakan ke web server, sehingga client lain di jaringan dapat mengaksesnya. Buat file index1.html yang berisi: <h1>Web server Apache</h1> Kemudian letakan pada direktori htdocs web server. (Secara default berada pada C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\). Selanjutnya coba akses dari browser dengan mengetikan http://localhost/index1.html. Apakah sudah tampak seperti yang seharusnya? Coba akses dari client lain yang terhubung ke web server anda. Jangan lupa untuk menuliskan alamat web servernya. (misal: http://192.168.0.5/index1.html). Sekarang kita akan mencoba, apakah web server yang telah dibuat dapat mengintepretasikan script php. Sekarang buat file lagi dengan nama index2.php yang berisi: <? Hi <? echo "PHP "; ?> Developer ?> Jangan lupa letakan di htdocs kemudian coba akses melalui browser (dengan alamat http://localhost/index2.php). Apa yang tertulis disana? Pada tahap ini pada kondisi normal, komputer anda telah menjadi web server. 2. Install paket PHP Sebelum menginstal paket PHP, anda perlu membaca file install.txt yang disertakan bersama paket PHP. File tersebut berisi langkah instalasi yang terkadang terdapat perbedaan antara versi satu dengan lainnya. Buka file tersebut dan cari baris yang menjelaskan cara installasi PHP versi yang akan diinstal dengan web server yang digunakan. Pada modul ini, akan dijelaskan bagaimana menginstall paket PHP sebagai module di apache web server. a. Unzip file php-5.2.0-Win32.zip ke c:\php b. Rename php.ini-dist menjadi php.ini c. Buka file httpd.conf dengan text editor (secara default terdapat pada C:\Program Files\Apache Software Foundation\Apache2.2\conf) d. Tambahkan statement dibawah ini pada baris terakhir httpd.conf LoadModule php5_module "C:/php/php5apache2_2.dll" AddType application/x-httpd-php .php PHPIniDir "C:/php/" e. Save file tersebut dan restart apache. Perlu anda perhatikan bahwa setiap anda merubah konfigurasi file httpd.conf anda perlu melakukan restart web server. Pengantar Pemrograman Web dengan PHP 9-3 Politeknik Telkom Praktikum Pemrograman Web Selanjutnya anda dapat mencoba mengakses script php yang tadi dibuat (http://localhost/index2.php). Apa yang tertulis disana? Pada tahap ini dengan kondisi normal, engine PHP telah menjadi module di apache web server sehingga anda dapat membuat web berbasis PHP. Selanjutnya, anda ingin membuat website php dengan database. Maka anda harus menginstal DBMSnya. 3. Install MySQL 5 Run mysql-5.0.27-win32.exe untuk menginstalnya, pilih typical installation dan ikuti langkah instalasi serta isikan password sesuai kebutuhan. Pada modul ini, kita sepakat password root mysql server kita adalah root. Setelah instalasi buat file dengan nama db.php yang berisi: <?php $conn = mysql_connect('localhost', 'root', 'root'); if (!$conn) { die('Tidak dapat koneksi ke mysql: ' . mysql_error()); } echo 'Koneksi ke mysql berhasil'; mysql_close($conn); ?> Coba akses dari browser (http://localhost/db.php). Apa yang tertulis disana? Pada saat ini dengan kondisi normal, mysql telah terinstal. Tapi coba anda lihat, jika script tersebut dijalankan maka akan tampil pesan error. Hal ini menandakan bahwa PHP tidak mengenal fungsi mysql_connect(). Pada PHP5, fungsi-fungsi untuk berkomunikasi dengan mysql secara default tidak aktif, fungsi tersebut merupakan fungsi terpisah. Kumpulan fungsi mysql tersebut terdapat pada DLL yang perlu diinstal dan diaktifkan jika ingin digunakan. Lakukan modifikasi pada file php.ini yang terdapat pada C:\php\. Buka file php.ini dengan text editor, kemudian lakukan search php_mysql.dll. File ekstension pada php biasanya berupa DLL dengan prefix php_. Setelah anda temukan php_mysql.dll, hilangkan tanda titik koma di depannya seperti gambar dibawah: Pengantar Pemrograman Web dengan PHP 9-4 Politeknik Telkom Praktikum Pemrograman Web Kemudian pastikan bahwa file php_mysql.dll terdapat pada direktori ext di direktori paket php. (c:\php\ext\). Cari text “extension_dir” kemudian ubah, dari ./ menjadi c:/php/ext/ agar php dapat menemukan direktori DLL. Karena DLL mysql mempunyai DLL tambahan dengan nama libmysql.dll, selanjutnya letakan file libmysql.dll yang terdapat pada c:\php\ ke c:\windows\system32. Lakukan restart werbserver dan refresh browser yang membuka http://localhost/db.php. Gambar 10.2 Hasil Eksekusi Koneksi ke Database Server Pada tahap ini dengan kondisi normal, extension mysql telah aktif dan dapat digunakan oleh PHP. Kesimpulannya, lingkungan pengembangan aplikasi web berbasis PHP dengan DBMS mysql telah siap digunakan. 9.1.2 Konfigurasi Wen Server Setelah melalui bagian sebelumnya instalasi paket WAMP (Windows Apache MySQL PHP) selesai dilaksanakan. Pada bagian ini akan sedikit ditinjau Pengantar Pemrograman Web dengan PHP 9-5 Politeknik Telkom Praktikum Pemrograman Web kustomisasi konfigurasi apa yang dapat dilakukan pada web server apache. Konfigurasi web server apache dapat dilakukan dengan memodifikasi beberapa baris pada file httpd.conf. Pada file httpd.conf terdapat beberapa directive yang dapat dikustomisasi. Directive merupakan instruksi-instruksi yang diberikan kepada apache agar ia dapat berfungsi sebagaimana mestinya dan membantu memberi lokasi sumber daya yang dibutuhkan. Dibawah ini akan dijelaskan fungsionalitas beberapa directive yang ada: a. ThreadsPerChild Directive Jumlah thread yang bekerja pada server. Nilai default = 250 b. MaxRequestsPerChild Directive Jumlah maximum request suatu proses ke server. Nilai default 0, dengan kata lain web server tidak membatasi batas maximum requestnya. c. Listen Directive Memberikan fasilitas kepada admin untuk melakukan bind apache ke ip adddress dan port tertentu. Disini secara default ditulis 80 (karena protocol http menggunakan port 80). Dari sini administrator dapat merubah port web servernya, misalnya karena ia menginstal web server produk lain dan web server lamanya dirubah menjadi listen 6800 agar tidak crash. d. ServerAdmin Directive Merupakan ditulis berupa alamat email dari administrator. Text ini akan muncul pada saat terjadi error request web page. Informasi ini berguna bagi client yang ingin mencari informasi karena web page yang ia buka error. Dengan adanya informasi alamat email tersebut, ia dapat mengirim keluhannya kepada admin. e. DocumentRoot Directive Merupakan direktori tempat menyimpan file-file web yang dapat diakses melalui web server. Secara default terdapat pada: C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\. Path ini dapat Pengantar Pemrograman Web dengan PHP 9-6 Politeknik Telkom Praktikum Pemrograman Web anda ganti misalnya ke D:\www. Temukan text dengan tulisan seperti dibawah dan ubah: Cari lagi tulisan seperti dibawah dan ubah: f. DirectoryIndex Directive Merupakan file yang diakses ketika directory direquest. Default value: index.html. Dari sini bisa kita tambahkan misalnya index.php, home.php Setelah melakukan modifikasi terhadap file httpd.conf, jangan lupa untuk melakukan restart web server. Instalasi yang dilakukan diatas adalah instalasi manual per paket. Pada saat modul ini dibuat sudah banyak developer PHP yang membuat paket bundle instalasi WAMP/LAMP (Linux Apache MySQL PHP). Berikut merupakan contoh paket bundle WAMP: Apache Friends XAMPP PHP EasyWindows Installer Apache2Triad PHPStar Web-Developer Server Suite IBserver PortableWebAp Appserv WOS Portable WinServ The Uniform Server PHPTriad for Windows Sumber: http://www.hotscripts.com/PHP/Software_and_Servers/Installation_Kits/inde x.html 9.1.3 Membuat halaman web sederhana dengan PHP Contoh penggunaan: <HTML> <HEAD> <TITLE>symfony project</TITLE> </HEAD> <BODY> Mari kita belajar <?php echo 'server side scripting';//perintah menampilkan teks ?> menggunakan PHP </BODY> </HTML> Pengantar Pemrograman Web dengan PHP 9-7 Politeknik Telkom Praktikum Pemrograman Web Hasil Keluaran : 9.2 Tipe data PHP mengenal 8 jenis tipe data antara lain : boolean, integer, float, array, string, object, resource dan NULL. Contoh penerapan tipe data pada PHP : <?php $ia $ib $ic $id = = = = 4; -20; 0232; 0x5DF // // // // decimal decimal negatif octal hexadecimal $jumlah = $ia + 3; If ( $jumlah == 7 ) { echo 'Benar'; }else{ echo 'Salah'; } // Single quoted echo 'simple string single quoted '; echo 'penggunan single quoted untuk penulisan script pada baris baru '; echo 'Budi berkata, "I\'ll do the PHP code" '; echo 'PHP ini terletak di C:\\php\ '; echo 'Untuk single quoted \n tidak dianggap sebagai baris baru '; echo 'Bentuk variabel seperti $var tidak akan ditulis valuenya '; // Double quoted echo "Baris pertama \n Baris \t dengan tab \r Baris baru yang menggunakan return "; echo "DLL library ekstension terdapat pada C:\php\ext\ "; $nama = "Gajah"; echo "Variabel \$nama mempunyai value $nama. "; Pengantar Pemrograman Web dengan PHP 9-8 Politeknik Telkom Praktikum Pemrograman Web // Heredoc syntax echo <<<BATAS $nama adalah salah satu binatang dengan postur tubuh besar. BATAS; ?> Contoh penggunaan array di PHP : <?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(2=>"basketball", 2=>"golf", 3=>"airsoftgun") ); echo $aa["music"][3]; // Metal echo $aa["music"][1]; // Jazz echo $aa["sport"][3]; // airsoftgun ?> 9.3 Variable PHP Variable PHP selalu dimulai dengan karakter $ dan bersifat casesensitive. Contoh penggunaan variable di PHP : <? $_wait = 'Pagi'; $Œ = &$_wait; echo $Œ; echo $_wait; // Contoh variable yang diisi string // Reference $_wait via $Œ (ASCII 140). // Value $Œ dan $_wait akan sama $Œ = "Selamat $_wait"; // $Œ dirubah echo $Œ; // Value $Œ dan $_wait akan sama-sama berubah echo $_wait; ?> Pada baris ke dua diberikan contoh melakukan assign value ke variable dengan cara by reference. Variable $_wait diisi „pagi‟, kemudian variable $Œ diisi reference $_wait, sehingga nanti nilai $_wait dan $Œ akan selalu sama meskipun terjadi perubahan pada salah satunya. Pengantar Pemrograman Web dengan PHP 9-9 Politeknik Telkom 9.4 Praktikum Pemrograman Web Operator Pada praktikum ini akan dipraktekkan penggunaan operator aritmatika, operator logika dan operator konkatenasi/penggabungan string di PHP. Contoh penggunaan operator di PHP : <?php $a = 20; $b = 5; $c = $a * $b; echo $c; // $c = 100; // Contoh penggunaan . $a = "Paris van "; $a = $a."Java!"; echo "$a"; // Paris van Java! // $b $b if Contoh penggunaan .= = "Bandung "; .= "Bermartabat!"; ($b = "Bandung" || $b = "Jakarta") { echo "$b"; } // Bandung Bermartabat! ?> Jurnal 11. Tuliskan secara singkat langkah-langkah instalasi perangkat lunak untuk menjalankan PHP pada komputer Anda! 12. Buatlah program untuk menghitung volume sebuah tabung! 13. Buatlah array arrBuku yang mempunyai tiga key, yaitu Judul, Penulis, dan Harga. Isi value dari key tersebut dengan nilai seperti pada output di bawah ini. Kemudian ubah value judulnya dan tampilkan kembali ke layar. Output : Judul : Tip dan Trik Pemrograman PHP Penulis : Onno W Purbo Harga : 50500 Judul Buku diubah Judul : Dasar-dasar Pemrograman PHP Penulis : Onno W Purbo Harga : 50500 Pengantar Pemrograman Web dengan PHP 9-10 Politeknik Telkom Praktikum Pemrograman Web 10 Struktur Kontrol dan Fungsi 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 18. Mengerti esensi penggunaan Percabangan (pemilihan/kodisional) dalam PHP. 19. Memahami bentuk umum Percabangan. 20. Mampu memecahkan masalah sederhana dengan menggunakan Percabangan dan mengimplementasikan ke dalam program PHP. 21. Mengerti esensi penggunaan Pengulangan (Looping) dalam PHP. 22. Memahami bentuk umum Pengulangan. 23. Mampu memecahkan masalah sederhana dengan menggunakan 24. 25. 26. 27. 28. 29. Pengulangan dan mengimplementasikan ke dalam program PHP. Memahami penggunaan Fungsi. Memahami parameter pada fungsi dalam PHP. Memahami bentuk–bentuk fungsi bawaan dalam PHP. Mampu mengimplementasikan Fungsi pada suatu studi kasus PHP. Mengerti esensi penggunaan class di PHP. Membuat sebuah class yang memiliki field dan fungsi. Pengantar Pemrograman Web dengan PHP 10-1 Politeknik Telkom Praktikum Pemrograman Web 10.1 Kondisional Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat atau sesuai dengan kondisi tertentu. Statement yang berkaitan dengan kondisional yaitu statement if else elseif dan statement switch. Contoh menggunakan statement if else elseif sebagai berikut : <?php $warna = "hitam"; if ($warna == "merah") { echo "warna adalah merah"; } elseif ($warna == "biru") { echo "warna adalah biru"; } else { echo "warna bukan merah atau biru"; } // alternatif penggunaan if if ($warna == "merah") : echo "warna adalah merah"; elseif ($warna == "biru") : echo "warna adalah biru"; else: echo "warna bukan merah atau biru"; endif; ?> Contoh menggunakan statement switch : <? switch ($warna){ case "merah": echo "warna adalah merah"; break; case "biru": echo "warna adalah biru"; break; default: echo "warna bukan merah atau biru"; break; } ?> 10.2 Pengulangan Statement pengulangan ini digunakan untuk mengulangi sebuah perintah sampai jumlah atau kondisi tertentu terpenuhi. Yang termasuk ke dalam statement pengulangan adalah for, while, do-while dan foreach. Contoh menggunakan statement while : <?php Pengantar Pemrograman Web dengan PHP 10-2 Politeknik Telkom Praktikum Pemrograman Web $genap = 4; if (isset($genap)) { $bilgen=intval($genap); echo "Bilangan Genap dari 2 s/d $bilgen adalah: "; echo " "; $gen=0; while ($gen<$genap) { $gen=$gen+2; echo "$gen"; echo " "; } } ?> Contoh menggunakan statement for : <html> <head> <title>Latihan Perulangan dengan For</title> </head> <body> Tanggal: <select name=tanggal> <option value=0 selected>Tanggal <?php //Bentuk Pilihan tanggal 1 sampai dengan 31 for ($i=1;$i<32;$i++) echo "<option value=$i>$i"; ?> </option> </select> </body> </html> 10.3 Membuat Fungsi Dalam pembuatan program sering kali dibutuhkan beberapa perintah yang digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktuwaktu. Dalam pemrograman PHP terdapat subrutin, yaitu fungsi. Contoh : <?php // Contoh fungsi tanpa parameter function dowrite(){ echo "Simple PHP function"; } dowrite(); // Pemanggilan fungsi // Contoh fungsi dengan parameter function dosum($a,$b){ Pengantar Pemrograman Web dengan PHP 10-3 Politeknik Telkom return $a+$b; } echo dosum(4,2); dipanggil ?> Praktikum Pemrograman Web // Menampilkan nilai dari fungsi yang 10.4 Menggunakan fungsi bawaan PHP Fungsi bawaan yang akan dibahas pada praktikum kali ini adalah fungsi matematika dan fungsi string. Contoh fungsi pengolahan matematika : <?php echo ceil(7.6); //menghasilkan 7 echo decbin(109); //menghasilkan 1101101 echo mt_rand(1, 10); // menghasilkan angka random antara 1-10 ?> Contoh fungsi pengolahan string : <?php $mk = "alpro siskom comnet oracle netadmin matdis"; $arr = explode(" ",$mk, 5); foreach ($arr as $vass) { echo " $vass"; } echo nl2br("Teknik \n Informatika"); $kata2 = "Bahasa Pemrograman Web menggunakan ASP"; echo "Kalimat : ".$kata2." "; echo str_replace("ASP", "PHP",$kata2); echo "Panjang Kalimat ".strlen($kata2)."karakter"; ?> 10.5 Class Class sering disebut juga sebagai objek. Penggunaan objek dapat mempercepat proses pembuatan program, karena user dapat memakai objek yang telah didefinisikan untuk membuat objek yang lain. Contoh : <?php class sepeda { var $roda="2"; var $warna="kuning"; var $harga; function UbahWarna($warnaBaru) { $this->warna=$warnaBaru; } function UbahHarga($hargaBaru) { $this->harga=$hargaBaru; } } echo "Sepeda"; $kendaraan = new sepeda; Pengantar Pemrograman Web dengan PHP 10-4 Politeknik Telkom Praktikum Pemrograman Web echo "Jumlah Roda: ".$kendaraan->roda." "; echo "Warna: ".$kendaraan->warna." "; echo "Setelah perintah \"\$kendaraan->UbahWarna(\"merah\")\" "; $kendaraan->UbahWarna("merah"); echo "Warna: ".$kendaraan->warna." "; ?> Jurnal 14. Membuat program penghitung discount. Program ini digunakan untuk mengetahui apakah pembeli dapat diskon atau tidak. Besar diskon tersebut mengikuti aturan sebagai berikut: Jika jumlah bayar 50.000 dapat diskon 5%, jika jumlah bayar 100.000 dapat diskon 10%, dan jika jumlah bayar 500.000 dapat diskon 50%. Selain kreteria tersebut, diskonnya adalah 0%. Contoh keluaran : 15. Membuat Program untuk menampilkan kelipatan sebuah bilangan. Program akan meminta masukan berupa sebuah nilai yang akan diproses untuk menghasilkan kelipatan bilangan tersebut sampai 5 bilangan. Contoh : Masukan :4 Pengantar Pemrograman Web dengan PHP 10-5 Politeknik Telkom Praktikum Pemrograman Web Keluaran :8 12 16 20 24 Masukan Keluaran :7 : 14 21 28 35 42 16. Membuat Program kalkulator sederhana. Program yang akan dibuat ini adalah program untuk melakukan beberapa operasi aritmatika, yaitu penjumlahan, pengurangan, perkalian dan pembagian. Setiap operasi yang dilakukan, program akan meminta masukan nilai dua operand yang akan dihitung dalam hal ini adalah A dan B. Program juga akan meminta masukan dari pemakai untuk memilih operasi apa yang akan dilakukan. (clue : gunakan fungsi untuk membuat masing-masing operasi aritmatika) Contoh keluaran : Pengantar Pemrograman Web dengan PHP 10-6 Politeknik Telkom Praktikum Pemrograman Web 11 Mengolah Data Dalam Form Overview Proses pengolahan data dalam PHP akan dilakukan di sisi server. Jika ada request data dari client, maka data akan diteruskan ke server untuk diproses, kemudian server akan me-response dengan mengembalikan hasilnya ke sisi client. Form ini akan sangat berguna pada saat kita akan mengolah web yang mempunyai basis data, karena dengan menggunakan form user dapat memasukkan jumlah data yang banyak. Terdapat dua cara menangkap variabel pada form, yaitu dengan menggunakan metode get dan metode post. Tujuan 30. Memahami kegunaan elemen – elemen dalam form 31. Mengolah data yang dimasukkan melalui form Mengolah Data dalam Form 11-1 Politeknik Telkom Praktikum Pemrograman Web 11.1 Menyiapkan Form Form menyediakan berbagai komponen yang dapat digunakan untuk menerima masukkan data dari user. Untuk mendeklarasikan sebuah form dapat digunakan dua cara, yaitu form dalam tag HTML dan form yang disisipkan pada sintak PHP. 11.1.1 Menangkap Variabel dari Form Ada dua cara menangkap variabel dari form, yaitu dengan menggunakan metode get dan metode post. Metode Get merupakan sebuah atribut yang dimiliki oleh form. Dengan menggunakan metode GET, maka data yang diisi di dalam form akan dikirimkan ke server dengan cara diletakkan di belakang URL. Penggunaan metode ini tidak menjamin keamanan data. Dengan menggunakan metode POST maka data yang diisi di dalam form akan dikirim ke server secara terpisah, artinya data tidak terlihat di belakang URL. Kerjakan contoh skrip-skrip berikut ini : Skrip inputdata.php <HTML> <HEAD> <TITLE>Menangkap variabel dari form</TITLE> </HEAD> <BODY> <FORM METHOD = GET ACTION = proses.php> Nama: <input type = text name = nama size = 15> NIM : <input type = text name = nim size = 15> Program Studi : <input type = text name = prodi size = 15> <input type = submit value = Proses> </FORM> </BODY> </HTML> Skrip proses.php <?php if ($prodi==”Sistem Informasi” || $prodi==”Teknik Informatika”) { echo('Nama Anda : '.$nama. ''); echo('NIM : '.$nim); echo('Program Studi : '.$prodi); } Else Mengolah Data dalam Form 11-2 Politeknik Telkom Praktikum Pemrograman Web { echo(“Anda tidak memiliki hak akses”); } ?> Contoh diatas menggunakan metode GET. Pertama-tama, jalankan dulu skrip inputdata.php, lalu masukkan nama, NIM, Program Studi dan klik tombol Proses. Perhatikan Addressbar untuk metode GET. Setelah tombol Proses di klik, nama yang dimasukkan akan disimpan sebagai variabel, sehingga dapat diolah dan ditampilkan sesuai dengan keinginan. Untuk melihat perbedaan penggunaan metode GET dan metode POST, ubah metode GET pada skrip inputdata.php dengan metode POST seperti di bawah ini : <FORM METHOD = GET ACTION = proses.php> Menjadi : <FORM METHOD = POST ACTION = proses.php> Jalankan lagi skrip inputdata.html, masukkan nama, NIM, Program Studi, lalu tekan tombol Proses, perhatikan pada Addressbar perbedaan metode GET dan metode POST. Mengolah Data dalam Form 11-3 Politeknik Telkom Praktikum Pemrograman Web Latihan 17. Buat halaman Login seperti gambar dibawah ini. Tombol Login untuk masuk ke halaman berikutnya jika user adalah administrator atau umum. Halaman berikutnya setelah login tergantung pada jenis user, jika user adalah administrator maka halaman yang dibuka adalah halaman administrator dengan pesan ‟Selamat datang administrator‟, jika user name adalah umum maka yang dibuka adalah halaman user biasa dengan pesan ‟Selamat datang user‟. Sedangkan tombol daftar, digunakan untuk pendaftaran user baru bagi yang belum terdaftar. LOGIN User Name Password Daftar Login Gambar 12-1 Form untuk Login 18. Buat halaman pendaftaran yang didalamnya terdapat Form Pendaftaran User Baru seperti gambar berikut (metode GET, action simpan.php): PENDAFTARAN ANGGOTA User Name Password Nama Alamat E-mail Level  Administrator  User Biasa Simpan Mengolah Data dalam Form Reset 11-4 Politeknik Telkom Praktikum Pemrograman Web Gambar 12-2 Form untuk Pendaftaran User Mengolah Data dalam Form 11-5 Politeknik Telkom Praktikum Pemrograman Web 12 Keamanan pada Web Mengolah Data dalam Form 12-1 Politeknik Telkom Praktikum Pemrograman Web 13 MySQL dengan PHP Overview Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik merupakan struktur dua dimensi terdiri dari baris (row atau record) dan kolom (column atau field). Sedangkan dalam sebuah database dapat terdiri dari beberapa table. MySQL adalah database jenis RDBMS (Relational Database Management System). Jadi dalam MySQL tetap menggunakan Table, Baris dan Kolom. Sebuah Database dalam MySQL mengandung beberapa table dan satu table dalam database terdiri dari sejumlah baris dan kolom. Tujuan 1. 2. 3. 4. 5. 6. 7. 8. Menggunakan MySQL untuk mengelola database Mampu membuat database pada MySQL Mampu membuat tabel pada MySQL melalui aplikasi web Mampu memasukkan data ke dalam tabel di database MySQL Mampu menampilkan data dari table Mampu melakukan proses pencarian data pada table Mampu melakukan delete data pada tabel Mampu melakukan update data pada tabel Mengolah Data dalam Form 13-1 Politeknik Telkom Praktikum Pemrograman Web 13.1 Tes Koneksi ke server MySQL Untuk menjalankan MySQL, klik ganda pada file winmysqladmin.exe yang terletak di folder C:\apache\mysql\bin\winmysqladmin.exe. Tanda bahwa MySQL aktif, lihat ikon lampu lalu lintas dengan warna hijau yang terletak di sebelah kanan bawah dari desktop Windows. Contoh koneksi ke MySQL (KoneksiMySQL.php): <?php $koneksi = mysql_connect(("localhost","",""); if ($koneksi) { echo("Koneksi ke server MySQL sukses"); } else { echo("Koneksi ke server MySQL gagal"); } ?> 13.2 Membuat Database pada MySQL Database digunakan sebagai tempat untuk menampung data atau tabeltabel. Contoh membuat database pada MySQL : <?php include("KoneksiMySQL.php"); $buatdb = mysql_create_db("APOTEK_DB"); if ($buatdb) { echo("<BRDatabase dengan nama : APOTEK_DB sukses dibuat"); } else { echo(" Database dengan nama : APOTEK_DB gagal dibuat"); } ?> 13.3 Membuat Tabel pada MySQL Setelah berhasil membuat database, maka langkah selanjutnya adalah membuat tabel-tabel. Contoh : Skrip BuatTabel.php Mengolah Data dalam Form 13-2 Politeknik Telkom Praktikum Pemrograman Web <?php include(“KoneksiMySQL.php”); $pilihdb = mysql_select_db(“APOTEK_DB”) or die(“Database APOTEK_DB tidak ditemukan”); $buattabel = “CREATE TABLE obat(kdobat char(5) PRIMARY KEY, namaobat char(50), harga int(9) )”; $tabel = mysql_db_query(“APOTEK_DB”,$buattabel); if($tabel){ echo(“ Tabel dengan nama : obat sukses dibuat!”); } else { echo(“ Tabel dengan nama : mahasiswa gagal dibuat!”); } ?> 13.4 Insert Data Langkah selanjutnya yaitu melakukan pengisian data ke dalam tabel obat yang masih berupa tabel kosong. Untuk lebih jelasnya, cobalah skripskrip berikut, FormInput.php digunakan untuk membuat form yang menerima masukan data, sedangkan InputObat.php untuk proses menambahkan data ke tabel obat : Skrip FormInput.php <HTML> <HEAD> <TITLE>Memasukkan data ke tabel obat</TITLE> </HEAD> <BODY> INPUT DATA MAHASISWA <FORM METHOD = POST ACTION = InputObat.php> <TABLE BORDER = 0> <TR> <TD>KODE OBAT :</TD> <TD><INPUT TYPE = TEXT NAME = kdobat SIZE = 10></TD> </TR> <TR> <TD>NAMA OBAT :</TD> <TD><INPUT TYPE = TEXT NAME = nmobat SIZE = 20></TD> </TR> <TR> <TD>HARGA :</TD> <TD><INPUT TYPE = TEXT NAME = harga SIZE = 10></TD> </TR> Mengolah Data dalam Form 13-3 Politeknik Telkom Praktikum Pemrograman Web <TR> <TD><INPUT TYPE = SUBMIT NAME =submit VALUE =INPUT></TD> <TD><INPUT TYPE = RESET NAME = reset VALUE = BATAL></TD> </TR> </TABLE> </FORM> </BODY> </HTML> Skrip InputObat.php <?php mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB") or die("Database tidak ada"); $perintah="INSERT INTO obat(kdobat,namaobat,harga) VALUES('$kdobat','$nmobat','$harga')"; $isi_data=mysql_query($perintah); if(isset($isi_data)) { echo("Data Obat : "); echo("Kode Obat : $kdobat "); echo("Nama Obat : $nmobat "); echo("Harga : $harga "); echo("Telah dimasukan ke dalam table obat "); echo("<FORM METHOD = POST ACTION = FormInput.php>"); echo("<INPUT TYPE=SUBMIT NAME=SUBMIT VALUE='Daftar Lagi'></FORM>"); } else { echo("Data obat gagal dimasukkan ke dalam tabel"); } ?> 13.5 View Data Setelah melakukan pengisian data ke dalam tabel, langkah berikutnya kita akan melihat/menampilkan data yang ada di dalam tabel, cobalah skrip berikut : Skrip TampilObat.php <?php echo("DATA OBAT<HR> "); echo("<TABLE BORDER=1>"); echo("<TR><TD>KODE</TD><TD> OBAT</TD><TD>HARGA</TD></TR>"); mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $perintah="SELECT * FROM obat ORDER BY kodeobat"; $tampil_data=mysql_query($perintah); Mengolah Data dalam Form 13-4 Politeknik Telkom Praktikum Pemrograman Web 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 TampilObat.php dijalankan, maka skrip akan menampilkan data yang ada di dalam tabel obat. 13.6 Searching Data Searching data dimaksudkan untuk mencari data yang ada pada tabel sehingga bisa menemukan informasi dengan cepat. Cobalah skrip berikut: Skrip FormCari.php <HTML> <HEAD> <TITLE>Mencari data obat</TITLE> </HEAD> <BODY> <FORM METHOD=POST ACTION=CariObat.php> Masukkan Kode Obat : <INPUT TYPE=TEXT NAME=cari SIZE=20> <INPUT TYPE=submit NAME=submit VALUE=CARI> </FORM> </BODY> </HTML> Skrip CariObat.php <?php echo("<H3>HASIL PENCARIAN</H3>"); mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $perintah="SELECT * FROM obat WHERE kodeobat like '%$cari%'"; $hasil=mysql_query($perintah); $jumlah=mysql_num_rows($hasil); if($jumlah>0){ echo("Data yang ditemukan : $jumlah <HR>"); while($data=mysql_fetch_row($hasil)) { echo("Nama Obat : $data[1] "); echo("Harga : $data[2] "); } } else { echo("Maaf, data yang anda cari tidak ada"); } ?> Mengolah Data dalam Form 13-5 Politeknik Telkom Praktikum Pemrograman Web Pada saat skrip FormCari.php dijalankan, maka ada perintah untuk memasukkan kode obat yang akan dicari. Bila nim yang dimasukkan pada tampilan skrip FormCari.php ada pada tabel obat, maka akan ditampilkan nama obat dan harga dari obat yang bersangkutan. 13.7 Delete Data Data yang ada di dalam tabel tidak hanya bisa ditambah atau bahkan diubah. Data tersebut juga bisa untuk dihapus. Untuk lebih jelasnya, cobalah skrip-skrip berikut : Skrip TampilDelete.php <?php echo("DATA OBAT<HR> "); echo("<TABLE BORDER=1>"); echo("<TR><TD>KODE</TD><TD> OBAT</TD><TD>HARGA</TD></TR>"); mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $perintah="SELECT * FROM obat ORDER BY kodeobat"; $tampil_data=mysql_query($perintah); while($data=mysql_fetch_row($tampil_data)) { echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD> <TD>$data[2]</TD>"); echo("<TD><a href=\"HapusObat.php?id=$data[0]\" rel="nofollow"> Hapus</a></TD></TR>"); } echo("</TABLE>"); ?> Skrip HapusObat.php <?php mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $perintah="DELETE FROM obat where kodeobat=$id"; $hapus=mysql_query($perintah); header("Location:TampilDelete.php"); ?> Jika skrip TampilDelete.php dijalankan, maka akan ditampilkan data yang ada di dalam tabel obat. Link untuk hapus terletak di setiap baris pada data yang ditampilkan. Bila link hapus di pilih, maka data yang berada satu baris dengan link hapus tersebut akan dihapus dari tabel obat. 13.8 Update Data Perintah update data dilakukan untuk mengubah data yang ada di dalam tabel. Seperti halnya input data, pada pengolahan data diperlukan suatu Mengolah Data dalam Form 13-6 Politeknik Telkom Praktikum Pemrograman Web antarmuka untuk menampilkan data yang akan diubah. Cobalah skrip-skrip berikut : Skrip TampilUpdate.php <?php echo("DATA OBAT<HR> "); echo("<TABLE BORDER=1>"); echo("<TR><TD>KODE</TD><TD> OBAT</TD><TD>HARGA</TD></TR>"); mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $perintah="SELECT * FROM obat ORDER BY kodeobat"; $tampil_data=mysql_query($perintah); while($data=mysql_fetch_row($tampil_data)) { echo("<TR><TD>$data[0]</TD><TD>$data[1]</TD> <TD>$data[2]</TD>"); echo("<TD><ahref=\"FormEdit.php?id=$data[0]\" rel="nofollow">Ubah</a> </TD></TR>"); } echo("</TABLE>"); ?> Skrip FormEdit.php <?php mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $perintah="SELECT * FROM obat where kodeobat='$id'"; $hasil=mysql_query($perintah); $baris=mysql_fetch_array($hasil); ?> <HTML> Pengeditan Data Obat<HR> <FORM method=post action=EditObat.php> <input type=hidden name="id" value="<?echo"$baris[kodeobat]"?>"> Nama Obat : <input type=text name=namaobat size=20 value="<?echo"$baris[namaobat]" ?>"> Harga : <input type=text name=harga size=20 value="<?echo"$baris[harga]" ?>"> <input type=submit name=edit value=Simpan> </HTML> Skrip EditObat.php <?php mysql_connect("localhost","",""); mysql_select_db("APOTEK_DB"); $ubah = "UPDATE obat SET namaobat='$namaobat',harga='$harga' Mengolah Data dalam Form 13-7 Politeknik Telkom Praktikum Pemrograman Web where kodeobat='$id'"; mysql_query($ubah); header("location:TampilUpdate.php"); ?> Untuk mengubah data pada halaman TampilUpdate.php, pilih link ubah yang berada satu baris dengan data yang ingin diubah. Pada saat link diklik, maka akan merefer ke skrip FormEdit.php. Bila tombol Simpan di klik pada FormEdit.php, maka akan menjalankan skrip EditObat.php. Skrip EditObat.php akan mengupdate data sesuai dengan inputan user pada skrip FormEdit.php. Mengolah Data dalam Form 13-8 Politeknik Telkom Praktikum Pemrograman Web Jurnal 19. 20. 21. 22. Lihat kembali jurnal pada Bab XII. Buatlah aplikasi pendaftaran/registrasi agar pengunjung mendapatkan hak untuk memasuki halaman web yang di buat. Untuk membuat aplikasi tersebut Anda harus mengikuti aturanaturan sebagai berikut : Buat database dan tabel menggunakan sintak PHP. Field-field tabel tersebut terdiri dari username, password, nama, alamat, email dan level. Untuk level dibedakan menjadi dua, yaitu user biasa dan administrator. Gunakan form login yang telah Anda buat pada praktikum sebelumnya. Gunakan form pendaftaran anggota untuk daftar yang telah Anda buat pada praktikum sebelumnya. Setelah sukses melakukan pendaftaran, user dapat melakukan login sesuai dengan level user masing-masing. Untuk halaman administrator akan menampilkan data anggota yang telah mendaftar disertai dengan menu edit dan delete data pada setiap baris datanya, terdapat juga menu Tambah Data dan Ganti Password. Sedangkan untuk halaman user biasa terdapat menu Edit Data (miliknya sendiri) dan Ganti Password. Mengolah Data dalam Form 13-9 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/1-desain-halaman-web-overview-tujuan" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "1 DESAIN HALAMAN WEB. Overview. Tujuan"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">

1 DESAIN HALAMAN WEB. Overview. Tujuan

Recommend Documents

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Menggunakan Unordered List

Ordered List dengan Type Default

Unordered List dengan Type Circle

Unordered List dengan Type Disc

Unordered List dengan Type Square

Menggunakan Ordered List

Ordered List dengan Type Default

Ordered List dengan Type a

Ordered List dengan Type I

Ordered List dengan Menambahkan Atribut Start

Membuat Definition Lists

Politeknik Telkom

Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung

Membuat Link ke Bagian dalam Dokumen

Menambahkan image ke dalam dokumen HTML

Mengatur border pada image

Selamat Datang di Situs Pribadi Saya