Pertemuan Ke-5 Dan Ke-6

LAPORAN pengenalan web PERTEMUAN KE 5 dan 6
Disusun Oleh : Nama Nim Jurusan : Mohamad Hanafi : 095410134 : 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 bermacammacam 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 mendefinisikan 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 B a n y a k h a l a m a n w e b d i i n t e r n e t y a n g m e n g g u n a k a n f r a m e . F r a m e memungkinkan satu halaman web atau lebih ditampilkan pada sebuah jendela browser. Halaman yang berbasis frame dibentuk dengan menggunakan 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 atribut border=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"> <frame src="frame_kanan.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"> <frame src="frame_kanan.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 * berarti menunjukkan 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 dibuat, dalam hal ini adalah sebesar 50%.
<frame src="frame_kanan.html">
Memanggil frame_kiri.html yang akan ditempatkan dikolom ketiga pada frame yang telah dibuat, dalam hal ini adalah sebesar 30%. Maka hasilnya akan berbentuk seperti berikut :
<html> <body> <a href="help.htm">halaman help</a><br> <a href="http://www.bestcamp.net">bestcamp akakom</a><br> <a href="mailto:info@akakom.ac.id">email akakom</a> </body> </html>
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 namashowframe, 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 :
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 dengan rows yang artinya baris maka pada tampilannya akan berbentuk baris. C. KESIMPULAN Browser. Halaman yang berbasis fra me dibentuk dengan menggunakan pasangan F r a m e 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. LISTING Terlampir 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

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan Ke-5 Dan Ke-6

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN pengenalan web PERTEMUAN KE 5 dan 6

PERTEMUAN KE-5 MEMBUAT FORM

</tr> </form> </body> </html>

</html> Hasilnya adalah sebagai berikut :

</td> </tr> </form> </body> </html> Hasilnya :

Adapun scripnya adalah sebagai berikut :

PERTEMUAN KE-6 MEMBUAT FRAME

Script ini disimpan dengan nama frame_kiri.html

Script ini disimpan dengan nama frame_tengah.html

Script ini disimpan

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

Anda mungkin juga menyukai