Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

Posted on July 9, 2013July 9, 2013 by bimosaurus

Webchat adalah sebuah media obrol interaktif memalui web. Contoh webchat sering kita lihat di meebo atau fasilitas chat Facebook. Kita pun bisa membuat. Secara konsep sederhana, chat terdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan ditampilkan melalui halaman web. Secara standard, web tidak akan bisa menerima POST chat dan menampilkannya tanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa bagian elemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefresh elemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser dan menghabiskan memori komputer.

Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL dan JQuery. JQuery sendiri adalah sebuah library Javascript yang telah disusun untuk keperluan penyederhanaan dan optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untuk pengganti ajax terutama untuk keperluan hubungan Client Server. Marilah kita mencoba merancang sebuah skenario pembuatan sistem chat berbasis web.

Di sini saya merancang menggunakan tiga (3) file script server utama yaitu :

index.php
login.php
logout.php

Script Server tersebut dikunci tampilan oleh file: styles.css. Sedangkan script sisi-client (diletakkan di direktori js) yang digunakan adalah:

library jquery
chat.js

Script pendukung di sisi server (diletakkan di direktori scripts) akan dipisahkan sesuai dengan tugasnya antara lain:

database.php (penghubung dengan database)
datetime.php (pengambil value waktu terakhir chat)
postchat.php (pengirim kalimat chat)
getchat.php (pengambil kalimat chat secara real-time)
chatlist.php (pengambil chat yang sudah ada sebelumnya)
chatuserlist.php (pengambil data user yang aktif)

Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.

Ketika user membaca chat, maka chat.js akan selalu melakukan pengecekan waktu setiap 500 milisecond, jika terdapat chat baru maka akan ditampilkan chat baru tersebut, dengan cara menambahkan div(elemen) dibawah chat yang sudah ada sebelumnya, tanpa perlu merefresh halaman utama webchat. Fungsi utama jquery yang digunakan oleh chat.js adalah : $.get()

Ketika user mengirimkan chat, maka chat.js akan mengirimkan kalimat beserta username yang diambil dari session, dan membantu melakukan post ke sisi server, tanpa perlu merefresh halaman utama chat.

Begitu juga dengan daftar user, chat.js akan selalu melakukan pengecekan setiap 500ms, dan akan segera menampilkan perubahan setiap kali terdapat perubahan penambahan user atau logout user.

Untuk masuk ke dalam script utama, tentu akan menggunakan fasilitas Login, dimana pada fasilitas ini, login tidak menggunakan password, namun menggunakan username dan email. Sedangkan email tersebut nantinya akan digunakan untuk mengambil gambar avatar dari situs gravatar.com.

Saat dilakukan login, maka JIKA sudah terdapat username yang sama, akan dianggap gagal dan diminta mengulang login, sedangkan JIKA belum terdapat username yang sama, maka SESSION akan dibuka dan data username dan email akan disimpan dalam tabel user.

Tabel-tabel yang saya buat adalah sebagai berikut :

Tabel user berisi Field : username, email, loginDate

CREATE TABLE `user` (
  `username` varchar(20) NOT NULL,
  `email` varchar(50) DEFAULT NULL,
  `loginDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE `user` (

`username` varchar(20) NOT NULL,

`email` varchar(50) DEFAULT NULL,

`loginDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

PRIMARY KEY (`username`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Tabel chat berisi field username, chat, chatTime dan id

CREATE TABLE `chat` (
  `id` int(23) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `chat` text,
  `chatTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;

CREATE TABLE `chat` (

`id` int(23) NOT NULL AUTO_INCREMENT,

`username` varchar(255) DEFAULT NULL,

`chat` text,

`chatTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;

Script login yang saya buat adalah demikian :

<?php
include "scripts/database.php";
if( isset( $_POST['submit'] ) ){
   $username   = $_POST['username'];
   $email      = $_POST['email'];
   $sql  = "INSERT INTO `user` (`username`,`email`) VALUES ('$username','$email')";
   if(!mysql_query( $sql )){
      header( "Location:login.php?err=1" );
   }else{
      session_start();
      $_SESSION['bms_chat_user']=$username;
      header( "Location:index.php" );
   }
   
}
?>
<html>
<head><title>JQuery BMS Chat System</title><link rel="stylesheet" type="text/css" href="styles.css"></head>


<div id="wrapper">
<div id="navbar"></div>
<div id="centerbox">


   <form method="post" action="" id="form-login">
      <input type="text" id="username" name="username" value="username" onclick="this.value='';"><br />
      <input type="text" name="email" id="email" value="email" onclick="this.value='';"><br />
      <input type="submit" name="submit" id="submit_login" value="Login">
   </form>
<?php if(isset($_GET['err'])){
echo "This user is already taken";
}?>

</div>
<div style="clear:both;"></div>



</div>

</div>

</body>

</html>

<?php

include "scripts/database.php";

if( isset( $_POST['submit'] ) ){

$username = $_POST['username'];

$email = $_POST['email'];

$sql = "INSERT INTO `user` (`username`,`email`) VALUES ('$username','$email')";

if(!mysql_query( $sql )){

header( "Location:login.php?err=1" );

}else{

session_start();

$_SESSION['bms_chat_user']=$username;

header( "Location:index.php" );

}

<html>

<head><title>JQuery BMS Chat System</title><link rel="stylesheet" type="text/css" href="styles.css"></head>

</form>

<?php if(isset($_GET['err'])){

echo "This user is already taken";

}?>

</div>

</div>

</body>

</html>

Script database yang saya buat, saya letakkan di direktori scripts, dan berisi cukup simpel:

database.php

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'bmschat';

if(mysql_connect($dbhost,$dbuser,$dbpass)){
mysql_select_db($dbname);
}else{
echo "Error when access data";
}
?>

<?php

$dbhost = 'localhost';

$dbuser = 'root';

$dbpass = '';

$dbname = 'bmschat';

if(mysql_connect($dbhost,$dbuser,$dbpass)){

mysql_select_db($dbname);

}else{

echo "Error when access data";

}

Script utama lainnya adalah logout.php. Logout ini hanya berfungsi untuk menghapus sessi user dan menghapus dari database. Selanjutnya akan diredirect ke login.php

<?php
session_start();
include "scripts/database.php";
$sql = "DELETE FROM user WHERE username='$_SESSION[bms_chat_user]'";
mysql_query($sql);
unset($_SESSION['bms_chat_user']);

header("Location:login.php");
?>

<?php

session_start();

include "scripts/database.php";

$sql = "DELETE FROM user WHERE username='$_SESSION[bms_chat_user]'";

mysql_query($sql);

unset($_SESSION['bms_chat_user']);

header("Location:login.php");

File tampilan utama adalah index.php yang saya rancang demikian:

index.php

<?php
include "scripts/database.php";
session_start();
if(!isset( $_SESSION['bms_chat_user'] )){
   header("Location:login.php");
}
?>
<html>
<head><title>JQuery BMS Chat System</title><link rel="stylesheet" type="text/css" href="styles.css"></head>

<body onload="scrollbawah();">
   <script>
      function scrollbawah(){
      //fungsi untuk menempatkan scroll chat pada posisi paling bawah ketika halaman chat dibuka
      var objDiv = document.getElementById("centerbox");
      objDiv.scrollTop = objDiv.scrollHeight;   
      }
   </script>
<div id="wrapper">
   <div id="timecontainer"><?php include "scripts/datetime.php";?></div>
   <!--Pengambil waktu menjadi penting untuk menandai chat terakhir-->

   <div id="navbar"><?php echo "You logged in as " . $_SESSION['bms_chat_user'];?>&nbsp;&nbsp;&nbsp;<a href="logout.php">Logout</a></div>
   <div id="centerbox">
      <?php include "scripts/chat_list.php";
      //mengambil baris chat pertama sebelum diisi
      ?>
   </div>
   <div id="chat_userlist"></div><!--untuk menempatkan data user-->
   <div style="clear:both;"></div><!--menetralkan posisi-->


<!--form-chat-->
   <div id="form">
      <form method="post" action="" id="chatform">
         <input type="hidden" id="chatuser" name="chatuser" value="<?php echo $_SESSION['bms_chat_user'];?>">
         <input type="text" name="chat" id="chat">
         <input type="submit" name="submit" id="submit_chat" value="Chat">
      </form>
   </div>
<!--form-chat-->

</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="chat.js"></script>

</body>

</html>

<?php

include "scripts/database.php";

session_start();

if(!isset( $_SESSION['bms_chat_user'] )){

header("Location:login.php");

}

<html>

<head><title>JQuery BMS Chat System</title><link rel="stylesheet" type="text/css" href="styles.css"></head>

function scrollbawah(){

//fungsi untuk menempatkan scroll chat pada posisi paling bawah ketika halaman chat dibuka

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

}

</script>

<div id="navbar"><?php echo "You logged in as " . $_SESSION['bms_chat_user'];?>   <a href="logout.php">Logout</a></div>

<?php include "scripts/chat_list.php";

//mengambil baris chat pertama sebelum diisi

</div>

</form>

</div>

</div>

</body>

</html>

Script “scripts/datetime.php” hanya bertugas melakukan parsing waktu terakhir chat ketika halaman dibuka user seperti berikut:

datetime.php

<?php
$sql = "SELECT *, (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,'-',''),' ',''),':','')) as timeres FROM chat ORDER BY id DESC LIMIT 1";
$q   = mysql_query( $sql );
$r   = mysql_fetch_array( $q );
echo $r['timeres'];
?>

<?php

$sql = "SELECT *, (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,'-',''),' ',''),':','')) as timeres FROM chat ORDER BY id DESC LIMIT 1";

$q = mysql_query( $sql );

$r = mysql_fetch_array( $q );

echo $r['timeres'];

Segala isi pada elemen div #timecontainer akan segera direplace oleh data waktu yang baru ketika terjadi input chat yang baru.

Sedangkan chat_list.php akan berisi seperti berikut:

chat_list.php

<?php

$sql1 = "SELECT * FROM chat";
$q1 = mysql_query( $sql1 );
while( $r1 = mysql_fetch_array( $q1 ) ){
?>

      <div id="isi">
         <div class="isi_username"><?php echo $r1['username'];?></div>
         <div class="isi_time"> (<?php echo $r1['chatTime'];?>) </div>
         <div class="isi_isi"> - <?php echo $r1['chat'];?></div>
         <div style="clear:both;"></div>
      </div>

<?php
}
?>

<?php

$sql1 = "SELECT * FROM chat";

$q1 = mysql_query( $sql1 );

while( $r1 = mysql_fetch_array( $q1 ) ){

</div>

<?php

}

File CSS yang saya bangun adalah sebagai berikut:

STYLES.CSS

body{
background:#a6a8f4;
margin:auto;
font-size:20px;
font-family:Arial;
line-height:25px;

}

#centerbox{
margin-top:100px;
margin-left:20%;
height:300px;
width:500px;
background:#14178f;
color:#fff;
padding-left:50px;
padding-top:20px;
padding-right:50px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
border:10px solid #fff;
overflow:auto;
float:left;
}

#chat_userlist{
float:left;
margin-top:100px;
margin-left:10px;
background:#14178f;
color:#fff;
padding-left:10px;
padding-top:10px;
padding-right:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
border:1px solid #fff;
overflow:auto;
height:330px;
}
#form{
margin-left:20%;
margin-top:20px;
}

#form input[type="text"]{
width:500px;
height:40px;
font-size:30px;
border:1px solid #ccc;
margin-right:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#form input[type="submit"]{
width:100px;
height:40px;
font-size:30px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color: #E6E6E6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
background-image: linear-gradient(white, white 25%, #E6E6E6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#E6E6E6', GradientType=0);
}
#isi{
border-bottom:1px solid #999;
margin-top:5px;
}

.isi_username{
font-size:12px;
color:#f30;
}
.isi_time{
float:left;
font-size:10px;
margin-right:10px;
color:#bed;
}
.isi_isi{
float:left;
font-size:12px;
}

#timecontainer{
display:none;
visibility:hidden;
}

#navbar{
height:25px;
background:#000;
color:#fea;
font-size:14px;
text-align:right;
padding-right:40px;
}

