Aladino Zulmar Abadi

28 Maret 2021
LAPORAN RESMI
Praktikum Pemrograman Web
Desain Form
Disusun Oleh :
Aladino Zulmar Abadi

1 D4 Teknik Informatika B
3120600058
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

PENS
2021
Listing Program
Halaman index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@
4.5.3/dist/css/bootstrap.min.css" integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crosso
rigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chango&display=
swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=sw
ap" rel="stylesheet">
<title>Form Data Diri</title>
<style>
body {
background-color: #28572e #C0C0C0;
background-attachment: fixed;
background-size: cover;
}
.tahun{
margin-left: 4%;
}
.form-bulan {
margin-left: 4%;
}
.bulan{
margin-left: 4%;
}
.formHeader{
font-family: 'Acme', sans-serif;
}
.textNavbar{
font-family: 'Chango', cursive;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-info fixed-top">

<div class="container">
<h5><a class="navbar-brand textNavbar" href="#">Form Data Diri</a></h5>
</div>
</nav>
<br><br><br><br>
<div class="card col-sm-9 border-success mx-auto">
<div class="card-header bg-success">
<h3 class="text-center formHeader text-white">Form Data Diri</h3>
</div>
<div class="card-body">
<form action="output.php" method="POST">

<div class="form-group row">
<label for="inputnpm" class="col-sm-2 col-form-label">NPM</label>
<div class="col-sm-5">
<input type="number" class="form-
control" id="inputnpm" name="npm" required>
</div>
</div>
<label for="namalengkap" class="col-sm-2 col-form-
label">Nama Lengkap</label>
<input type="text" class="form-
control" id="namalengkap" name="nama" required>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="inputLamaStudy" class="col-sm-2 col-form-
label">Lama Study</label>
control" id="inputLamaStudy" name="studiTahun" required>
</div>
cdd
<p class="tahun mt-2">Tahun</p>
<div class="form-bulan col-sm-2">
control" id="inputLamaStudy" name="studiBulan" required>
</div>
<p class="bulan mt-2">bulan</p>
</div>
</div>
<label for="inputipk" class="col-sm-2 col-form-
label">IPK Terakhir</label>
control" id="inputnpm" name="ipk" required>
</div>
</div>
<fieldset class="form-group">
<div class="row ">
<legend class="col-form-label col-sm-2 pt-0">Jurusan</legend>
<div class="form-check-inline">
<input class="form-check-
input" type="radio" name="jurusan" id="gridRadios1" value="Teknik Informatik
a" checked >
<label class="form-check-label" for="gridRadios1">
Teknik Informatika
</label>
</div>
input" type="radio" name="jurusan" id="gridRadios2" value="Teknik Elektro">
Teknik Elektro
</label>
</div>
input" type="radio" name="jurusan" id="gridRadios3" value="Teknik Sipil"
>
Teknik Sipil
</label>
</div>
</div>
</div>
</fieldset>

<label for="TTL" class="col-sm-2 col-form-
label">Tempat & Tanggal Lahir</label>
control" id="TTL" name="tempat" placeholder="Tempat" required>
</div>
<select type="text" class="form-control" name="tanggal">
<?php
for ($i=1; $i<=31 ; $i++) {
?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php
}
?>
</select>
</div>
<select name="bulan" class="form-control">
<option value="januari">Januari</option>
<option value="februari">Februari</option>
<option value="Maret" selected="selected">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
<option value="juni">Juni</option>
<option value="juli">Juli</option>
<option value="agustus">Agustus</option>
<option value="september">September</option>
<option value="oktober">Oktober</option>
<option value="november">November</option>
<option value="desember">Desember</option>
</select>
</div>
<select name="tahun" class="form-control">
<?php
for ($i=1990; $i<=2018 ; $i++) {
?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php
}
?>
</select>
</div>
</div>
<fieldset class="form-group">
<div class="row ">
<legend class="col-form-label col-sm-2 pt-
0">Jenis Kelamin</legend>
input" type="radio" name="gender" id="gridRadios1" value="Laki-
Laki" checked>
Laki-laki
</label>
</div>
input" type="radio" name="gender" id="gridRadios2" value="Perempuan">
Perempuan
</label>
</div>
</div>
</div>
</fieldset>

<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
control" id="alamat" name="alamat" required>
</div>
</div>

<label for="exampleFormControlTextarea1" class="col-sm-2 col-form-
label">Tentang Anda</label>
<textarea class="form-
control" id="exampleFormControlTextarea1" rows="3" name="tentang"></text
area>
</div>
</div>
<br>
<button type="submit" name="submit" class="btn btn-
primary">Submit</button>
<button type="reset" class="btn btn-danger" style="margin-
left: 5;">Reset</button>
</div>
</form>
</div>
</div>
</div>
<br><br>
<br><br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fil
l="#00cba9" fill-
opacity="1" d="M0,96L48,96C96,96,192,96,288,128C384,160,480,224,576,218.
7C672,213,768,139,864,122.7C960,107,1056,149,1152,160C1248,171,1344,149,
1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,32
0,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,32
0,96,320,48,320L0,320Z"></path></svg>
<script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crosso
rigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bo
otstrap.bundle.min.js" integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crosso
</body>
</html>
Halaman output.php
<?php
if (!isset($_POST['nama'])) {
header("location: index.php", true, 301);
exit;
}else {
echo "<script>alert('Data berhasil disimpan!')</script>";
}
$npm = $_POST['npm'];
$nama = $_POST['nama'];
$studiTahun = $_POST['studiTahun'];
$studiBulan = $_POST['studiBulan'];
$ipk = $_POST['ipk'];
$jurusan = $_POST['jurusan'];
$tempat = $_POST['tempat'];
$tanggal = $_POST['tanggal'];
$bulan = $_POST['bulan'];
$tahun= $_POST['tahun'];
$gender = $_POST['gender'];
$alamat = $_POST['alamat'];
$tentang = $_POST['tentang'];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@
4.5.3/dist/css/bootstrap.min.css" integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crosso
rigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chango&display=
swap" rel="stylesheet">
<title>Data</title>
<style>
.textCardHeader{
font-family: 'Chango', cursive;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header bg-success">
<h2 class="text-center text-white textCardHeader">Biodata Diri</h2>
</div>
<div class="card-body">
<table class="table table-bordered">
<thead class="thead-light text-center">
<tr>
<th scope="col">Data Diri</th>
<th scope="col">Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>NPM</td>
<td><?php echo $npm; ?></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td><?php echo $nama; ?></td>
</tr>
<tr>
<td>Lama Study</td>
<td ><?php echo "$studiTahun tahun $studiBulan bulan" ?></td>
</tr>
<tr>
<td>IPK Terakhir</td>
<td ><?php echo $ipk; ?></td>
</tr>
<tr>
<td>Jurusan</td>
<td ><?php echo $jurusan; ?></td>
</tr>
<tr>
<td>Tempat & Tanggal Lahir</td>
<td ><?php echo "$tempat, $tanggal $bulan $tahun"; ?></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td ><?php echo $gender; ?></td>
</tr>
<tr>
<td>Alamat</td>
<td ><?php echo $alamat; ?></td>
</tr>
<tr>
<td>Deskripsi</td>
<td ><?php echo $tentang; ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crosso
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bo
otstrap.bundle.min.js" integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crosso
</body>
</html>
Output
Halaman index.php
Apabila inputan belum diisi
Pesan apabila inputan berhasil disimpan

Halaman output.php
Analisis
Untuk mendesain form di atas saya menggunakan framework css yaitu bootstrap, dan
untuk font pada tulisan di card headernya saya menggunakan/mengambil dari google font.
Untuk formnya sendiri saya memberikan validasi yang sudah disediakan di HTML 5 seperti
,type number,required dan lain sebagainya. Untuk formnya sendiri saya menambahkan
actionnya output.php agar nanti datanya dikirimkan ke halaman tersebut dengan metode
POST.
Pada halaman output.php disitu saya membuat tag php untuk melakukan pengecakan
dan menangkap inputan dari user yang kemudian disimpan dalam variabel. Ketika user belum
melakukan penginputan dan mencoba masuk ke dalam halaman output.php disitu saya
membuatnya redirect kembali ke halaman index.php sehingga user wajib melakukan
penginputan terlebih dahulu di halaman index.php. Selanjutnya apabila user telah lengkap
dalam melakukan penginputan disitu saya menampilkan alert javascript “Data berhasil
disimpan” yang menandakan user telah berhasil melakukan penginputan dan Kemudian akan
ditampilkan datanya dengan menggunakan tabel.
Untuk tabelnya sendiri saya menggunakan bootstrap dan untuk menampilkan data dari
usernya disitu saya tinggal memanggilnya dengan tag php kemudian menggunakan echo dan
memanggil variabelnya sesuai dengan bagiannya.
Kesimpulan
Secara umum, web itu terbagi menjadi 2: web statis dan web dinamis. Web statis
adalah web yang dibangun dengan kode HTML yang bersifat tetap (atau statis). Kontennya
tidak berubah. Itu-itu saja. Sedangkan web dinamis adalah suatu web yang kontennya
berubah-ubah. Web dinamis biasanya memiliki kemampuan: login, baca data, tambah data,
ubah data, dan hapus data.
Untuk membangun sebuah web dinamis, kita membutuhkan inputan data. Di antara
inputan data yang paling dasar dalam halmaan web adalah: form.
Form merupakan sintaks HTML yang berisi kumpulan kolom isian data, misal:
• form login yang berisi isian nama pengguna dan kata sandi.
• form pendaftaran yang berisi isian nama, jenis kelamin, tanggal lahir, alamat, surel,
dan lain-lain.
Dalam pembuatan web dinamis, kita bisa melakukan pengiriman data dari form HTML untuk
kemudian data tersebut akan diproses lebih lanjut oleh bahasa pemrograman PHP.
Pada form terdapat properti action digunakan untuk mengirimkan data ke halaman lain dan
apabila dikosongkan maka akan melakukan pengiriman ke halaman itu sendiri dan ada juga
properti method yang digunakan untuk menentukan metode pengiriman data yang diinginkan
misalnya GET,POST dan lain sebagainya.

Aladino Zulmar Abadi - Desain Form

Uploaded by

Copyright:

Available Formats

Aladino Zulmar Abadi - Desain Form

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aladino Zulmar Abadi - Desain Form

Uploaded by

Copyright:

Available Formats

28 Maret 2021

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

<nav class="navbar navbar-expand-lg navbar-light bg-info fixed-top">

<form action="output.php" method="POST">

<div class="form-group row">

<div class="form-group row">

<div class="form-group row">

Pesan apabila inputan berhasil disimpan

You might also like