Sunday, November 1, 2015

Aplikasi chatting tidak asing lagi bagi telinga kita, sebab sudah sering kita lihat iklan pada televisi atau pada media lainnya seperti wechat, line, dan lain-lain. Apakah terlintas difikiran kita bagaimana cara membuat chat sendiri tidak perlu menggunakan milik orang lain.

Pada pembuatan aplikasi chatting maka anda buatlah sebuah folder dengan nama apa saja namun disini penulis menggunakan nama chatroom kemudian buatlah database pada mysql server dengan nama database dan tabel terserah anda namun yang wajib diketahui anda harus edit file koneksi.php sesuai dengan user server anda, untuk script sql dapat anda copy seperti dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
CREATE DATABASE IF NOT EXISTS `chat` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `chat`;

CREATE TABLE IF NOT EXISTS `message` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `message` text NOT NULL,
  `sender` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

INSERT INTO `message` (`id`, `message`, `sender`) VALUES
(1, 'helo', 'argie'),
(2, 'hi', 'wewew'),
(3, 'helo', 'argie'),
(4, 'helo', 'argie'),
(5, '(=^_^=)', 'wewew'),
(6, 'helo', 'argie'),
(7, 'hi', 'Ghazali'),
(8, 'saya suka', 'Ghazali'),
(9, 'saya datang', 'admin'),
(10, 'saya juga', 'user'),
(11, 'emang kamu dimana', 'admin'),
(12, 'saya di sebelah feri', 'user');

CREATE TABLE IF NOT EXISTS `user` (
  `id_user` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(45) NOT NULL,
  `password` varchar(45) NOT NULL,
  PRIMARY KEY (`id_user`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `user` (`id_user`, `username`, `password`) VALUES
(1, 'admin', 'admin'),
(2, 'user', 'user');

Selanjutnya pada folder tadi buat file koneksi.php dan letakkan script dibawah ini dan selanjutnya buat file lagi yang berbentuk bold.

1
2
3
4
<?php
mysql_connect("localhost","root","")or die("Gagal Koneksi");
mysql_select_db("chat")or die("Tidak ada database");
?>

header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Simple Chat</title>
 <script language="javascript" src="jquery-1.2.6.min.js"></script>
 <script language="javascript" src="jquery.timers-1.0.0.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
      var j = jQuery.noConflict();
   j(document).ready(function(){
    j(".refresh").everyTime(1000,function(i){
     j.ajax({
        url: "refresh.php",
        cache: false,
        success: function(html){
       j(".refresh").html(html);
        }
     })
    })
   
   });
   j(document).ready(function() {
    j('#post_button').click(function() {
     $text = $('#post_text').val();
     j.ajax({
      type: "POST",
      cache: false,
      url: "save.php",
      data: "text="+$text,
      success: function(data) {
       alert('data has been stored to database');
      }
     });
    });
   });
      j('.refresh').css({color:"green"});
  });
 </script>
 <style type="text/css">
 .refresh {
      border: 1px solid #333333;
  border-left: 4px solid #333333;
      color: green;
      font-family: tahoma;
      font-size: 12px;
      height: 225px;
      overflow: auto;
      width: 400px;
  padding:10px;
  background-color:#FFFFFF;
 }
 #post_button{
  border: 1px solid #333333;
  background-color:#333333;
  width: 100px;
  color:#FFFFFF;
  font-weight: bold;
  margin-left: -105px; padding-top: 4px; padding-bottom: 4px;
  cursor:pointer;
 }
 #buttontwo{
  border: 1px solid #333333;
  background-color:#333333;
  width: 100px;
  color:#FFFFFF;
  font-weight: bold;
  margin-left: -105px; padding-top: 4px; padding-bottom: 4px;
  cursor:pointer;
 }
 #textlog{
  border: 1px solid #333333;
  border-left: 4px solid #333333;
  width: 410px;
  margin-bottom: 10px;
  padding:5px;
 }
 #textb{
  border: 1px solid #333333;/*#3366FF;*/
  border-left: 4px solid #333333;
  width: 320px;
  margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; width: 415px;
 }
 #texta{
  border: 1px solid #333333;
  border-left: 4px solid #333333;
  width: 410px;
  margin-bottom: 10px;
  padding:5px;
 }
 .p{
  border-top: 1px solid #EEEEEE;
  margin-top: 0px; margin-bottom: 5px; padding-top: 5px;
 }
 span{
  font-weight: bold;
  color: #3B5998;
 }
 </style>
</head>
<body>

footer.php

1
2
3
4
5
<footer>
<p>© Ghazali</p>
</footer>
</body>
</html>

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
include "koneksi.php";
include "header.php";
if(isset($_POST['submit'])){
 $user=$_POST['user'];
 $pass=$_POST['pass'];
 $has=mysql_query("select * from user where username='$user' and password='$pass'");
 $data=mysql_fetch_array($has);
 $u=$data['username'];
 $p=$data['password'];
 if($user=$u && $pass=$p){
  session_start();
  $_SESSION['username']=$u;
  header('location: chat.php');
 } else{
  echo mysql_error();
 }
}
?>
<form method="post" name="" action="">
<p><label>Username </label>

<input name="user" type="text" id="textlog"/></p>
<p><label>Password </label>

<input name="pass" type="password" id="textlog"/>
<input name="submit" type="submit" value="Login" id="buttontwo" /></p>
</form>
<?php include "footer.php"; ?>

chat.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
include "koneksi.php";
include "header.php";
session_start();
if(!isset($_SESSION['username'])){
 header('location: index.php');
}
if(isset($_GET['out'])=='yes'){
 echo '<script type="text/javascript">window.location.assign("index.php");</script>';
 session_destroy();
}
if(isset($_POST['submit'])){
 $message=$_POST['message'];
 $sender=$_POST['sender'];
 mysql_query("INSERT INTO message(message, sender)VALUES('$message', '$sender')");
}
?>
<p>Selamat datang wahai <b><?php echo $_SESSION['username'] ?></b> | <a href="?out=yes" style="text-decoration:none;color: green;">Logout</a></p>
<form method="POST" name="" action="">
<input name="sender" type="hidden" id="texta" value="<?php echo $_SESSION['username'] ?>"/>
<div class="refresh">
<?php include "refresh.php"; ?>
</div>
<input name="message" type="text" id="textb"/>
<input name="submit" type="submit" value="Chat" id="post_button" />
</form>
<?php include "footer.php"; ?>

refresh.php

1
2
3
4
5
6
7
<?php
include "koneksi.php";
$result = mysql_query("SELECT * FROM message ORDER BY id DESC");
while($row = mysql_fetch_array($result)){
   echo '<p class="p">'.'<span>'.$row['sender'].'</span>'. '  ' . $row['message'].'</p>';
}
?>

save.php


1
2
3
4
5
6
7
<?php
if (isset($_POST['text'])) {
 include "koneksi.php";
 $ddd=$_POST['text'];
 $query = "INSERT INTO message (message) VALUES ('$ddd')";
}
?>