Membuat CRUD PHP Menggunakan Ajax Tanpa Reload Halaman
CRUD Menggunakan Ajax - Dalam tutorial ini, kita akan belajar membuat sistem komentar dasar yang terdiri dari formulir dengan dua bidang input: nama dan komentar. Seorang pengguna dapat menambahkan komentar pada halaman tanpa reload halaman (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 mengarahkan kursor dan mengklik tombol 'x' yang muncul pada komentar. Ini menghapus komentar tanpa memuat ulang halaman juga.
Aplikasi ini hanya membutuhkan satu tabel basis data. Dalam hal ini, mari kita membuat komentar tabel .
Jadi, buat database yang disebut db_ajax. Dalam database itu, buat tabel dengan bidang-bidang berikut di dalamnya:
Selanjutnya, kita buat file proyek. Kita akan membuat empat file yaitu:
Sekarang sebelum kita melanjutkan, ada satu file lagi yang perlu kita tambahkan. Ajax adalah teknologi JQuery dan jadi seperti yang sudah Anda tebak, kita akan membutuhkan JQuery. Unduh JQuery dari situs web JQuery dan tambahkan di root aplikasi Anda.
Oke, jadi sekarang dalam aplikasi kita memiliki lima file. Mereka masih kosong.
Sekarang buka file styles.css dan rekatkan kode CSS ini di dalamnya:
Kode di scripst.js di atas seperti yang disebutkan sebelumnya adalah panggilan ajax yang dibuat ke file server.php. Bagian pertama dari skrip mengirimkan permintaan dengan data ke server ketika pengguna mengklik tombol posting. Yang kedua mengirimkan permintaan yang memiliki comment_id untuk mengidentifikasi komentar spesifik dalam database dengan id itu dan menghapusnya.
Untuk kode server, buka server.php dan rekatkan kode berikut di dalamnya:
Ini membawa kita ke akhir tutorial ini.
Terima kasih telah mengikuti posting ini. Saya harap ini membantu Anda. Jika Anda memiliki pertanyaan, taruh saja di bagian komentar di bawah ini.
Nikmati harimu!
Baca Juga
Jadi, buat database yang disebut db_ajax. Dalam database itu, buat tabel dengan bidang-bidang berikut di dalamnya:
- id - int (11)
- name - varchar (255)
- comment_id - text
- index.php digunakan untuk menampilkan komentar dan input komentar.
- server.php berisi kode PHP yang bertanggung jawab untuk berkomunikasi dengan database melalui Query atau dapat disebut sebagai koneksi ke database.
- scripst.js yang merupakan tempat semua kode Ajax dan JQuery ditemukan. Di sinilah panggilan ajax yang dilakukan tanpa reload halaman dilakukan.
- styles.css untuk menampung gaya CSS untuk menambah keindahan pada halaman kita
Sekarang sebelum kita melanjutkan, ada satu file lagi yang perlu kita tambahkan. Ajax adalah teknologi JQuery dan jadi seperti yang sudah Anda tebak, kita akan membutuhkan JQuery. Unduh JQuery dari situs web JQuery dan tambahkan di root aplikasi Anda.
Oke, jadi sekarang dalam aplikasi kita memiliki lima file. Mereka masih kosong.
Mari kita kode sekarang!
Buka file index.php dan tempatkan kode ini di dalamnya:<?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>
Tidak ada yang luar biasa bukan?
Perhatikan bahwa kami telah menyertakan tautan ke styles.css, jquery.min.js (yang telah diunduh), dan file scripts.js kami.Sekarang buka file styles.css dan rekatkan kode CSS ini di dalamnya:
.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;
}
Itu untuk CSS. Sekarang skripnya
Buka scripts.js dan rekatkan kode ini di dalamnya:$(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);
}
}); });
});
Kode di scripst.js di atas seperti yang disebutkan sebelumnya adalah panggilan ajax yang dibuat ke file server.php. Bagian pertama dari skrip mengirimkan permintaan dengan data ke server ketika pengguna mengklik tombol posting. Yang kedua mengirimkan permintaan yang memiliki comment_id untuk mengidentifikasi komentar spesifik dalam database dengan id itu dan menghapusnya.
Untuk kode server, buka server.php dan rekatkan kode berikut di dalamnya:
<?php
$conn = mysqli_connect('localhost', 'root', '', 'db_ajax');
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>';
?>
Ini membawa kita ke akhir tutorial ini.
Terima kasih telah mengikuti posting ini. Saya harap ini membantu Anda. Jika Anda memiliki pertanyaan, taruh saja di bagian komentar di bawah ini.
Nikmati harimu!
ko ga bisa
BalasHapus