TUGAS 9 BOOSTRAP
Nama : Kevin Ashil Faadilah
NRP : 05111740000178
Kelas : Pemrograman Web C
Source code :
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());
}
?>
form-pendaftaran.php
<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Siswa Baru | SMA BudiKarya</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>
</head>
<body>
<center>
<header>
<h3>Formulir Pendaftaran Siswa Baru</h3>
</header>
</center>
<form action="proses-pendaftaran.php" method="POST" onSubmit="validasi()">
<div class="daftar">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="Nama Lengkap" id="nama" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat" id="alamat"></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<br>
<label><input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki</label>
<br>
<label><input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<select name="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" placeholder="Nama Sekolah" id="sekolah"/>
</p>
<p>
<input class="tombol" type="submit" value="Daftar" name="daftar" />
<a href="index.php" class="back">Kembali</a>
</p>
</fieldset>
</div>
</form>
<script type="text/javascript">
</script>
</body>
</html>
form-pendaftaran-css.css
body {
/*width: 100%;*/
font-family: sans-serif;
background: #e9eaef;
}
input[type="text"],
textarea {
padding: 8px;
width: 95%;
background: #fff;
border: 0;
font-size: 10pt;
margin: 6px 0px;
border-radius: 3px;
}
select{
padding: 8px;
width: 95%;
background: #e9eaef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
label {
font-size: 10pt;
color: black;
}
.daftar {
padding: 1em;
margin: 2em auto;
width: 20em;
background: #7bbcb6;
font-weight: bolder;
border-radius: 10px;
}
.tombol {
transition-duration: 0.4s;
background: #e9eaef;
color: black;
font-size: 14px;
font-weight: bold;
border: 0;
padding: 5px 8px;
border-radius: 3px;
}
.tombol:hover {
background-color: #e3dac9;
color: #fff;
}
.back {
background-color: #e9eaef;
color: black;
font-size: 14px;
text-decoration: none;
margin-left: 5px;
padding: 5px 8px;
border-radius: 3px;
}
<?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...");
}
?>
form-edit.php
<!DOCTYPE html>
<html>
<head>
<title>Formulir Edit Siswa | SMA BudiKarya</title>
<link rel="stylesheet" type="text/css" href="form-edit_sty.css">
</head>
<body>
<center>
<header>
<h2 style="font-weight: bolder">Formulir Edit Siswa</h2>
</header>
</center>
<form target="_blank" action="proses-edit.php" method="POST" onSubmit="index.php">
<div class="edit">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<p>
<label for="nama">Nama: </label>
<input id="nama" type="text" 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 type="radio" name="jenis_kelamin" value="Laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="Perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="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 id="sekolah" type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
<p>
<input class="tombol" type="submit" value="Simpan" name="simpan"/>
<a href="index.php" class="back">Kembali</a>
</p>
</fieldset>
</div>
</form>
<script type="text/javascript">
function validasi()
{
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var sekolah = document.getElementById("sekolah").value;
if (nama != "" && alamat !="" && sekolah !="") {
return true;
}else{
alert('Anda harus mengisi data dengan lengkap !');
}
}
</script>
</body>
</html>
form-edit-css.css
body {
font-family: sans-serif;
background: #fff;
}
input[type="text"],
textarea {
padding: 8px;
width: 95%;
background: #fff;
border: 0;
font-size: 10pt;
margin: 6px 0px;
border-radius: 3px;
}
select{
padding: 8px;
width: 95%;
background: #fff;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
label {
font-size: 10pt;
color: black;
}
.edit {
padding: 1em;
margin: 2em auto;
width: 20em;
background: #fff;
font-weight: bolder;
border-radius: 10px;
}
.tombol {
transition-duration: 0.4s;
background: #fff;
color: black;
font-size: 14px;
font-weight: bold;
border: 0;
padding: 5px 8px;
border-radius: 3px;
}
.tombol:hover {
background-color: #e3dac9;
color: #fff;
}
.back {
background-color: #fff;
color: black;
font-size: 14px;
text-decoration: none;
margin-left: 5px;
padding: 5px 8px;
border-radius: 3px;
}
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 ){
header('Location: index.php');
} else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
?>
index.php
<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Siswa Baru | SMA BudiKarya</title>
<link rel="stylesheet" type="text/css" href="index_sty.css">
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<center class="header">
<header>
<img id="logo1" src="logo1.png">
<img id="logo2" src="logo2.png">
<h2>Pendaftaran Siswa Baru</h2>
<h1>SMA BudiKarya</h1>
</header>
</center>
<div class="menu">
<h3>Menu</h3>
<p><a onclick="daftar()">Daftar Baru</a></p>
<p><a onclick="tampil()">Pendaftar</a></p>
<div id="demo">
</div>
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses'){
echo "Pendaftaran siswa baru berhasil!";
} else {
echo "Pendaftaran gagal!";
}
?>
</p>
<?php endif; ?>
</body>
</html>
index-style.css
body {
font-family: sans-serif;
background: #fff;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
#logo1 {
float: left;
padding: 5px 5px 5px 5px;
height: 80px;
background-color: #fff;
border-radius: 10px;
/*border : 2px solid #fff;*/
}
#logo2 {
float: right;
padding: 5px 5px 5px 5px;
height: 80px;
background-color: #fff;
border-radius: 10px;
/*border : 2px solid #fff;*/
}
.header {
background: #98e4d9;
padding: 10px 10px 10px 10px;
border-radius: 10px;
}
.menu {
/*width: 100%;*/
margin-top: 10px;
background: #98e4d9;
padding: 10px 10px 10px 10px;
border-radius: 10px;
}
list-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMA BudiKarya</title>
<link rel="stylesheet" type="text/css" href="list-siswa_sty.css">
</head>
<body>
<center>
<header>
<h2>Siswa yang Sudah Mendaftar</h2>
</header>
</center>
<div>
<a onclick="daftar()">[+] Tambah Baru</a>
</div>
<br>
<select>
<option onclick="tampil()">Semua</option>
<option onclick="laki()">Laki-laki</option>
<option onclick="perempuan()">Perempuan</option>
</select>
<table>
<thead>
<tr style="background-color: #7bbcb6">
<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);
$nomor=0;
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
$nomor++;
echo "<td>".$nomor."</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 "<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>
<br>
<a href="index.php" class="back">Kembali</a>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
</body>
</html>
list-siswa-style.css
body {
font-family: sans-serif;
background: #fff;
}
h2 {
font-weight: bolder;
}
a {
color: #fff;
text-decoration: none;
}
a:hover
{
color:#0060B6;
text-decoration:none;
cursor:pointer;
}
table {
/*border-radius: 10px;*/
font-style: sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #a8bdbf;
}
select{
padding: 8px;
width: 10%;
background: #7bbcb6;
border: 0;
font-size: 10pt;
margin: 6px 0px;
border-radius: 5px;
}
proses-edit.php
<?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: index.php');
} else {
// kalau gagal tampilkan pesan
die("Gagal menyimpan perubahan...");
}
} else {
die("Akses dilarang...");
}
?>
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 calon_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...");
}
?>
ajax.js
function tampil() {
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 validasi()
{
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var sekolah = document.getElementById("sekolah").value;
if (nama != "" && alamat != "" && sekolah != "") {
return true;
}else{
alert('Anda harus mengisi data dengan lengkap !');
}
}
function laki() {
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-l.php", true);
xhttp.send();
}
function perempuan() {
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-p.php", true);
xhttp.send();
}
<gambar menyusul>
Sekian dan Terima Kasih
Komentar
Posting Komentar