Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
Database Table
CREATE TABLE `msg` (
`id` int(11) NOT NULL,
`name` text NOT NULL,
`msg` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
//index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>PHP Mysql Comment Jquery Ajax</title>
</head>
<body>
<div class="container mt-5">
<div class="d-flex justify-content-center row">
<div class="col-md-8">
<div class="d-flex flex-column comment-section">
<div class="bg-white p-2">
<div class="d-flex flex-row user-info"><img class="rounded-circle" src="https://i.imgur.com/RpzrMR2.jpg" width="40">
<div class="d-flex flex-column justify-content-start ml-2"><span class="d-block font-weight-bold name">Marry Andrews</span><span class="date text-black-50">Shared publicly - Jan 2020</span></div>
</div>
<div class="mt-2">
<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="bg-white">
<div class="d-flex flex-row fs-12">
<div class="like p-2 cursor"><i class="fa fa-thumbs-o-up"></i><span class="ml-1">Like</span></div>
<div class="like p-2 cursor"><i class="fa fa-commenting-o"></i><span class="ml-1">Comment</span></div>
<div class="like p-2 cursor"><i class="fa fa-share"></i><span class="ml-1">Share</span></div>
</div>
</div>
<form id="form">
<div class="bg-light p-2">
<div class="d-flex flex-row align-items-start"><img class="rounded-circle" src="https://i.imgur.com/RpzrMR2.jpg" width="40">
<input type="hidden" id="name" placeholder="Enter your name" value="Cairocoders Ednalan" required>
<textarea class="form-control ml-1 shadow-none textarea" id="msg"></textarea>
</div>
<div class="mt-2 text-right">
<button class="btn btn-primary btn-sm shadow-none" type="button" id="btn">Post comment</button>
<button class="btn btn-outline-primary btn-sm ml-1 shadow-none" type="button">Cancel</button>
</div>
</div>
</form>
<hr>
<div class="content" id="content"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
function loadData(){
$.ajax({
url: 'select-data.php',
type: 'POST',
success: function(data){
$("#content").html(data);
}
});
}
loadData();
$("#btn").on("click", function(e){
e.preventDefault();
var name = $("#name").val();
var msg = $("#msg").val();
$.ajax({
url: 'insert-data.php',
type: 'POST',
data: {name: name, msg: msg},
success: function(data){
if (data == 1) {
loadData();
alert('Comment Submitted Successfully.');
$("#form").trigger("reset");
}else {
alert("Comment Can't Submit.");
}
}
});
});
});
</script>
</body>
</html>
config.php
//config.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "devdb";
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
echo "Connection Failed.";
}
?>
insert-data.php
//insert-data.php
<?php
include 'config.php';
$name = $_POST['name'];
$msg = $_POST['msg'];
$sql = "INSERT INTO msg (name, msg) VALUES ('$name', '$msg')";
$result = mysqli_query($conn, $sql);
if ($result) {
echo 1;
}else {
echo 0;
}
?>
select-data.php
//select-data.php
<?php
include 'config.php';
$sql = "SELECT * FROM msg ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="card mb-4">
<div class="card-body">
<p><?php echo $row['msg']; ?></p>
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<img src="https://i.imgur.com/RpzrMR2.jpg" alt="avatar" width="25" height="25" />
<p class="small mb-0 ms-2"><?php echo $row['name']; ?></p>
</div>
</div>
</div>
</div>
<?php } } ?>
style.css
//style.css
body{background: #eee}
.date{font-size: 12px}
.comment-text{font-size: 14px}
.fs-12{font-size: 14px}
.shadow-none{box-shadow: none}
.name{color: #007bff}
.cursor:hover{color: blue}
.cursor{cursor: pointer}
.textarea{resize: none}
