Web kali ini merupakan modifikasi dari web sebelumnya yang bisa dilihat pada link berikut.
Kali ini saya mencoba mendesain web dengan menggunakan framework bootstrap. Berikut adalah hasilnya.
Kali ini saya mencoba mendesain web dengan menggunakan framework bootstrap. Berikut adalah hasilnya.
Tampilan awal web
Tampilan saat button Pendaftaran Siswa di klik.
Tampilan saat button List Siswa di klik.
Tampilan saat link Edit di klik.
Berikut adalah source codenya.
1. config.php
<?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());
}
?>
2. index.php
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Pendaftaran siswa baru|| SMA PetaniCoding</title>
<script>
function showsiswa() {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "list-siswa.php", true);
xhttp.send();
}
function daftar() {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "form-daftar.php", true);
xhttp.send();
}
function edit() {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "form-edit.php", true);
xhttp.send();
}
</script>
</head>
<body style="margin-top: 30px; margin-bottom: 30px;">
<div class="container">
<header class="text-center bg-secondary text-white" style="padding: 30px;">
<h3>Pendaftaran siswa baru</h3>
<h1>SMA PetaniCoding</h1>
</header>
<div class="nav bg-info text-white" style="margin-bottom: 30px; margin-top: 30px; padding: 10px;">
<h4 style="margin-right: 10px">Menu</h4>
<button style="margin-right: 10px;" type="button" class="btn btn-secondary" onclick="showsiswa()">List Siswa</button>
<button style="margin-right: 10px;" type="button" class="btn btn-secondary" onclick="daftar()">Pendaftaran Siswa</button>
</div>
<div id="demo"></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
3. form-daftar.php
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Formulir Pendaftaran Siswa Baru ||SMA PetaniCoding</title>
</head>
<body style="margin-top: 30px; margin-bottom: 30px;">
<header>
<h3>Formulir Pendaftaran Siswa Baru</h3>
</header>
<form action="proses-pendaftaran.php" method="POST" class="container bg-secondary rounded text-white">
<div class="form-group row" style="padding-top: 2rem;">
<label class="col-sm-2 col-form-label" for="nama">Nama: </label>
<div class="col-sm-10">
<input class="form-control" type="text" name="nama" placeholder="Nama Lengkap" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="alamat">Alamat: </label>
<div class="col-sm-10">
<textarea class="form-control" name="alamat"></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="jenis_kelamin">Jenis Kelamin: </label>
<div class="custom-control custom-radio col-sm-2" style="padding-left: 40px;">
<input type="radio" name="jenis_kelamin" value="laki-laki" class="custom-control-input" id="customRadio1">
<label class="custom-control-label" for="customRadio1">Laki-laki</label>
</div>
<div class="custom-control custom-radio col-sm-2">
<input type="radio" name="jenis_kelamin" value="perempuan" class="custom-control-input" id="customRadio2">
<label class="custom-control-label" for="customRadio2">Perempuan</label>
</div>
</div>
<div class="form-group row">
<label for="agama" class="col-sm-2 col-form-label">Agama: </label>
<div class="col-sm-10">
<select name="agama" class="custom-select form-control">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="sekolah_asal">Sekolah Asal: </label>
<div class="col-sm-10">
<input class="form-control" type="text" name="sekolah_asal" placeholder="nama sekolah" />
</div>
</div>
<div class="form-group text-center" style="padding-bottom: 2rem;">
<input type="submit" value="Daftar" name="daftar" class="btn btn-primary" />
</div>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
4. proses-pendaftaran.php
<?php include("config.php"); ?>
<script>
function showsiswa() {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
}
};
xhttp.open("GET", "index.html", true);
xhttp.send();
}
</script>
<?php
if(isset($_POST['daftar'])){
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah_asal = $_POST['sekolah_asal'];
$sql = "INSERT INTO pendaftaran_siswa (nama, alamat, jenis_kelamin, agama,sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')";
$query = mysqli_query($db, $sql);
if( $query ) {
header('Location:index.php');
} else {
echo "gagal daftar";
}
}
else {
die("Akses dilarang...");
}
?>
5. form-edit.php
<?php
include("config.php");
if( !isset($_GET['id']) ){
header('Location: list-siswa.php');
}
$id = $_GET['id'];
$sql = "SELECT * FROM pendaftaran_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
if( mysqli_num_rows($query) < 1 ){
die("data tidak ditemukan...");
}
?>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Formulir Edit Siswa | SMK Coding</title>
</head>
<body style="margin-top: 30px; margin-bottom: 30px;">
<div class="container">
<header class="text-center" style="margin-bottom: 40px;">
<h3>Formulir Edit Siswa</h3>
</header>
<form action="proses-edit.php" method="POST" class="container bg-secondary rounded text-white">
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<div class="form-group row" style="padding-top: 2rem;">
<label class="col-sm-2 col-form-label" for="nama">Nama: </label>
<div class="col-sm-10">
<input class="form-control" type="text" name="nama" placeholder="Nama Lengkap" value="<?php echo $siswa['nama'] ?>" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="alamat">Alamat: </label>
<div class="col-sm-10">
<textarea class="form-control" name="alamat"><?php echo $siswa['alamat'] ?></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<div class="custom-control custom-radio col-sm-2" style="padding-left: 40px;">
<input type="radio" name="jenis_kelamin" value="laki-laki" class="custom-control-input" id="customRadio1" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>>
<label class="custom-control-label" for="customRadio1">Laki-laki</label>
</div>
<div class="custom-control custom-radio col-sm-2">
<input type="radio" name="jenis_kelamin" value="perempuan" class="custom-control-input" id="customRadio2" <?php echo ($jk == 'perempuan') ? "checked": "" ?>>
<label class="custom-control-label" for="customRadio2">Perempuan</label>
</div>
</div>
<div class="form-group row">
<label for="agama" class="col-sm-2 col-form-label">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<div class="col-sm-10">
<select name="agama" class="custom-select form-control">
<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>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="sekolah_asal">Sekolah Asal: </label>
<div class="col-sm-10">
<input class="form-control" type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
</div>
</div>
<div class="form-group text-center" style="padding-bottom: 2rem;">
<input type="submit" value="Simpan" name="simpan" class="btn btn-primary"/>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
6. proses-edit.php
<?php
include("config.php");
if(isset($_POST['simpan'])){
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
$sql = "UPDATE pendaftaran_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";
$query = mysqli_query($db, $sql);
if( $query ) {
header('Location: index.php');
} else {
die("Gagal menyimpan perubahan...");
}
} else {
die("Akses dilarang...");
}
?>
7. hapus.php
<?php
include("config.php");
if( isset($_GET['id']) ){
$id = $_GET['id'];
$sql = "DELETE FROM pendaftaran_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
if( $query ){
header('Location:index.php');
} else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
?>
8. list-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Pendaftaran Siswa Baru || SMA PetaniCoding</title>
</head>
<body style="margin-top: 30px; margin-bottom: 30px;">
<header>
<h3>Siswa yang sudah mendaftar</h3>
</header>
<br>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Agama</th>
<th scope="col">Sekolah Asal</th>
<th scope="col">Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM pendaftaran_siswa";
$query = mysqli_query($db, $sql);
$nomor=0;
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
$nomor++;
echo "<th scope='row'>".$nomor."</th>";
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>Total: <?php echo mysqli_num_rows($query) ?></p>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Sekian dan Terima Kasih.
Komentar
Posting Komentar