Output dari kode diatas apabila ada orang yang berkomentar, notifikasinya terkirim ke semua user, walaupun bukan dia yang menulis artikel itu. Kalau ada pertanyaan saya / codenya yang kurang jelas, Pada kesempatan kali ini saya akan Membuat Notifikasi Facebook Menggunakan PHP AJAX. Dimana animasi notifikasi akan dibuat mirip seperti di tampilan facebook. Langkah pertama untuk Membuat Notifikasi Facebook Menggunakan PHP AJAX adalah membuat design databasenya terlebuh dahulu atau teman-teman bisa salin script di bawah ini.
Jika sudah berikutnya kita akan membuat tampilan struktur html seperti berikut. Simpan dengan nama index.php
Dan selanjutnya masih dalam satu file, saya akan membuat script ajax untuk dapat membuat proses simpan dan menampilkan data notifikasi. Dan dilanjutkan dengan membuat file baru dengan nama insert.php untuk perintah simpan ke database menggunakan PHP. 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">×</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 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. |