[Code PHP] Tạo thông báo có âm thanh giống facebook bằng PHP

Bạn đang thắc mắc là trong php bạn muốn tạo thông báo khi có dữ liệu thêm vào cơ sở dữ liệu MYSQL thì trình duyệt sẽ thông báo và có tiếng động giống như là facebook thì thực hiện như thế nào ?

-> notification box appear with sound effect like Facebook

Demo trang web php

 

Đầu tiên các bạn phải cần một trang viết code HTML có giao diện như trên , khi chúng ta post một comment mới thì nó sẽ thêm vào cơ sở dữ liệu sau đó trả về một thông báo hiện hành trên màn hình cho người dùng.

Code HTML

<div class="lessoncup"> 

<textarea id="box" class="box"></textarea>

<input value="POST" id="btn" class="btn" type="button" />

<div id="loader"></div>

</div>

<div id="alertbox"></div>

Code Javscript

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

 $('#btn').click(function(){ 

  var post = $('#box').val(); 

  if(post==""){

   alert('enter please');   

  }else{  

  $('#loader').fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">sending</span>');

    var datasend = "alert="+post; 

  $.ajax({

   type:'POST',

   url:'alerts.php',

   data:datasend,

   cache:false,

   success:function(msg){

    $('#box').val('');

    $('#loader').hide();

    $('#alertbox').fadeIn('slow').prepend(msg);

    $('#alerts').delay(5000).fadeOut('slow');

   }

    });   

  }  

 })

      

});

</script>

Tạo file alerts.php

<?php

include('db.php');

extract($_REQUEST);

$h_name=htmlentities($alert);

$in_name = mysql_real_escape_string($h_name);

mysql_query("insert into alerts(message) values('$in_name')");

$alerts = mysql_query("select * from alerts order by alertId desc");

$full=mysql_fetch_array($alerts);

?>

<div id="alerts">

<audio id="audioplayer" autoplay=true>

    <source src="sound/ping.mp3" type="audio/mpeg">

   <source src="sound/ping.ogg" type="audio/ogg">

  Your browser does not support the audio element. </audio>

<li>

<img src="icons/i.jpg" align="top" style="float:left; margin-right:2px;" />

<div><?php echo substr($full['message'],0,100)?></div>

</li>

</div>

Vậy là xong mình đã share code hiện thông báo giống facebook cho php nếu như các bạn không hiểu thì có thể download code dưới đây để các bạn xem kỹ hơn nhé.

https://app.box.com/s/3hy46r0vr8oczhiv34bw

• Bình luận Google
• Bình luận Facebook