Cara Membuat Insert Komentar dengan Ajax jQuery

Untuk kali ini saya akan coba cara membuat insert komentar dengan Ajax jQuery kelebihan ketika kita menggunakan tentunya komentar yang kita ketikan itu akan masuk atau akan di tampilkan langsung, jadi disini saya akan mencobanya tanpa ketika kita insert komentarnya untuk menampilkannya kita harus approve terlebih dahulu tidak ya teman-teman. Oke jadi apa lagi kelebihan yang lain, simak terus ya teman-teman.

Kelebihan lain untuk cara membuat insert komentar dengan Ajax jQuery, adalah disini saya akan membuatnya dengan auto refresh jadi walaupun di ajax sendiri sebenarnya sudah auto refresh tetapi supaya teman-teman lebih paham akan saya beritahu juga disini. Oke langsung saja untuk itu disini silahkan teman-teman buat file dengan nama index.php dimana isini sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			background: #f1f1f1;
		}
		.box{
			width: 500px;
			border: 1px solid #ccc;
			background: #fff;
			border-radius: 5px;
		}
		#load_tweets{
			padding:16px;
			background: #f1f1f1;
			margin-bottom: 30px;
		}
		#load_tweets p{
			padding: 12px;
			border-bottom: 1px dotted #ccc;
		}
	</style>
</head>
<body>
<div class="container box">
	<form name="add_tweet" method="post">
		<h3 align="center">Tweet Page</h3>
		<div class="form-group">
			<textarea name="tweet" id="tweet" class="form-control"></textarea>
		</div>
		<div class="form-group" align="right">
			<input type="button" name="btn_tweet" id="btn_tweet" value="Send">
		</div>
	</form>
	<div id="load_tweets"></div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#btn_tweet").click(function(){
			var tweet_text = $("#tweet").val();
			if($.trim(tweet_text) != ""){
				$.ajax({
					url: "data.php",
					method: "POST",
					data: {tweet: tweet_text},
					success: function(data){
						$("#tweet").val("")
					}
				})
			}
		})

	})
	setInterval(function(){
		$("#load_tweets").load("fetch.php").fadeIn("slow")
	}, 2000)
</script>
</body>
</html>

Silahkan teman-teman langsung saja copy ya. lalu karena ajaxnya di proses di data.php silahkan buat, dan isinya seperti ini:

$koneksi = mysqli_connect("localhost", "root", "", "datakomen");
$tweet_text = $_POST["tweet"];
$query = mysqli_query($koneksi, "INSERT INTO data_komen VALUES('', '$tweet_text') ");

data.php berfungsi untuk memasukan data ke database dan untuk menampilkannya disini saya buat file lagi jadi disini saya tidak langsung ke response successnya ya, oke silahkan buat fetch.php nya dan isinya seperti ini.

$koneksi = mysqli_connect("localhost", "root", "", "datakomen");
$query = mysqli_query($koneksi, "SELECT * FROM data_komen ORDER BY tweet_id DESC ");
if(mysqli_num_rows($query)>0){
	while($row = mysqli_fetch_array($query)){
		echo "<p>".$row["tweet"]."</p>";
	}
}

silahkan coba sendiri ya, jika ada kesulitan bisa ditanyakan di kolom komentar di bawah ini ya. hasilnya ketika kita insert bakalan smooth, oke saya rasa cukup sampai disini belajar kita tentang cara membuat insert komentar dengan Ajax jQuery semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Membuat Insert Komentar dengan Ajax jQuery

Kategori