Tugas PWeb - Database disertai Penggunaan AJAX
Nama: Donny Fitrado
NRP: 05111740000171
Kelas: Pemrograman Web C
Source code:
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
9. hapus.php
10. css
Kemudian, berikut ini adalah tampilan ketika dijalankan:
NRP: 05111740000171
Kelas: Pemrograman Web C
Source code:
1. config.php
<?php
$db = mysqli_connect('localhost', 'root', '','pendaftaran_siswa');
if(!$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>
2. index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div>
<header>
<h2 align="center">Pendaftaran Siswa Baru</h2>
<h1 align="center">SMA Kr. Cita Hati</h1>
</header>
<h3 align="center">Menu</h3>
<p align="center"><button type="button" onclick="showsiswa()">Student List</button></p>
<p align="center"><button onclick="daftar()">Pendaftaran Siswa</button></p>
</div>
<div id="demo"></div>
</body>
</html>
<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 del(id)
{
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function(){
if(this.readyState==4 && this.status==200)
{
alert(this.responseText);
showsiswa();
}
}
xmlhttp.open("GET","hapus.php?id=" + id, true);
xmlhttp.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 insert(){
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var jenis_kelamin;
if(document.getElementById("jenisL").checked) {
jenis_kelamin = "Laki-laki";
}
else {
jenis_kelamin = "Perempuan";
}
var agama = document.getElementById("agama").value;
var sekolah_asal = document.getElementById("sekolah_asal").value;
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
alert(this.responseText);
if(this.responseText == "Pendaftaran Siswa Berhasil") {
showsiswa();
}
else {
alert('Pendaftaran Siswa Gagal');
}
}
}
xmlhttp.open("GET","proses-pendaftaran.php?nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + sekolah_asal, true);
xmlhttp.send();
}
</script>
3. form-daftar.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<header>
<h3>Formulir Pendaftaran Siswa Baru</h3>
</header>
<form action="proses-pendaftaran.php" >
<fieldset>
<p>
<label for="nama">Nama: </label>
<input name="name" id="nama" type="text" placeholder="nama lengkap" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat" id="alamat"></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<label><input name="jenis_kelamin" id="jenisL" type="radio" value="Pria"> Laki-laki</label>
<label><input name="jenis_kelamin" id="jenisP" type="radio" value="Perempuan"> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<select name="agama" id="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 name="sekolah_asal" id="sekolah_asal" type="text" placeholder="nama sekolah" />
</p>
<p>
<input type="button" value="Daftar" name="daftar" onclick="insert()" />
</p>
</fieldset>
</form>
</body>
</html>
4. form-edit.php
<?php
include("config.php");
if( !isset($_GET['id']) ){
header('Location: list-siswa.php');
}
$id = $_GET['id'];
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<form action="proses-edit.php">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['ID'] ?>" />
<p>
<label for="nama">Nama: </label>
<input type="text" id="nama" name="nama" placeholder="Nama Lengkap" value="<?php echo $siswa['nama'] ?>" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea id="alamat" name="alamat"><?php echo $siswa['alamat'] ?></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<label><input id="jenisL" type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input id="jenisP" type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<input id="agama" type="text" name="agama" placeholder="Agama" value="<?php echo $siswa['agama'] ?>" />
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input id="sekolah_asal" type="text" name="sekolah_asal" placeholder="Sekolah Asal" value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
<p>
<input type="button" value="Simpan" name="simpan"
onclick="update()" />
</p>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript">
function update(){
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var jenis_kelamin;
if(document.getElementById("jenisL").checked){
jenis_kelamin = "Laki-laki";
}
else{
jenis_kelamin = "Perempuan";
}
var agama = document.getElementById("agama").value;
var sekolah_asal = document.getElementById("sekolah_asal").value;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
alert(this.responseText);
if(this.responseText == "Proses Edit Berhasil") {
window.location.replace("index.php");
}
else {
alert('GAGAL');
}
}
}
xmlhttp.open("GET","proses-edit.php?id=" + <?php echo $id;?> + "&nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + sekolah_asal, true);
xmlhttp.send();
}
</script>
5. hapus.php
<?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 ){
echo "Hapus Data Berhasil";
} else {
echo "GAGAL";
}
}
?>
6. list-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<header>
<h3>List Siswa</h3>
</header>
<table border="1px">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Sekolah Asal</th>
<th></th>
</tr>
<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 "<button><a href='form-edit.php?id=".$siswa['ID']."'>Edit</a></button> | ";
echo "<input type='button' onclick=del('".$siswa['ID']."') value='Hapus'>";
echo "</td>";
echo "</tr>";
}
?>
</table>
<p>Total Siswa: <?php echo mysqli_num_rows($query) ?></p>
<div id="demo"></div>
</body>
</html> 7. proses-edit.php
<?php
include("config.php");
$id = $_GET['id'];
$nama = $_GET['nama'];
$alamat = $_GET['alamat'];
$jk = $_GET['jenis_kelamin'];
$agama = $_GET['agama'];
$sekolah_asal = $_GET['sekolah_asal'];
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah_asal' WHERE ID=$id";
$query = mysqli_query($db, $sql);
if( $query ) {
echo "Proses Edit Berhasil";
} else {
die("Gagal menyimpan perubahan...");
}
?>
8. proses-pendaftaran.php
<?php include("config.php");
$nama = $_GET['nama'];
$alamat = $_GET['alamat'];
$jk = $_GET['jenis_kelamin'];
$agama = $_GET['agama'];
$sekolah_asal = $_GET['sekolah_asal'];
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama,sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')";
$query = mysqli_query($db, $sql);
if( $query ) {
echo "Pendaftaran Siswa Berhasil";
} else {
echo "GAGAL";
}
?>
9. hapus.php
<?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 ){
echo "Hapus Data Berhasil";
} else {
echo "GAGAL";
}
}
?>
10. css
th,td{
padding: 15px;
}
table{
text-align: center;
}
body{
background-color: #87CEEB;
}
a:link{
text-decoration: none;
}
Kemudian, berikut ini adalah tampilan ketika dijalankan:
Comments
Post a Comment