Tutorial Membuat Chat Room Menggunakan PHP dan MySQL Tanpa Pesan Error ~ Tutorial Web Development Indonesia

Hay Guys, ketemu lagi dengan saya. Untuk Anda yang baru mampir atau sudah pernah mampir salam kenal, dan enjoy keep my blog.

Di pembahasan kita kali ini yaitu membuat sebuah komentar atau chat dari setiap user yang login dapat chat semau mereka chat. Disini kita tetap masih menggunakan bahasa PHP dasar untuk membuat sistem chat ini. Anda bisa lihat contoh dibawah. Ini saya buat saat mengerjakan project tentang forum yang mana di forum tersebut kita bebas chat bedasarkan userID yang login.

Gambar diatas saya SS setelah saya mencoba sendiri buat dari awal. Disini saya akan bahas satu persatu tidak begitu susah anda cuma lebih teliti dan jangan cepat bosen dengan script php. Ouh yah kita bisa buat forum untuk chat ini dengan syarat anda sudah harus login atau membuat session untuk dapatin ID usernya. Jika masih belum tahu cara membuat login saya sarankan Anda baca artikel saya sebelumnya tentang Login.

- Membuat Halaman Login Menggunakan PHP dan MySQL Tanpa Pesan Error

Jika sudah Anda buat kita tinggal lanjutin dari hasil login kita tadi mari simak sampai habis. Kalau anda sudah mulai malas untuk membuat login dulu baru mau buat chat ini, anda sungguh pemalas hahaha, gak mikirin saya yang buat apa dari awal malah. Login itu sangat gampang. Yang penting kita membuatuhkan sessionnya. Maka dari itu kita bisa membuat chatting ini berjalan dengan baik. Sebenarnya bisa tanpa session yah anda chat dengan nama anda sendiri atau asal asalan, tapi hasil yang didapatpun juga tidak bagus. Saya menyarankan membuat login karna itu yang akan kita lakukan seperti hal nya website ternama sekarang seperti comment di facebook, twitter, dll. Mereka chat atau komen sesuai dengan ID mereka masing-masing. Yah sudahlah kita lanjutkan saja dari pembahasan awal.

Sperti biasa siapkan alat-alat untuk ngoding, xampp aktif, notepad++ atau dreamweaver atau yang lain. Berikut langkah-langkahnya:

Langkah 1. Siapkan file-file dibawah ini di dalam folder project web anda.

Folder : css, fonts, images.
File Php : chat_action, connection, dashboard, index, web_login
File DB : db_aspxinformation

File-file diatas merupakan file saya keseluruhan dari login sampai chatting. Disini saya akan membahan tentang chat personal dengan user yang lain ibarat kaliamat diskusi antar user. Jadi disini yang paling digunakan adalah file dashboard.php dan chat_action.php 2 file ini lah yang akan kita buat untuk pembuatan chat room kita. css dan fonts merupakan css yang saya tambahkan untuk mendesain agar tampilan lebih menarik sedikit seperti contoh gambar paling atas dan fonts untuk gambar icon-icon yang saya tambahkan juga seperti icon + dan clock di gambar awal juga.

Langkah 2. Setelah selesai membuat file-file diatas kita buat database terlebih dahulu. Disini kita buat 2 database atau lebih tepatnya 1 database untuk chatting 1 lagi cuma database user, jika kalian sudah buat untuk user seperti login masuk. Anda tidak perlu membuatnya lagi. Tinggal samakan code saya dengan code anda untuk penarikan data field yang ada di table user.

Table Chat

Nama table : all_chat

Field :

- id_comment [Int]PRIMARY KEY

- UserID [Int]

- Username [Username][100]

- Comment [Varchar][200]

- Images [Varchar][100]

- DateIn [DateTime]

Table User

Nama table : all_user

Field :

- id_user [Int]PRIMARY KEY

- Username [Varchar][100]

- Password [Varchar][100]

- Name [Varchar][100]

- Email [Varchar][100]

Anda wajib samakan table diatas biar berjalan baik semua yang akan kita kerjakan di pembahasan artikel ini.

Langkah 3. Setelah selesai Anda membuatnya, buka halaman dashboard.php disini saya sudah aljabarkan semua script untuk tampilan awal. Silahkan anda copas lalu letakan di file dashboard.php Anda. Saran saya setelah Anda copas Anda coba pahami dulu.

