/ / Php cơ bản / Comment (0)

Like và dislike giống Youtube bằng JQuery AJax

Trong bài hướng dẫn này mình sẽ hướng dẫn các bạn tạo nút likedislike giống youtube bằng JQuery AJax,đây là chức năng rất hay được sử dụng để đánh giá 1 bài viết,sản phẩm hay video nào đó.Trong phần này mình sẽ hướng dẫn cho việc đánh giá 1 video nào đó.
– Trước khi bắt đầu các bạn cần chắc chắn đã biết sử dụng php & mysql và 1 chút về jQuery Ajax nhé.

.Thiết kế cơ sở dữ liệu:

– Trước tiên mình sẽ tạo 1 bảng dữ liệu đơn giản lưu video và để phục vụ cho bài hướng dẫn này

CREATE TABLE IF NOT EXISTS `video` (
  `id` int(255) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `link` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `like` int(255) NOT NULL,
  `dislike` int(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ;
bảng lưu các video

bảng lưu các video

  1. id: ID video (khóa chính)
  2. name: Tên video
  3. link: Link video
  4. like: Số lượt like
  5. dislike: Số lượt dislike

Lấy danh sách video

– Trong bài này mình sẽ không hướng dẫn kỹ tới các câu lệnh về php và mysql,ở đây mình sẽ tạo file index.php để thực hiện list danh sách các video ra:

<h1>Like và dislike giống Youtube bằng JQuery AJax</h1>
 
<?php
//bước 1: Kết nối tới csdl
$conn=mysql_connect("localhost", "root", "") or die("can't connect database");
//bước 2: Lựa chọn csdl và cho phép hiển thị mã utf8
mysql_select_db("demo",$conn);
mysql_query("SET NAMES 'utf8'");
//bước 3: Viết câu lệnh SQL truy vấn
$sql="select * from video";
//bước 4: Thực hiện câu truy vẫn
$query=mysql_query($sql);
//Bước 5: kiểm tra tổng số dữ liệu trả về từ câu lệnh truy vấn
if(mysql_num_rows($query) == 0)
{
    echo 'Chưa có video nào';
}else{
    //Bước 6:lấy dữ liệu từ câu truy vấn đưa về dạng mảng và hiển thị ra trong vòng lặp while
    echo "<ul>";
    while($row=mysql_fetch_array($query))
    {
        echo "<li><a href='view.php?id=".$row['id']."'>".$row['name']."</a></li>";
    }
    echo "</ul>";
}
//bước 7: Đóng csdl
mysql_close($conn);
?>
</div>      

Khi đó chúng ta sẽ có danh sách video như sau:

video

video

Trang chi tiết video và đánh giá

Tiếp theo chúng ta xây dựng trang xem chi tiết video và thực hiện like và dislike tại trang này,mình sẽ xây dựng file view.php với nội dung sau:

<?php
if(isset($_GET['id']))
{
    //lay id video
    $id = intval($_GET['id']);
    //bước 1: Kết nối tới csdl
    $conn=mysql_connect("localhost", "root", "") or die("can't connect database");
    //bước 2: Lựa chọn csdl và cho phép hiển thị mã utf8
    mysql_select_db("demo",$conn);
    mysql_query("SET NAMES 'utf8'");
    //bước 3: Viết câu lệnh SQL truy vấn
    $sql="select * from video where id = ".$id;
    //bước 4: Thực hiện câu truy vẫn
    $query=mysql_query($sql);
    $row=mysql_fetch_array($query);
    mysql_close($conn);
    if($row){
    $like    = intval($row['like']);
    $dislike = intval($row['dislike']);
    $total   = $like + $dislike;
    
    //tính % lượt like và dislike
    $like_per    = ($total > 0) ? ($like*100)/$total : 0;
    $dislike_per = ($total > 0) ? ($dislike*100)/$total : 0;
    ?>
                <iframe width="560" height="315" src="<?php echo $row['link']?>" frameborder="0" allowfullscreen></iframe>
                <div id="result">
                      <div class="rate">
                         <div class="like" style="width:<?php echo $like_per?>%" ></div>
                         <div class="dislike" style="width:<?php echo $dislike_per?>%" ></div>
                      </div>
                </div>
                <a href="javascript:void(0)" class="button_like" action="like" video-id="<?php echo $row['id']?>">Like <b><?php echo $like?></b></a>
                -
                <a href="javascript:void(0)" class="button_like" action="dislike" video-id="<?php echo $row['id']?>">Dislike <b><?php echo $dislike?></b></a>

    <?php }
}
?>

– Lúc này chúng ta sẽ được giao diện như sau:

like youtube

like youtube

Trong file này chúng ta sẽ xây dựng đoạn ajax để thực hiện cho việc like và dislike này

<script type="text/javascript">
$(document).ready(function()
{
    $("a.button_like").click(function()
    {
        var id     = $(this).attr("video-id"); //lay id video
        var action = $(this).attr("action"); //lay hanh dong like hoac dislike
        var data   = 'id='+ id + '&action='+ action; //du lieu gui sang server

        $("#result").html('Loadding...');

        //cap nhat lai so luong like, dislike
        var count_like = $(this).find('b').text();
        count_like = parseInt(count_like) + 1;
        $(this).find('b').text(count_like);

        $.ajax
        ({
            type: "POST",
            url: "like.php",
            data: data,
            success: function(html)
            {
                $("#result").html(html);
            }
        });
    });
});
</script>

Tiếp theo xây dựng trang like.php để xử lý việc cập nhật lượt like và dislike vào cơ sở dữ liệu

if(isset($_POST['id']) && isset($_POST['action']))
{
    //lay id video
    $id = intval($_POST['id']);
    //bước 1: Kết nối tới csdl
    $conn=mysql_connect("localhost", "root", "") or die("can't connect database");
    //bước 2: Lựa chọn csdl và cho phép hiển thị mã utf8
    mysql_select_db("demo",$conn);
    mysql_query("SET NAMES 'utf8'");
    //bước 3: Viết câu lệnh SQL truy vấn
    $sql="select * from video where id = ".$id;
    //bước 4: Thực hiện câu truy vẫn
    $query=mysql_query($sql);
    $row=mysql_fetch_array($query);
    
    if($row) {
        //lay luot like va dislike
        $like    = intval($row['like']);
        $dislike = intval($row['dislike']);
        
        //cập nhật lại lượt like ,dislike
        $action = $_POST['action'];
        $sql = '';
        if($action == 'like')
        {
            $like = $like + 1;
            $sql = "UPDATE `video` SET `like`='".$like."' WHERE id = ".$id;
        }elseif ($action == 'dislike')
        {
            $dislike = $dislike + 1;
            $sql = "UPDATE `video` SET `dislike`='".$dislike."' WHERE id = ".$id;
        }
        //thuc hien truy van cau lenh update
        if($sql != '')
        {
            $query=mysql_query($sql);
        }
        
        $total   = $like + $dislike;
        
        //tính % lượt like và dislike
        $like_per    = ($total > 0) ? ($like*100)/$total : 0;
        $dislike_per = ($total > 0) ? ($dislike*100)/$total : 0;
        
        ?>
           <div class="rate">
               <div class="like" style="width:<?php echo $like_per?>%" ></div>
               <div class="dislike" style="width:<?php echo $dislike_per?>%" ></div>
           </div>
   <?php }
}

Tổng kết: Qua bài mình đã hướng dẫn cho các bạn làm chức năng like và dislike đơn giản bằng jQuery ajax,mong rằng các bạn có thể áp dụng tốt hơn cho các website của mình.
Tải toàn toàn mã nguồn trong bài hướng dẫn tại đây.

http://www.mediafire.com/download/57rt2v9x44evsah/video.rar



07/05/2015
Written by admin

Hiện do a Tuyền (nguyên adminsite hocphp.info) không còn thời gian để phát triển site, nên do có cơ duyên và được a tin tưởng để cho mình tiếp tục phát triển. Hi vọng mọi người cùng nhau phát triển và chia sẽ nhiều hơn nữa, ngoài ra mình cũng cố gắng chia sẽ các seri về web cũng như các ngôn ngữ khác chất nhất có thể. có gì thiếu sót hi vọng mọi người bỏ qua.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Liên hệ
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL