TUGAS-PWEB-7--AJAX

  Tugas Pemrograman Web

Implementasi Ajax
Kali ini saya akan membuat web pendafataran siswa dengan bootstrap. Berikut soure code dan tampilan akhirnya.

1. Source Code yang diperlukan (index.html,tampil.html,tugas 1.html dan tugas 2.html)
<!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>Tugas Ajax</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body class="bg-light">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card border-secondary mb-3">
<div class="card-header">PWEB B</div>
<div class="card-body text-dark text-center">
<h1 class="card-title">Tugas Ajax</h1>
<div class="d-flex flex-col">
<a href="./tugas1.html" class="btn btn-primary m-1"
>Menampilkan data dari file HTML lain</a
>
<a href="./tugas2.html" class="btn btn-primary m-1"
>Menampilkan nama daerah</a
>
</div>
</div>
<div class="card-footer text-muted">
05111940000041 - Junaedi Akbar
</div>
</div>
</div>
</div>
</div>
</body>
</html>
view raw index.html 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>Document</title>
</head>
<body>
Halo from Ajax, ini text yang diambil menggunakan<strong>Ajax</strong>
</body>
</html>
view raw tampil.html 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>Tugas Ajax 1</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body class="bg-light">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card border-secondary mb-3">
<div class="card-header">
<a href="./index.html" class="btn btn-outline-primary btn-sm"
>Kembali</a
>
</div>
<div class="card-body text-dark text-center">
<h1 class="card-title">Menampilkan data dari file HTML lain</h1>
<p class="card-text">
Menampilkan isi dari file
<a href="./tampil.html">tampil.html</a>
</p>
<form class="mb-2">
<input
type="button"
value="Tampilkan Data"
onclick="getdata('tampil.html','divhasil')"
class="btn btn-primary"
/>
</form>
<div id="divhasil">Hasilnya akan ditampilkan disini</div>
</div>
<div class="card-footer text-muted">
05111940000041 - Junaedi Akbar
</div>
</div>
</div>
</div>
</div>
<script>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url, divhasil) {
if (XMLHttpRequestObject) {
var obj = document.getElementById(divhasil);
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function () {
if (XMLHttpRequestObject.readyState == 1) {
obj.innerHTML = "Loading";
}
if (
XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200
) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
};
XMLHttpRequestObject.send(null);
}
}
</script>
</body>
</html>
view raw tugas 1.html 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>Tugas Ajax 2</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body class="bg-light">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card border-secondary mb-3">
<div class="card-header">
<a href="./index.html" class="btn btn-outline-primary btn-sm"
>Kembali</a
>
</div>
<div class="card-body text-dark text-center">
<h1 class="card-title">Menampilkan nama daerah</h1>
<p class="card-text">
Nama daerah diambil menggunakan fork dari
<a href="https://github.com/emsifa/api-wilayah-indonesia"
>API berikut</a
>
dan berikut
<a href="http://www.emsifa.com/api-wilayah-indonesia/"
>Link Demo</a
>
</p>
<form>
<div class="form-group">
<label>Provinsi</label>
<select class="form-control" name="provinsi" id="provinsi">
<option value="">Pilih Provinsi</option>
</select>
</div>
<div class="form-group">
<label>Kabupaten</label>
<select class="form-control" name="kabupaten" id="kabupaten">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>Kecamatan</label>
<select class="form-control" name="kecamatan" id="kecamatan">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>Kelurahan</label>
<select class="form-control" name="kelurahan" id="kelurahan">
<option value=""></option>
</select>
</div>
</form>
</div>
<div class="card-footer text-muted">
05111940000041 - Junaedi Akbar
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.emsifa.com/api-wilayah-indonesia/api/provinces.json",
// crossDomain: true,
cache: false,
success: function (msg) {
$("#kabupaten").empty();
$("#kecamatan").empty();
$("#kelurahan").empty();
$.each(msg, function (i, item) {
$("#provinsi").append(
$("<option>", {
value: item.id,
text: item.name,
})
);
});
},
});
$("#provinsi").change(function () {
var provinsi = $("#provinsi").val();
$.ajax({
type: "GET",
url: `http://www.emsifa.com/api-wilayah-indonesia/api/regencies/${provinsi}.json`,
// crossDomain: true,
cache: false,
success: function (msg) {
$("#kecamatan").empty();
$("#kelurahan").empty();
$("#kabupaten")
.empty()
.append(
$("<option>", {
value: 0,
text: "Pilih Kabupaten",
})
);
$.each(msg, function (i, item) {
$("#kabupaten").append(
$("<option>", {
value: item.id,
text: item.name,
})
);
});
},
});
});
$("#kabupaten").change(function () {
var kabupaten = $("#kabupaten").val();
$.ajax({
type: "GET",
url: `http://www.emsifa.com/api-wilayah-indonesia/api/districts/${kabupaten}.json`,
// crossDomain: true,
cache: false,
success: function (msg) {
$("#kelurahan").empty();
$("#kecamatan")
.empty()
.append(
$("<option>", {
value: 0,
text: "Pilih Kecamatan",
})
);
$.each(msg, function (i, item) {
$("#kecamatan").append(
$("<option>", {
value: item.id,
text: item.name,
})
);
});
},
});
});
$("#kecamatan").change(function () {
var kecamatan = $("#kecamatan").val();
$.ajax({
type: "GET",
url: `http://www.emsifa.com/api-wilayah-indonesia/api/villages/${kecamatan}.json`,
// crossDomain: true,
cache: false,
success: function (msg) {
$("#kelurahan")
.empty()
.append(
$("<option>", {
value: 0,
text: "Pilih Kelurahan",
})
);
$.each(msg, function (i, item) {
$("#kelurahan").append(
$("<option>", {
value: item.id,
text: item.name,
})
);
});
},
});
});
});
</script>
</body>
</html>
view raw tugas 2.html hosted with ❤ by GitHub