#form-login input[type="text"]{
width:500px;
height:40px;
font-size:30px;
border:1px solid #ccc;
margin-right:20px;
margin-bottom:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#form-login input[type="submit"]{
width:100px;
height:40px;
margin-bottom:10px;
font-size:30px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color: #E6E6E6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
background-image: linear-gradient(white, white 25%, #E6E6E6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#E6E6E6', GradientType=0);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

body{

background:#a6a8f4;

margin:auto;

font-size:20px;

font-family:Arial;

line-height:25px;

}

#centerbox{

margin-top:100px;

margin-left:20%;

height:300px;

width:500px;

background:#14178f;

color:#fff;

padding-left:50px;

padding-top:20px;

padding-right:50px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;

-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;

box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;

border:10px solid #fff;

overflow:auto;

float:left;

}

#chat_userlist{

float:left;

margin-top:100px;

margin-left:10px;

background:#14178f;

color:#fff;

padding-left:10px;

padding-top:10px;

padding-right:20px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;

-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;

box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;

border:1px solid #fff;

overflow:auto;

height:330px;

}

#form{

margin-left:20%;

margin-top:20px;

}

#form input[type="text"]{

width:500px;

height:40px;

font-size:30px;

border:1px solid #ccc;

margin-right:20px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

#form input[type="submit"]{

width:100px;

height:40px;

font-size:30px;

border:1px solid #ccc;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

background-color: #E6E6E6;

background-repeat: no-repeat;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#E6E6E6', GradientType=0);

}

#isi{

border-bottom:1px solid #999;

margin-top:5px;

}

.isi_username{

font-size:12px;

color:#f30;

}

.isi_time{

float:left;

font-size:10px;

margin-right:10px;

color:#bed;

}

.isi_isi{

float:left;

font-size:12px;

}

#timecontainer{

display:none;

visibility:hidden;

}

#navbar{

height:25px;

background:#000;

color:#fea;

font-size:14px;

text-align:right;

padding-right:40px;

}

#form-login input[type="text"]{

width:500px;

height:40px;

font-size:30px;

border:1px solid #ccc;

margin-right:20px;

margin-bottom:10px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

#form-login input[type="submit"]{

width:100px;

height:40px;

margin-bottom:10px;

font-size:30px;

border:1px solid #ccc;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

background-color: #E6E6E6;

background-repeat: no-repeat;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#E6E6E6', GradientType=0);

}

Hingga disini, seharusnya tampilan Web Chat sudah muncul, lengkap dengan form dan user list yang masih kosong. Sudah?

=================================================

Selanjutnya kita membahas control utama dari sistem chat ini yaitu file chat.js beserta script server pendukungnya. Chat.js akan berisi sebagai berikut:

CHAT.JS

//submit-a-login


//submit-a-line
$("#submit_chat").click(function(anu){
   anu.preventDefault();
   var chat = $("#chat").val();
   var chatuser = $('#chatuser').val();
   $.post("scripts/postchat.php", { chat: chat, chatuser:chatuser, submit:'submit' });

   $("form#chatForm")[0].reset();
   var objDiv = document.getElementById("centerbox");
   objDiv.scrollTop = objDiv.scrollHeight;   
   return false;
});




var i=0;
setInterval(
   function(){
      last = $('#timecontainer').text();
      $.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {
      var bmsCommentData = JSON.parse(bmsJsonComment);
            if(bmsCommentData!==null){
               $.each(bmsCommentData, function(){
                  i=i+1;
                     var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';

                  $("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);
                  var lastBmsComment = document.getElementById('timecontainer');
                  lastBmsComment.innerHTML = this.timeres;
                  var objDiv = document.getElementById("centerbox");
                  objDiv.scrollTop = objDiv.scrollHeight;   
                  $("#chat").focus();
               });
            };
      });
   var ts = document.getElementById('timecontainer');
   s = ts.innerHTML;

   },500);
   

//get-user

setInterval(
   function(){
   
      $.get('scripts/chat_userlist.php', function(bmsJsonUserList) {
         var bmsJsonUserData = JSON.parse(bmsJsonUserList);
            if(bmsJsonUserData!==null){
            var userList='';
               $.each(bmsJsonUserData,function(){
               
                 userList = userList + '<div class="user_username">&nbsp;&nbsp;<img src="'+this.gravatar+'"> - '+this.username+'</div><div style="clear:both;"></div>';
                
               });
               $("#chat_userlist").html(userList);
             }
      });

   },3000);

//submit-a-login

//submit-a-line

$("#submit_chat").click(function(anu){

anu.preventDefault();

var chat = $("#chat").val();

var chatuser = $('#chatuser').val();

$.post("scripts/postchat.php", { chat: chat, chatuser:chatuser, submit:'submit' });

$("form#chatForm")[0].reset();

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

return false;

});

var i=0;

setInterval(

function(){

last = $('#timecontainer').text();

$.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {

var bmsCommentData = JSON.parse(bmsJsonComment);

if(bmsCommentData!==null){

$.each(bmsCommentData, function(){

i=i+1;

var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';

$("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);

var lastBmsComment = document.getElementById('timecontainer');

lastBmsComment.innerHTML = this.timeres;

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

$("#chat").focus();

});

};

});

var ts = document.getElementById('timecontainer');

s = ts.innerHTML;

},500);

//get-user

setInterval(

function(){

$.get('scripts/chat_userlist.php', function(bmsJsonUserList) {

var bmsJsonUserData = JSON.parse(bmsJsonUserList);

if(bmsJsonUserData!==null){

var userList='';

$.each(bmsJsonUserData,function(){

userList = userList + '<div class="user_username">  <img src="'+this.gravatar+'"> - '+this.username+'</div><div style="clear:both;"></div>';

});

$("#chat_userlist").html(userList);

}

});

},3000);

Mari kita bahas satu-satu:

PENGIRIM CHAT

$("#submit_chat").click(function(anu){
   anu.preventDefault();
   var chat = $("#chat").val();
   var chatuser = $('#chatuser').val();
   $.post("scripts/postchat.php", { chat: chat, chatuser:chatuser, submit:'submit' });

   $("form#chatForm")[0].reset();
   var objDiv = document.getElementById("centerbox");
   objDiv.scrollTop = objDiv.scrollHeight;   
   return false;
});

$("#submit_chat").click(function(anu){

anu.preventDefault();

var chat = $("#chat").val();

var chatuser = $('#chatuser').val();

$.post("scripts/postchat.php", { chat: chat, chatuser:chatuser, submit:'submit' });

$("form#chatForm")[0].reset();

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

return false;

});

