PWPB | Pertemuan 20
Penanganan Input User pada PHP
A. Komponen Inputan di HTML
Untuk menginput di HTML bisa menggunakan form, isi form dapat berisi <input> <textarea> <select> dll.
Kerangka Form bisa dilihat di bawah ini
<form method="get/post" action="nama.file" >
isi form bisa berupa <input> <textarea> <select> dll
</form>
B. Prinsip Akses Data pada Web
C. POST dan GET
Untuk menginput data di PHP kita menggunakan tag form pada HTML . pada tag form ada atribut bernama method="" yang berisi GET atau POST.
Perbedaan POST dan GET
-) Secara mendasar POST digunakan untuk mengirim data ke server, sedangkan GET untuk mengambil data dari server.
-) Secara teknis GET diproses lebih sederhana karena permintaan dikirimkan melalui alamat halaman (URL) dengan sistem penulisan secara berpasangan yaitu nama varibel dan nilainya, dan pemisahan variabel menggunakan karakter dan &.
-) pengiriman data dengan POST lebih tertutup dan jauh lebih aman karena data yang dikirimkan tidak terlihat.
Contoh Penggunaan POST
Kodingan :
latihanPOST.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
table {
border : 2px solid grey;
background-image : url(../Assets/bg1.jpg);
background-size: cover;
color: white;
font-family: calibri;
}
input[type="text"] {
border-radius: 50px;
width : 95%;
height : 20px;
padding: 5px;
border : 1px solid cyan;
background:transparent;
color : white;
}
textarea {
border-radius: 50px;
padding: 20px;
border : 1px solid cyan;
background:transparent;
color : white;
}
input[type="submit"] {
border-radius: 50px;
width:80px;
height:40px;
background : grey;
border : 2px solid cyan;
}
</style>
</head>
<body>
<form action="prosesPost.php" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td valign="top"><label for="nama">Nama</label></td>
<td></td>
<td><input type="text" name="nama" id="nama" size="20" required=""><br><br></td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td></td>
<td><textarea name="alamat" id="alamat" cols="50" rows="5" required=""></textarea><br><br></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="button" id="button" value="kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil Kodingan di atas
prosesPOST.php
<?php
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
echo $nama.'<br>';
echo $alamat;
?>
Hasilnya
Contoh Penggunaan GET
Kodingan :
latihanGET.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
table {
border : 2px solid grey;
background-image : url(../Assets/bg1.jpg);
background-size: cover;
color: white;
font-family: calibri;
}
input[type="text"] {
border-radius: 50px;
width : 95%;
height : 20px;
padding: 5px;
border : 1px solid cyan;
background:transparent;
color : white;
}
textarea {
border-radius: 50px;
padding: 20px;
border : 1px solid cyan;
background:transparent;
color : white;
}
input[type="submit"] {
border-radius: 50px;
width:80px;
height:40px;
background : grey;
border : 2px solid cyan;
}
</style>
</head>
<body>
<form action="prosesGet.php" method="get">
<table cellspacing="5" cellpadding="5">
<tr>
<td valign="top"><label for="nama">Nama</label></td>
<td></td>
<td><input type="text" name="nama" id="nama" size="20" required=""><br><br></td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td></td>
<td><textarea name="alamat" id="alamat" cols="50" rows="5" required=""></textarea><br><br></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="button" id="button" value="kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil Kodingan di atas
prosesGET.php
<?php
$nama = $_GET['nama'];
$alamat = $_GET['alamat'];
echo $nama.'<br>';
echo $alamat;
?>
</html>
Hasil Kodingan di atas
D. Studi Kasus
1. Studi Kasus 1 ( buatlah halaman registrasi dengan inputan menggunakan PHP )
Kodingan
Halaman Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<script src="https://kit.fontawesome.com/503eca56fe.js" crossorigin="anonymous"></script>
<style>
body {
color : cyan;
font-family : arial;
}
fieldset {
background : darkgrey;
border-radius : 20px;
width : 30%;
}
input[type="text"] {
border-radius: 20px;
border : 2px solid blueviolet;
width : 97%;
height : 30px;
box-shadow : 0px 0px 3px 3px blueviolet;
padding :5px;
background : transparent;
}
i {
color : blueviolet;
}
select {
border : 2px solid blueviolet;
box-shadow : 0px 0px 3px 3px blueviolet;
background : transparent;
width : 100px;
height : 30px;
}
textarea {
border : 2px solid blueviolet;
box-shadow : 0px 0px 3px 3px blueviolet;
background : transparent;
border-radius : 30px;
padding : 10px;
}
#nd,#nb {
width:200px;
}
legend {
border : 2px solid blueviolet;
background : darkgrey;
font-size: 35px;
text-align: center;
color : black;
padding : 10px;
}
input[type="submit"] {
width : 100px;
height : 50px;
border : 2px solid blueviolet;
background : cyan;
border-radius : 10px;
font-size :18px;
}
</style>
</head>
<body>
<form action="Studi_Kasus1_lihat.php" method="post">
<fieldset>
<legend>Form Registrasi</legend>
<table cellpadding="11" align="center">
<tr>
<td><label for="nd">Nama Depan</label> <label for="nb">Nama Belakang</label></td>
</tr>
<tr>
<td><input type="text" name="nd" id="nd" required=""> <input type="text" name="nb" id="nb" required=""></td>
</tr>
<tr>
<td><label for="ttl">TTL</label></td>
</tr>
<tr>
<td><input type="text" name="ttl" id="ttl" required=""></td>
</tr>
<tr>
<td><label for="jk">Jenis Kelamin</label></td>
</tr>
<tr>
<td><input type="radio" name="jk" id="jk" value="Pria" required=""> <i class="fas fa-male fa-lg"> Male</i> <input type="radio" name="jk" id="jk" value="Wanita" required=""> <i class="fas fa-female fa-lg"> Female</i></td>
</tr>
<tr>
<td><label for="agama">Agama</label></td>
</tr>
<tr>
<td>
<select name="agama" id="agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Budha">Budha</option>
<option value="Hindu">Hindu</option>
<option value="Konghuchu">Konghuchu</option>
</select>
</td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
</tr>
<tr>
<td><textarea name="alamat" id="alamat" cols="58" rows="5" required=""></textarea></td>
</tr>
<tr>
<td><input type="submit" name="button" id="button" value="kirim"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Hasil Kodingan di atas
Halaman Hasil
<?php
$nama_depan = $_POST['nd'];
$nama_belakang = $_POST['nb'];
$ttl = $_POST['ttl'];
$jk = $_POST['jk'];
$agama = $_POST['agama'];
$alamat = $_POST['alamat'];
$nama = $nama_depan." ".$nama_belakang;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhamamd Fahru Rozi XI RPL 2</title>
<script src="https://kit.fontawesome.com/503eca56fe.js" crossorigin="anonymous"></script>
<style>
body {
color : cyan;
font-family : arial;
}
fieldset {
background : darkgrey;
border-radius : 20px;
width : 30%;
}
legend {
border : 2px solid blueviolet;
background : darkgrey;
font-size: 25px;
text-align: center;
color : black;
padding : 10px;
}
input[type="text"] {
border-radius: 20px;
border : 2px solid blueviolet;
width : 97%;
height : 30px;
box-shadow : 0px 0px 3px 3px blueviolet;
padding :5px;
background : transparent;
}
textarea {
border : 2px solid blueviolet;
box-shadow : 0px 0px 3px 3px blueviolet;
background : transparent;
border-radius : 30px;
padding : 10px;
}
.batal {
width : 100px;
height : 50px;
border : 2px solid blueviolet;
background : cyan;
border-radius : 10px;
font-size :18px;
}
.edit {
width : 100px;
height : 50px;
border : 2px solid blueviolet;
background : transparent;
border-radius : 10px;
font-size :18px;
}
.edit:hover {
background:cyan;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Profil Berhasil Ditambahkan</legend>
<table align="center" cellpadding="11" width="90%">
<tr>
<td valign="middle" align="center"><i class="fas fa-address-book fa-3x"></i></td>
<td><h3>Nama</h3><input type="text" value="<?php echo$nama; ?>"></td>
</tr>
<tr>
<td valign="middle" align="center"><i class="fas fa-baby fa-3x"></i></td>
<td><h3>TTL</h3><input type="text" value="<?php echo$ttl; ?>"></td>
</tr>
<tr>
<td valign="middle" align="center"><i class="fas fa-user-circle fa-3x"></i></td>
<td><h3>Gender</h3><input type="text" value="<?php echo$jk; ?>"></td>
</tr>
<tr>
<td valign="middle" align="center"><i class="fas fa-praying-hands fa-3x"></i></td>
<td><h3>Agama</h3><input type="text" value="<?php echo$agama; ?>"></td>
</tr>
<tr>
<td valign="top" align="center"><i class="fas fa-map-marked-alt fa-3x"></i></td>
<td><h3>Alamat</h3><textarea cols="30" rows="10" ><?php echo$alamat; ?></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Edit" class="edit"> <input type="submit" value="Batal" class="batal"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Hasil kodingan di atas
2. Studi Kasus 2 ( Buatlah Web seperti blog)
Kodingan
Halaman Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
body {
color : cyan;
font-family : arial;
font-size: 25px;
}
fieldset {
background : darkgrey;
border-radius : 20px;
width : 60%;
}
input[type="text"] {
border-radius: 20px;
border : 2px solid blueviolet;
width : 90%;
height : 30px;
box-shadow : 0px 0px 3px 3px blueviolet;
padding :5px;
background : transparent;
}
textarea {
border : 2px solid blueviolet;
box-shadow : 0px 0px 3px 3px blueviolet;
background : transparent;
border-radius : 30px;
padding : 10px;
}
input[type="submit"] {
width : 100px;
height : 50px;
border : 2px solid blueviolet;
background : cyan;
border-radius : 10px;
font-size :18px;
}
</style>
</head>
<body>
<form action="Studi_Kasus2_hasil.php" method="post">
<center>
<fieldset>
<table align="center" cellpadding="11" width="90%">
<tr>
<td><Label for="judul">Judul Berita</Label></td>
<td><input type="text" name="judul" id="judul"></td>
</tr>
<tr>
<td><label for="penulis">Nama Penulis</label></td>
<td><input type="text" name="penulis" id="penulis"></td>
</tr>
<tr>
<td><label for="waktu">Tanggal Post</label></td>
<td><input type="text" name="waktu" id="waktu"></td>
</tr>
<tr>
<td valign="top"><Label for="berita">Berita</Label></td>
<td><textarea name="berita" id="berita" cols="80" rows="20"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>
Hasil Kodingan di atas
Halaman Hasil
<?php
$judul = $_POST['judul'];
$penulis = $_POST['penulis'];
$waktu = $_POST['waktu'];
$berita = $_POST['berita'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
body {
background-image: url(../Assets/bg2.png);
}
h1 {
font-family : Avengero;
font-size:60px;
}
fieldset {
width: 70%;
background : grey;
opacity:0.5;
}
.penulis {
float : left;
font-size:20px;
}
.tanggal {
float: right;
font-size:20px;
}
input[type="text"] {
border-radius: 20px;
border : 2px solid blueviolet;
width : 97%;
height : 30px;
box-shadow : 0px 0px 3px 3px blueviolet;
padding :5px;
background : transparent;
}
textarea {
border : 2px solid blueviolet;
box-shadow : 0px 0px 3px 3px blueviolet;
background : transparent;
border-radius : 30px;
padding : 10px;
}
input[type="submit"] {
width : 100px;
height : 50px;
border : 2px solid blueviolet;
background : cyan;
border-radius : 10px;
font-size :18px;
}
</style>
</head>
<body>
<center>
<h1><?php echo$judul; ?></h1>
<fieldset>
<div class="penulis">Author : <?php echo$penulis; ?></div>
<div class="tanggal">Di Publikasikan Pada <?php echo$waktu; ?></div><br><br>
<p><?php echo$berita; ?></p>
</fieldset><br>
<fieldset>
<form action="">
<table>
<tr>
<td><label for="email">Email</label></td>
<td></td>
<td><input type="text" name="email" id="email" required=""><br><br></td>
</tr>
<tr>
<td valign="top"><label for="komen">Comment</label></td>
<td></td>
<td><textarea name="komen" id="komen" cols="58" rows="8" required=""></textarea></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" value="Submit" class="submit"> <input type="submit" value="Batal" class="batal"></td>
</tr>
</table>
</form>
</fieldset>
</center>
</body>
</html>
Hasil Kodingan di atas
Sekian materi yang dapat saya berikan semoga bermanfaat dan bisa dimplementasikan, Wassalamualaikum
0 Comments