Praktikum Pemrograman Web.pdf

(1)

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. Mengenal dasar-dasar HTML 2. Mengenal HTML Editor

3. Membuat dokumen HTML dan melakukan pemformatan dokumen yang sederhana.

4. Membuat teks preformat dan karakter spesial 5. Membuat list pada dokumen HTML

(2)

1.1 Pengenalan HTML

1.1.1 Format Penulisan Dokumen HTML

Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>, <body> beserta tag penutupnya masing-masing. Susunan tag

– tag tersebut membentuk dokumen HTML sebagai berikut :

... informasi tentang dokumen HTML </head>

<body>

... informasi yang akan ditampilkan di web browser </body>

</html>

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

<html>

<head>

<title>Halaman Web Pertamaku</title>

</head>

<body>

Ini adalah halaman web pertamaku

</body>

</html>

(3)

Gambar 1.1 Penyimpanan Dokumen HTML

4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut menggunakan web browser.

Judul Dokumen HTML

Informasi yang dituliskan pada tag <body>

(4)

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

1.2 Tag – Tag Dasar HTML 1.2.1 Heading

Contoh 1.2 Menggunakan Heading

<title>Menggunakan Heading</title> </head>

<body>

Dokumen HTML berikut ini menggunakan heading <h1>Heading 1</h1>

<h2 align=”right”>Heading 2</h2> <h3 align=”center”>Heading 3</h3>

<h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body>

</html>

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

(5)

1.2.2 Paragraf

Contoh 1.3 Memformat paragraf

<title>Memformat Paragraf</title> </head>

<body>

<p>Paragraf Pertama</p>

<p>Paragraf pertama ini menggunakan rataan kiri.</p> <p></p>

<p align=”center”>Paragraf Kedua</p>

<p align=”center”>Paragraf kedua ini menggunakan rataan

tengah</p> <p></p>

<p align=”right”>Paragraf Ketiga</p>

<p align=”right”>Paragraf ketiga ini menggunakan rataan

kanan</p> </body> </html>

Hasil :

Gambar 1.4 Hasil Eksekusi Contoh 1.3 1.2.3 Line Break

Contoh 1.4 Menggunakan Line Break

(6)

<head>

<title>Menggunakan Line Break</title> </head>

<body>

Menggunakan Line Break<br><br>

Dengan menggunakan line break, kita dapat memindahkan kalimat<br>

setelah elemen tersebut satu baris di bawahnya.<br> seperti halnya menggunakan ENTER pada word processing. </body>

</html>

Hasil :

Gambar 1.5 Hasil Eksekusi Contoh 1.4 1.2.4 Preformatted Text

Contoh 1.5 Menggunakan Preformatted Text

<title>Menggunakan Preformatted Text</title> </head>

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 ?

(7)

Hasil :

Gambar 1.6 Hasil Eksekusi Contoh 1.5 1.2.5 Memformat Bentuk Tulisan

Contoh 1.6 Memformat Tulisan

<title>Memformat Tulisan</title> </head>

<body>

<b>Tulisan ini akan tercetak tebal</b> <p>

<i>Tulisan ini akan tercetak miring</i> <p>

<u>Pada tulisan ini terdapat garis bawah</u> <p>

Dalam matematika, x pangkat 2 ditulis dengan X <sup>2</sup> <p>

Rumus kimia untuk oxygen adalah O <sub>2</sub> </body>

</html>

(8)

Gambar 1.7 Hasil Eksekusi Contoh 1.6 1.2.6 Tag Font

Contoh 1.7 Menambahkan atribut pada tag font

<title>Mengolah Font dengan Properties Font</title> </head>

<body>

<font size="1" face=verdana color=#FF0000>Tulisan ini dengan font size adalah 1, face Verdana dan berwarna merah</font>

<br>

<font size="4" face=arial color=green>Tulisan ini dengan font size adalah 4, <br>face arial dan berwarna hijau</font> </body>

</html>

(9)

Gambar 1.8 Hasil Eksekusi Contoh 1.7 1.2.7 Horizontal Rules

Contoh 1.8 Menambahkan Garis Horisontal

<title>Horizontal Rules</title> </head>

<body>

Menambahkan garis horisontal pada dokumen HTML <hr size="15">

</html>

Hasil :

(10)

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

<title>Menggunakan List</title> </head>

<body>

<h3>Menggunakan Unordered List</h3> <hr>

