Laporan Praktikum Pemrograman Web Modul II

LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

MODUL II

Disusun oleh :

Paulus Diki Sugianto

Sistem Informasi A

2015091079

LABORATORIUM KOMPUTER

FAKULTES ILMU KOMPUTER

UNIVERSITAS KUNINGAN

2017

DASAR TEORI

FRAME

 Frame merupakan fasilitas dalam HTML yang berfungsi untuk mengatur tampilan pada halaman web, sehingga halaman web akan terbagi menjadi beberapa bagian (menjadi beberapa baris / rows atau kolom / cols). Dengan adanya fasilitas frame, pada satu halaman bisa ditampilkan beberapa script sekaligus.

<FRAMESET atribut>….</FRAMESET>. Untuk menampilkan dokumen file gunakan <FRAME src=”nama_file>, tag ini diletakan di antara <FRAMESET> Pada saat pembuatan FRAME, tidak boleh menuliskan struktur dasar dokumen HTML di dalamnya (seperti : tag HTML, tag HEAD, tag BODY).

FORM

Form biasanya digunakan untuk melakukan interaksi dengan pengunjung web, misalnya untuk mendapatkan komentar pengunjung, melakukan pendaftaran suatu keanggotaan tertentu, dan lain Sebagainya.

Bentuk umum :

<form method=”post|get” action=”alamat_url”> …..

</form>

Semua Input HTML, diletakan diantara <FORM>. Umumnya, dalam 1 dokumen memiliki 1 <FORM> dengan banyak komponen input HTML di dalamnya. Input HTML adalah komponen-komponen yang terdapat dalam HTML yang digunakan untuk memasukan input data.

Bentuk umum input HTML :

<input type=”type_komponen” name=”nama_komponen”>

 

Komponen Input Form

Text

Textbox

Radio

Select

Checkbox

File

Button/submit

PRETEST

Buatlah halaman web form input seperti tampilan sebagai berikut :

Jawaban coding web adalah :

 Hasilnya Output :

Analisis:

Pada output web di atas terdapat kata “INPUT DATA MAHASISWA”, merupakan tema dari web tersebut. Untuk membuat kata tersebut memerlukan berbagai tag-tag, diantaranya:

<center>…</center> fungsinya untuk membuat suatu objek berada di tengah.

<h1 - h…>…</h1 - h…> merupakan alternative dalam menentukan ukuran huruf.

<font atribut=”Value”>…</font> fungsinya untuk menentukan mengedit tulisan.

Atribut pada tag <font> diantaranya:

Atribut	Fungsi
Face	Untuk menentukan jenis huruf yang akan di gunakan
Color	Untuk menentukan warna huruf yang akan di gunakan
Size	Untuk menentukan ukuran huruf yang akan di gunakan

Kemudian terdapat kata “NIM dan Nama Mahasiswa” beserta text field, merupakan tempat untuk memasukan data pada tent field. Untuk membuatnya menggunakan fungsi bentuk, diantaranya:

<input type=”type_komponen” name=”nama_komponen”>

Yang terakhir terdapat kata “Jenis Kelamin” beserta radio, merupakan tempat untuk memilih salah satu pada atribut. Untuk membuatnya sama seperti dalam pembuatan NIM / NAMA, hanya saja dalam membuat Jenis Kelamin menggunakan komponen Radio.

 

Praktikum I

 

Hasilnya Output :

 
Analisis :

<p>  kita gunakan untuk mengatur sebuah paragraf pada halaman web.

<sup> dalam tag ini digunakan untuk merubah text, seperti pada html diatas ada 15.³⁰ ini menunjukan bahwa pada angka ke 30 telah diatur textnya dengan tag <sup>  yang artinya text akan menjorok ke arah pojok kanan atas.

 <br>  kita gunakan untuk memindahkan letak sebuah paragraf atau sebagai enter.

<sub>  tag ini kita gunakan untuk merubah text, coding html diatas menuliskan  20⁰ _Celcius  maka dengan menuliskan tag tersebut maka tampilan yang dihasilkan akan menampilkan 20⁰ _Celcius.

<pre> serupa dengan tag <br> namun pada penerapannya jauh lebih praktis jika menggunakan tag ini, karena dengan hanya menuliskan satu tag saja, seperti yang terlihat dalam coding html diatas.

