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 nguyen ngoc hieu 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