aplikasi chatting

Aplikasi chat dengan PHP dan mysql adalah sarana interaksi pada dunia maya dengan sebuah progam berbasis website yang di dalamnya kita gunakan script-script PHP serta database MYSQL sabagai penyimpan datanya, jadi nanti kita juga akan mempelajari pemahaman tentang:

• Bagaimana cara PHP mengirim data ke database
• Bagaimana cara PHP mengambil/membaca data dari database
• Bagaimana cara merefresh halaman atau bagian website secara otomatis
• Bagaimana cara mempercantik halaman dengan CSS
• Bagaimana cara membuat form login user
• Bagaimana cara menampilkan user yang sedang online
• dan lain-lain

ok sampai disini, saya akan menjelaskan cara kerja dari proyek yang akan kita buat

1. user mengisi nama dan email/ nama dan  situs 
2. user menekan tombol login
3. user diarahkan ke form chating
4. Otomatis user akan masuk pada kolom daftar user yang online
5. user dapat membaca dan mengirim  pesan
6. user menekan tombol exit
7. user otomatis keluar dari kolom daftar user
8. user kembali download bokep(just kidding bro)

saya harapkan bagi yang mengikuti tutorial cara membuat aplikasi chat dengan php dan mysql sudah memahami  :

•  seputar html
• apa itu PHP ,dasar php
• apa itu database mysql, mysql
• apa itu java script
• apa itu css
• apa itu suster ngesot (just-kidding lagi)

kalau belum tau silahkan buka tab baru ketikan www.google.com cari deh informasi-informasi tentang suster ngesot, eh tengtang html, php, mysql, java script dan css.
nah yang sudah tau, selamat anda berhak memeruskan bacaan anda tapi masih ada tantangan yang lebih sulit lagi, berupa syarat
berikut syarat yang ingin mengikuti tutorial cara membuat aplikasi chat dengan php dan mysql

• terinstal apache mysql mydatabase di komputer , boleh menggunakan xampp----> rekomendasi saya  
• pastikan sudah PW (posisi wenak)
• pastikan sudah mandi
• and the last wajib senyum  :)

nah silahkan download xampp, wampp atau yang lainya , cari tutorial cara mendownload wampp nya di google, nah untuk point yang selanjutnya tidak kalah penting agar anda rilexs dan tetap konsen dalam menggulati code dan script nanti,


sekali lagi ni sebelum benar-benar mempelajari tutorial cara membuat  Aplikasi chat dengan PHP dan mysql harus benar-benar sudah menguasai PHP dan pernak perniknya, karena tutorial cara membuat  Aplikasi chat dengan PHP dan mysql  adalah pembelajaran tingkat badai alias lumayan pembelajaran tingkat lanjut,,

ok kita mulai,

pertama-tama kita harus membuat halaman login user

harus di baca : halaman login user disini di satukan langsung dengan halaman kotak chatnya, sehingga kita memadukan dengan seasion ( baca: seputar season pada php) sehingga prosesnya akan menampilkan login form saat season kosong, namun saat season sudah terisi maka akan menampilkan kotak chatnya oleh karena itu kita membutuhkan script php sebagai berikut:

<? function loginForm()
{ echo' ini kotak komentar ' :}
 ?>
 <?
php if(!isset($_SESSION['nama'])){ loginForm(); }
 else{
 ?>
 ini kolom chatnya

 <?
 } ?>

code diatas hanya seumpamanya alias contoh  jadi kita gunakan fungsi "if"  arti dari kode diatas akan meng "echo" kan login form. tetapi saat halaman sudah terinfeksi season maka akan meng "echo" kan  kolom chatnya,

seoson disini adalah rekaman yang di lakukan oleh browser saat kita login pertama, kali jadi nama kita akan di rekam oleh browser , tentunya setelah kita memerintahkan browser untuk merekam,

penampakan kode yang sebenarnya adalah sbb

<?

 session_start(); // session di mulai