Selanjutnya tag <strike> digunakan untuk memberikan garis pada sebuah text, seperti yang terlihat dalam tampilan output halaman web.

Pada penggunaan tag <ol> adalah sebuah tag untuk mengurutkan sebuah daftar atau list secara berurutan : <ol atribute=”value”>  didalam ol terdapat 2 atribut saja yaitu type dan start, didalam program tersebut menggunakan jenis atribut type yaitu dapat mengurutkan dengan mulai angka 1 dst..., penggunaan huruf kapital atau kecil. Sedangkan untuk atribut start digunakan untuk meneruskan dari angka yang telah ada, misal dari yang sudah ada adalah nomer 2 lalu pindah ke angka berikutnya yaitu 3.

<li> digunakan untuk menuliskan daftar list pada urutan tersebut.

<b>  kita gunakan untuk mempertebal tulisan atau dengan kata lain memberikan efek huruf tebal pada teks.

<ul> tag yang digunakan untuk mengurutkan sebuah daftar list juga namun terdapat perbedaan dengan tag  <ol>  karena tag <ul>  ini terdapat sebuah atribut yaitu type dengan urutan menggunakan sebuah simbol seperti disk, circle, dan square.

<i> digunakan untuk memiringkan posisi huruf.

<dl> digunakan untuk mendefinisikan sebuah daftar.

<dd> digunakan untuk mengurutkan isi daftar yang terdapat pada tag <dl>

 

 Praktikum II

 

<html>
<body>
<b><center>Input Data Mahasiswa</center></b>
<form name="form1" meethod="post" action="tampil_post.php">
<table width="456" border="0" align="center">
<tr>
<td>NIM</td>
<td><input type="text" name="nim" value="Masukan NIM"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value="Masukan Nama"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" name="jkl" id="jkl" value="L">
Laki-laki
<input name="jkp" type="radio" id="jkp" value="P">
Perempuan</td>
</tr>
<tr>
<td>Hobi</td>
<td><label>
<input type="checkbox" name="hb1" id="checbox">
Sepak Bola<br>
<input type="checkbox" name="hb2" id="checbox">
Berenang<br>
<input type="checkbox" name="hb3" id="checbox">
Membaca</label></td>
</tr>
<tr>
<td>Prodi</td>
<td><label>
<select name="prodi" id="select">
<option value="Teknik Informatika S1">TI S1</option>
<option value="Sistem Informasi S1">SI S1</option>
<option value="Manajement Informatika D3">MI D3</option>
<option value="Teknik Informatika D3">TI D3</option>
</select>
</label></td>
</tr>
<tr>
<td>File Foto</td>
<td><input type="file" name="file1"></td>
</tr>
<tr>
<td>Alamat</td>
<td><label>
<textarea name="almt" id="textarea" cols="45" rows="5"></textarea>
</label></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="OK" id="OK" value="OK">
<input type="reset" name="reset" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya Output :

  Analisis :

<b> digunakan untuk menebalkan huruf atau tulisan.

<center> digunakan untuk menentukan posisi berada pada tengah layar.

<form> digunakan untuk berinteraksi dengan user ketika membuka web, bentuk umum dari tag <form> adalah <form name=”nama_form” method=”post|get” action=”alamat_url”>

Selanjutnya menggunakan tag <table> yang digunakan untuk membuat sebuah tabel.

Selanjutnya kita menggunakan tag <tr> digunakan untuk membuat baris pada suatu tabel.

Pada tag <td> kita gunakan untuk membuat kolom pada suatu tabel.

Adapun untuk  <input type=”text” name=”nim/nama” value=”Masukan NIM/Nama”>  adalah bentuk umum  suatu inputan dari suatu form yang mana type nya menggunakan suatu teks, nama dari suatu formnya adalah nim dan valuenya masukan NIM/Nama, maka form yang akan ditampilkan adalah sebuah kotak yang mana nantinya bisa diisi oleh sebuah  teks.

Perintah <input type=”radio” name=”jk” value=”L/P”/> Laki-laki/Perempuan, karena jenis type nya menggunakan pilihan type radio maka tampilan yang dihasilkan adalah tampilan pemilihan dengan memilih hanya satu pilihan saja.

