Tugas 9 PWEB-B: Membuat Form Pendaftaran Siswa Baru dengan PHP

on

Pada tugas ini diminta untuk mencoba tutorial PHP dan MySQL untuk membuat aplikasi CRUD dengan studi kasus Pendaftaran Siswa Baru pada website petanikode. Hal yang dilakukan pertama kali adalah membuka 000webhost.com, kemudian mengupload beberapa file php yang dibutuhkan, yaitu :

1. config.php

2. index.php

3. form-daftar.php

4. form-edit.php

5. hapus.php

6. list-siswa.php

7. proses-edit.php

8. proses-pendaftaran.php. 

Setelah itu, membuat database pendaftaran_siswa pada phpMyAdmin. Berikut adalah dokumentasi source code dan tampilan website yang telah dibuat.


Link Website:

Pendaftaran Siswa


Dokumentasi tampilan:

1. Landing Page


2. Halaman Formulir Pendaftaran


3. Halaman Formulir Edit Data


4 Halaman Data Pendaftar



Dokumentasi source code :

1. config.php

<?php
$server = "localhost";
$user = "id18037938_root";
$password = "[Em!&(d35tl=cgUI";
$nama_database = "id18037938_pendaftaran_siswa";
$db = mysqli_connect($server, $user, $password, $nama_database);
if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>
view raw index.php hosted with ❤ by GitHub

2. index.php

<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
body{
/*padding-left: 4rem;*/
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #a4c9e4;
font-family: 'Open Sans', sans-serif;
}
.menus{
border-radius:20px;
padding-top:3rem;
padding-left:5rem;
padding-bottom:4rem;
margin-top: 4rem;
margin-left:25rem;
margin-right:25rem;
padding-right:5rem;
background-color: #eff8ff;
}
.button {
background-color: #40627d; /* Green */
border: none;
color: white;
padding: 10px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius:10px;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #40627d;
}
.button1:hover {
background-color: #40627d;
color: white;
}
</style>
</head>
<body>
<header style="text-align: center; color:white;">
<h1 ><b>Pendaftaran Siswa Baru</b></h1>
<h3 ><b>SMK Coding 2021</b></h3>
</header>
<div class="menus">
<h4 style="text-align: center; padding-bottom: 2rem;">Menu</h4>
<nav>
<ul>
<a href="form-daftar.php" style="margin-left:3rem; ">
<button class="button button1">Daftar Baru</button>
</a>
<a href="list-siswa.php" style="margin-left:2.2rem; padding-top:2rem">
<button class="button button1">Data Pendaftar</button>
</a>
</ul>
</nav>
</div>
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses'){
echo "Pendaftaran siswa baru berhasil!";
} else {
echo "Pendaftaran gagal!";
}
?>
</p>
<?php endif; ?>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
view raw index.php hosted with ❤ by GitHub

3. form-daftar.php

<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
body{
/*padding-left: 4rem;*/
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #a4c9e4;
font-family: 'Open Sans', sans-serif;
}
.formdaftar{
border-radius:20px;
padding-top:3rem;
padding-left:5rem;
padding-bottom:3rem;
margin-top: 4rem;
margin-left:25rem;
margin-right:25rem;
padding-right:5rem;
background-color: #eff8ff;
}
</style>
</head>
<body>
<header>
<h1 style="text-align: center; color:white;"><b>Formulir Pendaftaran Siswa Baru</b></h1>
</header>
<div class="formdaftar">
<form action="proses-pendaftaran.php" method="POST">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="Nama lengkap" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
</p>
<p>
<!--<label for="jenis_kelamin">Jenis Kelamin: </label>-->
<label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<select name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="Nama sekolah Asal" />
</p>
<p>
<input type="submit" value="Daftar" name="daftar" style="margin-left:6rem;margin-top:2rem;"/>
</p>
</fieldset>
</form>
</div>
</body>
<script src="js/bootstrap.min.js"></script>
</html>
view raw form-daftar.php hosted with ❤ by GitHub

4. form-edit.php

<?php
include("config.php");
// kalau tidak ada id di query string
if( !isset($_GET['id']) ){
header('Location: list-siswa.php');
}
//ambil id dari query string
$id = $_GET['id'];
// buat query untuk ambil data dari database
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
// jika data yang di-edit tidak ditemukan
if( mysqli_num_rows($query) < 1 ){
die("data tidak ditemukan...");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Edit Siswa | SMK Coding</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
body{
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #a4c9e4;
font-family: 'Open Sans', sans-serif;
}
.formedit{
border-radius:20px;
padding-top:3rem;
padding-left:5rem;
padding-bottom:3rem;
margin-top: 4rem;
margin-left:25rem;
margin-right:25rem;
padding-right:5rem;
background-color: #eff8ff;
}
</style>
</head>
<body>
<header>
<h1 style="text-align:center; color:white"><b>Formulir Edit Data Siswa</b></h1>
</header>
<div class="formedit">
<form action="proses-edit.php" method="POST">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"><?php echo $siswa['alamat'] ?></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama">
<option <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
<option <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
<option <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
<option <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
<option <?php echo ($agama == 'Atheis') ? "selected": "" ?>>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
<p>
<input type="submit" value="Simpan" name="simpan" style="margin-left:6rem;margin-top:2rem;" />
</p>
</fieldset>
</form>
</div>
</body>
<script src="js/bootstrap.min.js"></script>
</html>
view raw form-edit.php hosted with ❤ by GitHub

5. list-siswa.php

<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
body{
/*padding-left: 20rem;*/
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #a4c9e4;
font-family: 'Open Sans', sans-serif;
}
table{
/*margin-left:3rem;*/
border: 1px solid black;
width: 88%;
border-collapse: collapse;
height: 50px;
vertical-align: bottom;
}
tr:nth-child(even) {background-color: #a4c9e4;}
.button {
/*margin-top:2rem;*/
margin-bottom:2rem;
background-color: #40627d; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
/*margin: 4px 2px;*/
transition-duration: 0.4s;
cursor: pointer;
border-radius:10px;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #40627d;
}
.button1:hover {
background-color: #40627d;
color: white;
}
.lists{
border-radius:20px;
padding-top:3rem;
padding-left:5rem;
padding-bottom:3rem;
margin-top: 4rem;
margin-left:10rem;
margin-right:10rem;
/*padding-right:2rem;*/
background-color: #eff8ff;
}
</style>
</head>
<body>
<header style="text-align: center; color:white;">
<h1 ><b>Daftar Calon Siswa Baru</b></h1>
<h3><b>SMK Coding 2021</b></h3>
</header>
<div class="lists">
<a href="form-daftar.php">
<button class="button button1">Daftar Baru</button>
</a>
<br>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Sekolah Asal</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
echo "<td>".$siswa['id']."</td>";
echo "<td>".$siswa['nama']."</td>";
echo "<td>".$siswa['alamat']."</td>";
echo "<td>".$siswa['jenis_kelamin']."</td>";
echo "<td>".$siswa['agama']."</td>";
echo "<td>".$siswa['sekolah_asal']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p style="padding-top:2rem;">Total Pendaftar: <?php echo mysqli_num_rows($query) ?></p>
</div>
</body>
<script src="js/bootstrap.min.js"></script>
</html>
view raw list-siswa.php hosted with ❤ by GitHub

Source code selengkapnya terdapat pada link berikut : https://github.com/erzajanitra/pweb-tugas-9

Comments

Post a Comment