<h4>Ordered List dengan Type Default</h4> <ul>

<li>Manchester United</li> <li>Chelsea</li>

<li>Arsenal</li> </ul>

<h4>Unordered List dengan Type Circle</h4> <ul type="circle">

<li>Juventus</li> <li>AC Milan</li> <li>AS Roma</li> </ul>

<h4>Unordered List dengan Type Disc</h4> <ul type="disc">

<li>Real Madrid</li> <li>Barcelona</li> <li>Malaga</li> </ul>

<h4>Unordered List dengan Type Square</h4> <ul type="square">

<li>Ajax Amsterdam</li> <li>Feyenord</li> </ul>

</body> </html>

(11)

(12)

1.3.2 List Berurut (Ordered Lists) Contoh 1.10 Menggunakan Ordered List

<title>Menggunakan List</title> </head>

<body>

<h3>Menggunakan Ordered List</h3> <hr>

<h4>Ordered List dengan Type Default</h4> <ol>

<li>Nasi Goreng</li> <li>Nasi Rames</li> <li>Pecel Lele</li> </ol>

<h4>Ordered List dengan Type a</h4> <ol type="a">

<h4>Ordered List dengan Type I</h4> <ol type="I">

<h4>Ordered List dengan Menambahkan Atribut Start</h4> <ol start="4">

</body> </html>

(13)

(14)

1.3.3 Definition Lists

Contoh 1.11 Menggunakan Definition List : <HTML>

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

<h3>Membuat Definition Lists</h3> <DL>

<DT> HTTP

<DD> HyperText Transfer Protocol <DT> FTP

<DD> File Transfer Protocol </DL>

</BODY> </HTML>

Hasil :

Gambar 1.12 Hasil Eksekusi Contoh 1.11 1.3.4 List Bersarang (Nested Lists)

(15)

Jurnal

1. Buatlah halaman HTML untuk menampilkan teks di bawah ini : H2O

X2 _{+ 4X + 4}

Linux adalah sistem operasi yang bersifat open source.

(16)

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. Membuat link antar dokumen HTML 2. Relative Links versus Absolute Pathnames.

3. Membuat link ke bagian tertentu dari dokumen (anchor) yang sama 4. Memasukan gambar ke halaman HTML

(17)

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 :

Beberapa atribut yang dapat ditambahkan dalam tag <a> diantaranya :

Atribut Kegunaan

Href Menunjukkan url yang dituju

Name Memberikan nama pada bagian tertentu pada dokumen Target Menunjukkan target ditampilkannya link

Title Menunjukkan title dari link ketika cursor digerakkan di sekitar area hyperlink

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

<html>

<head> <title> Politeknik Telkom </title> </head> <body>

<a href="http://www.politekniktelkom.ac.id"> <img src="poltek.gif" width="100" height="100" alt="Politeknik Telkom" align=left> </A>

<center>

<h3>Politeknik Telkom</h3>

<h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung</h5> <hr>

[ <a href="jur_MI.htm"> Manajemen Informatika </a> ] [ <a href="jur_KA.htm" target="_blank"> Komputer Akuntansi </a> ]

(18)