<label> digunakan untuk memberikan sebuah label kotak pada hasil yang akan ditampilkan.

Dalam perintah <input type=”checkbox” name=”hb1” id=”checkbox”> Sepak Bola. Jenis type checkbox ini digunakan untuk memilih beberapa pilihan artinya dapat memilih satu atau lebih.  Adapun bentuk yang ditampilkan dari checkbox ini ialah berupa daftar dengan bersimbolkan kotak untuk bisa mencentang pilihan tersebut.

<select name=”prodi” id=”select”> digunakan untuk memberikan pada satu pilihan saja dengan tampilan menu list.

<input type=”file”name=”file1”> digunakan untuk menyisipkan atau mengupload sebuah gambar/foto.

<textarea name=”id=”textarea” cols=” rows=”> digunakan untuk menampilkan textarea

<td colspan=”” align=””>  tag ini digunakan untuk menggabungkan beberapa kolom dari beberapa baris yang ada.

Pada perintah <input type=”submit” name=”” id=”” value=””>  kita gunakan untuk memberikan fugsi pada form berupa tombol yang mana berfungsi sebagai penyimpanan data pada suatu form.

     Serta perintah <input type=”reset” name=”” id=”” value=””> digunakan untuk memberikan fungsi yang akan menghapus/dalam keadan semula.

Praktikum III 

 

 

Hasilnya Output :

 

 

 

Analisis :

 

Pada kali ini kita membuat halaman html yang  menampilkan form login, yang mana dalam pemuatan html ini terdapat beberapa tag yang kita gunakan, diantaranya :

<form name=””>  digunakan untuk penamaan dalam suatu form yaitu dengan nama login.

Selanjutnya kita gunakan <table width=”” border=”” align=””>  untuk mengatur sebuah

Pada tag <tr>  kita gunakan untuk membuat berapa banyak baris yang diinginkan pada suatu tabel tersebut.

Dan untuk tag <td colspan=”” bgcolor=”” align=”” > td colspan kitangunakan untuk menggabungkan beberapa kolom menjadi satu baris, untuk atribut bgcolor kita gunakan untuk memberikan warna pada satu baris tabel. Atribut align digunakan untuk mengatur posisi pada sebuah tabel.

<b> digunakan untuk menebalkan huruf atau teks.

Selanjutnya pada bagian username kita gunakan coding tag <input type=”text name=”textfield” id=”textfield” size=”” maxlength=”” title=””> yang berfungsi untuk menampilkan bentuk teks dari suatu form.

Tentunya untuk LogIn selain diharuskan untuk menuliskan username kita juga harus menginputkan password, dan tag yang digunakan ialah <input type=”password” name=”” id=”” size=”” maxlength=”” title=””> tag password sendiri digunakan ketika penggunaan password / kata sandi saja, dengan itu maka password ketika kita menginputkan tulisan yang ada didalam sebuah teks area akan tersembunyi

Untuk tag <input type=”button” name=”login” value=”login”> ini kita gunakan untuk sebuah tombol. 

TUGAS

Pertanyaan!

    A.   Jelaskan fungsi tag-tag pada praktikum 5!

    B.    Buatlah  desain web frame dengan skema sebagai berikut:

Header
Menu	Utama	Menu
Footer

Jawaban

   A.   <p>…</p> berfungsi untuk membuat paragraph.

^… berfungsi untuk membuat tulisan mengecil dan naik ke atas.

_… berfungsi untuk membuat tulisan mengecil dan turun ke bawah.

<br>…</br> berfungsi untuk memberi baris baru/pindah baris

&nbsp berfungsi untuk memberi baris baru/pindah baris sebanyak 2 kali

<pre>…</pre> berfungsi untuk membuat teks dengan ukuran huruf yang sama

<strike>…</strike> berfungsi untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>

<ol>…</ol> berfungsi untuk mendefinisikan daftar dalam format penomoran

<li>…</li> berfungsi untuk menampilkan informasi dalam bentuk item daftar 

<b>…</b> berfungsi untuk membuat teks menjadi tebal

<ul>…</ul> berfungsi untuk mendefinisikan daftar dalam format bullet

<dl>…</dl>  berfungsi untuk mendefinisikan sebuah daftar definisi

