pertemuan ke-5 dan ke-6.docx

7/30/2019 Pertemuan ke-5 dan ke-6.docx

http://slidepdf.com/reader/full/pertemuan-ke-5-dan-ke-6docx 1/18

LAPORAN pengenalan web

PERTEMUAN KE 5 dan 6

Disusun Oleh :

Nama : Mohamad Hanafi

Nim : 095410134

Jurusan : TEKNIK INFORMATIKA

LABOROTARIUM TERPADU

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM

YOGYAKARTA

2011



PERTEMUAN KE-5

MEMBUAT FORM

A. DASAR TEORI

Dalam pembuatan formulir dibentuk dengan menggunakan pasangan tag <form> dan

</form>. Dua atribut yang umum digunakan pada tag <form> berupa action dan method,

tapi kata lain juga agar tampilan pada form tersebut terlihat rapi maka harus menyangkut

baut pada tag tabel.

B. PEMBAHASAN

Kita langsung saja ke praktek dalam lab tidak usah basa-basi :

<html>

<body>

<form action="">

<table border="3">

<tr><td> username: </td><td> <input type="text" name="user"></td>

<tr><td> password: </td><td> <input type="password" name="password"></td>

</table>

</form>

</font>

</body>

</html>

Dari Script diatas kita dapat menjelaskan perbedaan antara penggunaan input text dan input

password . kalau input text yaitu <input type="text" name="user"> ini digunakan untuk

memasukkan data(tipe data String maupun integer) dan letaknya berada didalam pasangan

tag <form> dan </form> sedangkan input password ini digunakan untuk membuat teks yang

berupa dalam bentuk apapun dalam hal ini user apabila akan memasukkan data maka data

yang diketikkan tidak akan ketahuan oleh user lain dalam arti lain sebagai untuk

security(keamanan) diketikkan diganti dengan tanda *. jadi ketika kita jalankan dihalaman

browser maka nila yang kita masukkan langsung tertampil untuk syntagnya seperti ini <input

type="text" name="user" size="20" maxlength="6" value="userku"> dan hasilnya seperti

diatas.

Dan untuk lebih jelasnya dapat kita lihat dari hasil output dibawah ini.



<html>

<body>

<fieldset>

<legend>

Agama

</legend>

<form action=""><input type="radio" name="agama" value="islam" checked="ceckhed">Islam<br>

<input type="radio" name="agama" value="Katolik">Katolik<br>

<input type="radio" name="agama" value="Kristen">Kristen<br>

<input type="radio" name="agama" value="Hindu">Hindu<br>

<input type="radio" name="agama" value="budha">budha<br>

</form></fieldset>

</body>

</html>

Deklarasi diatas itu merupakan pemasukkan data dengan menggunakan tombol radio

dimana didalam tombol radio itu user atau pengguna hanya dapat memilih satu pilihan saja

dan sedangkan pasa script <input type="radio" name="agama" value="islam"

checked="checked">islam<br> itu berfungsi untuk defaultnya yaitu ketika kita menjalankan

browser itu dia langsung pilihannya islam untuk lebih jelasnya dapat dilihat hasil output

dibawah ini.



<html>

<head><title>Membuat Form</title>

</head>

<body>

Isikan data Pribadi anda<br>

<form action="data.htm" method="post">

<table>

<tr>

<td>Nama : </td><td><input type="text" name="nama" size="30"></td>

</tr>

<tr>

<td>Alamat : </td>

<td>

<textarea cols="30" rows="5" name="alamat">

</textarea>

</td>

</tr><tr>

<td>Hobi :</td>

<td>

<input type="checkbox" name="hobi" value="makan">makan<br>

<input type="checkbox" name="hobi" value="tidur">tidur<br>

<input type="checkbox" name="hobi" value="baca">baca<br><input type="checkbox" name="hobi" value="nonton">nonton<br>

</td>

</tr>

<tr>

<td>Foto :</td>

<td><input type="file" name="foto"></td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="Simpan">

<input type="reset" value="Batal"></td>



</tr>

</form>

</body>

</html>

Dari hasil output diatas kita dapat menjelaskan bahwa program diatas memakai bermacam-

macam pemasukkan data diantaranya adalah input text yaitu <input type="text"

name="nama" size="30"> dengan mempunyai ukuran formnya sebesar 30 , textarea yang

digunakan untuk memasukkan teks yang sangat panjang untuk scriptnya seperti ini <textarea

cols="30" rows="5" name="alamat"></textarea> dengan lebar 30 dan panjang textarea 5,

checkbox yang digunakan untuk membuat kotak cek dimana bentuk masukkan yang

memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut untuk scriptnya

<input type="checkbox" name="hobi" value="makan"> makan<br>, tombol submit dan

reset yaitu tombol yang menyebabkan URL yang disebutkan pada action pada tag <form>

akan dimuat ( pada contoh diatas URL yang dipanggil atau di muat yaitu data.html) untuk

scriptnya seperti dibawah ini :

<input type="submit" value="simpan"><input type="reset" value="batal">

Untuk lebih jelasnya seperti pada tampilan berikut ini :

Ini isi dari data.htm yang apabila dalam button dklik maka akan lari ke form data.htm.

<html>

<head>

<title>Dari input di form</title>

</head>

<body>

Anda Telah Belajar membuat formulir.<br/>

Terima Kasih</body>



</html>

Hasilnya adalah sebagai berikut :

LATIHAN

<html>

<head>

<title>membuat form </title>

</head>

<body>

isikan data pribadi anda

<form action="prak5d.html" method="post">

<table border="1">

<tr><td> nama : </td>

<td> <input type="text" name="nama" size="30"</td>

</tr>

<tr>

<td> alamat : </td>

<td>

<textarea cols="30" rows="5" name="alamat"></textarea>

</td>

</tr>

<tr>

<td>hobi : </td>

<td>

<input type="checkbox" name="hobi" value="makan"> makan<br></input>

<input type="checkbox" name="hobi" value="tidur"> tidur<br></input>

<input type="checkbox" name="hobi" value="baca"> baca<br></input>

<input type="checkbox" name="hobi" value="nonton"> nonton</input>

</td>

</tr>

<tr>

<td> umur : </td>

<td><select name="umur">

<option value="0-10">0-10 tahun</option><option value="11-20">11-20 tahun</option>

<option value="21-30">21-30 tahun</option>



<option value="31-40">31-40 tahun</option>

<option value=">40"> > 40 tahun</option>

</select>

</td>

</tr>

<tr>

<td> foto : </td>

<td><input type="file" name="foto"></td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="simpan">

<input type="reset" value="batal">

</td>

</tr>

</table>

</form>

</body>

Hasiloutput :

C. KESIMPULAN

Pada modul ini kita dapat mengenal bahwa setiap jenis masukan dalam formulir mempunyai

tag-tag sendiri dengan masing-masing atribut nya.sehingga dalam bentuk pembuatan form

kita dapat menggunkan atribut seperti tag <input>,type text,tombol submit dan reset,tag

<textarea>..</textarea>,tipe password,tipe checkbox,tombol radio,dan tag



</select>..</select> semua atribut tersebut debgan value berupa string yang men-

definisikan nama elemen.dalam pemrograman sering disebut sebagai nama variable,dan

nama variabel itu sendiri mencerminkan fungsi dari variabel tersebut.

D. LISTING

Terlampir

E. TUGAS

<html>

<head>

<title>Membuat Form</title>

</head>

<body>

<form action="data.html" method="post">

<table border="10">

<tr>

<td colspan="2" align="center" bgcolor="white">Form Input Data Penduduk</td></tr>

<tr>

<td bgcolor="red">No KTP : </td>

<td bgcolor="red"><input type="text" name="nama" size="30"></td></tr>

<tr>

<td bgcolor="pink">Nama : </td>

<td bgcolor="pink"><input type="text" name="nama" size="30"></td>

</tr><tr>

<td>Alamat : </td>

<td>

<textarea name="alamat" rows="4" cols="40" ></textarea>

</td>

</tr>

<tr>

<td bgcolor="blue">Jenis kelamin : </td>

<td bgcolor="blue">

<input type="radio" name="agama" value="laki-laki">laki-laki<br>

<input type="radio" name="agama" value="laki-laki">perempuan<br></td>

</tr>

<tr>

<td bgcolor="silver">Agama : </td>

<td bgcolor="silver"><select name="agama"><option value="Islam">Islam</option><option value="Islam">Kristen</option>

<option value="Islam">Hindu</option>

<option value="Islam">Budha</option>

</select>

</td></tr>

<tr>

