Membuat notifikasi pemberitahuan seperti facebook

Halo sobat blogger waktu postingan kemarin saya memposting cara membuat aplikasi live hat / catting seperti facebook, Kali ini saya kebetulan ada waktu dan saya akan berbagi sedikit tentang bagaimana membuat notifikasi pemberitahuan yang sering kita lihat di jejaring sosial yang besar seperti facebook,twitter dan medsos lainnya.
Seperti yang kita tahu untuk memebuat notifikasi pemberitahuan diperlukan bahan-bahan atau editor seperti C++/DREAMWEAVER/notepad,xampp dan tidak lupa dengan secangkir kopi maupun teh hangat alangkah lebih baiknya sambil ditemani cemilan dan gorengan biar lebih josss gitu.
Untuk membuat notifikasi tersebut saya menggunakan php,database mysql,css dan jquery tentunya. Ok lang sung saja kita mulai :
1. Buat database terlebih dahulu dengan nama database " contoh " tanpa tanda kutip.
2. Buat table database seperti user dan pesan , disini saya menggunakan sistem login untuk memasuki halaman tersebut, Ni sript untuk membuat database .

Tabel pesan

CREATE TABLE IF NOT EXISTS `pesan` (
  `id_p` int(3) NOT NULL AUTO_INCREMENT,
  `kepada` int(3) NOT NULL,
  `dari` int(3) NOT NULL,
  `pesan` text NOT NULL,
  `sdb` varchar(3) NOT NULL,
  PRIMARY KEY (`id_p`),
  KEY `kepada` (`kepada`,`dari`),
  KEY `dari` (`dari`)
)

INSERT INTO `pesan` (`id_p`, `kepada`, `dari`, `pesan`, `sdb`) VALUES
(1, 1, 2, 'ini pesan dari doni', 'no'),
(2, 2, 1, 'haloo ini pesan dari andi', 'no'),
(3, 1, 2, 'pesan ke dua kkdkkdk kdkdkdkdkd dkdkdkdk kdkdkdkdkd kdkdkdk kddkkdkd', 'no'),
(4, 1, 2, 'pesan ke 3', 'no');

Tabel user

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(3) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `pass` varchar(10) NOT NULL,
  PRIMARY KEY (`id`)
)

INSERT INTO `user` (`id`, `nama`, `email`, `pass`) VALUES
(1, 'andi', 'andi@gmail.com', 'satu'),
(2, 'doni', 'doni@gmail.com', 'dua');

Lalu buat folder dengan nama noti dan buat file sperti dibawah ini dan simpan semua di dalam folder noti, dan copy sript dibawah ini

index.php

<?php
session_start();
if(empty($_SESSION["user"])){
 header("location:login.php");}else {
require"fung.php";
$ct=new Chat(); 
$mm=$_SESSION["user"];
$nm=$ct->nama($mm);
foreach($nm as $name);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membuat notifikasi pemberitahuan seperti facebook</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="notifikasi.js" type="text/javascript" ></script>
</head>
<body bgcolor="#CCCCCC" topmargin="0" leftmargin="0" rightmargin="0">
<div id="kepala">
    <div class="logo">www.deblenk.xyz</div>
    <div class="kanan">
    <div class="hiji"><img src="bola.png" class="gam"/> <span id="notifikasi"></span><div>notifikasi</div>
    <ul class="pes">
    <li class="htu"></li>
    </ul></div>
    <div><img src="gt.png" height="40"/> <span class="pro"><?php echo $name["nama"]; ?></span> </div>
    </div>
    </div>
</body>
</html>
<?php }?>

login.php