<dt>…</dt> berfungsi untuk mendefinisikan istilah (item) dalam daftar definisi

<i>…</i> berfungsi untuk membuat teks menjadi miring

<dd>…</dd> berfungsi untuk  mendefinisikan deskripsi dari item dalam daftar definisi.


B.    Buatlah  desain web frame dengan skema sebagai berikut:
 

<frameset rows=40%,50%,10%>

<frame src="header.html"></frame>

<frameset cols=20%,40%,20%>

<frame src="menu.html"></frame>

<frame src="utama.html"></frame>

<frame src="menu.html"></frame>

</frameset>

<frame src="footer.html"></frame>

</frameset>

            header.html

<html>

<body>

<center>Header</center>

</body>

</html>

menu.html

<html>

<body>

<center>Menu</center>

</body>

</html>

utama.html

<html>

<body bgcolor="blue">

<center>Utama</center>

</body>

</html>

footer.html

<html>

<body>

<center>Footer</center>

</body>

          </html>

 

Hasilnya Output :

 

 

 

Analisis :

      
 

Pada bagian coding pertama terdapat  file frame.html <frameset rows=”40%,50%,10%”>  ini digunakan untuk mengatur berapa banyak baris yang akan dibuat.

Selanjutnya  <frame src=”header.html”>  coding ini digunakan untuk menunjukan bahwa pada bagian baris frame pertama yang terisi adalah memanggil file dari header.html.

Pada bagian <frameset cols=”20%,40%,20%”> kita gunakan ketika pembuatan sebuah kolom pada suatu frame.

Pada perintah <frame src="menu.html"></frame>, <frame src="utama.html"></frame>, <frame src="menu.html"></frame>, <frame src=”footer.html”>

Keempat tag tersebut kita gunakan untuk memanggil dari setiap file yang akan dimasukan ke dalam sebuah frame, sepertihalnya perintah tag diatas  dan diakhiri dengan tagv </frameset>

POST TEST

<html>
<body>
<b>Property Readonly</b><br>
NIM<input type="text" name="NIM" readonly value="2015091079"><br>
<b>Readonly dan Tittle di TextArea</b><br>
Komentar:<textarea cols="50" rows="10" readonly value="Komentar">Komentar di Text Area Tidak Bisa Dihapus</textarea><br>
Cheked<br>
Jenis Kelamin<input type="radio" value="Laki-Laki">L <input type="radio" value="Perempuan">P
<br>Maximal Character
<br>NIM<input type="text" name="textfield" id="textfield" size="20" maxlength="10" title="Masukan NIM">
</body>
</html>

  

Hasilnya Ouputnya :

 

 

Analisis :

Pada fungsi tag <form id=”” name=”” method=”” action=””>  untuk memberikan sebuah inputan nama pada form,  form id ibaratkan sebuah kunci primary key dari sebuah form, untuk name sendiri adalah untuk mengatur nama apa yang akan digunakan pada sebuah nama form tersebut, method merupakan pemanggilan post atau bisa juga dengan get, sedangkan untuk fungsi action adalah untuk memanggil menuju ke halaman berikutnya.

Disini kita menggunakan tag <strong> yang kita gunakan untuk menebalkan sebuah huruf/teks sama halnya dengan tag <b>.

Pada program diatas ada menginputkan sebuah NIM, dan untuk coding htmlnya kita gunakan <input type=”text” name=”” id=”” readonly value=””>

Pada baris bagian komentar juga terdapat tag <textarea cols=”” rows=”” readonly title=””>  yang mana ini sama halnya dengan memasukan perintah NIM, dan texarea ini dapat diatur ukuran besar panjang lebarnya dengan atribut cols dan rows, sedangkan untuk  fungsi raedonly title juga ini adalah sebuah perintah dimana hanya dapat membaca suatu text dengan kita menginputkan dan tidak dapat diubah begitupun dihapus.

Dan pada bagian jenis kelamin kita gunakan coding html <input type=”radio” name=”jk” value=”L/P”>

Terakhir kita gunakan tag <input type=”text” maxlength=”” size=””> untuk memasukan NIM, dan mengatur batasan pada masukan text tersebut dengan menggunakan atribut maxlength