Bài 07: [Module User] - Chia layout

DOWNLOAD

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.

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

<!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.

Như vậy để sử dụng layout thì chúng ta chỉ việc include file header.phpfooter.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.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.