<td bgcolor="aqua">Pekerjaan :</td>

<td bgcolor="aqua">

<input type="checkbox" name="hobi" value="Wiraswasta">wiraswata<br>

<input type="checkbox" name="hobi" value="Pendidik">Pendidik<br>

<input type="checkbox" name="hobi" value="buruh">Buruh<br><input type="checkbox" name="hobi" value="pengusaha">Pengusaha<br>



<input type="checkbox" name="hobi" value="dagang">Dagang<br>

<input type="checkbox" name="hobi" value="lainnya">lainnya<br>

</td>

</tr><tr>

<td>Foto :</td>

<td><input type="file" name="foto"></td></tr>

<tr>

<td colspan="2"><input type="submit" value="Simpan">

<input type="reset" value="Batal">

</td>

</tr>

</form>

</body>

</html>

Hasilnya :

Apabila dalam web tersebut ditekan button simpan maka akan muncul gambar seperti

berikut :



Adapun scripnya adalah sebagai berikut :

<html>

<head>

<title>Dari Input Di form </title>

</head><body>

<form action="tugas5.html" method="post">

<pre>

proses input data telah selesai

terimakasih karena anda

telah mngisikan data dengan benar.....!!!!

</pre>

<center><img src ="inter.JPG" align="center"/></center>

<input type="submit" value="simpan">

</body>

</html>



PERTEMUAN KE-6

MEMBUAT FRAME

A. DASAR TEORI

Sebelum lebih jauh saya jelaskan mengenai laporan pertemuan ke-6 ini, terlebih dahulu saya jelaskan bahwa Ba ny ak ha l am a n w e b d i i nt e r ne t y a n g m e n g g una k an f r ame .

F r a me memungkinkan satu halaman web atau lebih ditampilkan pada sebuah jendela

browser. Halaman yang berbasis frame di bentuk d engan me nggunakan pasangan tag

<frameset> dan </frameset>. Di dalam tag <frameset>, atribut cols digunakan untuk

menentukan lebar masing-masing frame.

B. PEMBAHASAN

Menggunakan Border

Atribut BORDER pada tag <frameset> berguna untuk mengatur ketebalan garis pemisah antar

frame. Jika anda tidak menghendaki adanya pemisah antar frame, tambahkan atributborder=”0”, atau jika menginginkan border yang lebih tebal, tambahkan nilainnya.

Contoh :

Menghilangkan Scrolling

Jika anda tidak menghendaki batang penggulung tersebut, anda bisa menambahkan :

SCROLLING=”NO” pada tag <FRAME> yang menentukan frame kiri.

Jika browser dikecilkan dan scrolling tidak dimatikan maka akan muncul seperti berikut :

Contoh :



tetapi jika menghendaki scrolling dimatikan, maka tambahkan atribut scrolling=”no” pada tag

frame

Script :

<html>

<frameset cols="25%,*">

<frame src="frame_kiri.html" scrolling="no" >

<frame src="frame_kanan.html">

</frameset>

</html>

Hasilnya :

Gabungan frame horisontal dan vertikal

Frame horisontal dan vertikal dapat digabung. Untuk membetukannya diperlukan <frameset>

berkalang

Berdasarkan bentuk tersebut kita dapat melihat bahwa diperlukan frame Horisontal dan

vertikal, sehingga kita gunakan frameset belakang. Seperti pada contoh dibawah ini :



<html>

<frameset rows="30%,70%">

<frame src="frame_kiri.html">

<frameset cols="15%,85%"><frame src="frame_tengah.html">


</frameset></frameset>

</html>

Hasilnya :

pembahasan dalam praktikum :

Didalam pasangan tag <frameset>..</frameset> disebutkan berkas-berkas HTML yang

menyusun frame. Hal ini dikerjakan dengan menggunakan tag <frame>. Didalam tag ini, nama

berkas HTML disebutkan melaui atribut SRC.

Langsung saja contoh pada praktikumnya :

<html>

<head>

<title>Frame kiri</title></head>

<body bgcolor="purple"><h1>frame kiri</h1>

</body>

</html>

Script ini disimpan dengan nama frame_kiri.html

<html>

<head>

<title>Frame kiri</title>

</head>

<body bgcolor="red"><h1>frame tengah</h1>



</body>

</html>

Script ini disimpan dengan nama frame_tengah.html

<html>

