[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.
Bài viết này được đăng tại phpbbvietnam.com, 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 [phpbbvietnam.com]
<!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.
Bài viết này, The Learn PHP Tutorial Đã gửi đến bạn đọc kiến thức về “[Module User] – Chia layout❤️️”. Admin hy vọng qua phần nội dung trong bài”[Module User] – Chia layout” có thể giúp bạn đọc có thêm kiến thức về “[Module User] – Chia layout trong quá trình tự học PHP của mình .
Bài viết “[Module User] – Chia layout” posted by on 2022-07-07 23:53:48. Cảm ơn bạn đọc đã xem bài viết tại Phpbbvietnam.com Và đừng quên chia sẻ bài viết này để nhiều người khác cũng có thể xem tài liệu học php miễn phí này nhé.