Jika TOMBOL FORM chat yang ber-ID : submit_chat diklik, maka JQuery akan menangkap
variabel ‘chat’ yang diambil dari input-text ber-ID: chat
variabel ‘chatuser’ yang diambil dari input-hidden ber-ID: chatuser, diambil dari session(lihat form)

Sebelumnya form akan ditahan dengan fungsi preventDefault() untuk menjaga agar tidak melakukan refresh halaman
Selanjutnya dengan fasilitas fungsi $.post(), JQuery memasok data ke file scripts/postchat.php, dengan isian FORM
name:chat -> value:chat (diambil dari value yang telah diambil dari ID masing2)
name:chatuser -> value:chatuser (diambil dari value yang telah diambil dari ID masing2)
name:submit -> value: (tidak harus bervalue, digunakan untuk menanda bahwa data telah dipost saja)

Selanjutnya setelah data dipost, maka untuk menghindari karakter tertinggal di form, maka form harus direset agar kembali kosong dan siap digunakan untuk data baru. Fungsi yang menangkap hal ini adalah bagian : $(“form#chatForm”)[0].reset();

Script bagian :

var objDiv = document.getElementById("centerbox");
objDiv.scrollTop = objDiv.scrollHeight;

1 2	var objDiv = document.getElementById("centerbox"); objDiv.scrollTop = objDiv.scrollHeight;

berfungsi untuk selalu menempatkan chat terbaru yang terletak bagian bawah, agar selalu terscroll ke bawah. Jika tidak digunakan script ini maka scrollbar tidak akan dinamis dan chat terbaru tidak akan terlihat sebelum discroll. Semoga bisa dipahami.

Lantas seperti apa sih script postchat.php yang diarah oleh potongan script diatas tadi? Script ini hanya berisi penerima data post sebagai berikut:

postchat.php

<?php
include "database.php";
session_start();
if(isset($_SESSION['bms_chat_user'])){
   
   if(isset($_POST['submit'])){
      $chat = $_POST['chat'];
      $chatuser = $_POST['chatuser'];
      

      $sql = "INSERT INTO `chat` (`username`,`chat`) VALUES ('$chatuser','$chat')";
      mysql_query($sql);
   }
}else{
header("Location:../login.php");
}
?>

<?php

include "database.php";

session_start();

if(isset($_SESSION['bms_chat_user'])){

if(isset($_POST['submit'])){

$chat = $_POST['chat'];

$chatuser = $_POST['chatuser'];

$sql = "INSERT INTO `chat` (`username`,`chat`) VALUES ('$chatuser','$chat')";

mysql_query($sql);

}

}else{

header("Location:../login.php");

}

Di dalam script postchat.php juga dilengkapi fungsi untuk menghindari user yang tidak melakukan login melakukan chat. Sampai posisi ini seharusnya ketika tombol submit chat ditekan, maka pada database akan muncul satu record, namun belum muncul di chat_list halaman webchat. Perhatikan, bahwa script PHP yang tidak diinclude oleh index.php, maka kita harus memasang include database tersendiri.

Potongan script yang saya bahas adalah melompat ke userlist.

setInterval(
   function(){
      $.get('scripts/chat_userlist.php', function(bmsJsonUserList) {
         var bmsJsonUserData = JSON.parse(bmsJsonUserList);
            if(bmsJsonUserData!==null){
            var userList='';
               $.each(bmsJsonUserData,function(){
                 userList = userList + '<div class="user_username">&nbsp;&nbsp;<img src="'+this.gravatar+'"> - '+this.username+'</div><div style="clear:both;"></div>';
               });
               $("#chat_userlist").html(userList);
             }
      });
   },1000);

setInterval(

function(){

$.get('scripts/chat_userlist.php', function(bmsJsonUserList) {

var bmsJsonUserData = JSON.parse(bmsJsonUserList);

if(bmsJsonUserData!==null){

var userList='';

$.each(bmsJsonUserData,function(){

userList = userList + '<div class="user_username">  <img src="'+this.gravatar+'"> - '+this.username+'</div><div style="clear:both;"></div>';

});

$("#chat_userlist").html(userList);

}

});

},1000);

Pada bagian ini kita memanfaatkan banyak hal dari Javascript/JQuery. Antara lain, kita melakukan pemanggilan fungsi dengan menggunakan setInterval() setiap 1000 ms;

Sintaks umum setInterval adalah

setInterval(function(){/*diisi suatu fungsi*/},1000)

1	setInterval(function(){/diisi suatu fungsi/},1000)

Fungsi pada setInterval di atas, kita isi dengan kebutuhan kita menampilkan userlist. Mengapa selalu harus dilakukan setInterval? Karena kebutuhan kita memantau setiap saat user yang masuk atau keluar.

Fungsi setInterval tadi kita gunakan untuk memanggil script chat_userlist.php dengan fungsi JQuery $.get(). $.get() bertugas melakukan HIT ke sebuah url, dan mengambil valuenya dalam bentuk sebuah fungsi. Susunan umum $.get() adalah

      $.get(url, function(tangkapan) {
      alert(tangkapan);
      /*fungsilain*/
})

$.get(url, function(tangkapan) {

alert(tangkapan);

/*fungsilain*/

})

Pada script chat.js kita mengambil value hasil pengambilan GET dengan format data object JSON (Javascript Object Notation) yang dihasilkan oleh script chat_userlist.php dengan fungsi json_encode(). Data tadi kita namai bmsJsonUserList. Karena masih berwujud format JSON object, maka data tersebut akan diparse oleh fungsi JSON.parse hingga menjadi data JSON text yang dapat dipisahkan lagi. Untuk lebih memahami JSON, dapat dibaca file script chat_userlist.php ini

<?php
session_start();
if(!isset($_SESSION['bms_chat_user'])){
header("Location:login.php");
}
include "database.php";
$sql2 = "SELECT *, CONCAT('http://gravatar.com/avatar/',MD5(email),'?s=25') AS gravatar FROM user ORDER BY loginDate DESC";
$q2   = mysql_query( $sql2 );
while( $r2   = mysql_fetch_assoc( $q2 ) ){
   $arr[] = $r2;
}
echo json_encode( $arr );
?>

<?php

session_start();

if(!isset($_SESSION['bms_chat_user'])){

header("Location:login.php");

}

include "database.php";

$sql2 = "SELECT *, CONCAT('http://gravatar.com/avatar/',MD5(email),'?s=25') AS gravatar FROM user ORDER BY loginDate DESC";

$q2 = mysql_query( $sql2 );

while( $r2 = mysql_fetch_assoc( $q2 ) ){

$arr[] = $r2;

}

echo json_encode( $arr );

Wujud JSON ini akan seperti berikut

[{"username":"bimosaurus","email":"bimosaurus@gmail.com","loginDate":"2013-07-09 00:17:28","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25"},{"username":"bimo","email":"bimosaurus@gmail.com","loginDate":"2013-07-08 06:57:35","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25"}]

[{"username":"bimosaurus","email":"bimosaurus@gmail.com","loginDate":"2013-07-09 00:17:28","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25"},{"username":"bimo","email":"bimosaurus@gmail.com","loginDate":"2013-07-08 06:57:35","gravatar":"http:\/\/gravatar.com\/avatar\/e6b61a6bdbd6aa1504d17df6c5f4aa8e?s=25"}]

Yaitu tiap record database yang diselect akan ditampilkan dalam baris berbeda lengkap dengan field-fieldnya.

Untuk memisahkan recordnya, selanjutnya file chat.js akan menggunakan fungsi JQuery $.each(), dimana tiap record akan dipisahkan, dan diolah. Pengambilan data dapat dilakukan dengan : this.{namafield}, misal : this.username, this.email, this.loginDate dan lain sebagainya.

Pada bagian

.
.
userList = userList + '<div class="user_username">&nbsp;&nbsp;<img src="'+this.gravatar+'"> - '+this.username+'</div><div style="clear:both;"></div>';
});
$("#chat_userlist").html(userList);
.
.