<head><title>Frame kiri</title>

</head>

<body bgcolor="blue">

<h1>frame kanan</h1></body>

</html>

Script ini disimpan dengan nama frame_kanan.html

Setelah kita membuat 3 buah file html, jika kita ingin membangun frame, tinggal memanggil file

tersebut, script lengkapnya seperti berikut :

<html>

<frameset cols="20%,50%,30%">

<frame src="frame_kiri.html"><frame src="frame_tengah.html">


</frameset></html>

<frameset cols="20%,50%,30%">

Merupakan baris untuk membuat sebuah frame dimana lebar kolom frame yang pertama

adalah 25% dan yang kedua adalah 50% dan yang terakhir adalah 30%. Kita juga bisa langsung

menuliskan dengan tanda * seperti dibawah :

<frameset cols="20%,50%,*">

Selain menggunakan satuan pixel kita juga bisa menggunakan dengan tanda * berartimenunjukkan lebara kolom yang ketiga sebesar sisa dari lebar frame yang telah didefinisikan,

untuk lebar 100%, setelah dipakai 20% dan 50% sehingga sisannya 30%.

<frame src="frame_kiri.html">

Memanggil frame_kiri.html yang akan ditempatkan dikolom pertama pada frame yang telah

dibuat, dalam hal ini adalah sebesar 20%.

<frame src="frame_tengah.html">

Memanggil frame_kiri.html yang akan ditempatkan dikolom kedua pada frame yang telah



Memanggil frame_kiri.html yang akan ditempatkan dikolom ketiga pada frame yang telah


Maka hasilnya akan berbentuk seperti berikut :



Script ini

disimpan

dengan nama link_frame.html

Pada file link_frame.html atribut ini digunakan untuk menentukan frame yang akan ditempati

oleh halaman web yang dipanggil.

Script ini diberi nama frame.html untuk menggabungkan dari kedua berkas

<html>

<frameset cols="200,*">

<frame src="link_frame.html">

<frame src="frame_kanan.html" name"showframe"></frameset>

</html>

</html>Name=”showframe” kode tersebut digunakan untuk menyatakan bahwa frame kedua diberi

nama”showframe”, Nama inilah yang menjadi target pada atribut target pada file diatas. Artinya pada

script frame_kanan.html, kodenya :

<frame src="frame_kanan.html" name"showframe">

Artinya meminta browser menampilkan frame_kanan.html ke frame yang bagian kanan (yang diberi

nama showframe) sehingga pada frame.html dijalankan pada web browser hasilnya adalah sebagai

berikut :

<html>

<body>

<a href="help.htm">halaman help</a><br>

<a href="http://www.bestcamp.net">bestcamp akakom</a><br>

<a href="mailto:[email protected]">email akakom</a></body>

</html>



LATIHAN :

Pada latihan berikut ini bisa juga dinamakan dengan Frame Horisontal

HTML juga memungkinkan pembuatan frame horisontal. Caranya cukup mengubah atribut COLS

pada <frameset> menjadi ROWS.

<html>

<frameset rows="200,*">

<frame src="link_frame.html">

<frame src="frame_kanan.html" name"showframe"></frameset>

</html>

Hasilnya :



Hasilnya sama dengan script yang ada pada praktek keempat cuma disini cols diganti denganrows yang artinya baris maka pada tampilannya akan berbentuk baris.

C. KESIMPULAN

Browser. Halaman yang berbasis frame dibentuk dengan menggunakan pasangan Frame

memungkinkan satu halaman web atau lebih ditampilkan pada sebuah jendela tag <frameset> dan

</frameset>. Kita dapat menggabungkan beberapa frame menjadi satu pada suatu halaman web, kita

juga dapat mengatur letak serta susunan dan besar frame yang akan kita gabungkan. Dengan

menggunakan tag frame maka halaman web yang kita buat dapat terlihat lebih baik.

D. LISTINGTerlampir

E. TUGAS

<html><head>

<title>

Meriwijaya Tugas Web

</title>

</head>

<frameset rows="30%,60%,20%" noresize>

<frame name="header" src="head.html">

<frameset cols="20%,*" noresize>

<frame name="links" src="link.html" >



<frame name="isi"<img src="gambar/metal.jpg" >

</frameset>

<frameset>

</frameset>

</html>

Hasilnya :

pertemuan ke-5 dan ke-6.docx

Documents