Tugas PWEB C - Menggunakan Bootstrap
Tugas PWEB kali ini yaitu membuat tampilan pendaftaran siswa sebelumnya dengan bootstrap
Nama : Ifta Jihan N
NRP : 05111740000034
Kelas : PWEB C
Membuat database pendaftaran mahasiswa dengan menambahkan AJAX (Asynchronous Javascript and XML).
Terdapat 2 menu yaitu List Mahasiswa dan Pendaftaran Mahasiswa.
Berikut adalah codingannya:
1. 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());
}
?>
2. index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<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>
<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>
</head>
<body style="text-align: center; background: cornsilk">
<header>
<h1>Pendaftaran Mahasiswa Baru</h1>
<h1>Informatika ITS</h1>
</header>
<button type="button" class="btn btn-green" onclick="loadsiswa()">List Mahasiswa</button>
<button type="button" class="btn btn-green" onclick="daftarsiswa()">Pendaftaran Mahasiswa</button>
<div id="tampil">
</div>
</body>
</html>
3. form-daftar.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Formulir Pendaftaran Mahasiswa Baru | Informatika ITS</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>
<div class="container">
<header>
<h3>Formulir Pendaftaran Mahasiswa Baru</h3>
</header>
<form action="proses-pendaftaran.php" method="POST" class="well form-horizontal" id="contact_form">
<fieldset>
<div class="form-group">
<label for="nama" class="col-md-4 control-label">Nama:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="nama" id="nama" placeholder="Nama Lengkap" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<label for="alamat" class="col-md-4 control-label">Alamat:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<textarea name="alamat" id="alamat" placeholder="Alamat" class="form-control"></textarea>
</div>
</div>
</div>
<div class="form-group">
<label for="jenis_kelamin" class="col-md-4 control-label">Jenis Kelamin: </label>
<div class="col-md-4">
<div class="radio">
<label><input type="radio" name="jenis_kelamin" value="laki-laki" id="kel_l" > Laki-laki</label>
<br>
<label><input type="radio" name="jenis_kelamin" value="perempuan" id="kel_p" > Perempuan</label>
</div>
</div>
</div>
<div class="form-group">
<label for="agama" class="col-md-4 control-label">Agama: </label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="agama" class="form-control selectpicker" id="agama" >
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sekolah_asal" class="col-md-4 control-label">Sekolah Asal: </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education"></i></span>
<input type="text" name="sekolah_asal" placeholder="Nama Sekolah" id="sekolah_asal" class="form-control" /> </div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-success" name="daftar" onclick="tambah()">Daftar
<span class="glyphicon glyphicon-send"></span>
</button>
<!-- <input type="submit" value="Daftar" name="daftar" onclick="tambah()" /> -->
</div>
</div>
</fieldset>
</form>
</div>
</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);
if( mysqli_num_rows($query) < 1 ){
die("data tidak ditemukan...");
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Formulir Edit Mahasiswa | Informatika ITS</title>
<script type="text/javascript">
function edit(){
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('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 style="background:cornsilk">
<div class="container">
<header>
<h3>Formulir Edit Mahasiswa</h3>
</header>
<form action="proses-edit.php" method="POST" class="well form-horizontal">
<fieldset>
<div class="form-group">
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<label for="nama" class="col-md-4 control-label">Nama: </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="nama" id="nama" placeholder="Nama Lengkap" class="form-control" value="<?php echo $siswa['nama'] ?>" />
</div>
</div>
</div>
<div class="form-group">
<label for="alamat" class="col-md-4 control-label">Alamat: </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<textarea name="alamat" id="alamat" placeholder="Alamat" class="form-control"><?php echo $siswa['alamat'] ?></textarea>
</div>
</div>
</div>
<div class="form-group">
<label for="jenis_kelamin" class="col-md-4 control-label">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<div class="col-md-4">
<div class="radio">
<label><input type="radio" name="jenis_kelamin" value="laki-laki" id="kel_l" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<br>
<label><input type="radio" name="jenis_kelamin" value="perempuan" id="kel_p" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</div>
</div>
</div>
<div class="form-group">
<label for="agama" class="col-md-4 control-label">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select id="agama" name="agama" class="form-control selectpicker">
<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>
</div>
</div>
</div>
<div class="form-group">
<label for="sekolah_asal" class="col-md-4 control-label">Sekolah Asal: </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education"></i></span>
<input type="text" id="sekolah_asal" name="sekolah_asal" placeholder="nama sekolah" class="form-control" value="<?php echo $siswa['sekolah_asal'] ?>" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-info" value="Simpan" name="simpan" onclick="edit()" >Simpan
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
5. list-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Pendaftaran Mahasiswa Baru | Informatika ITS</title>
</head>
<body>
<header>
<h3>Mahasiswa yang sudah mendaftar</h3>
</header>
<br>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<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>".$siswa['id']."</td>";
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 "<a href='form-edit.php?id=".$siswa['id']."' class='btn btn-info'>Edit</a> | ";
echo "<input type='button' class='btn btn-danger' onclick=hapus('".$siswa['id']."') value='Hapus'>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
<div id="tampil"></div>
</body>
</html>
6. 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"; //list-siswa atau index ?
}
else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
?>
7. 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_asal = $_POST['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 "Edit berhasil";
header('Location: index.html');
} else {
die("Gagal menyimpan perubahan...");
}
}
else {
die("Akses dilarang...");
}
?>
8. 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_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.html');
}
else {
echo "Pendaftaran mahasiswa Gagal";
}
}
else {
die("Akses dilarang...");
}
?>
9. css.css
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
@import url('https://fonts.googleapis.com/css?family=Hind+Siliguri');
body {
background-color: ghostwhite;
margin: auto;
}
* {
font-family: 'PT Serif', serif;
}
h1, h3{
text-align: center;
color: darkslateblue;
text-shadow: 1px 1px 0px #DCDCDC;
margin: 50px 0px 0px 0px;
font-family: 'Hind Siliguri', sans-serif;
}
a:link {
text-decoration: none;
}
.well {
background-color: white !important;
}
.btn-green {
background-color: darkcyan; color: white;
}
.btn-green:hover{
background-color: teal;
}
.btn-blue {
background-color: powderblue; color: black;
}
.btn-blue:hover {
background-color: skyblue;
}
/*table {
border: 1px solid #ccc;
border-collapse: collapse;
width: 100%;
}*/
/*table tr {
border: 1px solid #ddd;
padding: .35em;
}
table tr:nth-child(even) {
background: #f8f8f8;
}
table th, table td {
padding: .625em;
text-align: left;
}
table th {
background: #999;
color: #fff;
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
*/
Berikut hasilnya:
Tampilan list mahasiswa
Tampilan form edit mahasiswa
Tampilan pendaftaran mahasiswa
Comments
Post a Comment