userList = userList + '<div class="user_username">  <img src="'+this.gravatar+'"> - '+this.username+'</div><div style="clear:both;"></div>';

});

$("#chat_userlist").html(userList);

Kita membuat sebuah susunan div dari tiap daftar user dan disusun berjajar sesuai dengan divnya. Variabel javascript userlist yang semula kosong akan berisi sejumlah data user lengkap dengan segala propertinya. Kemudian setelah lengkap userlist tersebut akan dimasukkan ke dalam elemen div #chat_userlist.

Div chat_userlist yang semula kosong, akan berubah berisi sejumlah data jumlah user online. Sebagai tambahan, kita menggunakan gravatar, sebuah fungsi global di dunia maya untuk mengambil gambar berdasar email. Dalam hal ini saya menggunakan fungsi SQL yang terdapat pada query. Jika kita memiliki sebuah akun gravatar, maka gambar kita dapat diakses pada halaman:

http://gravatar.com/avatar/{md5(email)}?s=ukuran

Untuk jelasnya bisa dilihat pada SQL di chat_userlist.php.

============================================================

Kita masuk bagian paling utama dari sebuah fungsi Chat.js

setInterval(
   function(){
      last = $('#timecontainer').text();
      $.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {
      var bmsCommentData = JSON.parse(bmsJsonComment);
            if(bmsCommentData!==null){
               $.each(bmsCommentData, function(){
                
                     var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';

                  $("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);
                  var lastBmsComment = document.getElementById('timecontainer');
                  lastBmsComment.innerHTML = this.timeres;
                  var objDiv = document.getElementById("centerbox");
                  objDiv.scrollTop = objDiv.scrollHeight;   
                  $("#chat").focus();
               });
            };
      });
   },500);

setInterval(

function(){

last = $('#timecontainer').text();

$.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {

var bmsCommentData = JSON.parse(bmsJsonComment);

if(bmsCommentData!==null){

$.each(bmsCommentData, function(){

$("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);

var lastBmsComment = document.getElementById('timecontainer');

lastBmsComment.innerHTML = this.timeres;

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

$("#chat").focus();

});

};

});

},500);

Konsep sederhana dari script ini adalah : merefresh fungsi setiap 500ms, menanyakan pada getchat.php apakah ada data chat yang LEBIH BARU ketimbang waktu yang telah ada di elemen timecontainer? Jika ada, maka akan diambil dalam wujud JSON, ditampilkan pada halaman chat list, dan selanjutnya isi yang ada pada timecontainer diubah dengan data yang terbaru. Simpel ya? Hehehe

Fungsi utama tetaplah setInterval(). setInterval akan mengecek isi div timecontainer, dan selanjutnya akan membaca getchat.php menggunakan fitur JQuery $.get(). Perhatikan pada bagian

$.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {....})

1	$.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {....})

Variabel Javascrit last diambil dari timecontainer, dan dimasukkan sebagai parameter GET pada getchat.php, selanjutnya get() akan dilanjutkan dengan data JSON. Ikutilah proses parsing object JSON hingga pemilahan data chat. Seluruh data chat yang belum terangkut akan dimasukkan dalam variabel javascript berikut ini:

var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';

1	var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';

Kemudian data insideComment tersebut akan kita pasok ke dalam div #centerbox, dengan fungsi append dan animasi kombinasi hide dan fadeIn

