0 Reaksi

0 Komentar

Tutorial Membuat Shoutbox Dengan PHP MySQL Dan JQuery

21 Agustus 2017

Shoutbox, adalah fitur seperti chat dari beberapa situs web yang memungkinkan orang untuk segera meninggalkan pesan di situs web, umumnya tanpa formulir pendaftaran pengguna.

Dalam bentuk yang paling sederhana, shoutbox hanya pesan singkat, mungkin dengan informasi tentang penulisnya. Halaman dapat disegarkan secara otomatis setelah interval tertentu, atau disurvei secara dinamis agar pesan baru tetap terlihat. Posting lama sering dihapus setelah sejumlah pesan telah ditulis agar hemat ruang penyimpanan di server.

Kita akan membuat shoutbox dengan tampilan facebook seperti pada gambar di bawah ini

Langkah langkah

1 Membuat Database table.sql

CREATE TABLE IF NOT EXISTS `shout_box` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(60) NOT NULL,
  `message` varchar(100) NOT NULL,
  `date_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `ip_address` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

2 Membuat file shout.php

<?php
####### db config ##########
$db_username = 'root';
$db_password = '';
$db_name = 'table';
$db_host = 'localhost';
####### db config end ##########

if($_POST)
{
	$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
	
	//Periksa apakah itu permintaan ajax, keluar jika tidak

    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
        die();
    } 
	
	if(isset($_POST["message"]) &&  strlen($_POST["message"])>0)
	{
		
		//Anda bisa mengganti username dengan username terdaftar, jika hanya pengguna terdaftar yang diijinkan mengirim pesan

		$username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
		$message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
		$user_ip = $_SERVER['REMOTE_ADDR'];
	
		if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))
		{
			$msg_time = date('h:i A M d',time()); // current time
			echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
		}
		
		// Hapus semua pesan kecuali 10 terakhir, jika Anda tidak ingin memperbesar ukuran db Anda!

		mysqli_query($sql_con,"DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)");
	}
	elseif($_POST["fetch"]==1)
	{
		$results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC");
		while($row = mysqli_fetch_array($results))
		{
			$msg_time = date('h:i A M d',strtotime($row["date_time"])); 
			
			echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';
		}
	}
	else
	{
		header('HTTP/1.1 500 Are you kiddin me?');
    	exit();
	}
}

Penjelasan code:

Menghubungkan database ke mysql

	$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');

Memasukan pesan baru di Database

	if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))
		{
			$msg_time = date('h:i A M d',time()); // current time
			echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
		}

Pesan waktu diposting akan muncul waktu

		$msg_time = date('h:i A M d',strtotime($row["date_time"])); 
			
			echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';

3 Membuat file index.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box</title>
<style type="text/css">
<!--
.shout_box {
	background: #627BAE;
	width: 260px;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	right: 20%;
	z-index:9;
}
.shout_box .header .close_btn {
	background: url(images/close_btn.png) no-repeat 0px 0px;
	float: right;
	width: 15px;
	height: 15px;
}
.shout_box .header .close_btn:hover {
	background: url(images/close_btn.png) no-repeat 0px -16px;
}

.shout_box .header .open_btn {
	background: url(images/close_btn.png) no-repeat 0px -32px;
	float: right;
	width: 15px;
	height: 15px;
}
.shout_box .header .open_btn:hover {
	background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
	padding: 5px 3px 5px 5px;
	font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-weight: bold;
	color:#fff;
	border: 1px solid rgba(0, 39, 121, .76);
	border-bottom:none;
	cursor: pointer;
}
.shout_box .header:hover{
	background-color: #627BAE;
}
.shout_box .message_box {
	background: #FFFFFF;
	height: 200px;
	overflow:auto;
	border: 1px solid #CCC;
}
.shout_msg{
	margin-bottom: 10px;
	display: block;
	border-bottom: 1px solid #F3F3F3;
	padding: 0px 5px 5px 5px;
	font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
	color:#7C7C7C;
}
.message_box:last-child {
	border-bottom:none;
}
time{
	font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-weight: normal;
	float:right;
	color: #D5D5D5;
}
.shout_msg .username{
	margin-bottom: 10px;
	margin-top: 10px;
}
.user_info input {
	width: 98%;
	height: 25px;
	border: 1px solid #CCC;
	border-top: none;
	padding: 3px 0px 0px 3px;
	font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
	font-weight: bold;
	display: block;
}
-->
</style>

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	// Muat pesan setiap 1000 milidetik dari server.
	load_data = {'fetch':1};
	window.setInterval(function(){
	 $.post('shout.php', load_data,  function(data) {
		$('.message_box').html(data);
		var scrolltoh = $('.message_box')[0].scrollHeight;
		$('.message_box').scrollTop(scrolltoh);
	 });
	}, 1000);
	
	//Metode untuk memicu saat pengguna menekan tombol enter
	$("#shout_message").keypress(function(evt) {
		if(evt.which == 13) {
				var iusername = $('#shout_username').val();
				var imessage = $('#shout_message').val();
				post_data = {'username':iusername, 'message':imessage};
			 	
				
				$.post('shout.php', post_data, function(data) {
					
					$(data).hide().appendTo('.message_box').fadeIn();
	
					//Terus  ke bawah obrolan!

					var scrolltoh = $('.message_box')[0].scrollHeight;
					$('.message_box').scrollTop(scrolltoh);
					
					//Reset nilai kotak pesan
					$('#shout_message').val('');
					
				}).fail(function(err) { 
				
				/Peringatan kesalahan server HTTP
				alert(err.statusText); 
				});
			}
	});
	
	//Toggle hide / show shoutbox
	$(".close_btn").click(function (e) {
		//get CSS display state of .toggle_chat element
		var toggleState = $('.toggle_chat').css('display');
		
		//toggle show/hide chat box
		$('.toggle_chat').slideToggle();
		
		//use toggleState var to change close/open icon image
		if(toggleState == 'block')
		{
			$(".header div").attr('class', 'open_btn');
		}else{
			$(".header div").attr('class', 'close_btn');
		}
		 
		 
	});
});

</script>
</head>

<body>
<div class="shout_box">
<div class="header">Shout Box <div class="close_btn"> </div></div>
  <div class="toggle_chat">
  <div class="message_box">
    </div>
    <div class="user_info">
    <input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />
   <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
    </div>
    </div>
</div>
</body>
</html>

Penjelasan kode: Mengirimkan data ke "shout.php" menggunakan jQuery $ .post()

	$.post('shout.php', post_data, function(data) {

Menambhakan data ke dalam kotak pesan dengan efek jQuery fade

$(data).hide().appendTo('.message_box').fadeIn();

4 jQuery

Dengan menggunakan setInterval () kita akan me-refresh obrolan setiap 1000 milidetik, obrolan akan mengirimkan panggilan ajax ke shout.php dan memuat data yang dikembalikan ke dalam elemen, memperbarui shoutbox dengan pesan baru yang ditambahkan.

//Refresh secara otomatis setiap 1000 milidetik.
load_data = {'fetch':1};
window.setInterval(function(){
 $.post('shout.php', load_data,  function(data) {
    $('.message_box').html(data);
    var scrolltoh = $('.message_box')[0].scrollHeight;
    $('.message_box').scrollTop(scrolltoh);
 });
}, 1000);

Saat user menulis sesuatu dan menekan tombol enter, kita perlu mengirim data yang dimasukkan ke shout.php. Pemicu tombol () metode pemicu saat tombol ditekan ke bawah, dan (evt.which == 13) kondisi yang memastikan tombol ditekan adalah tombol Enter, maka kita dapat melanjutkan dengan metode ajax $ .post (),berikut contoh di bawah ini. Kita dapat mengganti tombol tekan () dengan metode .click (), namun Kita perlu menambahkan tombol di HTML.

JQuery
// Metode untuk memicu saat pengguna menekan tombol enter
$("#shout_message").keypress(function(evt) {
    if(evt.which == 13) {
            var iusername = $('#shout_username').val();
            var imessage = $('#shout_message').val();
            post_data = {'username':iusername, 'message':imessage};
            
            //mengirim data ke "shout.php" menggunakan jQuery $.post()
            $.post('shout.php', post_data, function(data) {
                
                //append data into messagebox with jQuery fade effect!
                $(data).hide().appendTo('.message_box').fadeIn();

                //keep scrolled to bottom of chat!
                var scrolltoh = $('.message_box')[0].scrollHeight;
                $('.message_box').scrollTop(scrolltoh);
                
                //reset value of message box
                $('#shout_message').val('');
                
            }).fail(function(err) { 
            
            //alert HTTP server error
            alert(err.statusText); 
            });
        }
});

Download Source Code

Sumber : https://www.sanwebe.com/2013/04/creating-shout-box-facebook-style/comment-page-1

Web Development

Mobile Development

Studi Kasus

Fundamental

Pemula

Menengah

Framework

Front End

Back End

Laravel

PHP

Kotlin

Android

Javascript

Wordpress

Database

Java

Go-Lang

Kelas Terbaru

Kelas Gratis

Populer

Roadmap

PlaygroundNEW

Tutorial Membuat Shoutbox Dengan PHP MySQL Dan JQuery

**Langkah langkah **

Langkah langkah