Nama: Ayu Mutiara Sari
NRP: 05111740000149
Kelas: PWEB C
1. index.php
2. form-daftar.php
3.form-edit.php
4. list-siswa.php
NRP: 05111740000149
Kelas: PWEB C
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
h1{
text-align: center;
color: MediumSeaGreen;
}
h3{
text-align: center;
color: MediumSeaGreen;
}
h4{
text-align: center;
color: grey;
}
</style>
<script>
function listsiswa() {
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("awal").innerHTML = this.responseText;
}
};
xhttp.open("GET", "list-siswa.php", true);
xhttp.send();
}
function daftar() {
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("awal").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);
listsiswa();
}
};
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>
<p align="center" ><button type="button" onclick="listsiswa()">List Siswa</button></p>
<p align="center" ><button type="button" onclick="daftar()">Pendaftaran Siswa</button> </p>
<div id="awal"></div>
</body>
</html>
2. form-daftar.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
<style type="text/css">
h1{
text-align: center;
color: MediumSeaGreen;
}
h3{
text-align: center;
color: MediumSeaGreen;
}
h4{
text-align: center;
color: grey;
}
</style>
function insert() {
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var jenis_kelamin;
if(document.getElementById("jk_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');
listsiswa();
}
};
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="jk_l" value="laki-laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" id="jk_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>Katolik</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="insert()" />
</p>
</fieldset>
</form>
</body>
</html>
3.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>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>Formulir Edit Siswa | SMK Coding</title>
<style type="text/css">
h1{
text-align: center;
color: MediumSeaGreen;
}
h3{
text-align: center;
color: MediumSeaGreen;
}
h4{
text-align: center;
color: grey;
}
</style>
<script type="text/javascript">
function edit(){
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var jenis_kelamin;
if(document.getElementById("jk_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.');
listsiswa();
}
};
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="jk_l" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" id="jk_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 == 'Katolik') ? "selected": "" ?>>Katolik</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>
4. 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="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
h1{
text-align: center;
color: MediumSeaGreen;
}
h3{
text-align: center;
color: MediumSeaGreen;
}
h4{
text-align: center;
color: grey;
}
</style>
</head>
<body>
<header>
<h3>Siswa yang sudah mendaftar</h3>
</header>
<br>
<table class="table">
<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="awal"></div>
</body>
</html>
0 komentar:
Posting Komentar