function loginForm(){// saat sesion masih kosong akan menampilkan fungsi login from
    echo'
<div id="loginform">
<p align="center">APLIKASI CHAT<br>
</p>
<form name="login" action="periksa.php?op=in" method="post">
<table border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
        <td>Username</td>
        <td>:</td>
        <td>
          <input type="text" name="nama" placeholder="Namamu" />
        </span></td>
    </tr>
    <tr>
        <td>Situs</td>
        <td>:</td>
        <td>
          <input type="text" name="situs" placeholder="http://situsmu.net/" />
        </span></td>
    </tr>
    <tr align="right">
        <td colspan="3">
          <input type="submit" name="login" value="Login" />
        </td>
    </tr>
</table>

</form>
</div>
';}
?>
<?php  //<-------- fungsi yang di gunakan untuk mengechek sudah atau belum adanya seasion
if(!isset($_SESSION['nama'])){
    loginForm();
}
else{
?>

code diatas hanyalah potongan paling atas pada halaman chatnya jadi perlu kita tambahkan lagi kode untuk menampilkan kotak chat
berikut kode yang sudah di padukan

<?
function loginForm(){
 echo'


<?
function loginForm(){
 echo'


<p align="center">Kami Menyediakan fasilitas COSTUMER Chat, <br>
</p>
</div>
<form name="login" action="periksalogin.php" method="post">
<table border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
      <td><span class="userchat">Username</span></td>
        <td><span class="userchat">:</span></td>
        <td><span class="userchat">
          <input type="text" name="nama" placeholder="Namamu" />
        </span></td>
    </tr>
    <tr>
        <td><span class="userchat">situs</span></td>
        <td><span class="userchat">:</span></td>
        <td><span class="userchat">
          <input type="text" name="hp" placeholder="www.terserah.com" />
        </span></td>
    </tr>
    <tr align="right">
        <td colspan="3"><span class="uesernamedanhp">
          <input type="submit" name="login" value="Login" />
        </span></td>
    </tr>
</table>

</form>
 ' :}
?>



 ' :}
?>

<?php
if(!isset($_SESSION['nama'])){
 loginForm();
}
else{

?>



<div id="wrapper">
 <div id="menu">
    <p class="welcome">Welcome <b><?php echo $_SESSION['nama']; ?></b></p>
 
  <div style="clear:both"></div>
 </div>
 
 <div id="chatbox"></div>
 
 <form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" placeholder="ketik pesan" />
    <input name="submitmsg" type="submit" class="tombol"  id="submitmsg" value="Kirim"  />
  </form>
</div>


<script type="text/javascript" src="chat.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
 //If user submits the form
 $("#submitmsg").click(function(){
  var clientmsg = $("#usermsg").val();
  $.post("post-message.php", {text: clientmsg});   
  $("#usermsg").attr("value", "");
  return false;
 });
 
 //Load the file containing the chat log
 function loadLog(){ 
  var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
  $.ajax({
   url: "message-line.php",
   cache: false,
   success: function(html){ 
    $("#chatbox").html(html); //Insert chat log into the #chatbox div   
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
     $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //auto scrol ke bawah
    }   
    },
  });
 }
 setInterval (loadLog, 1000); //refres otomatisnya
 
 //If user wants to end session
 $("#exit").click(function(){
  var exit = confirm("Are you sure you want to end the session?");
  if(exit==true){window.location = 'index.php?logout=true';} 
 });
});
</script>




<?php
}
?>

nah di atas merubakan halaman chat komplitnya, yang sudah di tambahkan java scriptnya (merah), yang berkaitan dengan fungsi-fungsi chating diantaranya auto scrol ke bawah , refresh automatis dan fungsi exit

poyek Membuat aplikasi chat Dengan PHP MYSQL serta java script kita belum lah selesai halaman diatas harus juga di dukung oleh halaman lainya yang akan kita pelajari pada posting selanjutnya
diantaranya,

Aplikasi chat dengan PHP dan mysql posting ini adalah lanjutan dari membuat Aplikasi chat dengan PHP dan mysql, dimana kita telah masuk ke dalam tahap untuk mengirim data  ke sistem database menggunakan php. pada proyek kita kali ini ada beberapa bagian yang mengharuskan untuk berhubungan dengan database mysql diantaranya

• saat login / mendaftar chat
• saat menampilkan pesan dari database
• saat mengirim pesan ke database
• saat menampilkan daftar user yang online
• dan saat logout di lakukan

1. Sistem login 

pada halaman chat.php pastinya sudah mengerti bukan cara menampilkan login form  menggunakan session? bila belum baca lagi Aplikasi chat dengan PHP dan mysql untuk sekedar mengingat saya bawa lagi potongan script chat.php pada fungsi  login kemari

<? session_start();
function loginForm(){
    echo'
<div id="loginform">
<p align="center">APLIKASI CHAT<br>
</p>
<form name="login" action="periksa.php?op=in" method="post">
<table border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
        <td>Username</td>
        <td>:</td>
        <td>
          <input type="text" name="nama" placeholder="Namamu" />
        </span></td>
    </tr>
    <tr>
        <td>Situs</td>
        <td>:</td>
        <td>
          <input type="text" name="situs" placeholder="http://situsmu.net/" />
        </span></td>
    </tr>
    <tr align="right">
        <td colspan="3">
          <input type="submit" name="login" value="Login" />
        </td>
    </tr>
</table>

</form>
</div>
';}

keterangan :

1. (warna) adalah halaman yang menjadi tempat proses pemasukan data dan pembuatan seasion sedangkan (warna) adalah data yang menunjukan atau tanda masuk (in) yang akan di tangkap oleh halaman periksa.php sesudah pengguna menekan tombol
2. (warna) berorientasikan "name" pada fungsi input sebagai informasi atau tanda yang akan di tangkap oleh halaman periksa.php
3. (warna) adalah funsi untuk menampilkan text informasi  pada kolom yang apabila kolom di klik maka informasi tersebut akan otomatis menghilang

penampakan form login seperti ini

saat login pada  proyek Aplikasi chat dengan PHP dan mysql akan diarahkan ke halaman periksa.php untu data yang kita kirimkan di proses di halaman ini , dalam pemosesran halamna ini menggunakan menggunakan  dua fungsi yaitu

1. insert dan
2. select
3. adopsi session

untuk lebih jelasnya perhatikan script dari halaman periksa.php ini

<?php

session_start();

include "config.php";

$waktu = date("H:i");

$nama = $_POST['nama'];

$situs = $_POST['situs'];

$op = $_GET['op'];

$q=mysql_query("insert into chat(nama, pesan, waktu, status, situs)values

( '$nama', '$nama baru saja masuk','$waktu','on', '$situs')");

if($op=="in"){

    $cek = mysql_query("SELECT * FROM chat WHERE nama='$nama' AND situs='$situs'");

    if(mysql_num_rows($cek)==1){//jika berhasil akan bernilai 1

        $c = mysql_fetch_array($cek);

        $_SESSION['nama'] = $c['nama'];

        $_SESSION['situs'] = $c['situs'];

     

        if($c['nama']=="$nama"){

            header("location:chat.php");

        }

    }else{

         die("wahhhh,,,, traubel  <a href=\"javascript:history.back()\">ulangi</a>");

    }

}

keterangan

1. (warna) halaman ini meminta kepada browser untuk mengangtifkan atau mengadopsi session sesuai perintah php
2. (warna) metode include merupakan meode yang di gunakan untuk memasukan bagian halaman lain ke sebuah halaman, sedangkan include "config.php"; merpakan memasukan halaman confiq dimana halaman config.php ini berisi script jembatan bagi php untuk mengakses database. bila ada yang masih bingung coba search di goolge tentang php dan mysql metode delete, insert, update dll
3. (warna)  nah ini yang menjadi sarung tangan bisbol atau penangkap data yang dikirimkan pada halaman login sebelumnya 
4. (warna)  merupakan perintah mysql untuk memasukan data yang dikirim dan di tangkap ke database
5. (warna)  yang ini mengambil perintah "in" pada halaman chat.php login form artinya masuk dan saat perinyah ini berjalan dia akan memeriksa pada table database nama dan situs yang cocok sesuai dengan data yang di masukan pada saat proses login, di situ juga terlihat fungsi script  untuk mengak ses tiap baris atau kolom database  (mysql_num_rows($cek)$c = mysql_fetch_array($cek);  dan pada (warna) menunjukan atau memerintah kan kepada browser untuk mengadopsi $c['nama']; atau kolom nama yang di masukan pada login form untuk di jadikan seasion $_SESSION['nama']
6.   if($c['nama']=="$nama"){

            header("location:chat.php"); ---------> jika nama pada baris nama di database  cocok dengan nama yang dikirimkan lewat login form maka situs langsung  otomatis  diarahkan kembali ke chat.php

 jika tidak atau terjadi kendala maka akan keluar fungsi "echo" di mana keluar  peringatan untuk mengulang kembali proses login

setelah di arahkan pada halaman chat.php maka secera otomatis akan membaca seasson pada browser yang sudah di perintahkan maka from yang akan di munculkan bukan lagi from login melainkann form chat,
sampai disini saya yakin semuanya paling tidak sudah mngerti alur dari kerjaan scrip-script ini ,ternyata sangat asik bukan mempelajari php dan mysql ?
ok, saya sangat welcome kepada pertanyaan ,dengan pertanyaan saya bisa merasa di hargai karena tulisan sederhana yang jauh dari kata sempurna ini ternyata di pelajari sunguh-sunguh oleh anda, maka dari itu ajukan pertanyaan saya akan sebisa mungkin menjawabnya

Aplikasi chat dengan PHP dan mysql alurnya seperti ini :

1. saat user mendaftar, otomatis php akan mengirimkan data bahwa ada user yang online bermode on ke database sehingga user yang bermode on ini akan tampil di daftar user yang online 
2. saat user exit user akan otomatis terhapus di database sehingga hilang pada daftar user yang online 

cara kerjanya seperti ini:

• saat user mendaftar ke aplikasi chat tentunya kita memerlukan kode php untuk mengirimkan data ke database . cek pada halaman peiksa.php

 

$q=mysql_query("insert into chat(nama, pesan, waktu, status, situs)values
( '$nama', '$nama baru saja masuk','$waktu','on', '$situs')");

code yang berwarna merah adalah kuncinya 'status' merupakan nama  salah satu kolom dari table chat kita sedangkan 'on' merupakan tanda atau statusnya yang menandakan user online , data ini dikirim ke database chat bersama-sama data yang lain (nama,pesannya, waktu status ,situs) sehingga masuk ke dalam database

• Sekarang untuk menampilkan user tersebut, kita menggunakan kode php untuk menampilkan nama pada tiap baris yang berstatus 'ON' ,lihat pada halaman daftaruser.php

$km=mysql_query("SELECT * FROM chat where status='on'");
$m = mysql_num_rows($km);
while($row=mysql_fetch_array($km))
{
echo "<a href=".$row['situs']." >".$row['nama']."</a><br>
";}

1.  pemanggilan SELECT * FROM chat where status='on' adalah memilih semua  data pada table chat tetapi yang berstatus 'on'
2.  $row=mysql_fetch_array($km) minta izin untuk mengakses dan menampilkan isi dari data menggunakan perintah .$row['nama-kolom']. 
3. "echo" perintah untuk menampilkan 
4. kita bubuhkan link <a href> dimana link di tuju, $row['situs'] merupakan  alamat situs sang user 
5. krtikan pada broser localhost/aplikasichat/daftaruser.php  maka akan tampil

• Menampilkan data tersebut pada halaman chat, kita menggunkan metode script ajax yang merefres halaman tersebut tiap beberapa detik sekali sehingga, database akan di baca secara realtime otomatis manfaatnya akan langsung memunculkan data baru tanpa harus merefres halaman

lihat pada halaman chat.php

Reloadthis merupakan cara kita menampilkan data user yang online menggunakan ajax yang bisa refresh otomatis diantara div tersebut memang kosong karena kita memanggil data tersebut menggunkan javascript yang ber id=reloadthis
kode java script tersebut bernama lihatuser.js

function Ajax(){
var xmlHttp;
    try{  
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }
    catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
        setTimeout('Ajax()',1000);
    }
}
xmlHttp.open("GET","daftaruser.php",true);
xmlHttp.send(null);
}

window.onload=function(){
    setTimeout('Ajax()',100);
}

function buka(){
open('formpesan.html','form','menubar=no,width=500,height=400');
}

 getElementById('ReloadThis'= mendapatkan kode element ber-id= reload this, untuk dapat di tampilkan halaman ("GET","daftaruser.php) Daftaruser.php, dan di set halamannya dengan ajax tiap 100 milisecond .


Halaman lihatuser.js memang berada pada luar halaman maka dari itu kita (kembali ke halaman chat.php)
membubuhkan kode

seperti diatas pada halaman chat.php

• proses logout , lihat halaman chat.php pada kode <div class="logout"><a href="logout.php?op=out">logout</a></div> akan menampilkan kata logout yang akan di arahkan ke halaman logout.php

else if($op=="out"){

$jm=mysql_query("DELETE FROM chat WHERE nama = '$_SESSION[nama]' and status='on'");
$j = mysql_num_rows($jm);


{
    unset($_SESSION['nama']);
    unset($_SESSION['situs']);
    header("location:chat.php");
}}
?>

1. (merah) pemanggilan ke database dengan php untuk menghapus data yang bernama sesuai dengan season dan mencari nama yang berstatus on untuk di hapus
2. (orange) memerintahkan broser untuk tidak lagi mengadopsi sesion nama dan situs

• nah setelah itu user akan kembali di bawa ke login form pada halaman chat.php dan secara otomatis user tersebut akan hilang dari muka bumi daftar user

berakhir sudah pembahasan pada pembahasan ini tunggu pembahasan selanjutnya,