[ <a href="mailto:[email protected]"> BAA </a> ] [ <a href=http://www.dikti.org target="_blank">Dikti</a> ] </center>

</body> </html>

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 <a> dengan atribut "name" di bagian dokumen yang akan dituju.

Berikut ini sintaksisnya :

(19)

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

<a href="sebuah_halaman.html#nama_section">langsung ke nama section</a>

Cobalah script berikut ini :

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

<BODY>

<H4>Membuat Link ke Bagian dalam Dokumen</H4> <A NAME="bab1"></A>

Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<BR> Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.<Br>

Sebagai pendahuluan, coba klik link ini untuk

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

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

Bab ini adalah bagian lain pada dokumen yang dituju ketika link pada Bab 1 diklik.<BR>

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

(20)

Gambar 2-2 Contoh link ke dokumen yang sama

2.2 Gambar

Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. 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.

(21)

Contoh Menambahkan Image ke Dokumen HTML

<html>

<head> <title> Menambahkan Image </title> </head> <body>

<h4>Menambahkan image ke dalam dokumen HTML</h4> <img src="Clock-hands.bmp" width="150" height="120"> <br>

<h4>Mengatur border pada image</h4> <img src="Clock-hands.bmp" border="5"> <br>

<h4>Alternating Text</a>

pada image di bawah ini terdapat alternating text. silahkan gerakkan mouse melewati image<br>

</html>

(22)

2.2.1 Gambar sebagai Hyperlink

Contoh penerapan gambar sebagai hyperlink adalah sebagai berikut :

<TITLE>Halaman Awal</TITLE> </HEAD>

<BODY>

<H4>Selamat Datang di Situs Pribadi Saya</H4> 2untuk bisa menjelajahi situs ini,

silahkan klik pada gambar berikut <A HREF="contoh_4.2.htm">

Selamat menikmati penjelajahan di situs ini. </BODY>

</HTML>

Hasilnya seperti gambar di bawah ini :

(23)

Jurnal

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

Gambar 2-5 Studi Kasus Hyperlink

(24)

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. Membuat form pada dokumen HTML

(25)

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 : <form action=”_url_” method=”get|post” enctype=””>

... elemen – elemen yang ditambahkan dalan form ... </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

<title>Menambahkan Elemen Text</title> </head>

<body>

nama : <input type="text" name="nama"> <br>

nim : <input type="text" name="nim" value="901" maxlength="9" size="9">

</body> </html>

(26)

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

<title>Menyembunyikan Password</title> </head>

<body>

Password Anda : <input type="password" name="nama" size="30" maxlength="15">

</body> </html>

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

<title>Menambahkan Pilihan pada Dokumen HTML</title> </head>

<body>

(27)

<br><input type="radio" name="jns_kelamin" value="L" checked>Laki- laki

<br><input type="radio" name="jns_kelamin" value="P">Perempuan </body>

</html>

3.2.4 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

<title>Pilihan Ganda pada Dokumen HTML</title> </head>

<body>

Hobi Anda :

<br><input type="checkbox" name="hobi1" value="baca" checked>Baca

<br><input type="checkbox" name="hobi2" value="belanja">Belanja

<br><input type="checkbox" name="hobi3" value="coding" checked>Coding

<br><input type="checkbox" name="hobi4" value="nonton">Nonton </body>

(28)

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

(29)

</head> <body>

<input type="image" name="Gambar" src="lambang_profesional.bmp"

width="50" height="50"> </form>

</body> </html>

3.2.6 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

<title>Menerima Masukan yang Panjang</title> </head>

(30)

Deskripsi diri : <br>

<textarea name="deskripsi" cols="25" rows="5">Tuliskan deskripsi diri Anda disini</textarea>

</body> </html>

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

<title>Pilihan Menggunakan Dropdown</title> </head>

<body>

Peminatan pilih salah satu: <br>

<option value="wm">Web Master</option>

(31)

<option value="cnm">Computer Network Management</option> </select>

<br>

Kemampuan : <br>

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

(32)

Rangkuman

1. Form digunakan untuk menerima masukan berupa informasi atau data dari pengguna.

2. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD, CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU. 3. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan

(33)

Jurnal

(34)

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. Membuat dan memformat tabel pada halaman dokumen HTML 11. Memahami pembuatan frame pada dokumen HTML

12. Memahami penggunaan frame

13. Memahami pembagian tampilan layar ke dalam beberapa bagian, yang masing-masing dihubungkan dengan dokumen HTML yang terpisah 14. Mengatur border pada frame

(35)

4.1 Tabel

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

Cobalah eksekusi contoh penerapan pembuatan tabel berikut ini :

<html>

<head> <title>::: Pembuatan Table:::</title> </head> <body>

<caption align=top><b><u>Daftar Alamat</u></b></caption> <tr bgcolor=yellow>

<td align=center>2.</td> <td>Ari Mulyaningsih</td> <td>Wringin Anom Gresik</td> </tr>

(36)

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

<TITLE> Memformat Baris dan Kolom </TITLE> </HEAD>

<BODY>

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=5> <CAPTION>Daftar Order Barang</CAPTION> <TH>No</TH>

(37)

<TR> <TD>Nutrisari Jus Jeruk</TD> <TD>Rp. 2450</TD> <TD>Kacang Kulit Garuda</TD> <TD ROWSPAN=3>Makanan</TD>

<TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD> <TD BGCOLOR="GRAY"><B>Rp. 65100</B></TD> </TR>

(38)

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 :

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

<BODY>

<CAPTION> Dokumentasi Fotograpi </CAPTION> <TR>

(39)

<TR>

<TD>Pemandangan Awan</TD> <TD>Hutan Lindung</TD> <TD>Pinguin</TD> </TR> <TR>

</BODY> </HTML>

(40)

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

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

(41)

<h3>Politeknik Telkom</h3>

<h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot

<title>Main Politel</title> </head>

<body>

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

Saat ini kami berlokasi di Kampus Politeknik Telkom <br>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung.<br> Beberapa jurusan yang terdapat di Politeknik Telkom diantaranya :

<ol>

<li>Jurusan Manajemen Informatika</li> <li>Jurusan Komputer Akuntansi</li> <li>Jurusan Teknik Komputer</li> </ol>

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

(42)

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

<title> Header Politeknik Telkom </title> </head>

<body>

[ <a href="_menu.html"> Home </a> ]<br>

[ <a href="Jur_MI.htm" target="main"> Manajemen Informatika </a> ]<br>

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

<title>Menggunakan Frame</title> </head>

(43)

</frameset> </frameset> <noframes><body> </body></noframes> </html></html>

(44)

Jurnal

Gambar 4-5 Halaman Studi Kasus Layout Web

6. Buatlah layout web seperti di atas dengan menggunakan tabel! 7. 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

(45)

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

(46)

5.1 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

(47)

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 (<p>). 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 Value Contoh Penggunaan

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

Font-size Nilai integer dengan pilihan satuan : em|pt|px|%

P {font-size:24em}

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

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

Font-weight Normal|bold|bolder|100-900

(48)

5.2.1.1Menggunakan Inline Style Sheet

Contoh penggunaan CSS untuk memanipulasi font dengan memposisikan CSS pada inline style sheet sebagai berikut :

Contoh 5-1 Menggunakan sebuah property untuk memanipulasi font.

Jika dijalankan pada web browser, akan didapatkan hasil seperti yang ditampilkan pada gambar di bawah ini :

<title>CSS untuk memanipulasi font</title> </head>

<body>

<h3 style="font-family:'Courier New', Courier ">Peresmian Politeknik Telkom</h3>

<p style="font-family:Verdana, Arial, Helvetica, sans- serif">Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati</p>

<p style="font-size:16px">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) </p>