2. Source Code list-siswa.php, form-daftar.php, form-edit.php, header.php, navbar.php, proses-edit.php, dan proses-pendaftaran.php style.css
<?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
<?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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Pendaftaran Siswa Baru</title>
</head>
<body>
<?php include('navbar.php'); ?>
<div class="container mt-4 mb-4">
<div class="row justify-content-center">
<form class="col-4" action="proses-pendaftaran.php" method="POST" enctype="multipart/form-data">
<fieldset>
<div class="row mt-3">
<label for="nama" class="form-label">Nama: </label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" required />
</div>
<div class="row mt-3">
<label for="alamat" class="form-label">Alamat: </label>
<textarea name="alamat" class="form-control" required></textarea>
</div>
<div class="row mt-3">
<label for="jenis_kelamin" class="form-label">Jenis Kelamin: </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="laki-laki" value="laki-laki">
<label class="form-check-label" for="laki-laki">
Laki-laki
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="perempuan" value="perempuan">
<label class="form-check-label" for="perempuan">
Perempuan
</label>
</div>
</div>
<div class="row mt-3">
<label for="agama" class="form-label">Agama: </label>
<select name="agama" class="form-select" aria-label="Default select example" required>
<option selected>Agama</option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Konghucu">Konghucu</option>
</select>
</div>
<div class="row mt-3">
<label for="sekolah_asal" class="form-label">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="Nama Sekolah" class="form-control" required />
</div>
<div class="row mt-3">
<label for="sekolah_asal" class="form-label">Sekolah Asal: </label>
<input type="file" name="foto" placeholder="Foto" class="form-control" required />
</div>
<div class="row mt-3">
<button class="btn btn-info" type="submit" name="daftar">Daftar</button>
</div>
</fieldset>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
view raw form-daftar.php hosted with ❤ by GitHub
<?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 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Formulir Edit Siswa</title>
</head>
<body>
<?php include('navbar.php'); ?>
<div class="container mt-4 mb-4">
<div class="row justify-content-center">
<form class="col-6" action="proses-edit.php" method="POST">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<div class="row mt-3">
<label for="nama" class="form-label">Nama: </label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" value="<?php echo $siswa['nama'] ?>" required />
</div>
<div class="row mt-3">
<label for="alamat" class="form-label">Alamat: </label>
<textarea name="alamat" class="form-control" required><?php echo $siswa['alamat'] ?></textarea>
</div>
<div class="row mt-3">
<label for="jenis_kelamin" class="form-label">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="laki-laki" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>>
<label class="form-check-label" for="laki-laki">
Laki-laki
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="perempuan" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>>
<label class="form-check-label" for="perempuan">
Perempuan
</label>
</div>
</div>
<div class="row mt-3">
<label for="agama" class="form-label">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama" class="form-select" aria-label="Default select example" required>
<option selected>Agama</option>
<option value="Islam" <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
<option value="Kristen" <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
<option value="Katolik" <?php echo ($agama == 'Katolik') ? "selected": "" ?>>Katolik</option>
<option value="Hindu" <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
<option value="Budha" <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
<option value="Konghucu" <?php echo ($agama == 'Konghucu') ? "selected": "" ?>>Konghucu</option>
</select>
</div>
<div class="row mt-3">
<label for="sekolah_asal" class="form-label">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="Nama Sekolah" class="form-control" value="<?php echo $siswa['sekolah_asal'] ?>" required />
</div>
<div class="row mt-3 d-grid gap-2">
<button class="btn btn-primary" type="submit" name="simpan">Simpan</button>
<button class="btn btn-secondary" type="button" name="simpan" onclick="window.location.href='./list-siswa.php'">Batal</button>
</div>
</fieldset>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
view raw form-edit.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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Pendaftaran Siswa Baru</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-daftar.php">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./list-siswa.php">Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses') {
echo "<div class=\"alert alert-success mt-4\" role=\"alert\">";
echo "Pendaftaran siswa baru berhasil!";
echo "</div>";
} else {
echo "<div class=\"alert alert-danger mt-4\" role=\"alert\">";
echo "Pendaftaran gagal";
echo "</div>";
}
?>
</p>
<?php endif; ?>
</div>
<div class="container mt-4">
<p>
<a href="./form-daftar.php"><i class="fa-solid fa-circle-plus text-success"></i> Tambah Baru</a>
</p>
<br>
<table class="table table-striped">
<thead>
<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">Foto</th>
<th scope="col">Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
$i=1;
while($siswa = mysqli_fetch_array($query)) {
echo "<tr>";
echo "<td>".$i++."</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><img src=\"gambar/".$siswa['foto']. "\" width=\"35px\"></td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'><i class=\"fa-solid fa-pen-to-square text-info\"></i></a> ";
echo "<a href='hapus.php?id=".$siswa['id']."' data-bs-toggle=\"modal\" data-bs-target=\"#deleteModal\"><i class=\"fa-solid fa-trash text-danger\"></i></a>";
echo "</td>";
echo "</tr>";
echo "
<!-- Modal -->
<div class=\"modal fade\" id=\"deleteModal\" tabindex=\"-1\" aria-labelledby=\"deleteModalLabel\" aria-hidden=\"true\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<h5 class=\"modal-title\" id=\"deleteModalLabel\">Delete Data</h5>
<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
</div>
<div class=\"modal-body\">
Apakah kamu yakin ingin menghapus data?
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
<a href='hapus.php?id=".$siswa['id']."'><button type=\"button\" class=\"btn btn-danger\">Delete</button></a>
</div>
</div>
</div>
</div>
";
}
?>
</tbody>
</table>
<div class="text-right">Total Records: <span class="badge bg-primary"><?php echo mysqli_num_rows($query) ?> </span></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
view raw list-siswa.php hosted with ❤ by GitHub
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">CCM</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-daftar.php">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./list-siswa.php">Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
view raw navbar.php hosted with ❤ by GitHub
<?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'];
$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'];
$rand = rand();
$ekstensi = array('png','jpg','jpeg','gif');
$filename = $_FILES['foto']['name'];
$ukuran = $_FILES['foto']['size'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!in_array($ext,$ekstensi) ) {
header("location:index.php?alert=gagal_ekstensi");
}else{
if($ukuran < 1044070){
$xx = $rand.'_'.$filename;
move_uploaded_file($_FILES['foto']['tmp_name'], 'gambar/'.$rand.'_'.$filename);
// buat query
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal, foto) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah','$xx')";
$query = mysqli_query($db, $sql);
// apakah query simpan berhasil?
if ( $query ) {
// kalau berhasil alihkan ke halaman index.php dengan status=sukses
header('Location: list-siswa.php?status=sukses');
} else {
// kalau gagal alihkan ke halaman indek.php dengan status=gagal
header('Location: list-siswa.php?status=gagal');
}
}else{
header("location:index.php?alert=gagal_ukuran");
}
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-pendaftaran.php hosted with ❤ by GitHub
@import url("https://fonts.googleapis.com/css2?family=Oxygen&family=Source+Code+Pro&display=swap");
body {
font-family: "Oxygen", sans-serif;
background-color: snow;
}
header {
font-family: "Source Code Pro", monospace;
}
a {
text-decoration: none;
}
h2 {
font-weight: 600;
}
view raw style.css hosted with ❤ by GitHub

Dan berikut adalah hasil tampilannya



Comments

Post a Comment

Popular Posts