Home » » Hướng dẫn phân chia trang web bằng PHP và Ajax

Hướng dẫn phân chia trang web bằng PHP và Ajax

Written By 1 on Thứ Năm, 19 tháng 9, 2013 | 00:09

Cạch , làm biến diễn dãi quá, trong code mình chú thích rồi nha !
Các bước thực hiện:

1. Tạo database trong phpmyadmin với tên "chiarang" ( có thể khác, tùy bạn, nếu khác bạn nên thay đôi dataname trong file "connec.php" để có thể kết nối đến database trên server ).

2. Trong database " chiatrang ", tạo một table với tên "paging", có nội dung như sau:

create table paging (
id int(10) not null  AUTO_INCREMENT,
msg varchar(500) not null,
PRIMARY KEY (id)
);

3. Trong thư mục webroot tạo thư mục "chiatrang" .

4. Trong thư mục "chiatrang" vừa tạo, tạo các file : index.php, insert_data.php, load_data.php, connec.php, paging_ajax.php ; tạo thư mục js chứa 2 file : layout.css , paging.js ; tạo thư mục images chứa 2 file ảnh . Cấu trúc thư mục như sau :

-chiatrang
------------index.php
------------insert_data.php
------------load_data.php
------------connec.php
------------paging_ajax.php
------------js
-----------------------------layout.css
-----------------------------paging.js

------------images
----------------------------- 2 file ảnh



a . File "index.php" có nội dung như sau :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Phân trang PHP bằng Ajax jQuery hoàn chỉnh</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="js/layout.css" media="screen" rel="stylesheet" type="text/css" >
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/paging.js"></script>
   
    </head>
<body>
<div align="center" ><h1>Phần nội dung hiển thị trên trang </h1></div>
    <div id="loading"></div>
    <div id="container" style="margin-bottom:100px">
        <div class="data"></div>
      <div class="pagination"></div>
     </div>
<div align="center" ><h1> Phần nhập nội dung cho trang </h1></div>
<form action="" method="post">
<textarea rows="15" cols="60" type="text"  required="required" name="chenvao"></textarea>
<input type="submit" name="ok" value="Submit" >
</form>
</body>
</html>

<?php
include "insert_data.php";
?>

b. File "insert_data.php" có nội dung như sau :

<?php
$chen="";
include "connec.php";
if ( isset($_POST['ok']) ){
if(isset($_POST['chenvao'])!= NULL) {
$chen = addslashes( $_POST['chenvao'] );
$sql_query = @mysql_query("SELECT msg FROM paging WHERE msg='{$chen}'");
// Nếu msg này không tồn tại thì insert data
if ( @mysql_num_rows( $sql_query ) <= 0 ){
mysql_query("INSERT INTO paging (msg) VALUES ('{$chen}')");
}
else {
require_once "index.php";
}
}
else {
require_once "index.php";
}
}
?>

c. File "load_data.php" có nội dung như sau:

<?php
// KIỂM TRA TỒN TẠI PAGE HAY KHÔNG
if(isset($_POST["page"]))
{
// ĐƯA 2 FILE VÀO TRANG & KHỞI TẠO CLASS
include "connec.php";
require_once "paging_ajax.php";
$paging = new paging_ajax();

// ĐẶT CLASS CHO THÀNH PHẦN PHÂN TRANG THEO Ý MUỐN
$paging->class_pagination = "pagination";
$paging->class_active = "active";
$paging->class_inactive = "inactive";
$paging->class_go_button = "go_button";
$paging->class_text_total = "total";
$paging->class_txt_goto = "txt_go_button";

// SỐ PHẦN TỬ TRÊN 1 TRANG , CÓ NGHĨA LÀ SỐ DÒNG TRONG BẢNG CSDL
    $paging->per_page = 5;
 
    // LẤY GIÁ TRỊ PAGE THÔNG QUA PHƯƠNG THỨC POST
    $paging->page = $_POST["page"];
 
    // VIẾT CÂU TRUY VẤN & LẤY KẾT QUẢ TRẢ VỀ
    $paging->text_sql = "SELECT id,msg FROM paging";
    $result_pag_data = $paging->GetResult();

    // BIẾN CHỨA KẾT QUẢ TRẢ VỀ
$message = "";

// DUYỆT MẢNG LẤY KẾT QUẢ

while ($row = mysql_fetch_array($result_pag_data)) {
$message .= "<li><strong>" . $row['id'] . "</strong> ".">.   ". $row['msg'] . "</li>";
echo "</br>";
}

// ĐƯA KẾT QUẢ VÀO PHƯƠNG THỨC LOAD() TRONG LỚP PAGING_AJAX
$paging->data = "<div class='data'><ul>" . $message . "</ul></div>"; // Content for Data  
echo $paging->Load();  // KẾT QUẢ TRẢ VỀ

}


d. File "connec.php" có nội dung như sau :

<?php
$mysql_hostname = "localhost";   // host MySQL
$mysql_user = "root"; // username MySQL
$mysql_password = "huy"; // password MySQL
$mysql_database = "chiatrang"; // database name

// KẾT NỐI & CHỌN DATABASE
$db = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("CAN NOT CONNECT DATABASE");
mysql_select_db($mysql_database, $db) or die("CAN NOT SELECT DATABASE");

// THIẾT LẬP UTF8 CHO DB
mysql_query("SET NAMES 'utf8'", $db);
/* mysql_set_charset('utf8',$db); */

?>

e. File "paging_ajax.php" có nội dung như sau:

<?php
class paging_ajax
{
    public $data; // DATA
    public $per_page = 5; // SỐ RECORD TRÊN 1 TRANG
    public $page; // SỐ PAGE
    public $text_sql; // CÂU TRUY VẤN
 
    // THÔNG SỐ SHOW HAY HIDE
    public $show_pagination = true;
    public $show_goto = false;
    public $show_total = true;
 
    // TÊN CÁC CLASS
    public $class_pagination;
    public $class_active;
    public $class_inactive;
    public $class_go_button;
    public $class_text_total;
    public $class_txt_goto;  
 
    private $cur_page; // PAGE HIỆN TẠI
    private $num_row; // SỐ RECORD
 
    // PHƯƠNG THỨC LẤY KẾT QUẢ CỦA TRANG
    public function GetResult()
    {
        global $db; // BIỀN $db TOÀN CỤC
     
        // TÌNH TOÁN THÔNG SỐ LẤY KẾT QUẢ
        $this->cur_page = $this->page;
        $this->page -= 1;
        $this->per_page = $this->per_page;
        $start = $this->page * $this->per_page;
     
        // TÍNH TỔNG RECORD TRONG BẢNG
$result = mysql_query($this->text_sql);
        $this->num_row = mysql_num_rows($result);
     
        // LẤY KẾT QUẢ TRANG HIỆN TẠI
        return mysql_query($this->text_sql." LIMIT $start, $this->per_page");
    }
 
    // PHƯƠNG THỨC XỬ LÝ KẾT QUẢ VÀ HIỂN THỊ PHÂN TRANG
    public function Load()
    {
        // KHÔNG PHÂN TRANG THÌ TRẢ KẾT QUẢ VỀ
        if(!$this->show_pagination)
            return $this->data;
     
        // SHOW CÁC NÚT NEXT, PREVIOUS, FIRST & LAST
        $previous_btn = true;
        $next_btn = true;
        $first_btn = true;
        $last_btn = true;  
     
        // GÁN DATA CHO CHUỖI KẾT QUẢ TRẢ VỀ
        $msg = $this->data;
     
        // TÍNH SỐ TRANG
        $count = $this->num_row;
        $no_of_paginations = ceil($count / $this->per_page);
     
        // TÍNH TOÁN GIÁ TRỊ BẮT ĐẦU & KẾT THÚC VÒNG LẶP
        if ($this->cur_page >= 7) {
            $start_loop = $this->cur_page - 3;
            if ($no_of_paginations > $this->cur_page + 3)
                $end_loop = $this->cur_page + 3;
            else if ($this->cur_page <= $no_of_paginations && $this->cur_page > $no_of_paginations - 6) {
                $start_loop = $no_of_paginations - 6;
                $end_loop = $no_of_paginations;
            } else {
                $end_loop = $no_of_paginations;
            }
        } else {
            $start_loop = 1;
            if ($no_of_paginations > 7)
                $end_loop = 7;
            else
                $end_loop = $no_of_paginations;
        }
     
        // NỐI THÊM VÀO CHUỖI KẾT QUẢ & HIỂN THỊ NÚT FIRST
        $msg .= "<div class='$this->class_pagination'><ul>";
        if ($first_btn && $this->cur_page > 1) {
            $msg .= "<li p='1' class='active'>Đầu</li>";
        } else if ($first_btn) {
            $msg .= "<li p='1' class='$this->class_inactive'>Đầu</li>";
        }
 
        // HIỂN THỊ NÚT PREVIOUS
        if ($previous_btn && $this->cur_page > 1) {
            $pre = $this->cur_page - 1;
            $msg .= "<li p='$pre' class='active'>Trước</li>";
        } else if ($previous_btn) {
            $msg .= "<li class='$this->class_inactive'>Cuối</li>";
        }
        for ($i = $start_loop; $i <= $end_loop; $i++) {
     
            if ($this->cur_page == $i)
                $msg .= "<li p='$i' class='actived'>{$i}</li>";
            else
                $msg .= "<li p='$i' class='active'>{$i}</li>";
        }
     
        // HIỂN THỊ NÚT NEXT
        if ($next_btn && $this->cur_page < $no_of_paginations) {
            $nex = $this->cur_page + 1;
            $msg .= "<li p='$nex' class='active'>Sau</li>";
        } else if ($next_btn) {
            $msg .= "<li class='$this->class_inactive'>Sau</li>";
        }
     
        // HIỂN THỊ NÚT LAST
        if ($last_btn && $this->cur_page < $no_of_paginations) {
            $msg .= "<li p='$no_of_paginations' class='$this->class_active'>Cuối</li>";
        } else if ($last_btn) {
            $msg .= "<li p='$no_of_paginations' class='$this->class_inactive'>Cuối</li>";
        }
     
        // SHOW TEXTBOX ĐỂ NHẬP PAGE KO ?
        if($this->show_goto)
            $goto = "<input type='text' id='goto' class='$this->class_txt_goto' size='1' style='margin-top:-1px;margin-left:40px;margin-right:10px'/><input type='button' id='go_btn' class='$this->class_go_button' value='Đến'/>";
        if($this->show_total)
            $total_string = "<span id='total' class='$this->class_text_total' a='$no_of_paginations'>Trang <b>" . $this->cur_page . "</b>/<b>$no_of_paginations</b></span>";
        $stradd =  $goto . $total_string;
     
        // TRẢ KẾT QUẢ TRỞ VỀ
        return $msg . "</ul>" . $stradd . "</div>";  // Content for pagination
    }  
         
}

