Membuat sistem Notifikasi Menggunakan PHP, AJAX dan Bootstrap

September 28, 2017 , , 0 Comments

Pada kesempatan ini kita akan membahas tentang sistem notifikasi dengan menggunakan PHP, AJAX dan Bootstrap, sistem notifikasi ini bisa anda terapkan pada aplikasi / projek anda.



 langsung saja untuk membuatnya seperti biasa buat dulu html nya seperti berikut:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Popup Notification Like Facebook using PHP AJAX Bootstrap</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

<style media="screen">

        #alert-popover

        {

        display: block;

        position: absolute;

        bottom: 50px;

        left: 50px;

        }

        .wrapper

        {

        display: table-cell;

        vertical-align: bottom;

        height: auto;

        width: 200px;

        }

        .alert-default

      {

              color: #333333;

              background: #f2f2f2;

              border-color: #cccccc;

              }

</style>

</head>

<body>

<br/><br/>

<div class="container">

<br>

<h2>Facebook Style Notification Using PHP Ajax & Bootstrap</h2>

<br>

<!-- Form  -->

<form id="comment_form" method="post">

<div class="form-group">

<label>Enter Subject</label>

<input type="text" name="subject" id="subject" class="form-control"/>

</div>

<div class="form-group">

<label>Enter Comment</label>

<textarea name="comment" id="comment" class="form-control"></textarea>

</div>

<div class="form-group">

<input type="submit" name="post" id="post" class="btn btn-info" value="Post"/>

</div>

</form>

<!-- Form berakhir disini  -->



<div id="alert-popover">

<div class="wrapper">

<div class="content">



</div>

</div>

</div>

</div>

</body>

</html>



<script>

  $(document).ready(function(){



          setInterval(function(){

          load_last_notification();

          }, 10000);



          function load_last_notification()

          {

          $.ajax({

          url:"fetch.php",

          method:"POST",

          success:function(data)

          {

          $('.content').html(data);

          }

          })

          }



          $('#comment_form').on('submit', function(event){

          event.preventDefault();

          if ($('#subject').val() != '' && $('#comment').val() != '')

          {

          var form_data = $(this).serialize();

          $.ajax({

          url:"insert.php",

          method:"POST",

          data:form_data,

          success:function(data)

          {

          $('#comment_form')[0].reset();

          }

          })

          }

          else

          {

          alert("Both Fields are Required");

          }

          });

          });

</script>

kemudian buat file PHP untuk menyimpan datanya seperti berikut:
<?php



        //insert

        if (isset($_POST["subject"]))

        {

        $connect = mysqli_connect("localhost", "root", "", "notification");

        $subject = mysqli_real_escape_string($connect, $_POST["subject"]);

        $comment = mysqli_real_escape_string($connect, $_POST["comment"]);



        $query = "INSERT INTO comments(comment_subject, comment_text) VALUES ('$subject', '$comment')";

        mysqli_query($connect, $query);

}

lalu buat lagi file php untuk mengambil datanya, file ini yang akan menampilkan notifikasinya dalam bentuk alert dialog:
<?php

    error_reporting(0);



//

$connect = mysqli_connect("localhost", "root", "", "notification");

        $query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC";

        $result = mysqli_query($connect, $query);



        while ($row = mysqli_fetch_array($result))

        {

        $output .= '

<div class="alert alert-default">

<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

<p><strong>'.$row["comment_subject"].'</strong>

<small><em>'.$row["comment_text"].'</em></small>

</p>

</div>

        ';

        }



        $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status = 0";

        mysqli_query($connect, $update_query);

        echo $output;

terakhir untuk tabel databasenya seperti berikut:
-- phpMyAdmin SQL Dump
        -- version 4.5.1
        -- http://www.phpmyadmin.net
        --
        -- Host: 127.0.0.1
        -- Generation Time: 26 Sep 2017 pada 00.17
        -- Versi Server: 10.1.16-MariaDB
        -- PHP Version: 5.6.24

        SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
        SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

        --
        -- Database: `notification`
        --

        -- --------------------------------------------------------

        --
        -- Struktur dari tabel `comments`
        --

        CREATE TABLE `comments` (
        `comment_id` int(11) NOT NULL,
        `comment_subject` varchar(100) NOT NULL,
        `comment_text` varchar(255) NOT NULL,
        `comment_status` int(1) NOT NULL DEFAULT '0'
        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

        --
        -- Dumping data untuk tabel `comments`
        --

        INSERT INTO `comments` (`comment_id`, `comment_subject`, `comment_text`, `comment_status`) VALUES
        (1, 'peter send you a message', 'hello friend, how are you?', 1),
        (2, 'hello friend, how are you?', 'hhhi', 1),
        (3, 'hi', 'hello', 1),
        (4, 'hi', 'hi', 1),
        (5, 'peter parker send you a message', 'hi jhon ', 1),
        (6, 'you have a friend request from jhon', 'jhon: do you a friend', 1),
        (7, 'parker send you a message', 'Nice to meet you', 1);

        --
        -- Indexes for dumped tables
        --

        --
        -- Indexes for table `comments`
        --
        ALTER TABLE `comments`
        ADD PRIMARY KEY (`comment_id`);

        --
        -- AUTO_INCREMENT for dumped tables
        --

        --
        -- AUTO_INCREMENT for table `comments`
        --
        ALTER TABLE `comments`
        MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


silakan jalankan program anda jika ada yng kurang jelas silakan ditanyakan, jika artikel ini bermanfaat silkan di share, anda juga bisa melihat demo notifikasi ini pada tautan di bawah. terimakasih sudah mampir ke blog kami.

Lihat Demo

Juanas Smith Shared

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar :

Langganan: Posting Komentar ( Atom )