<p style="font-style:italic">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</p> </body>

(49)

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

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

(50)

<h2>Peresmian Politeknik Telkom</h2>

<p>Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati</p>

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

Untuk mencoba menggunakan aplikasi Online Test, silahkan klik link di bawah ini :<br>

<a href="http://www.politekniktelkom.ac.id/olt">Online Test</a> </body>

</html>

(51)

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

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

Politeknik Telkom lahir pada tanggal 27 September 2007

dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati<br>  </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) <br> </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 <br>  </td>

</tr> <tr>

(52)

href="CSS_manipulasi_font2.html">silahkan klik disini</a></td> </tr>

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

tulisan_miring {

. cetak_tebal {

(53)

font-size:12px;

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

</td> </tr> <tr>

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

</td> </tr> <tr>

(54)

Gambar 5-4 Memanipulasi font dengan menggunakan selector bebas, class, dan ID

5.2.1.3Menggunakan 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 {

.cetak_tebal {

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;

font-weight:bold }

#14pt {

(55)

} 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

<title>CSS untuk memanipulasi font</title>

<body>

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

</td> </tr> <tr>

</td> </tr> <tr>

(56)

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

Value Contoh Penggunaan

Background-color

Rangkaian 6 digit heksadesimal atau nama warna

Body {

Background-color : green; }

Background-Image

url dimana image disimpan Body {

Background-image : url(gambar1.jpg); }

Background-attachment

Fixed|scroll|inherit Body {

(57)

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

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

<tr>

Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl.

Japati<br>  </td>

</tr> <tr>

(58)

</td> </tr> </table> <br>

Acara yang diselenggarakan terasa meriah dengan dihadir kurang lebih 450 tamu undangan dan sekitar 100 wartawan dari media cetak dan elektronik

</td>

(59)

(60)

5.2.3 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

Contoh penggunaan property untuk memanipulasi list diperlihatkan pada contoh di bawah ini :

Contoh 5-6 Memanipulasi list

<title>CSS untuk memanipulasi list</title> <style type="text/css">

.bullet1 {

list-style-type:square }

list-style-image:url(mawar2.gif) }

</style> </head>

Nama Property

List-style-List-style-type : disc ; }

List-style-image

url dimana image disimpan atau none

Inside|outside Ul {

List-style-position : inside;

(61)

<body>

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>

(62)

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.

(63)

Contoh 5-7 Memanipulasi text

<title>CSS untuk memanipulasi text</title> <style type="text/css">

td {

Color Rangkaian 6 digit heksadesimal atau nama warna

P {

color :red; }

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

Text-align :justify;

Nilai integer dengan pilihan satuan : em|pt|px|%

P {

letter-spacing : 20px; }

Text-indent Nilai integer dengan pilihan satuan : em|pt|px|%

P {

(64)

<body>

<tr>

Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl.

Japati<br>  </td>

</tr><tr>

</td> </tr> </table> </body> </html>

Gambar 5-7 Memanipulasi text

5.2.5 Memanipulasi Tabel

(65)

Tabel berikut ini menampilkan property yang dapat digunakan untuk memanipulasi tabel.

Tabel 5-5 Property tabel

Contoh 5-8 Memanipulasi tabel

<title>CSS untuk memanipulasi text</title> <style type="text/css">

td {

<h3>Daftar Perusahaan Rekanan Politeknik Telkom</h3> <table width="100%" border="0">

Nama Property

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

Nilai integer dan satuan ukuran

Rangkaian 6 digit heksadesimal atau nama warna

.b1 {

border-bottom-color :red;

(66)

<tr>

<tr>

<td class="garis_putus" height="60">PT Bumida Bumi Putera</td>

</tr> <tr>

<td class="garis2" height="40">PT Telkom</td> </tr>

(67)

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

– perbedaan yang ditampilkan pada tabel perbandingan di bawah ini : Inline Style

Sheet

Embedded Style Sheet

Linked Style Sheet

Penulisan CSS Dalam elemen / tag pada file HTML

Menjadi bagian header dari file HTML

Terpisah dengan file HTML digunakan untuk menyimpan style-nya saja, tanpa merubah file HTML Penggunaan

property

Hanya satu property yang bisa digunakan

peng-update-an style daripada inline style sheet karena yang pengubahan style dilakukan pada bagian header

Paling mudah, karena

pengubahan style dilakukan pada satu file saja

(68)

Jurnal

(69)

(70)

(71)

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. _{Mengerti esensi penggunaan Objek dalam JavaScript.} 2. Mampu menciptakan objek sendiri.

3. _{Mampu membuat properti dan metoda untuk suatu objek.} 4. Mampu menggunakan objek-objek bawaan pada JavaScript. 5. Memahami Hirarki Objek Browser dan Objek HTML. 6. _{Mengenal Macam-macam Objek Browser pada JavaScript.} 7. Mengerti esensi penggunaan Frame dalam JavaScript. 8. _{Mengerti esensi penggunaan Form dalam JavaScript.}

(72)

8.1 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 (" ");

(73)

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

(74)

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

(75)

// Definisi objek Mahasiswa

function Mahasiswa(NIM, Nama, Umur) {

//deklarasi properti this.NIM = NIM; this.Nama = Nama; this.Umur = Umur;

//deklarasi metoda

this.Universitas = UniversitasObj; this.TampilkanInfo = TampilkanInfo; }

//Menulis properti-properti objek function Tulis (objek)

{

for (var j in objek)

document.writeln (objek[j]); document.writeln (" ");

}

//metoda universitas

function UniversitasObj(NamaUniv, AlamatUniv) {

this.NamaUniv = NamaUniv; this.AlamatUniv = AlamatUniv; }

(76)

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

(77)

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

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(){

(78)

status = ""; }

} //-->

</SCRIPT></HEAD>

<BODY>

<FORM NAME="frform">

Teks berikut akan ditampilkan pada <I>status bar</I> <BR>

<INPUT TYPE="text" NAME="txKata" SIZE=50 MAXLENGTH=100> <BR><BR>

<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 objek window pada halaman web yang menggunakan frame :

(79)

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

<h1>Daftar Isi</h1>

<a href="" onclick="return buka('topik1.html')"> Memasukan JavaScript ke dalam HTML</a><hr> <a href="" onclick="return buka('topik2.html')"> Variabel dan Literal</a><hr>

<a href="" onclick="return buka('topik3.html')"> Ekspresi dan Operator</a><hr>

<a href="" onclick="return buka('topik4.html')"> 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>

(80)

8.2.2 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"><br> Celcius: <input type="text" name="C" value="0" ><br> <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>

(81)

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