?>

f. File "layout.css" có nội dung như sau :

@CHARSET "ISO-8859-1";
/*============== STYLE FOR PAGE ==============*/
*{margin:0px; padding:0px;}
body{
    width: 500px; background: #000;
    margin: 0 auto; padding: 0;
}
h1{color:#DB2E66; margin:20px 0px;}
#loading{ width: 300px;  position: absolute; top: 80px; right:160px;}

/*============== STYLE FOR PAGING ==============*/
#container .pagination ul li.active,
#container .pagination ul li.inactive:hover{
background-color: #DB2E66; color:#fff;
    border:1px solid #DB2E66; cursor: default;
}
#container .pagination ul li.inactive{
background-color: #000; color: #DB2E66;
border: 1px solid #eaeaea; cursor: default;
}
#container .pagination ul li.actived{color:#DB2E66;background-color:#fff; border:1px solid #fff;}
#container .data ul li{
    list-style: none;
    margin: 5px 0; color: #fff;
    font:normal 13px verdana;
}

#container .pagination{  width: 550px;   height: 25px; margin-top:20px;}
#container .pagination ul li{
    list-style: none;
    float: left; margin: 0 3px;
    border: 1px solid #eaeaea;
    padding: 2px 6px 2px 6px;
    font: bold 14px arial;
    background-color: #000; color: #DB2E66;
}
#container .pagination ul li:hover{
    background-color: #DB2E66;
  border: 1px solid #DB2E66;
    cursor: pointer; color: #fff;
}
.go_button{
background-color:#DB2E66;
border:1px solid #fff;
color:#cc0000;padding:2px 6px;
cursor:pointer;position:absolute;margin-top:-1px;
}
.total{ float:right;font-family:arial;color:#999; }

g. File "paging.js" có nội dung như sau :

 $(document).ready(function(){

    // PHƯƠNG THỨC SHOW HÌNH LOADING
    function loading_show(){
        $('#loading').html("<img src='images/image-loading-animation.gif'/>").fadeIn('fast');
    }

    // PHƯƠNG THỨC ẨN HÌNH LOADING
    function loading_hide(){
        $('#loading').fadeOut('fast');
    }             

    // PHƯƠNG THỨC LOAD KẾT QUẢ 
    function loadData(page){
        loading_show();                    
        $.ajax
        ({
            type: "POST",
            url: "load_data.php",
            data: "page="+page,
            success: function(msg)
            {
                $("#container").ajaxComplete(function(event, request, settings)
                {
                    loading_hide();
                    $("#container").html(msg);
                });
            }
        });
    }

    // LOAD GIÁ TRỊ MẶC ĐỊNH PAGE = 1 CHO LẦN ĐẦU TIÊN
    loadData(1);  

    // LOAD KẾT QUẢ CHO TRANG
    $('#container .pagination li.active').live('click',function(){
        var page = $(this).attr('p');
        loadData(page);
    });           

    // PHƯƠNG THỨC DÙNG ĐỂ HIỆN KẾT QUẢ KHI NHẬP GIÁ TRỊ PAGE VÀO TEXTBOX
    // BẠN CÓ THỂ MỞ TEXTBOX LÊN TRONG CLASS PHÂN TRANG
    $('#go_btn').live('click',function(){
        var page = parseInt($('#goto').val());
        var no_of_pages = parseInt($('.total').attr('a'));
        if(page != 0 && page <= no_of_pages){
            loadData(page);
        }else{
            alert('HÃY NHẬP GIÁ TRỊ TỪ 1 ĐẾN '+no_of_pages);
            $('.goto').val("").focus();
            return false;
        }
    });
});

h. Hai file ảnh :





5. Video demo :

6. Link tải file :

0 nhận xét:

Đăng nhận xét