**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

![](https://static.cdn-cdpl.com/source/189d58c5783efb288b97b2a71a15dca6/shou.png)



# **Langkah langkah **
1  Membuat Database table.sql
```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
<?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

```php
	$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
```
	
Memasukan pesan baru di Database

```php
	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
		
```php
		$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

```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box</title>
<style type="text/css">

</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()

```php
	$.post('shout.php', post_data, function(data) {
```

Menambhakan data ke dalam kotak pesan dengan efek jQuery fade

```php
$(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.

```php
//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.

```javascript
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); 
            });
        }
});
```

<a href="https://drive.google.com/drive/folders/0B1pFviA-nrHINFVXVHU3M3dmUHM"><b>Download Source Code</b></a>

Sumber : https://www.sanwebe.com/2013/04/creating-shout-box-facebook-style/comment-page-1

Tutorial Membuat Shoutbox Dengan PHP MySQL Dan JQuery

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Tutorial Membuat Shoutbox Dengan PHP MySQL Dan JQuery

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Cara Membuat Validasi Form di PHP

Tutorial Membuat CRUD PHP Dengan MySQL

Tutorial Membuat Shoutbox Dengan PHP MySQL Dan JQuery

Tutorial Membuat Shopping Cart dengan PHP

Tips-tips Singkat Untuk Menjadi Developer Android yang Lebih Baik

Menjadi Programmer Android yang Lebih Produktif dengan Plugin Android Studio