<?php
session_start();
require"fung.php";
$ct=new Chat(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<style>
#login{
 width:400px; background-color:#093; padding:10px; border-radius:5%; box-shadow:#CCC 1px 40px 4px 11px; margin-top:100px;}
 #login h1{ text-align:center; color:#FFF; font-family:"Comic Sans MS", cursive;}
 #login input{ padding:5px; margin:5px; width:80%;}
</style>
<body bgcolor="#000000">
<center><div id="login">
<h1>Login</h1>
<?php
if(isset($_POST["login"])){
 $email=$_POST["email"];
 $pass=$_POST["pass"];
 $login=$ct->login($email,$pass);
 if($login->rowCount() > 0){
  foreach($login as $lgi);
  $_SESSION["user"]=$email;
  header("location:index.php");}
  else{ echo "<div class='eror'>Sorry email atau password anda salah !!!</div>";}}else {"";}
  ?>
<form method="post" action="" >
<div><input type="text" name="email" placeholder="email" required="required" /></div>
<div><input type="password" name="pass" placeholder="password" required="required" /></div>
<div><input type="submit" name="login" value="Login"/></div>
</form></div><div style="width:400px; font-size:12px; color:#06F;"><p>Gunakan 2 browser yang satu di hrome dan satu di mozila ,,email <u>andi@gmail.com</u> dan password <u>satu</u></p><br />
Dan <p>email <u>doni@gmail.com</u> dan password <u>dua</u></p></div></center>
</body>
</html>

fung.php

<?php
class Chat {
public function __construct(){
$this->db = new PDO('mysql:host=localhost;dbname=contoh','root','');
} 
public function login($email,$pass){
 $sql="SELECT * from user where email='$email' AND pass='$pass'";
  $lgi=$this->db->query($sql);
  if($lgi){
 return $lgi;}else { return false;}
 
}
public function nama($mm){
 $sql="SELECT * from user where email='$mm'";
 $name=$this->db->query($sql);
 return $name;
}
public function cek($cek){
 $sql="SELECT user.id as id,user.nama as nama,pesan.id_p as id_p,pesan.dari as dari,pesan.kepada as kepada,pesan.pesan as pesan,pesan.sdb as sdb  from user,pesan
    WHERE user.id=pesan.dari and pesan.kepada='$cek' and pesan.sdb='no'";
 $jui=$this->db->query($sql);
 return $jui;
}
public function frien($no,$pilih){
 $fro="UPDATE pesan SET sdb='ya' WHERE id_p='$no'";
 $upd=$this->db->query($fro);
 $sql="SELECT user.id as id,user.nama as nama,pesan.id_p as id_p,pesan.dari as dari,pesan.kepada as kepada,pesan.pesan as pesan,pesan.sdb as sdb  from user,pesan
    WHERE user.id=pesan.dari and pesan.id_p='$no'";
 $tampil=$this->db->query($sql);
 return $tampil;
}
}

cekpesan.php

<?php
session_start();
require"fung.php";
$ct=new Chat();
$mm = $_SESSION['user'];
$nim=$ct->nama($mm);
foreach($nim as $name);
$cek=$name["id"];
$cekp=$ct->cek($cek);
$j = $cekp->rowcount();
if($j>0){
    echo $j;
}
?>

mes.php

<?php
session_start();
if(empty($_SESSION["user"])){
 header("location:login.php");}else {
require"fung.php";
$ct=new Chat(); 
$mm=$_SESSION["user"];
$nm=$ct->nama($mm);
foreach($nm as $name);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membuat notifikasi pemberitahuan seperti facebook</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="notifikasi.js" type="text/javascript" ></script>
</head>
<body bgcolor="#CCCCCC" topmargin="0" leftmargin="0" rightmargin="0">
<div id="kepala">
    <div class="logo">www.deblenk.xyz</div>
    <div class="kanan">
    <div class="hiji"><img src="bola.png" class="gam"/> <span id="notifikasi"></span><div>notifikasi</div>
    <ul class="pes">
    <li class="htu"></li>
    </ul></div>
    <div><img src="gt.png" height="40"/> <span class="pro"><?php echo $name["nama"]; ?></span> </div>
    </div>
    </div>
<div id="konten"><center><div style="background-color:#fff; color:#999; border-radius:7px; width:600px; padding:6px; text-align:left;"><?php
$ct=new Chat();
$pilih = $_SESSION['user'];
$no = $_GET['no'];
$gto =$ct->frien($no,$pilih);
foreach($gto as $tampil){
    echo "Dari : ".$tampil['nama']."<br>";
    echo "PESAN :<br>".$tampil['pesan']."";
}

?></div></center></div>
</body>
</html>
<?php }?>

notifikasi.js

var x = 1;

function cek(){
    $.ajax({
        url: "cekpesan.php",
        cache: false,
        success: function(msg){
            $("#notifikasi").html(msg);
        }
    });
    var waktu = setTimeout("cek()",3000);
}

$(document).ready(function(){
    cek();
 $(".pes").hide();
 $(".hiji").click(function(){
  $(".pes").toggle();
        //ajax untuk menampilkan pesan yang belum terbaca
        $.ajax({
            url: "pd.php",
            cache: false,
            success: function(msg){
                $("#loading").hide();
                $(".htu").html(msg);
            }
        });

    });
    $("#content").click(function(){
        $("#info").hide();
        $("#pesan").css("background-color","#4B59a9");
        x = 1;
    });
});

pd.php

<?php
session_start();
require"fung.php";
$ct=new Chat();
$mm = $_SESSION['user'];
$nim=$ct->nama($mm);
foreach($nim as $name);
$cek=$name["id"];
$cekp=$ct->cek($cek);
$j = $cekp->rowcount();
if($j>0){
    echo "<table border=0 width=100% style=\"font-size:10pt\">";
}else{
    die("<font color=red size=1>Tidak ada pesan baru yang belum dibaca</font>");
}
foreach($cekp as $jui){
    echo "<tr><td onmouseover=\"this.style.backgroundColor='#ccc'\"
     onmouseout=\"this.style.backgroundColor='#fff'\">
     <a href=mes.php?no=".$jui['id_p']."
  style='color:green;'>X Pesan dari : ".$jui['nama']."</a><br>
      ".$jui['pesan']."</td></tr>";
}
echo "</table>";
?>

css.css

@charset "utf-8";
#kepala{background-color:#693;padding-top:10;padding-bottom:2; height:50px; width:100%; position:fixed; display:inline-block; color:#fff; box-shadow:#9C6 1px 1px 2px 3px;}
#kepala:hover{background-color:#F6F;}
#kepala .logo{ float:left; text-align:center; margin-left:10px; font-size:36px; font-weight:bold;}
#kepala .kanan div{ float:right; text-align:center; margin-right:20px; font-size:24px; font-weight:bold; margin-bottom:2px; margin-top:5px; margin-left:8px;}
#kepala .kanan{cursor:pointer;}
#kepala .kanan .pes{background-color:#FFF; margin-top:10px; box-shadow:#999 7px 7px 7px; position:absolute; right:35px;}
#kepala .kanan .pes li{background-color:#FFF; color:#999; font-size:14px; list-style:none; text-align:left; margin-left:-22px; padding-bottom:3px; width:250px; }
center{padding:5px;}
#konten{top:100px; position:relative;}
.eror{color:#C00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
#notifikasi{color:#FF0;}
.pro{ font-family:"Courier New", Courier, monospace;}
.gam{ width:30px; height:30px; margin-top:7px;}

Silahkan anda download jquery-1.4.3.min.js di situs jquery, dan download ke 2 gambar di bawah ini

Selanjutnya

About Blogger

Market Uang

Membuat notifikasi pemberitahuan seperti facebook

Si ade

Membuat notifikasi pemberitahuan seperti facebook

Tabel pesan

Tabel user

Lalu buat folder dengan nama noti dan buat file sperti dibawah ini dan simpan semua di dalam folder noti, dan copy sript dibawah ini

index.php

login.php

fung.php

cekpesan.php

mes.php

notifikasi.js

pd.php

css.css

Selanjutnya