$("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);

1	$("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);

Tugas selanjutnya dalam chat.js ini adalah mengubah timecontainer, agar selalu update, dan chat yang lama tidak akan muncul dua kali.

var lastBmsComment = document.getElementById('timecontainer');
lastBmsComment.innerHTML = this.timeres;

1 2	var lastBmsComment = document.getElementById('timecontainer'); lastBmsComment.innerHTML = this.timeres;

Lantas kembali menepatkan scroll pada bagian bawah saat chat terbaru datang, sekaligus melakukan penempatan KURSOR chat, agar selalu terletak di kolom input chat

var objDiv = document.getElementById("centerbox");
objDiv.scrollTop = objDiv.scrollHeight;   
$("#chat").focus();

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

$("#chat").focus();

Oh ya, apakah isi file getchat.php yang ada pada directory scripts?

<?php
session_start();
if(!isset($_SESSION['bms_chat_user'])){
header("Location:../login.php");
}
include "database.php";
$last = $_GET['last'];
$sql = "SELECT *, (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,'-',''),' ',''),':','')) as timeres FROM chat WHERE (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,'-',''),' ',''),':',''))  > $last";
$query = mysql_query($sql);
//echo $sql;
while( $result = mysql_fetch_assoc( $query ) ){
   $arr[] = $result;
}
echo json_encode($arr);

?>

<?php

session_start();

if(!isset($_SESSION['bms_chat_user'])){

header("Location:../login.php");

}

include "database.php";

$last = $_GET['last'];

$sql = "SELECT *, (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,'-',''),' ',''),':','')) as timeres FROM chat WHERE (SELECT REPLACE(REPLACE(REPLACE(`chatTime`,'-',''),' ',''),':','')) > $last";

$query = mysql_query($sql);

//echo $sql;

while( $result = mysql_fetch_assoc( $query ) ){

$arr[] = $result;

}

echo json_encode($arr);

Saya melakukan replacing tanda “:” dan “-” untuk fungsi waktu agar bisa dibandingkan dengan di timecontainer.

Sebenarnya ada cara lain membuat webchat yang tidak serumit ini, yaitu dengan cara merefresh halaman dengan javascript. Namun pengalaman, melakukan refresh langsung dengan javascript untuk seluruh elemen, akan segera membuat beban browser naik dan akan menaikkan usage CPU.

Nah, selamat mencoba, mohon koreksi jika ada kesalahan, dan harapannya selalu : umpan balik.

DEMO

Download

60 thoughts on “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

Pingback: [Reblog from bimosaurus.com] Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery | Bimosaurus
kaesi says:

July 10, 2013 at 8:40 pm

terima kasih untuk ilmunya. sangat membantu.

Reply
1. bimosaurus says:
  
  July 10, 2013 at 8:54 pm
  
  Sama-samaa.. semoga bisa disebarluaskan dan dimanfaatkan dengan baik
  
  Reply
Pingback: Beda ID dan Class dalam Elemen HTML | Bimosaurus

ijin copy ya mas mudah mudahan bermanfaat ilmunya
o.. iya stlh sy coba di kmptr sy, pesan yg diketik akan muncul dan berulang ulang
tetapi yg di demokan gak berulang kok bisa ya mas
terima kasih mohon pencerahan

Silakan mas, dengan senang hati semoga ilmu berguna. Oh ya pesan yang diketik bisa muncul berulang karena kesalahan saya menempatkan pengubah waktu.

Pengubah waktu ada di :

var ts = document.getElementById('timecontainer');
s = ts.innerHTML;

1 2	var ts = document.getElementById('timecontainer'); s = ts.innerHTML;

Pada script di atasnya terjadi looping, dan ketika belum menemukan bahwa waktu berubah, masih akan di loop. Sementara terjadi masalah koneksi internet, yang memungkinkan sebelum waktu berubah, looping telah terjadi beberapa kali karena dianggap waktunya belum lebih besar daripada di #timecontainer.

Solusinya adalah Pengubah waktu diletakkan pada looping bagian atas, atau setInterval ditambah waktunya

misal:

var i=0;
setInterval(
   function(){
      last = $('#timecontainer').text();
      $.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {

       var ts = document.getElementById('timecontainer');
       s = ts.innerHTML;      

      var bmsCommentData = JSON.parse(bmsJsonComment);
            if(bmsCommentData!==null){
               $.each(bmsCommentData, function(){
                  i=i+1;
                     var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';
 
                  $("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);
                  var lastBmsComment = document.getElementById('timecontainer');
                  lastBmsComment.innerHTML = this.timeres;
                  var objDiv = document.getElementById("centerbox");
                  objDiv.scrollTop = objDiv.scrollHeight;  
                  $("#chat").focus();
               });
            };
      });

 
   },500);

var i=0;

setInterval(

function(){

last = $('#timecontainer').text();

$.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {

var ts = document.getElementById('timecontainer');

s = ts.innerHTML;

var bmsCommentData = JSON.parse(bmsJsonComment);

if(bmsCommentData!==null){

$.each(bmsCommentData, function(){

i=i+1;

$("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);

var lastBmsComment = document.getElementById('timecontainer');

lastBmsComment.innerHTML = this.timeres;

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

$("#chat").focus();

});

};

});

},500);

ATAU

var i=0;
setInterval(
   function(){
      last = $('#timecontainer').text();
      $.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {
      var bmsCommentData = JSON.parse(bmsJsonComment);
            if(bmsCommentData!==null){
               $.each(bmsCommentData, function(){
                  i=i+1;
                     var insideComment = '<div id="isi"><div class="isi_username">'+this.username+'</div><div class="isi_time">('+this.chatTime+')</div><div class="isi_isi"> - '+this.chat+' </div><div style="clear:both;"></div></div>';
 
                  $("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);
                  var lastBmsComment = document.getElementById('timecontainer');
                  lastBmsComment.innerHTML = this.timeres;
                  var objDiv = document.getElementById("centerbox");
                  objDiv.scrollTop = objDiv.scrollHeight;  
                  $("#chat").focus();
               });
            };
      });
   var ts = document.getElementById('timecontainer');
   s = ts.innerHTML;
 
   },3000); //tiga ribu mili second

var i=0;

setInterval(

function(){

last = $('#timecontainer').text();

$.get('scripts/getchat.php?last='+last, function(bmsJsonComment) {

var bmsCommentData = JSON.parse(bmsJsonComment);

if(bmsCommentData!==null){

$.each(bmsCommentData, function(){

i=i+1;

$("#centerbox").append(insideComment).children(':last').hide().fadeIn(1000);

var lastBmsComment = document.getElementById('timecontainer');

lastBmsComment.innerHTML = this.timeres;

var objDiv = document.getElementById("centerbox");

objDiv.scrollTop = objDiv.scrollHeight;

$("#chat").focus();

});

};

});

var ts = document.getElementById('timecontainer');

s = ts.innerHTML;

},3000); //tiga ribu mili second

Nah selamat mencoba, dan terimakasih sekali koreksinya

bimosaurus says:

July 13, 2013 at 3:24 pm

Telah saya cek ulang, permasalahan lainnya adalah pada bagian
.hide().fadeIn(1000);
dihilangkan saja. Karena fadeIn nya lebih besar daripada nilai setInterval 500 ::)

Terimakasih koreksinya ya

Reply

ocha says:

July 21, 2013 at 11:58 am

mas, sy uda download n ekstrak filenya, sy da config database.phpnya sesuai keinginan sy, tp saat sy jalankan di browser selalu aja login gagal..kira2 masalahnya dmn ya mas

Reply
1. bimosaurus says:
  
  July 22, 2013 at 10:06 am
  
  maaf sdr/sdri ocha, saya agak terlambat menjawab karena on project luar kota. pada konfigurasi database, setelah jelas, coba ketika login, apakah di dalam tabel user muncul satu record tertentu?
  Rancangan sistem kita adalah: ketika seseorang login, maka akan memasukkan satu user ke dalamnya. Ketika logout akan menghapusnya. Jika tidak bisa memasukkan record tertentu, cobalah gunakan chrome , dan ketika login, lihatlah pada Inspect Element dan lihat bagian error, apakah ada error? Jika error, berarti jquery gagal memasukkan variabel PHP. Sampai itu dulu, mari kita mitigasi bersama sama
  
  Reply
ykubsurya says:

August 25, 2013 at 11:26 pm

mhn dicek gan ada yg eror diman dan apa yg meski sy lalkukan?

Reply
binun says:

October 23, 2013 at 2:31 pm

bagus kang,,,,

Reply
heri says:

November 11, 2013 at 10:57 am

kenapa ketika saya jlankan muncul tulisan kayak gini di index gan,,,
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\wamp\www\chat\scripts\chat_list.php on line 5

Reply
1. bimosaurus says:
  
  November 16, 2013 at 8:46 pm
  
  Terjadi kesalahan Query, coba sqlnya di echo dan dipaste ke dalam phpmyadmin
  
  Reply
hafid says:

December 1, 2013 at 9:03 pm

artikel yang sangat bagus dan bermanfaat sekali mas. oh iya mas saya numpang tanya, saya udah coba, tapi ko satu user cuma bisa 1 kali ngechat ya mas ? ketika membalas chat maka chat yang barunya gak tampak, yang tampak cuma chat yang lamanya, atau yang pertama kali. terimakasih

Reply
1. bimosaurus says:
  
  December 4, 2013 at 8:47 am
  
  itu terletak pada pengaturan waktu di Script Chat javascriptnya. Coba mas, di ubah-ubah milisecond nya
  
  Reply
aryo says:

December 24, 2013 at 2:53 pm

terimakasih gan atas tutorialnya
sekarang dengan bantuan turorial dari anda website pertemanan saya jadi lengkap kayak facebook

makasih gan mohon pencerahanya

Reply
Rafli says:

January 10, 2014 at 4:40 pm

Bro gw ada masalah di sini nih…

$last”;
$query = mysql_query($sql);
//echo $sql;
while( $result = mysql_fetch_assoc( $query ) ){
$arr[] = $result;
}
echo json_encode($arr);

?>

SELECT *, (SELECT REPLACE(REPLACE(REPLACE(chatTime,’-',”),’ ‘,”),’:',”)) as timeres FROM chat WHERE (SELECT REPLACE(REPLACE(REPLACE(chatTime,’-',”),’ ‘,”),’:',”)) > $last
Itu apa engga kaya gini SELECT FROM chat ??

TOlong pencerahannya

Warning: mysql_fetch_array() expects parameter 1 to be resource, string given in /home/u658181265/public_html/scripts/getchat.php on line 10 null

Reply
1. bimosaurus says:
  
  January 12, 2014 at 11:46 am
  
  bung, apakah bisa minta scriptnya agak lebih lengkap? apakah di bagian atasnya terpotong?
  
  Reply
Cubebon says:

January 17, 2014 at 12:07 pm

Bro, saya udah berhasil login dan chat, tapi permasalahannya, kenapa setiap saya menuliskan chat tidak langsung muncul chat nya, musti di refresh dulu browsernya.

Reply
1. bimosaurus says:
  
  January 17, 2014 at 4:23 pm
  
  Artinya adalah masih ada masalah di proses .post() JQUERY nya atau .get() nya
  
  .post() berfungsi untuk mengepostkan. Jika belum tampil namun di database sudah ada, berarti proses post sudah sukses, berarti masalah di .get() nya
  
  Reply
Cubebon says:

January 17, 2014 at 9:43 pm

di javascriptnya mas ?

Reply
1. bimosaurus says:
  
  January 17, 2014 at 11:22 pm
  
  Iya mas.
  Paling enak melakukan checking database adalah dari console log nya. Biasanya saya gunakan Inspect Element Google Chrome
  
  Reply
tester says:

March 21, 2014 at 3:19 pm

om pass saya coba kenapa saya enter isinya yang keluar berulang-ulang

Reply
1. bimosaurus says:
  
  March 22, 2014 at 2:50 pm
  
  Itu masalah setting time di scriptnya coba settimeout nya diperbesar dikit
  
  Reply
akkuuuuuh says:

March 23, 2014 at 12:30 pm

gan…ane download n ane coba kok pas login kok gak bisa yah…..malah user already taken?? kenapa ya gan?? mohon pencerahannya..makasih

Reply
1. bimosaurus says:
  
  March 24, 2014 at 7:46 pm
  
  coba pada database, dihilangkan dulu data yang sama
  
  Reply
yayat says:

March 29, 2014 at 9:26 am

bos, sy cb test yg dari menu download. ko ga refresh , dan nama yang aktif ga keluar di menu listnya

Reply
yayat says:

March 29, 2014 at 9:31 am

bos, sy cb test yg dari menu download. ko ga refresh, text g langsung keluar dan nama yang aktif ga keluar di menu listnya

Reply
hema prasetya says:

April 10, 2014 at 4:49 pm

ini lagi kuis pemograman web suruh buat chat. :3 menolong sekalii.
suwun pak nur.

Reply
asmali says:

May 8, 2014 at 12:02 pm

cara buat database gimana pak?

Reply
Husnan says:

May 15, 2014 at 6:37 am

Trims pak,, saya ada tiga pertanyaan,,
1. nama database2 yang diperlukan ada berapa dan apa saja?
2. apa nama tabel2 dari masing2 database nya?
3. bisa nggak pake xampp?
Trims,, mohon maaf saya masih Newbie^^

Reply
a says:

June 3, 2014 at 10:12 am

Kok saya login tulisannya “user is already taken” itu database yg dimaksud yang di phpmysql nya?

Reply
Leni Mulyani says:

June 10, 2014 at 6:19 am

ijin download ya, lagi bikin web koperasi tapi diminta ada fasilitas chatingnya sama dosen (aneh bgt ya -_- ) ,,, sukses selalu

Reply
Pilopa says:

June 20, 2014 at 2:55 am

gan ini chat nya ga bisa private chat ya…?
kalo ada buat chat yang bisa ada private chat…..

Reply
nadzir says:

June 22, 2014 at 11:34 am

gan…ane download n ane coba kok pas login kok gak bisa yah…..malah user already taken?? kenapa ya gan?? mohon pencerahannya..makasih.. ohiyaa saya juga udah cek di databasenya tapi empty atau kosong knapa itu bang??

Reply
Donnie says:

September 16, 2014 at 3:20 pm

menarik nih script…. saya mau coba untuk diake di server local lab. komputer siswa… mohon izin download

Reply
Kecuk Wakidi says:

October 2, 2014 at 11:02 am

Tq…Tq… so much banyak memberikan inspirasi dan ide untuk pengembangan web tersayangku semoga yang memberikan ilmu segera ditambah ilmunya lagi …..tq…

Reply
Mr.Alien says:

October 26, 2014 at 7:50 pm

Makasih pak..,Sangat Bermanfaat

Reply
dian says:

November 13, 2014 at 3:37 pm

aslmkum…

saya mau tanya mas, ini aplikasi webchat nya pakai protokol apa??

Reply
1. bimosaurus says:
  
  November 14, 2014 at 8:48 am
  
  Wa’alaikumsalaam wr wb.
  
  Pakai protocol web mas .
  
  Reply
sesterdamp says:

November 24, 2014 at 11:11 am

ka… tutorialnya bagus sekali… ajarin dong
mksh ka info nya
sangat membantu sekali

Reply
Nuansa Hijau says:

November 24, 2014 at 12:16 pm

Demo-nya selalu menanyakan :
This user is already taken

padahal udah buat nama user yg unik dan susah, selalu katanya, user udah dipakai

Reply
mrr says:

December 2, 2014 at 4:32 am

kenapa loginnya selalu ‘user is already taken?’ mohon banget pencerahannya ya…

Reply
keroro says:

December 17, 2014 at 12:32 am

Makasih tutorialnya mas, saya ingin menanyakan kenapa saat pertama kali mengetik chat (kondisi tabel chat adalah kosong) chat tidak muncul di form chat melainkan harus direfresh terlebih dahulu. terimakasih.

Reply
andstiv says:

January 11, 2015 at 1:43 am

cara menambahkan emoticon gimana ya mas,,saya sudah bisa menampilkan di form chat,,tetapi belum bisa menginsert kan ke dalam chat nya..dimna kah tata letak dan query yg benar ? terima kasih

Reply
Azwar Anas says:

January 24, 2015 at 5:44 pm

mas bimo, terima kasih atas informasinya jadi semakin ngebut mau buat chatbox yang bagus nie
kalau berkenan test chatbox saya di http://fb-gravity.pe.hu/Chatbox terima kasih

Reply
Filipi says:

February 6, 2015 at 11:16 am

Slamat siang mas, saya sudah buat file phpnya masing. tapi saya bingung untuk menggabungkannya untuk diimplementasikan kedalam web. Mohon pencerahannya mas. Trimakasih

Reply
1. bimosaurus says:
  
  February 13, 2015 at 1:17 pm
  
  Untuk implementasi scriptnya bisa kok disertakan langsung dalam halaman, dan bisa juga dalam bentuk iframe
  
  Reply
medy says:

February 26, 2015 at 2:11 pm

mas mau tanya untuk data base itu tidak ada di downlod y ya mas?? apa harus bkin sendiri mohon pencerahan y mas makasih

Reply
1. bimosaurus says:
  
  March 2, 2015 at 12:46 pm
  
  coba saya update link nya ya.. Terimakasiiih
  
  Reply
rihama says:

March 25, 2015 at 12:54 pm

maaf mau tanya mas agar loginnya bisa private bagaimana ya?jadi admin dan user1 trus bila ada user 2 makan chat nya hanya admin dan user2 aja ???mohon pencerahannya

Reply
Michael says:

April 22, 2015 at 11:09 pm

kang ada file untuk database mysqlnya ga. biar saya langsung import. soalnya saya ga bisa2 di run. mungkin karna databasenya salah

Reply
Hanzo says:

July 8, 2015 at 3:03 pm

gan.. kenapa ya pas dibagian login selalu gagal terus???
ada tulisan “This user is already taken ” terus..
apa yg harus saya lakukan??
mohon pencerahannya, Terima kasih~

Reply
Hanzo says:

July 8, 2015 at 3:06 pm

gan.. di bagian login.. gagal terus.. itu kenapa ya??
ada tulisan “This user is already taken” itu terus,
mohon pencerahannya gan.. Makasih ~

Reply
1. asif says:
  
  October 28, 2015 at 1:49 am
  
  harus buat sqlnya dlu gan
  
  Reply
Liyan says:

October 26, 2015 at 4:00 am

Makasih gan, sangat bermanfaat…

Reply
aco says:

November 22, 2015 at 7:17 am

bang, kok setelah saya klik chat, chat saya ngga ke save, padahal di postchat nya ngga ada yg salah. kira kira ada eror di mana yaaa

Reply
aldiansyah says:

March 24, 2016 at 3:57 pm

gan, ini kenapa setiap saya nulis chat di form(text), itu tidak muncul di chat list .tetapi setiap di refresh manual, chat tadi muncul di chat list, apa ada code yg kurang?mohon bantuannya

Reply
rinaldy virgiawan says:

August 23, 2016 at 1:54 am

kereeen mas. ijin copas ya mas. ane mau ngembangin buat UKM kampus…
tenang mas nanti dibawah nya ane kasih keterangan support by bimosaurus.
paling ane mau edit tampilan mobile nya gan biar enak dilihat via mobile hhehe
matur suwooon..

Reply
1. bimosaurus says:
  
  August 29, 2016 at 4:49 pm
  
  Copyleft mas.. dipersilakan share untuk keperluan umum semoga bermanfaat..
  
  Reply

Tips Trik Web PHP MySQL Javascript – Bimosaurus

Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

60 thoughts on “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

Leave a Reply to asmali Cancel reply

Artikel terkait

60 thoughts on “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

Leave a Reply to asmali Cancel reply