Proses :
1. Membuat Database
2. Membuat proses PHP
Cara Kerja :
1. Pengguna membuka site awal dan memilih menu prestasi siswa.
2. Akan tampil tabel dengan atribut Nama Siswa, Prestasi Siswa, Keterangan.
3. Terdapat fitur :
a. tambah baru untuk menambah siswa,
b. edit untuk mengedit data siswa,
c. hapus untuk menghapus data siswa,
 |
| Penampakan tabel database. |
 |
| Tampilan Menu Prestasi Siswa |
 |
| Pengisian Form Penambahan siswa |
 |
| Halaman Awal, dan notifikasi keberhasilan penambahan siswa. |
 |
| Tampilan Sudah bertambah |
 |
| Menghapus siswa Andi. |
 |
| Formulir Edit |
 |
| Nama Nina Berhasil Diganti menjadi Nino |
Source Codes :
config.php
<?php
$server = "localhost";
$user = "root";
$password = "";
$nama_database = "e-rapor";
$db = mysqli_connect($server, $user, $password, $nama_database);
if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>
form-edit.php
<?php
include("config.php");
// kalau tidak ada id di query string
if( !isset($_GET['id_siswa']) ){
header('Location: list-siswa.php');
}
//ambil id dari query string
$id = $_GET['id_siswa'];
// buat query untuk ambil data dari database
$sql = "SELECT * FROM prestasi_siswa WHERE id_siswa=$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>UTS PWEB C</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="login">
<header>
<h3>Formulir Edit Siswa</h3>
</header>
<form action="proses-edit.php" method="POST">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id_siswa'] ?>" />
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama_siswa'] ?>" />
</p>
<p>
<label for="prestasi">Prestasi: </label>
<textarea name="prestasi"><?php echo $siswa['prestasi'] ?></textarea>
</p>
<p>
<label for="keterangan">Keterangan: </label>
<textarea name="keterangan"><?php echo $siswa['keterangan'] ?></textarea>
</p>
<p>
<input type="submit" value="Simpan" name="simpan" />
</p>
</fieldset>
</form>
</div>
</body>
</html>
hapus.php
<?php
include("config.php");
if(isset($_GET['id_siswa']) ){
// ambil id dari query string
$id = $_GET['id_siswa'];
// buat query hapus
$sql = "DELETE FROM prestasi_siswa WHERE id_siswa=$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...");
}
?>
index.php
<!DOCTYPE html>
<html>
<head>
<title>UTS PWEB C</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="header">
<div class="container">
<h2>E-Rapor</h2>
<h1>SMK UTS JAYA</h1>
</div>
</div>
<div class="menu">
<ul>
<li> <a href="#login">Login</a></li>
<li> <a href="list-siswa.php">Prestasi Siswa</a></li>
<li> <a href="#data">Data Siswa</a></li>
<li> <a href="#data">Nilai Siswa</a></li>
</ul>
</div>
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses'){
echo "Pendaftaran siswa baru berhasil!";
} else {
echo "Pendaftaran gagal!";
}
?>
</p>
<?php endif; ?>
</body>
</html>
list-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>UTS PWEB C</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="header">
<h1><center>LIST PRESTASI SISWA</center></h1>
</div>
<div class="menu">
<ul>
<li> <a href="index.php">Home</a></li>
<li> <a href="form-tambah.php">[+] Tambah Baru</a></li>
</ul>
</div>
<br>
<table id="siswa">
<thead>
<tr>
<th>No</th>
<th>Nama Siswa</th>
<th>Prestasi</th>
<th>Keterangan</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM prestasi_siswa";
$query = mysqli_query($db, $sql);
$nomer = 0;
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
$nomer++;
echo "<td>".$nomer."</td>";
echo "<td>".$siswa['nama_siswa']."</td>";
echo "<td>".$siswa['prestasi']."</td>";
echo "<td>".$siswa['keterangan']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id_siswa=".$siswa['id_siswa']."'>Edit</a> | ";
echo "<a href='hapus.php?id_siswa=".$siswa['id_siswa']."'>Hapus</a>";
echo "</td>";
}
?>
</tbody>
</table>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
</body>
</html>
form-tambah.php
<!DOCTYPE html>
<html>
<head>
<title>UTS PWEB C</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="login">
<header>
<h3>Formulir Penambahan Siswa</h3>
</header>
<form action="proses_tambah.php" method="POST">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" />
</p>
<p>
<label for="prestasi">Prestasi: </label>
<textarea name="prestasi"></textarea>
</p>
<p>
<label for="keterangan">Keterangan: </label>
<textarea name="keterangan"></textarea>
</p>
<p>
<input type="submit" value="Daftar" name="daftar" />
</p>
</fieldset>
</form>
</div>
</body>
</html>
proses_tambah.php
<?php
include("config.php");
// cek apakah tombol daftar sudah diklik atau blum?
if(isset($_POST['daftar'])){
// ambil data dari formulir
$nama = $_POST['nama'];
$prestasi = $_POST['prestasi'];
$ket = $_POST['keterangan'];
// buat query
$sql = "INSERT INTO prestasi_siswa (nama_siswa, prestasi, keterangan) VALUE ('$nama', '$prestasi', '$ket')";
$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.php dengan status=gagal
header('Location: index.php?status=gagal');
}
} else {
die("Akses dilarang...");
}
?>
proses-edit.php
<?php
include("config.php");
// cek apakah tombol simpan sudah diklik atau blum?
if(isset($_POST['simpan'])){
// ambil data dari formulir
$id = $_POST['id'];
$nama = $_POST['nama'];
$prestasi = $_POST['prestasi'];
$ket = $_POST['keterangan'];
// buat query update
$sql = "UPDATE prestasi_siswa SET nama_siswa='$nama',prestasi='$prestasi', keterangan='$ket' WHERE id_siswa=$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...");
}
?>
Style.css
h2, h1 {
text-align: center;
}
h3 {
padding: 6px 6px 6px 32px;
text-decoration: none;
font-size: 25px;
display: block;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="email"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
}
/*tes*/
body {
background:#00daff;
width:100%;
font-family:sans-serif;
margin:0 auto;
}
.header {
width:90%;
margin: 2em auto 0;
height:140px;
background: #00daff;
color:#fff;
}
.content {
border:2px solid #00daff;
width:90%;
margin:auto;
height:1200px;
padding:0.1px;
background:#fff;
color:#333;
}
#post {
width:70%;
float:left;
margin:auto;
background:#fff;
height:420px;
}
.undecor {
text-decoration:none;
}
.footer {
width:30%;
margin: 0 auto;
background:#00daff;
color:#fff;
}
.menu {
background-color: #00daff;
position:relative;
width:30%;
margin:0 auto;
padding:0 auto;
}
.container {
padding:1.5em;
}
.footer .container {
margin-left: 1.8em;
padding: 0.2em;
}
.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family:Arial;
font-size:14px;
}
.block {
border: none;
background-color: #fff;
color: white;
padding: 14px 16px;
cursor: pointer;
text-align: center;
}
.block:hover {
background-color: red;
color: white;
}
.menu li {
float: left;
}
.menu li a, .dropbtn {
padding: 14px 16px;
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
.menu li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.menu li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.header {
width:30%;
margin: 2em auto 0;
height:140px;
background: #00daff;
color:#fff;
}
#siswa {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 80%;
}
#siswa td, #siswa th {
border: 1px solid #ddd;
padding: 8px;
}
#siswa tr:nth-child(odd){background-color: #fff;}
#siswa tr:nth-child(even){background-color: #f2f2f2;}
#siswa th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
