[Module User] - Chia layout

Vậy là chúng ta đã hoàn thành xong một số chức năng về cách hoạt động của project rồi, vậy thì trong bài này chúng ta sẽ học cách chia layout trong hệ thống admin.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Thiết kế layout cho admin

Mình sẽ tự tay thiết kế một mẫu layout cực kì đẹp và đỉnh, và đây là sản phẩm của mình:

XEM DEMO

Bài viết này được đăng tại [free tuts .net]

<!DOCTYPE html>
<html>
    <head>
        <title>Quản lý admin</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            #header li{
                float: left;
                padding: 5px 10px;
                border: solid 1px blue;
                background: blue;
                margin-right: 10px;
                list-style: none;
            }
            #header{
                overflow: hidden;
            }
            #header li a{
                color: #fff;
                text-decoration: none;
            }
            #header div{
                float: right;
                width: 250px;
                line-height: 50px;
            }
            #header ul{
                width: 700px;
                float: left;
            }
            body{
                background: #acacac;
                margin: 0px;
                padding: 0px;
            }
            #container{
                width: 1000px;
                margin: 0px auto;
                overflow: hidden;
                background: #fff;
            }
            #content{
                border-top: solid 1px #ddd;
                min-height: 600px;
                padding: 10px 30px;
            }
            .button{
                display: inline-block;
                padding: 5px 10px;
                background: blue;
                color: #fff;
                text-decoration: none;
            }
            .pagination a{
                display: inline-block;
                padding: 3px 5px;
                background: blue;
                color: #fff;
                text-decoration: none;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <ul>
                    <li>
                        <a href="#">User</a>
                    </li>
                    <li>
                        <a href="#">Tin tức</a>
                    </li>
                    <li>
                        <a href="#">Bình Luận</a>
                    </li>
                </ul>
                <div>
                    Xin chào Admin | 
                    <a href="#">Login</a>
                    <a href="#">Out</a>
                </div>
            </div>
            <div id="content">
                
                <h1>nội dung tại đây</h1>
                
            </div>
        </div>
    </body>
</html>

Mẫu layout này mình thiết kế mất 5 phút đấy :3.

2. Phân chia layout

Bây giờ ta chia layout ra làm hai phần chính là header và footer.

Bạn mở file widgets/header.php lên và dán nội dung sau vào:

<?php if (!defined('IN_SITE')) die('The request not found'); ?>

<!DOCTYPE html>
<html>
    <head>
        <title>Quản lý admin</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            #header li{
                float: left;
                padding: 5px 10px;
                border: solid 1px blue;
                background: blue;
                margin-right: 10px;
                list-style: none;
            }
            #header{
                overflow: hidden;
            }
            #header li a{
                color: #fff;
                text-decoration: none;
            }
            #header div{
                float: right;
                width: 250px;
                line-height: 50px;
            }
            #header ul{
                width: 700px;
                float: left;
            }
            body{
                background: #acacac;
                margin: 0px;
                padding: 0px;
            }
            #container{
                width: 1000px;
                margin: 0px auto;
                overflow: hidden;
                background: #fff;
            }
            #content{
                border-top: solid 1px #ddd;
                min-height: 600px;
                padding: 10px 30px;
            }
            .button{
                display: inline-block;
                padding: 5px 10px;
                background: blue;
                color: #fff;
                text-decoration: none;
            }
            .pagination a{
                display: inline-block;
                padding: 3px 5px;
                background: blue;
                color: #fff;
                text-decoration: none;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <ul>
                    <li>
                        <a href="#">User</a>
                    </li>
                    <li>
                        <a href="#">Tin tức</a>
                    </li>
                    <li>
                        <a href="#">Bình Luận</a>
                    </li>
                </ul>
                <div>
                    Xin chào Admin | 
                    <a href="#">Login</a>
                    <a href="#">Out</a>
                </div>
            </div>
            <div id="content">

Tiếp theo bạn mở file widgets/footer.php lên và dán nội dung sau vào:

<?php if (!defined('IN_SITE')) die ('The request not found'); ?>
          
            </div>
        </div>
    </body>
</html>

Ok vậy là ta đã chia layout xong rồi đấy, bây giờ chạy thử thôi nhé.

3. Cách sử dụng layout

Bước này khá quan trọng nên bạn tập trung nhé.

Để kiểm thử xem layout hoạt động tốt không thì chúng ta lấy trang login làm demo.

Bạn mở file modules/common/login.php lên và dán nội dung sau vào:

<?php include_once('widgets/header.php'); ?>
<h1>Trang đăng nhập!</h1>
<form method="post" action="">
    <table>
        <tr>
            <td>Username</td>
            <td><input type="text" name="username" value=""/></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="password" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="login-btn" value="Đăng nhập"/></td>
        </tr>
    </table>
</form>
<?php include_once('widgets/footer.php'); ?>

Bạn chạy trang web với URL là localhost/php_exampleadmin/?m=common&action=login và nếu thấy kết quả như hình sau là bạn đã thành công rồi đấy.

chia layout dang nhap png

Như vậy để sử dụng layout thì chúng ta chỉ việc include file header.php và footer.php là được.

3. Lời kết

Vậy là ta đã có layout admin tuyệt đẹp rồi, kể từ bây giờ ta sử dụng layout này để làm trang quản lý admin nhé. Bài này mình xin dừng tại đây, hẹn gặp lại các bạn ở bài tiếp theo.

Bài trước Bài tiếp

Cùng chuyên mục:

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP