Bài 7: PHP trang tin tức - Xây dựng sidebar, content và phân trang admin

Ngày đăng: 2023-01-10 20:37:37

      Bài trước, chúng ta đã viết chức năng đăng nhập, đăng xuất admin, Bài này, mình sẽ hướng dẫn các bạn xây dựng sidebar, content và phân trang admin. 

Mục lục:

       1. Rewrite url.

       2. Khởi tạo và require.

       3. Xây dựng sidebar.

       4. Xây dựng content và phân trang

       5. Lời kết.

 

1. Rewrite url 

Các bạn tạo file .htaccess cùng cấp với admin/index.php rồi copy đoạn code bên dưới :

 

# Bảo vệ file .htaccess

<Files .htaccess>

Order Allow,Deny

Deny from all

</Files>

 

# Rewrite url

RewriteEngine on

# 1 tham số

RewriteRule ^([a-zA-Z0-9_-]+)$ index.php?tab=$1

RewriteRule ^([a-zA-Z0-9_-]+)/$ index.php?tab=$1

# 2 tham số

RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$ index.php?tab=$1&ac=$2

RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/$ index.php?tab=$1&ac=$2

# 3 tham số

RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$ index.php?tab=$1&ac=$2&id=$3

RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/$ index.php?tab=$1&ac=$2&id=$3

 

2. Khởi tạo và require

Các bạn tạo hai file admin/templates/sidebar.php (Sidebar) và admin/templates/content.php (Content). Để require hai cái này với index, các bạn mở file admin/index.php lên và chèn đoạn code này vào bên trong chỗ tồn tại $user (đăng nhập) :

// Hiển thị sidebar

require_once 'templates/sidebar.php';

 

// Hiển thị sidebar

require_once 'templates/content.php';

Sau đó các bạn chạy lại thử xem nó bị lỗi không nhé ! Nếu OK rồi chúng ta qua bước tiếp theo.

3. Xây dựng sidebar

Các bạn mở file admin/templates/sidebar.php và copy đoạn code này vào :

 

<div class="col-md-3 sidebar">

    <ul class="list-group">

        <li class="list-group-item">

            <div class="media">

                <a class="pull-left">

                    <img class="media-object" src="

                    <?php

                        // URL ảnh đại diện tài khoản

                        if ($data_user['url_avatar'] == '')

                        {

                            echo $_DOMAIN.'images/profile.png';

                        }

                        else

                        {

                            echo $data_user['url_avatar'];

                        }

                    ?>

                    " alt="Ảnh đại diện của <?php echo $data_user['display_name']; ?>" width="64" height="64">

                </a>

                <div class="media-body">

                    <h4 class="media-heading"><?php echo $data_user['display_name']; ?></h4>

                    <?php

 

                    // Hiển thị cấp bậc tài khoản

                    // Nếu tài khoản là admin

                    if ($data_user['position'] == '1')

                    {

                        echo '<span class="label label-primary">Quản trị viên</span>';

                    }

                    // Ngược lại tài khoản là tác giả

                    else

                    {

                        echo '<span class="label label-success">Tác giả</span>';

                    }

 

                    ?>

                </div>

            </div>

        </li>

        <a class="list-group-item active" href="<?php echo $_DOMAIN; ?>">

            <span class="glyphicon glyphicon-dashboard"></span> Bảng điều khiển

        </a>

        <a class="list-group-item" href="<?php echo $_DOMAIN; ?>profile">

            <span class="glyphicon glyphicon-user"></span> Hồ sơ cá nhân

        </a>

        <a class="list-group-item" href="<?php echo $_DOMAIN; ?>posts">

            <span class="glyphicon glyphicon-edit"></span> Bài viết

        </a> 

        <a class="list-group-item" href="<?php echo $_DOMAIN; ?>photos">

            <span class="glyphicon glyphicon-picture"></span> Hình ảnh

        </a>

        <?php

 

        // Phân quyền sidebar

        // Nếu tài khoản là admin

        if ($data_user['position'] == '1')

        {

            echo

            '

                <a class="list-group-item" href="' . $_DOMAIN . 'categories">

                    <span class="glyphicon glyphicon-tag"></span> Chuyên mục

                </a>

                <a class="list-group-item" href="' . $_DOMAIN . 'setting">

                    <span class="glyphicon glyphicon-cog"></span> Cài đặt chung

                </a> 

            ';

        }

 

        ?>

        <a class="list-group-item" href="<?php echo $_DOMAIN; ?>signout.php">

            <span class="glyphicon glyphicon-off"></span> Thoát

        </a>

    </ul><!-- ul.list-group -->

</div><!-- div.sidebar -->

Mình sẽ giải thích một số phần quan trọng :

  • URL ảnh đại diện của tài khoản :
    • Đầu tiên các bạn tạo folder images cùng cấp với admin/index.php để chứa file ảnh profile.png (Ảnh bạn có thể download tại source của bài viết này hoặc tự kiếm ảnh theo ý thích nhưng nhớ đổi tên).
    • Nếu field url_avatar này trống, ta sẽ lấy đường dẫn của ảnh có sẵn trên server. 
    • Còn ngược lại nếu có thì ta sẽ lấy đường dẫn trong field url_avatar (Để có thể insert field này, chúng ta sẽ tìm hiểu qua các bài sau).
  • Phân quyền sidebar :
    • Nếu tài khoản là admin (position = 1) thì chúng ta sẽ hiển thị chức năng về chuyên mục và cài đặt chung.
    • Còn ngược lại nếu tài khoản là tác giả (position = 0) thì chúng ta sẽ ẩn hai cái chức năng này đi.

Bây giờ mình sẽ thêm hiệu ứng active cho cái sidebar. Các bạn mở file admin/includes/footer.php lên và dán đoạn code này bên trên thẻ </body> :

<?php

 

// Active sidebar

// Lấy tham số tab

if (isset($_GET['tab']))

{

    $tab = trim(addslashes(htmlspecialchars($_GET['tab'])));

}

else

{

    $tab = '';

}

 

// Nếu có tham số tab

if ($tab != '')

{

    // Tháo active của Bảng điều khiển

    echo '<script>$(".sidebar ul a:eq(1)").removeClass("active");</script>';

    // Active theo giá trị của tham số tab

    if ($tab == 'profile')

    {

        echo '<script>$(".sidebar ul a:eq(2)").addClass("active");</script>';

    }

    else if ($tab == 'posts')

    {

        echo '<script>$(".sidebar ul a:eq(3)").addClass("active");</script>';

    }

    else if ($tab == 'photos')

    {

        echo '<script>$(".sidebar ul a:eq(4)").addClass("active");</script>';

    }

    else if ($tab == 'categories')

    {

        echo '<script>$(".sidebar ul a:eq(5)").addClass("active");</script>';

    }

    else if ($tab == 'setting')

    {

        echo '<script>$(".sidebar ul a:eq(6)").addClass("active");</script>';

    }

}

 

?>

Nếu bạn thay đổi vị trí của các item trong sidebar thì cũng nhớ thay đổi số thứ tự để active chính xác nhé !

4. Xây dựng content và phân trang

Các bạn mở file admin/templates/content.php lên và copy nội dung sau :

 

<div class="col-md-9 content">

    <?php

 

    // Phân trang content

    // Lấy tham số tab

    if (isset($_GET['tab']))

    {

        $tab = trim(addslashes(htmlspecialchars($_GET['tab'])));

    }

    else

    {

        $tab = '';

    }

 

    // Nếu có tham số tab

    if ($tab != '')

    {

        // Hiển thị template chức năng theo tham số tab

        if ($tab == 'profile')

        {

            // Hiển thị template hồ sơ cá nhân

            require_once 'templates/profile.php';

        }

        else if ($tab == 'posts')

        {

            // Hiển thị template bài viết

            require_once 'templates/posts.php';

        }

        else if ($tab == 'photos')

        {

            // Hiển thị template hình ảnh

            require_once 'templates/photos.php';

        }

        else if ($tab == 'categories')

        {

            // Hiển thị template chuyên mục

            require_once 'templates/categories.php';

        }

        else if ($tab == 'setting')

        {

            // Hiển thị template cài đặt chung

            require_once 'templates/setting.php';

        }

    }

    // Ngược lại không có tham số tab

    else

    {

        // Hiển thị template bảng điều khiển

        require_once 'templates/dashboard.php';

    }

 

    ?>

</div><!-- div.content -->

Sau đó các bạn tạo thêm các file sau :

  • admin/templates/dashboard.php (Bảng điều khiển).
  • admin/templates/posts.php (Bài viết).
  • admin/templates/photos.php (Hình ảnh).
  • admin/templates/categories.php (Chuyên mục).
  • admin/templates/setting.php (Cài đặt chung).

Giờ các bạn thử click vào các item của sidebar, xem bên content có hiển thị lỗi không, nêu không hiển thị gì thì đã thành công rồi đấy !

5. Lời kết

       Cuối cùng cũng xong, qua bài này chúng ta đã xây dựng xong sidebar, content và phân trang cho admin. Qua bài sau, chúng ta sẽ viết các chức năng về chuyên mục. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công !


Code games & Web Làm web tin tức căn bản bằng PHP

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

Góc games giải trí



Cờ caro


Butterfly


Lật hình (luyện trí nhớ)

Cờ tướng ONLINE

Xếp hình

Ghép hình

15_PUZZLE

Kill ghosts

Banchim

Planet Defense

Tower game

Tower game

Plapy Bird (NH.Đông)

Vượt chướng ngại vật



0379136392

Thông tin liên hệ: Lê Văn Thuyên - ĐT: 0379136392 ; Gmail: lethuyen0379136392@gmail.com

Comment

 +   Lê Văn Thuyên-0379136392:Cảm ơn quý vị và các bạn đã vào Website của Lê Thuyên! Lê thuyên rất mong nhận được sự góp ý của quý vị và các bạn cho sự phát triển của website này. Xin chân thành cảm ơn!

Trả lời

 *   Dũng Trung-090567448:Lê Văn Thuyên0379136392--->Ok.Anh!

Trả lời

 *   Bé Nguyễn-benguyen@gmail,com:Lê Văn Thuyên0379136392--->Good job!

Trả lời

 +   -:

Trả lời

 +   -:

Trả lời

12012