<?php session_start(); include("connection.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PT. Aspx Information</title>
<meta name="author" content="Dennis Ji">
<meta name="description" content="Pembelian item filter">
<meta name="keyword" content="Items , PT Aspx Information">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href='css/box.css' rel='stylesheet' type='text/css'></link>
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'></link>
</head>

<body>
<div class="content" class="span10">
<div style="padding-bottom: 20px;">
<img src="images/icon_home.png" width="30" height="20" />
<a href="dashboard.php"><b>Home</b></a><br><br>
<div style="float: left;"><b>All Items</b></div>
<div style="float: left; margin-left: 12px; border: 1px solid #000; height: 20px;"></div>
<div style="float: left; margin-left: 12px;"><a href="forum_chat/">Forum Chat</a></div>
<div style="float: right;">
<?php
$id_user = $_SESSION['id_user'];
$b = mysql_query("select * from all_user where id_user = '$id_user'");
while($a = mysql_fetch_array($b))
{
?>
<div style="">
<div style="float: left; padding-right: 10px;">
<img src="images/<?php echo $a['Images'] ?>" class="img-circle" alt="User Image" width="50px" />
</div>
<div style="float: left; line-height: 5px;">
<p>Hello, <?php echo $_SESSION['username'] ?></p>
<?php } ?>
<div style="background: #B4B4B4; height: 3px; width: 115px; margin: -7px 0 6px 0;"></div>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
<img src="images/garis.jpg" alt="line" />
</div>
<div class="box_content">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title"><i class="fa fa-comments-o"></i> Obrolan Diskusi</h3>
</div>
<table>
<td width="1040px" ><center><font color="#0066FF" size="4">Topik : Pemecahan Masalah Pada Bahasa Pemograman</font>
</table>
<br />
<div style="background: #0099FF; height: 3px;"></div>
<?php
$query = mysql_query("SELECT * FROM all_chat");
while($data = mysql_fetch_array($query)) {
?>
<div class="box-body chat" id="chat-box">

<div class="item">
<img src="images/<?php echo $data['Images'] ?>" class="img-circle" alt="User Image" />
<p class="message">
<a href="#" class="name" style="color: #75AECF;">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i>  <?php echo $data['DateIn'] ?></small>
<?php echo $data['Username'] ?>
</a>
<div style="padding-bottom: 5px;">
<div style="width: 100px; height: 2px; background: #FA7C18; margin: -12px 55px;"></div>
</div>
<div style="margin-left: 55px;">
<font color="#484B5F" size="2"><b><?php echo $data['Comment'] ?></b></font>
</div>
</p>
</div>

</div>
<?php
}
$user = $_SESSION['username'];
$qry = mysql_query("SELECT * FROM all_user where Username = '$user'");
while($show = mysql_fetch_array($qry)) {
?>
<form method="post" action="chat_action.php?id_user=<?php echo $show['id_user'] ?>">
<?php
}
?>
<div class="box-footer">
<div class="input-group">
<input name="txt_comment" type="text" class="form-control" placeholder="Tipe pesan..."/>
<div class="input-group-btn">
<button class="btn btn-success"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<footer>
<center><p><span>Copyright&nbsp © 2016 <font colour="#000000"><b>Aspx Information Angga Alp</b></font></span></p></center>
</footer>
</body>
</html>

Lalu copy lagi style inline dalam 1 file untuk beberapa fiture yang saya coba desain sendiri seperti peletakan tampilan dan kepekaan button warna dll. Letakan script ini di atas code </head> .

Jika sudah, saya sudah siapkan css dan fonts yang saya otak atik untuk icon, warna, bahkan button semua ada dalam css dan fonts ini. Silahkan kalian download dibawah ini.

Link CSS dan FONTS silahkan klik disini : http://www.4shared.com/rar/i-rWVh3Eba/aspxinformation__2_.html/

Jika link diatas tidak bisa di download atau mati, silahkan komentar dibawah yah brothers and sisters.

Langkah 4. Jika telah di download lalu extract dan kalian masukan ke dalam folder kalian membuat web ini. Dan jika sudah di pastekan, ok coba Anda buka localhost anda dan jalankan file yang kalian buat tadi yaitu folder dashboard. dashboard gak akan berjalan lancar kalau kalian tidak ikutin saran saya dari awal ya yaitu dari menu index login. yang benar adalah, Anda buka file index.php pertama kalian yaitu file login yang anda buat sendiri lalu anda login, otomatis sessionnya akan didapatkan maka akan menuju ke arah dashboard dan anda bisa lihat tampilan sesuai dengan pembahasan saya dari awal. Ini baru tampilan. setelah ini baru kita membuat biar chatting kita berfungsi selayaknya sesuai judul diatas. Jangan lupa Connectionnya kawan. Jika masih belum tahu membuat Connection dari PHP ke MySQL bisa dilihat di artikel bawah ini.

- Cara Membuat Koneksi PHP dengan MySQL [Connection Syntax PHP]

Langkah 5. Buka file kedua yaitu file chat_action.php lalu copy pastekan script dibawah ini.

<?php
include('connection.php');
session_start();

$comment = $_REQUEST['txt_comment'];
$username = $_SESSION['username'];
$userid = $_SESSION['id_user'];
$id_user = $_REQUEST['id_user'];

if((strlen($comment)) < 3 || (strlen($comment)) >200 ) {
header("location:dashboard.php?error=Komentar hanya dibatasi 3 sampai 200 karakter..!&id_user=$id_user");
}
else
{
$query = mysql_query("SELECT * FROM all_user where id_user='$userid'");
while($data = mysql_fetch_array($query))
{
$images = $data['Images'];
$query_2 = mysql_query("INSERT INTO all_chat( id_user, Username, Comment, Images, DateIn)
VALUES( $id_user, '$username', '$comment', '$images', NOW())");

header("location:dashboard.php");
}
}
?>

Setelah Anda selesai mengcopy paste syntax diatas. Selamat itu langkah terakhir dari pembahasan kita kali ini. Cukup simple kan tidak ribet. Jika emang kalian pusing, harus jelas kalian pusing dimana pusing dimana, dan kalian bisa tanyakan saya dengan meninggalkan komentar dibawah dengan cepat saya akan menjawab pertanyaan kalian. Harusnya semua kalau kalian ikutin dari awal maka akan berjalan dengan sempurna. Silahkan Anda test lagi di localhost Anda, dan coba input sebuah kalimat di inputan chat lalu klik icon plus atau tekan enter, otomatis komentar anda akan muncul di box yang Anda buat, anda bisa mencoba dengan user yang berbeda.

Sekian Artikel dari saya kali ini. Sampai jumpa di artikel saya selanjutnya.
Jangan lupa mampir ke channel Youtube saya. “Angga Alp” . ^_^ Happy Coding.