Dalam tutorial ini, kami membuat sistem
komentar dasar yang terdiri dari formulir dengan dua bidang input: nama dan
komentar. Seorang pengguna dapat menambahkan komentar pada halaman tanpa
halaman reload (menggunakan Ajax) dan komentar ini disimpan dalam tabel
komentar dalam database.
Semua komentar dalam database
ditampilkan pada halaman dan pengguna dapat menghapus komentar hanya dengan
melayang di atasnya dan mengklik tombol hapus yang muncul di komentar dan Ini
juga menghapus komentar tanpa memuat
ulang halaman juga.
Aplikasi ini hanya membutuhkan
satu tabel basis data. Langsung saja ke tutorial
1.instal XAMPP dan jalankan
2.Buat data base di localhost/phpmyadmin
3.Buat nama data base (ajax_crud) ikuti
isi tabel
*id – int(11)
*name – Varchar(255)
*comment – text
4.Buat index.php untuk memnuat displays
comments
5.Buat server.php untuk koneksi dari php
dan database
6.Download jQuery di https://jquery.com/
7.Buat scripst.js untuk impementasi ajak
dan jQuery
8.Buat styles.css untuk membuat tampilan
9.Semua itu index.php, server.php, scripst.js,
styles.css (itu semua dijadikan 1 folser di C:\xampp\htdocs)
Jika siap buka sublime atau terserah
maka akan seperti ini
Klik index.php dan copy code di bawah
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insert and Retrieve data from MySQL database with
ajax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<?php echo $comments; ?>
<form
class="comment_form">
<div>
<label for="name">Name:</label>
<input
type="text" name="name" id="name">
</div>
<div>
<label
for="comment">Comment:</label>
<textarea
name="comment" id="comment" cols="30"
rows="5"></textarea>
</div>
<button type="button"
id="submit_btn">POST</button>
<button type="button" id="update_btn"
style="display: none;">UPDATE</button>
</form>
</div>
</body>
</html>
<!-- Add JQuery -->
<script
src="jquery.min.js"></script>
<script
src="scripts.js"></script>
Buka server dan copy code di bawah
<?php
$conn = mysqli_connect('localhost', 'root', '', 'ajax_crud');
if (!$conn) {
die('Connection failed ' . mysqli_error($conn));
}
if (isset($_POST['save'])) {
$name = $_POST['name'];
$comment = $_POST['comment'];
$sql = "INSERT INTO comments (name, comment) VALUES ('{$name}',
'{$comment}')";
if (mysqli_query($conn, $sql)) {
$id = mysqli_insert_id($conn);
$saved_comment = '<div class="comment_box">
<span class="delete" data-id="' . $id . '"
>delete</span>
<span class="edit" data-id="' . $id .
'">edit</span>
<div class="display_name">'. $name .'</div>
<div class="comment_text">'. $comment .'</div>
</div>';
echo $saved_comment;
}else {
echo "Error: ". mysqli_error($conn);
}
exit();
}
// delete comment fromd database
if (isset($_GET['delete'])) {
$id = $_GET['id'];
$sql = "DELETE FROM comments WHERE id=" . $id;
mysqli_query($conn, $sql);
exit();
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$comment = $_POST['comment'];
$sql = "UPDATE comments SET name='{$name}', comment='{$comment}'
WHERE id=".$id;
if (mysqli_query($conn, $sql)) {
$id = mysqli_insert_id($conn);
$saved_comment = '<div class="comment_box">
<span class="delete" data-id="' . $id . '"
>delete</span>
<span class="edit" data-id="' . $id .
'">edit</span>
<div class="display_name">'. $name .'</div>
<div class="comment_text">'. $comment .'</div>
</div>';
echo $saved_comment;
}else {
echo "Error: ". mysqli_error($conn);
}
exit();
}
// Retrieve comments from database
$sql = "SELECT * FROM comments";
$result = mysqli_query($conn, $sql);
$comments = '<div id="display_area">';
while ($row = mysqli_fetch_array($result)) {
$comments .= '<div class="comment_box">
<span class="delete" data-id="' . $row['id'] . '"
>delete</span>
<span class="edit" data-id="' . $row['id'] .
'">edit</span>
<div class="display_name">'. $row['name'] .'</div>
<div class="comment_text">'. $row['comment']
.'</div>
</div>';
}
$comments .= '</div>';
?>
Buka scripts dan copy code dibawah
$(document).ready(function(){
// save comment to database
$(document).on('click', '#submit_btn', function(){
var name = $('#name').val();
var comment = $('#comment').val();
$.ajax({
url: 'server.php',
type: 'POST',
data: {
'save': 1,
'name': name,
'comment': comment,
},
success: function(response){
$('#name').val('');
$('#comment').val('');
$('#display_area').append(response);
}
});
});
// delete from database
$(document).on('click', '.delete', function(){
var id = $(this).data('id');
$clicked_btn = $(this);
$.ajax({
url: 'server.php',
type: 'GET',
data: {
'delete': 1,
'id': id,
},
success: function(response){
// remove the deleted comment
$clicked_btn.parent().remove();
$('#name').val('');
$('#comment').val('');
}
});
});
var edit_id;
var $edit_comment;
$(document).on('click', '.edit', function(){
edit_id = $(this).data('id');
$edit_comment = $(this).parent();
// grab the comment to be editted
var name = $(this).siblings('.display_name').text();
var comment = $(this).siblings('.comment_text').text();
// place comment in form
$('#name').val(name);
$('#comment').val(comment);
$('#submit_btn').hide();
$('#update_btn').show();
});
$(document).on('click', '#update_btn', function(){
var id = edit_id;
var name = $('#name').val();
var comment = $('#comment').val();
$.ajax({
url: 'server.php',
type: 'POST',
data: {
'update': 1,
'id': id,
'name': name,
'comment': comment,
},
success: function(response){
$('#name').val('');
$('#comment').val('');
$('#submit_btn').show();
$('#update_btn').hide();
$edit_comment.replaceWith(response);
}
});
});
});
Buka styles dan copycode di bawah
.wrapper {
width: 45%;
height: auto;
margin: 10px auto;
border: 1px solid #cbcbcb;
background: white;
}
/*
* COMMENT FORM
**/
.comment_form {
width: 80%;
margin: 100px auto;
border: 1px solid green;
background: #fafcfc;
padding: 20px;
}
.comment_form label {
display: block;
margin: 5px 0px 5px 0px;
}
.comment_form input, textarea {
padding: 5px;
width: 95%;
}
#submit_btn, #update_btn {
padding: 8px 15px;
color: white;
background: #339;
border: none;
border-radius: 4px;
margin-top: 10px;
}
#update_btn {
background: #1c7600;
}
/*
* COMMENT DISPLAY AREA
**/
#display_area {
width: 90%;
padding-top: 15px;
margin: 10px auto;
}
.comment_box {
cursor: default;
margin: 5px;
border: 1px solid #cbcbcb;
padding: 5px 10px;
position: relative;
}
.delete {
position: absolute;
top: 0px;
right: 3px;
color: red;
display: none;
cursor: pointer;
}
.edit {
position: absolute;
top: 0px;
right: 45px;
color: green;
display: none;
cursor: pointer;
}
.comment_box:hover .edit,
.comment_box:hover .delete {
display: block;
}
.comment_text {
text-align: justify;
}
.display_name {
color: blue;
padding: 0px;
margin: 0px 0px 5px 0px;
}
Maka akan seperti ini
Untuk C
(Create): yang berarti membuat sebuah data baru
R (Read): Membaca atau menampilkan suatu data
yang tadinya berada didatabase
U (Update): merubah atau edit data yang sudah
di Read
D (Delete):hapus data
untuk lengkap nya bisa download di sini https://drive.google.com/drive/u/0/my-drive
