Tugas 8 PWEB B

Nama : Abiya Sabitta

NRP : 05111940000166

Pada pertemuan ke-13 & ke-14 kelas PWEB B, kami diberikan tugas untuk mengimplemetasikan penggunaan PHP dan MySQL untuk membuat sebuah program web yang dapat mengatasi pendaftaran siswa baru. Website disusun menggunakan HTML, CSS dan library Bootstrap, kemudian untuk backendnya menggunakan PHP, dan databasenya menggunakan MySQL. Setelah web berhasil di susun secara lokal, web tersebut kemudian perlu di hosting - kan.
Berikut tampilan websitenya
 
 
 



    

Code:

<?php
$server = "localhost";
$user = "root";
$password = "";
$nama_database = "pendaftaran_siswa";
$db = mysqli_connect($server, $user, $password, $nama_database);
if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>
view raw config.php hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran Mahasiswa Baru</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-white bg-secondary">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-secondary text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.php" class="nav-link px-2 text-white">Home</a></li>
<li><a href="./form-daftar.php" class="nav-link px-2 text-black-50">Daftar</a></li>
<li><a href="./list-siswa.php" class="nav-link px-2 text-white">List Pendaftar</a></li>
</ul>
</div>
</div>
</header>
<main class="px-3 mx-auto" style="max-width:42em">
<div class="container p-0 card shadow border-0 rounded" style="min-width: 40rem;">
<div class="card-header bg-success text-center">
<h3>Formulir Mahasiswa Baru</h3>
</div>
<form class="bg-success text-white" action="proses-pendaftaran.php" method="POST">
<div class="form-group mt-3 mx-3">
<p>
<label class="form-label" for="nama">Nama: </label>
<input required class="form-control" type="text" name="nama" placeholder="Nama Lengkap" />
</p>
</div>
<div class="form-group mt-3 mx-3">
<p>
<label class="form-label" for="alamat">Alamat: </label>
<textarea required class="form-control" name="alamat"></textarea>
</p>
</div>
<div class="form-group mt-3 mx-3">
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<label class="form-check-label"><input class="form-check-input" type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>
<label class="form-check-label"><input class="form-check-input" type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>
</p>
</div>
<div class="form-group mt-3 mx-3">
<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>
</div>
<div class="form-group mt-3 mx-3 my-4">
<p>
<label class="form-label" for="sekolah_asal">Sekolah Asal: </label>
<input class="form-control" required type="text" name="sekolah_asal" placeholder="Nama Sekolah" />
</p>
</div>
<div class="form-group mt-3 mx-3 my-4">
<input class="w-100 btn btn-primary" type="submit" value="Daftar" name="daftar" />
</div>
</form>
</div>
</main>
<footer class="mt-auto text-white-50 text-center">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw form-daftar.php hosted with ❤ by GitHub
<?php
include("config.php");
if (!isset($_GET['id'])) {
// kalau tidak ada id di query string
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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran Mahasiswa Baru</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-white bg-secondary">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-secondary text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.php" class="nav-link px-2 text-white">Home</a></li>
<li><a href="./form-daftar.php" class="nav-link px-2 text-white">Daftar</a></li>
<li><a href="./list-siswa.php" class="nav-link px-2 text-white">List Pendaftar</a></li>
</ul>
</div>
</div>
</header>
<main class="px-3 mx-auto" style="max-width:42em">
<div class="container p-0 card shadow border-0 rounded" style="min-width: 40rem;">
<div class="card-header bg-success text-center">
<h3>Formulir Mahasiswa Baru</h3>
</div>
<form class="bg-success text-white" action="proses-edit.php" method="POST">
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<div class="form-group mt-3 mx-3">
<p>
<label class="form-label" for="nama">Nama: </label>
<input required class="form-control" type="text" name="nama" placeholder="Nama Lengkap" value="<?php echo $siswa['nama'] ?>" />
</p>
</div>
<div class="form-group mt-3 mx-3">
<p>
<label class="form-label" for="alamat">Alamat: </label>
<textarea required class="form-control" name="alamat"><?php echo $siswa['alamat'] ?></textarea>
</p>
</div>
<div class="form-group mt-3 mx-3">
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<label class="form-check-label"><input class="form-check-input" type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($siswa['jenis_kelamin'] == 'laki-laki') ? "checked" : "" ?>> Laki-laki</label>
<label class="form-check-label"><input class="form-check-input" type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($siswa['jenis_kelamin'] == 'perempuan') ? "checked" : "" ?>> Perempuan</label>
</p>
</div>
<div class="form-group mt-3 mx-3">
<p>
<label for="agama">Agama: </label>
<select name="agama">
<option <?php echo ($siswa['agama'] == 'Islam') ? "selected" : "" ?>>Islam</option>
<option <?php echo ($siswa['agama'] == 'Kristen') ? "selected" : "" ?>>Kristen</option>
<option <?php echo ($siswa['agama'] == 'Hindu') ? "selected" : "" ?>>Hindu</option>
<option <?php echo ($siswa['agama'] == 'Budha') ? "selected" : "" ?>>Budha</option>
<option <?php echo ($siswa['agama'] == 'Atheis') ? "selected" : "" ?>>Atheis</option>
</select>
</p>
</div>
<div class="form-group mt-3 mx-3 my-4">
<p>
<label class="form-label" for="sekolah_asal">Sekolah Asal: </label>
<input class="form-control" required type="text" name="sekolah_asal" placeholder="Nama Sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
</div>
<div class="form-group mt-3 mx-3 my-4">
<input class="w-100 btn btn-primary" type="submit" value="Simpan" name="simpan" />
</div>
</form>
</div>
</main>
<footer class="mt-auto text-white-50 text-center">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw form-edit.php hosted with ❤ by GitHub
<?php
include("config.php");
if( isset($_GET['id']) ){
// ambil id dari query string
$id = $_GET['id'];
// buat query hapus
$sql = "DELETE FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query hapus berhasil?
if( $query ){
header('Location: list-siswa.php');
} else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
?>
view raw hapus.php hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendaftaran Mahasiswa Baru</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-white bg-success">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-success text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.php" class="nav-link px-2 text-black-50">Home</a></li>
<li><a href="./form-daftar.php" class="nav-link px-2 text-white">Daftar</a></li>
<li><a href="./list-siswa.php" class="nav-link px-2 text-white">List Pendaftar</a></li>
</ul>
</div>
</div>
</header>
<main class="px-3 mx-auto bg-success" style="max-width:42em">
<br>
<h1>Pendaftaran Mahasiswa Baru</h1>
<p class="lead">
<a href="./form-daftar.php" class="btn btn-lg btn-secondary fw-bold border-white bg-white text-dark">Daftar Baru</a>
</p>
<p class="lead">
<a href="./list-siswa.php" class="btn btn-lg btn-secondary fw-bold border-white bg-white text-dark">List Pendaftar</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw index.php hosted with ❤ by GitHub
<?php include("config.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendaftaran Mahasiswa Baru</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-white bg-secondary">
<div class="container bg-success d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="p-3 bg-success text-white mb-auto">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="./index.php" class="nav-link px-2 text-white">Home</a></li>
<li><a href="./form-daftar.php" class="nav-link px-2 text-white">Daftar</a></li>
<li><a href="./list-siswa.php" class="nav-link px-2 text-black-50">List Pendaftar</a></li>
</ul>
</div>
</div>
</header>
<main class="py-3 px-5">
<h1>List Pendaftar</h1>
<p class="lead">
<a href="./form-daftar.php" class="btn btn-sm btn-secondary fw-bold border-white bg-white text-dark">Tambah Baru</a>
</p>
<table class="table mt-4 bg-white">
<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 to get all data
$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 style='width: 20%'>" . $siswa['alamat'] . "</td>";
echo "<td>" . $siswa['jenis_kelamin'] . "</td>";
echo "<td>" . $siswa['agama'] . "</td>";
echo "<td>" . $siswa['sekolah_asal'] . "</td>";
echo "<td>";
echo "<a class='btn btn-dark mx-1' href='form-edit.php?id=" . $siswa['id'] . "'>Edit</a>";
echo "<a class='btn btn-danger' href='hapus.php?id=" . $siswa['id'] . "'>Hapus</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<h5>Total: <?php echo mysqli_num_rows($query) ?></h5>
</main>
<footer class="mt-auto text-white-50 text-center">
<p>powered by <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
view raw list-siswa.php hosted with ❤ by GitHub
<?php
include("config.php");
// cek apakah tombol daftar sudah diklik atau blum?
if(isset($_POST['simpan'])){
// ambil data dari formulir
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query update
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query update berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman list-siswa.php
header('Location: list-siswa.php');
} else {
// kalau gagal tampilkan pesan
die("Gagal menyimpan perubahan...");
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-edit.php hosted with ❤ by GitHub
<?php
include("config.php");
// cek apakah tombol daftar sudah diklik atau blum?
if(isset($_POST['daftar'])){
// ambil data dari formulir
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
$query = mysqli_query($db, $sql);
// apakah query simpan berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman index.php dengan status=sukses
header('Location: index.php?status=sukses');
} else {
// kalau gagal alihkan ke halaman indek.ph dengan status=gagal
header('Location: index.php?status=gagal');
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-pendaftaran.php hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Tugas 1 PWEB - B (2021)

Image
 Abiya Sabitta Ragadani 05111940000166 PWEB - B (2021) Berikut ini adalah hasil dari tugas pembuatan data diri/CV menggunakan HTML.     Berikut ini adalah source code dari cv yang sudah dibuat. Pada html ini menggunakan h2 sampai h5 untuk header sesuai kebutuhan, dan untuk paragraf menggunakan p. Kemudian untuk setiap judul dipisahkan dengan div masing-masing untuk memudahkan mengedit pada cssnya. Dan untuk foto menggunakan img dengan source langsung pada folder yang sama. Dan ini merupakan source code dari cssnya.
Read more