Mari belajar tentang cara
membuat aplikasi Obrolan sederhana dengan menggunakan sistem login yang sudah
ada. Ini akan solusi yang berguna dan yang paling sederhana. Kami akan dapat
chatting dengan anggota login kami. Kami akan menggunakan database untuk
menyimpan pesan.
Tahap-1 : Membuat Template dengan HTML, PHP
Ini untuk jendela obrolan utama. copy script dibawah ini dengan nama: index.php
<frameset rows="65%,35%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF0000">
<frame src="messages.php" name="main_frame">
<frame src="main.php" name="login_frame" scrolling="no" noresize target="middle">
</frameset>
Selanjutnya buat form
login, kopi kode dibwah ini dan beri nama: login_form.html
<link type="text/css" rel="stylesheet" href="styles.css" />
<form class="login_form" method="post" action="main.php">
<div>Username: <input type="text" name="username" /></div>
<div>Password: <input type="password" name="password" /></div>
<div><input type="submit" value="Login" name="Login" /></div>
</form>
<div>You can use username "User1" or "User2" or "User3" and password "qwerty" to login in system</div>
Berikut adalah file 3
template untuk chatting (2 kotak pesan dan 1 untuk mengirim formulir
pesan):
chat_begin.html
<link type="text/css" rel="stylesheet" href="styles.css" />
<div class="chat_main">
<h3>Chat</h3>
chat_end.html
</div>
chat_input.html
<link type="text/css" rel="stylesheet" href="styles.css" />
<form class="submit_form" method="post" action="main.php">
<div><input type="text" name="s_message" /><input type="submit" value="Say" name="s_say" /></div>
</form>
<div>You can type anything in chat</div>
Tahap-2 : CSS
Kopi kode dibawah ini, simpan dengan nama: styles.css
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {
-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;
}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Tahap-3 : Membuat Database
CREATE TABLE `s_chat_messages` (
`id` INT(11) NOT NULL AUTO_INCREMENT ,
`user` VARCHAR(255) NOT NULL ,
`message` VARCHAR(255) NOT NULL ,
`when` INT(11) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Buatlah Database seperti dibawah ini:
Tahap-4 : Membuat Kode PHP
Anda ingat - untuk memiliki
siap sistem otentikasi mudah. Saya pindah ke file library eksternal (inc /
login.inc.php). Ini akan berguna bagi kita - sekarang kode lebih terstruktur
dan nyaman untuk digunakan di tempat yang berbeda dari kode.
Setelah membuat
perpustakaan baru untuk bekerja dengan chatting (inc / chat.inc.php). Kelas ini
memiliki fungsi berikutnya:
menerima Pesan - fungsi
menerima pesan yang dikirim dan menyimpannya dalam tabel DB
getMessages - daftar
kembali dari 15 pesan terakhir
Setelah membuat 2
file terakhir: messages.php dan main.php. file pertama digunakan untuk
menggambar daftar pesan. Ini memiliki pembaruan otomatis setiap 5 detik (saya
hal ini cukup untuk chatting kami). bentuk imbang login kedua dan bidang
masukan dari chatting. Di mana kita karena login dapat memasukkan teks dalam
chat.
Ok, di sini adalah semua
file PHP yang digunakan, dengan nama:
main.php
<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('inc/login.inc.php');
require_once('inc/chat.inc.php');
// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();
$oSimpleChat = new SimpleChat();
// draw login box
echo $oSimpleLoginSystem->getLoginBox();
// draw chat application
$sChatResult = 'Need login before using';
if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
if ($oSimpleLoginSystem->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
$sChatResult = $oSimpleChat->acceptMessages();
}
}
echo $sChatResult;
?>
messages.php
<meta http-equiv="refresh" content="5">
<?php
require_once('inc/chat.inc.php');
$oSimpleChat = new SimpleChat();
echo $oSimpleChat->getMessages();
?>
Buatlah direktori inc, isi file : chat.inc.php, login.inc.php
inc/chat.inc.php
<?php
// simple chat class
class SimpleChat {
// DB variables
var $sDbName;
var $sDbUser;
var $sDbPass;
// constructor
function SimpleChat() {
//mysql_connect("localhost","username","password");
$this->sDbName = 'database_name';
$this->sDbUser = 'username';
$this->sDbPass = 'password';
}
// adding to DB table posted message
function acceptMessages() {
if ($_COOKIE['member_name']) {
if(isset($_POST['s_say']) && $_POST['s_message']) {
$sUsername = $_COOKIE['member_name'];
//the host, name, and password for your mysql
$vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);
//select the database
mysql_select_db($this->sDbName);
$sMessage = mysql_real_escape_string($_POST['s_message']);
if ($sMessage != '') {
mysql_query("INSERT INTO `s_chat_messages` SET `user`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
}
mysql_close($vLink);
}
}
ob_start();
require_once('chat_input.html');
$sShoutboxForm = ob_get_clean();
return $sShoutboxForm;
}
function getMessages() {
$vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);
//select the database
mysql_select_db($this->sDbName);
//returning the last 15 messages
$vRes = mysql_query("SELECT * FROM `s_chat_messages` ORDER BY `id` ASC LIMIT 15");
$sMessages = '';
// collecting list of messages
if ($vRes) {
while($aMessages = mysql_fetch_array($vRes)) {
$sWhen = date("H:i:s", $aMessages['when']);
$sMessages .= '<div class="message">' . $aMessages['user'] . ': ' . $aMessages['message'] . '<span>(' . $sWhen . ')</span></div>';
}
} else {
$sMessages = 'DB error, create SQL table before';
}
mysql_close($vLink);
ob_start();
require_once('chat_begin.html');
echo $sMessages;
require_once('chat_end.html');
return ob_get_clean();
}
}
?>
inc/login.inc.php
<?
// class SimpleLoginSystem
class SimpleLoginSystem {
// variables
var $aExistedMembers; // Existed members array
// constructor
function SimpleLoginSystem() {
$this->aExistedMembers = array(
'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4',
'User3' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
);
}
function getLoginBox() {
ob_start();
require_once('login_form.html');
$sLoginForm = ob_get_clean();
$sLogoutForm = '<a href="'.$_SERVER['PHP_SELF'].'?logout=1">logout</a>';
if ((int)$_REQUEST['logout'] == 1) {
if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
$this->simple_logout();
}
if ($_REQUEST['username'] && $_REQUEST['password']) {
if ($this->check_login($_REQUEST['username'], MD5($_REQUEST['password']))) {
$this->simple_login($_REQUEST['username'], $_REQUEST['password']);
return 'Hello ' . $_REQUEST['username'] . '! ' . $sLogoutForm;
} else {
return 'Username or Password is incorrect' . $sLoginForm;
}
} else {
if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
return 'Hello ' . $_COOKIE['member_name'] . '! ' . $sLogoutForm;
}
}
return $sLoginForm;
}
}
function simple_login($sName, $sPass) {
$this->simple_logout();
$sMd5Password = MD5($sPass);
$iCookieTime = time() + 24*60*60*30;
setcookie("member_name", $sName, $iCookieTime, '/');
$_COOKIE['member_name'] = $sName;
setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
$_COOKIE['member_pass'] = $sMd5Password;
}
function simple_logout() {
setcookie('member_name', '', time() - 96 * 3600, '/');
setcookie('member_pass', '', time() - 96 * 3600, '/');
unset($_COOKIE['member_name']);
unset($_COOKIE['member_pass']);
}
function check_login($sName, $sPass) {
return ($this->aExistedMembers[$sName] == $sPass);
}
}
?>
Demikian Membuat Chat Online Sederhana dengan PHP-SQl, semoga bermanfaat.
