Ahmad Fiveth Pratikum LP 6

02
LAPORAN PRAKTIKUM
Pratikum Pemrogaman Web Client 3
Pertemuan Ke- 6
Disusun Oleh :
NAMA : Ahmad Fiveth Nazidul Faroh
NIM : 183310002
JURUSAN : Teknik Komputer
JENJANG : D3
STMIK AKAKOM
YOGYAKARTA
2019
FROM
A. CAPAIAN PEMBELAJARAN
1. Menuliskan script HTML untuk element-element Form
B. KEBUTUHAN ALAT/BAHAN/SOFTWARE
1. Editor notepad / notepad++ / Visual Studio Code
2. Browser
3. local server
C. DASAR TEORI
Pada modul 5 telah dijelaskan bahwa form digunakan untuk menerima inputan dari
pengguna. Tipe input form yang digunakan di modul 5 adalah tipe “text”. Namun data
yang diinputkan jenisnya bermacam – macam sehingga dibutuhkan berbagai macam tipe
penerima inputan. Tujuan dari adanya berbagai tipe input adalah untuk mempercepat
pekerjaan dan meminimalkan kesalahan. Contoh jika pengunjung website diminta
memasukkan jenis kelamin maka akan lebih cepat dan tepat jika menggunakan pilihan
berupa tipe radio. Lebih cepat karena pengunjung tinggal klik tombol radio, tidak perlu
mengetik. Lebih tepat karena dengan klik tombol menghindari kesalahan pengetikan.
Berikut ini beberapa jenis tipe inputan form:
a. Select
Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list
pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa”
user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada
saat form dibuat.
2
Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari
tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:
<select >
<option>Pilihan 1</option>
</select >
b. Radio
Tag input type radio berfungsi untuk membuat tombol radio atau tombol pilihan
yang diisi dengan cara memilih dari salah satu tombol radio yang ada. Radio biasa
digunakan untuk pilihan yang membatasi user untuk memilih satu dari pilihan yang
ada.
Dalam penggunaan radio HTML, kita hanya memerlukan tag input dengan sebuah
atribut type radio. Berikut format dasar radio dalam HTML:
<input type="radio"/>Pilihsn 1 radio
c. Checkbox
Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang
diisi dengan cara menceklist kotak tersebut. checkbox biasa digunakan untuk pilihan
yang dapat dipilih dengan lebih dari 1 pilihan. Dalam penggunaan checkbox HTML,
kita hanya memerlukan tag input dengan sebuah atribut type=”checkbox”. Berikut
format sederhana checkbox dalam HTML:
<input type="checkbox"/>Penjelasan checkbox
d. Textarea
Objek form textarea digunakan untuk membuat text inputan yang bisa menampung
lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun
memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan
untuk inputan yang panjang, seperti komentar, keterangan, atau catatan. format
sederhana textarea dalam HTML:
<textarea> komentar </textarea>
Praktik 1&2
.container{
width: 50%;
margin: 0 auto;
}
span{
display: block;
margin-bottom: 20px;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: o;
font-size: 14px;
}
b{
color: green;
}
div.main{
width: 306px;
padding: 10px 50px 30px;
border: 2px solid gray;
float: left;
margin-top: 15 px;
}
input[type=text]{
width: 96%;
height: 25px;
border: 1px solid;
}
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="main">
<form method="get" action="proses.php" id="form">
<h2>DATA IDENTITAS</h2>
<hr/>
<label>Nama :</label>
<input type="text" name="fnama" id="fnama" />
<label>Alamat :</label>
<input type="text" name="lalamat" id="lalamat" />
<p>
<label>Jenis Kelamin:</label>
<input type="radio" name="jkel" value="Laki-Laki"/> Laki-Laki
<input type="radio" name="jkel" value="Perempuan"/> Perempuan
</p>
<p>
<label> Progrem Studi</label>
<select name="prodi">
<option value="SI">SI</option>
<option value="TI">TI</option>
<option value="TK">TK</option>
<option value="KA">KA</option>
<option value="MI">MI</option>
</select>
</p>
<p>
<label> Hobi</label>
<input type="checkbox"
nama="cekhobi[]"
value= "Menyanyi" />
<label for="chkSing"> Menyanyi</label>
<input type="checkbox"
nama="cekhobi[]"
value= "olah raga" />
<label for="cekhobi">Olah Raga</label>
</p>
<input type="submit" name="submit" id="submit" valu
e="Save">
</form>
</div>
</body>
</html>
<?php
if(isset($_POST['fnama']))
{
$fnama=$_POST['fnama'];
$lalamat=$_POST['lalamat'];
$jkel=$_POST['jkel'];
$prodi=$_POST['prodi'];
echo "<span class='success'>Dengan <b>METODE POST</b></span><br/>";

echo "Nama : ".$fnama."<br/>";
echo "Alamat : ".$lalamat."<br/>";
echo "Jenis Kelamin : ".$jkel."<br/>";
echo "Tanggal Lahir : ".$prodi. "<br/>";
echo "hobi:<br/>";
if (!empty($_POST['cekhobi'])) {
Tugas
foreach($_POST['cekhobi']as $selected){
echo $selected."</br>";
}
}
}
LATIHAN 1
<?php
if(isset($_POST['fnama']))
{
$fnama=$_POST['fnama'];
$lalamat=$_POST['lalamat'];
echo "<span class='success'>Dengan <b>METODE POST</b></span><br/>";

echo "Progrem studi : ".$prodi. "<br/>";
echo "Hobi: ";

if (!empty($_POST['cekhobi'])) {
foreach($_POST['cekhobi'] as $selected){
}
}
}
if(isset($_GET['fnama'])){
$fnama=$_GET['fnama'];
$lalamat=$_GET['lalamat'];
$jkel=$_GET['jkel'];
$prodi=$_GET['prodi'];
echo "<span class='success'>Dengan <b>METODE GET</b></span><br/>";

echo "Progrem studi : ".$prodi. "<br/>";
echo "Hobi: ";

if (!empty($_GET['cekhobi'])) {
foreach($_GET['cekhobi'] as $selected){
}
}
}
?>
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<div class="main">
<form method="get" action="proses.php" id="form">
<hr/>
<input type="text" name="fnama" id="fnama" />
<input type="text" name="lalamat" id="lalamat" />
<p>
<label>Jenis Kelamin:</label>
<input type="radio" name="jkel" value="Laki-Laki"/> Laki-Laki
<input type="radio" name="jkel" value="Perempuan"/> Perempuan
</p>
<p>
<label> Progrem Studi</label>
</select>
</p>
<p>
<label> Hobi</label>
<label>Hobi</label>
<input type = "checkbox"
name = "cekhobi[]"
value = "Menyanyi"/>
<label for = "chkSing">Menyanyi</label>
<input type = "checkbox"
name = "cekhobi[]"
value = "olah raga"/>
<label for = "cekhobi">Olah Raga</label>
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save">
</form>
</div>
</div>
</body>
</html>
.container{
width: 50%;
margin: 0 auto;
}
span{
display: block;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: o;
font-size: 14px;
}
b{
color: green;
}
div.main{
width: 306px;
float: left;
margin-top: 15 px;
}
input[type=text]{
width: 96%;
height: 25px;
border: 1px solid;
}
Tugas 1
<?php if(isset($_POST['fnama']))
{
$fnama = $_POST['fnama'];
$lalamat = $_POST['lalamat'];
echo "<span class='success'> Dengan <b>METODE POST</b></span>
</br/>"; echo "Nama : ".$fnama."<br/>"; echo "Alamat : ".$
lalamat."<br/>"; echo "Jenis Kelamin : ".$jkel."<br/>"; ec
ho "Program Studi : ".$prodi."<br/>";
echo "hobi : "; if(!empty($_POST['cekhobi'])){ foreach($_POST
['cekhobi'] as $selected){ echo $selected."</br>";
} } echo "Komentar : "; if(!empty($_POST['komentar1'])
){ echo " ".nl2br($_POST['komentar1']);
} else echo "Anda belum mengisi deskripsi diri anda.";
}
?>
.container{
width: 50%;
margin: 0 auto;
}
span{
display: block;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: o;
font-size: 14px;
}
b{
color: green;
}
div.main{
width: 306px;
float: left;
margin-top: 15 px;
}
input[type=text]{
width: 96%;
height: 25px;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<form method="post" action="proses.php" id="form">
<hr/>
<input type="text" name="fnama" id="fnama"/>
<input type="text" name="lalamat" id="lalamat"/>
<p>
<label> Jenis Kelamin : </label>
<input type="radio" name="jkel" value="Laki-laki"/>Laki-
laki <input type="radio" name="jkel" value="Perempuan"/>Perempuan
</p>
<p>
<label> PROGRAM STUDI </label>
</select>
</p>
<p>
<label>Hobi</label> <input type = "checkbox" name = "cek
hobi[]" value = "Menyanyi"/>
<label for = "chkSing">Menyanyi</label>
<input type = "checkbox" name = "cekhobi[]" value = "ola
h raga"/>
<label for = "cekhobi">Olah Raga</label>
</p>
<textarea name="komentar1" placeholder="Silahkan isi deskripsi diri anda"></text

area><br />
<input type="submit" name="submit" id="submit" value="submit"/>

</form>
</div>
</div>
</body>
</html>
Tugas 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Konfigurasi</title>
<style> * { box-sizing: border-
box; margin: 0px; padding: 0px;
border: 1px solid grey;
}
.container{ width:600px; border: thin solid
grey; margin: 0 auto;
} .row { padding: 2px 10px; margin-
bottom:2px;
}
.row:after{ content: ""; clear: both;
display: table;
} h2 { text-
align: center; padding: 5px;
} label{ width:20%; float:left;
display: block;
} .konten{ display: block; float:lef
t; width:80%;
} input[type=text], select{ height: 25px;
border: 1px solid;
}
#aktif:after{ content: "Aktif"; padding-
left: 20px;
}
</style>
</head>
<body>
<form action="GET">
<h2>Pengaturan Jaringan</h2><hr>
<div class="row">
<label for="nama-pc">PC Name</label>
<div class="konten">
<input type="text" name="nama-
pc" id="namapc" size="68" placeholder="Nama Personal Computer">
</div>
</div>
<div class="row">
<label for="so">Sistem Operasi</label>
<div class="konten" >
<input type="text" name="so" id="so" size="68" placehold
er="S istem Operasi">
</div>
</div>
<div class="row">
D. Reverensi
https://www.w3schools.com/

Ahmad Fiveth Pratikum LP 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

Ahmad Fiveth Pratikum LP 6

Diunggah oleh

Hak Cipta:

Format Tersedia

02

echo "<span class='success'>Dengan <b>METODE POST</b></span><br/>";

echo "<span class='success'>Dengan <b>METODE POST</b></span><br/>";

echo "Hobi: ";

echo "<span class='success'>Dengan <b>METODE GET</b></span><br/>";

echo "Hobi: ";

<textarea name="komentar1" placeholder="Silahkan isi deskripsi diri anda"></text

<input type="submit" name="submit" id="submit" value="submit"/>

Anda mungkin juga menyukai