AJAX CRUD Application
Tugas Pemrograman Web C
Membuat AJAX CRUD Application Dengan PHO & MySQL
Kali ini saya akan membahas tentang pembuatan AJAX CRUD Application atau biasa disebut create, read, update, dan delete. Disini saya mengaplikasikannya sebagai form pendaftaran mahasiswa baru.
Berikut source code dan tampilan akhirnya :
1. Source Code index.html
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Mahasiswa Baru ITS 2018</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="styles.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function ajax(operation, id){
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
if(operation == undefined){
operation = '';
id = '';
}else if(operation == 'create'){
id == '';
}
if(fname == ''){
fname = '';
}
if(lname == ''){
lname = '';
}
if(email == ''){
email = '';
}
if(gender == ''){
gender = '';
}
if(age == ''){
age = '';
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var result = document.getElementById('result');
result.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);
xmlhttp.send();
}
function ajax_edit(operation, id){
if(operation == 'edit'){
}else if(operation == 'update'){
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var edit = document.getElementById('edit');
edit.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);
xmlhttp.send();
}
</script>
<body onload="ajax();">
<div class="container">
<div class="row" id="edit">
<form class="form-horizontal col-md-6 col-md-offset-3">
<header>
<h2 align ="center">Pendaftaran Mahasiswa Baru ITS 2018</h2><br><br>
</header>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Nama Depan</label>
<div class="col-sm-10">
<input type="text" id="fname" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Nama Belakang</label>
<div class="col-sm-10">
<input type="text" id="lname" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" id="email" class="form-control" placeholder="E-Mail" />
</div>
</div>
<div class="form-group" class="radio">
<label for="input1" class="col-sm-2 control-label">Jenis Kelamin</label>
<div class="col-sm-10">
<label>
<input type="radio" id="gender" value="L"> L
</label>
<label>
<input type="radio" id="gender" value="P"> P
</label>
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Umur</label>
<div class="col-sm-10">
<select id="age" class="form-control">
<option value="">Pilih Umurmu</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</div>
</div>
<!-- <a class="btn btn-primary" onclick="ajax();" >Get View Data</a> -->
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" onclick="ajax('create'); return false;"/>
</form>
</div>
<div class="row">
<table class="table ">
<thead>
<tr>
<th>ID</th>
<th>Nama Lengkap</th>
<th>E-Mail</th>
<th>Umur</th>
<th>Jenis Kelamin</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</div>
</body>
</html>
2. Source Code ajax.php
<?php
require_once('connect.php');
if($_REQUEST['operation'] != ''){
if($_REQUEST['operation'] == 'create'){
$fname = $_REQUEST['fname'];
$lname = $_REQUEST['lname'];
$email = $_REQUEST['email'];
$gender = $_REQUEST['gender'];
$age = $_REQUEST['age'];
$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";
$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));
}
if($_REQUEST['operation'] == 'delete'){
$id = $_REQUEST['id'];
$DelSql = "DELETE FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $DelSql);
}
}
$ReadSql = "SELECT * FROM `crud`";
$res = mysqli_query($connection, $ReadSql);
?>
<tbody>
<?php
while($r = mysqli_fetch_assoc($res)){
?>
<tr>
<th scope="row"><?php echo $r['id']; ?></th>
<td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td>
<td><?php echo $r['email_id']; ?></td>
<td><?php echo $r['gender']; ?></td>
<td><?php echo $r['age']; ?></td>
<td>
<a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete File</h4>
</div>
<div class="modal-body">
<p>Apa kamu yakin?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Ya</button></a>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php } ?>
</tbody>
3. Source Code edit.php
<?php
require_once('connect.php');
//if($_REQUEST['operation'] == 'edit'){
$id = $_REQUEST['id'];
$SelSql = "SELECT * FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $SelSql);
$r = mysqli_fetch_assoc($res);
if($_REQUEST['operation'] == 'update'){
$id = $_REQUEST['id'];
$fname = mysql_real_escape_string($_REQUEST['fname']);
$lname = mysql_real_escape_string($_REQUEST['lname']);
$email = mysql_real_escape_string($_REQUEST['email']);
$gender = $_REQUEST['gender'];
$age = $_REQUEST['age'];
$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";
$res = mysqli_query($connection, $UpdateSql);
}
?>
<form method="post" class="form-horizontal col-md-6 col-md-offset-3">
<h2>Update Your Data</h2>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Nama Depan</label>
<div class="col-sm-10">
<input type="text" id="fname" class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Nama Belakang</label>
<div class="col-sm-10">
<input type="text" id="lname" class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" id="email" class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
</div>
</div>
<div class="form-group" class="radio">
<label for="input1" class="col-sm-2 control-label">Jenis Kelamin</label>
<div class="col-sm-10">
<label>
<input type="radio" id="gender" value="L" <?php if($r['gender'] == 'L'){ echo "checked";} ?>> L
</label>
<label>
<input type="radio" id="gender" value="P" <?php if($r['gender'] == 'P'){ echo "checked";} ?>> P
</label>
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Umur</label>
<div class="col-sm-10">
<select id="age" class="form-control">
<option>Pilih Umurmu</option>
<option value="17" <?php if($r['age'] == '17'){ echo "selected";} ?> >17</option>
<option value="18" <?php if($r['age'] == '18'){ echo "selected";} ?> >18</option>
<option value="19" <?php if($r['age'] == '19'){ echo "selected";} ?> >19</option>
<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option>
<option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option>
<option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"/>
</form>
4. Source Code connect.php
<?php
$connection = mysqli_connect('localhost', 'root', '');
if (!$connection){
die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'project');
if (!$select_db){
die("Database Selection Failed" . mysqli_error($connection));
}
?>
5. Hasil Akhir
Sebelumnya jangan lupa untuk membuat database terlebih dahulu, disini saya membuat database dengan nama project dan kemudian saya membuat tabel di dalam database dengan nama crud, yang terdiri dari 6 kolom yaitu id, first_name, last_name, email_id, gender, dan age. Jadinya akan seperti di bawah ini :
Sekian, semoga bermanfaat.
Komentar
Posting Komentar