Membuat Live Chat Ala Facebook Menggunakan Php dan Jquery

Mungkin bagi kalian penggun facebook sudah tidak asing dengan tampilan chat nya facebook  yang di kenal dengan istilah live chat. Nah pada postingan kali ini yang akan bahas mengenai bagaiman sih cara buat chating online atau live chat mirip mirip facebook ini. ?

ok langsung saja kita ke code dan apa saja sih bahan yang di butuhkan

Langkah 1:

Kita butuh file jquery dan css yakni  :

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/chat.js"></script>

<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />

<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />

Langkah ke 2:

Kita buat file dengan nama tes.php copy kode di bawah

<div id="chat-sidebar">

      <div id="sidebar-user-box">

      <img src="avatar.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('Ceena')">Ceena</a></span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar2.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nani')">nani</a> </span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar3.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nini')">nini</a>  </span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar04.png" />

      <span id="slider-username"> <a href="javascript:void(0)" onclick="javascript:chatWith('maman')">maman</a>  </span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar3.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('lala')">lala</a>  </span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar5.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('knting')">knting</a>  </span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar04.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('deni')">deni</a>  </span>

      </div>     

      <div id="sidebar-user-box">

      <img src="avatar.png" />

      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('dadan')">dadan</a>  </span>

      </div>     

       

</div>     

Sampai di sini tahapan sudah selesai tinggal tes utnuk kode lengkap silahkan  donlod di sini

Sekian postingan kali ini semoga bermanfaat terima kasih

Tweet