Tugas 9 PWeb
Muh. Shafwatallah Wahid
2. index.php
3. form-daftar.php
4. proses-pendaftaran.php
5. form-edit.php
6. proses-edit.php
7. hapus.php
8. proses-hapus.php
9. list-siswa.php
05111740007002
1. config.php
<?php
$server = "localhost";
$user = "root";
$password = "";
$nama_database = "tugas_ajax";
$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>
<link rel="stylesheet" type="text/css" href="siswa.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script>
function loadsiswa() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("tampil").innerHTML = this.responseText;
}
};
xhttp.open("GET", "list-siswa.php", true);
xhttp.send();
}
function daftarsiswa() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("tampil").innerHTML = this.responseText;
}
};
xhttp.open("GET", "form-daftar.php", true);
xhttp.send();
}
function hapus(id) {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
loadsiswa();
}
};
xhttp.open("GET", "hapus.php?id=" + id, true);
xhttp.send();
}
</script>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
</head>
<body >
<header>
<h3>Pendaftaran Siswa Baru</h3>
<h1>SMK Coding</h1>
</header>
<button type="button" onclick="loadsiswa()">List Siswa</button>
<button type="button" onclick="daftarsiswa()">Pendaftaran Siswa</button>
<div id="tampil"></div>
</body>
</html>
3. form-daftar.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="siswa.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
<script type="text/javascript">
function tambah() {
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var jenis_kelamin;
if(document.getElementById("kel_l").checked) {
jenis_kelamin = "laki-laki";
}
else { jenis_kelamin = "perempuan";}
var agama = document.getElementById("agama").value;
var sekolah_asal = document.getElementById("sekolah_asal").value;
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
alert('Pendaftaran berhasil');
loadsiswa();
}
};
xhttp.open("GET", "proses-pendaftaran.php?nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + "sekolah_asal", true);
xhttp.send();
}
</script>
</head>
<body>
<header>
<h3>Formulir Pendaftaran Siswa Baru</h3>
</header>
<form action="proses-pendaftaran.php" method="POST">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" id="nama" 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 type="radio" name="jenis_kelamin" id="jkel_l" value="laki-laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" id="jkel_p" 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 type="text" name="sekolah_asal" id="sekolah_asal" placeholder="nama sekolah" />
</p>
<p>
<input type="submit" value="Daftar" name="daftar" onclick="tambah()" />
</p>
</fieldset>
</form>
</body>
</html>
4. proses-pendaftaran.php
<?php
include("config.php");
if(isset($_POST['daftar'])){
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
$query = mysqli_query($db, $sql);
if( $query ) {
header('Location: index.php');
} else {
echo "Pendaftaran siswa gagal.";
}
} 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 calon_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>
<title>Formulir Edit Siswa | SMK Coding</title>
<link rel="stylesheet" type="text/css" href="siswa.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script type="text/javascript">
function edit(){
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var jenis_kelamin;
if(document.getElementById("jkel_l").checked)
{
jenis_kelamin = "laki-laki";
}
else { jenis_kelamin = "perempuan";}
var agama = document.getElementById("agama").value;
var sekolah_asal = document.getElementById("sekolah_asal").value;
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
alert('Edit Berhasil.');
loadsiswa();
}
};
xhttp.open("GET", "proses-edit.php?id=" + <?php echo $id; ?> + "&nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + "sekolah_asal", true);
xhttp.send();
}
</script>
</head>
<body>
<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'] ?>" />
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" id="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat" id="alamat"><?php echo $siswa['alamat'] ?></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<label><input type="radio" name="jenis_kelamin" id="jkel_l" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" id="jkel_p" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama" id="agama">
<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>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" id="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
<p>
<input type="submit" value="Simpan" name="simpan" onclick="edit()" />
</p>
</fieldset>
</form>
</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 calon_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: list_siswa.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 calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
if( $query ){
echo "Data Mahasiswa berhasil dihapus";
} else {
die("Gagal dihapus.");
}
} else {
die("Akses dilarang!");
}
?>
8. proses-hapus.php
<?php include("config.php"); ?>
<?php
mysqli_query($db, "delete from list_siswa where id = ".$_GET['id']);
?>
9. list-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" type="text/css" href="siswa.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<h3>Siswa yang sudah mendaftar</h3>
</header>
<br>
<table border="1" align="center">
<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 = mysqli_query($db, $sql);
$no = 0;
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
$no++;
echo "<td>".$no."</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=hapus('".$siswa['id']."') value='Hapus'>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p> Total: <?php echo mysqli_num_rows($query) ?></p>
<div id="tampil"></div>
</body>
</html>
Komentar
Posting Komentar