[Module User] - Chia layout - PHP MVC căn bản
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: ...
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.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.
