Date of posting: 2023-01-10 20:51:59
Bài trước, chúng ta đã kết nối database và cấu trúc index admin rồi ! Hôm nay, chúng ta sẽ xây dựng header và footer admin cho ứng dụng.
1. Xây dựng header admin
Chúng ta sẽ code phần này trong file admin/includes/header.php, các bạn mở file này lên và copy nội dung này :
|
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8"/>
<title>Newspage Administration</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<!-- Liên kết Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo $_DOMAIN; ?>bootstrap/css/bootstrap.min.css"/>
<!-- Liên kết thư viện jQuery -->
<script src="<?php echo $_DOMAIN; ?>js/jquery.min.js"></script>
</head>
<body>
<?php
// Nếu chưa đăng nhập
if (!$user)
{
echo
'
<div class="container">
<div class="page-header">
<h1>Newspage <small>Administration</small></h1>
</div><!-- div.page-header -->
</div><!-- div.container -->
';
}
// Nếu đăng nhập
else
{
echo
'
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="' . $_DOMAIN . '">Newspage Administration</a>
</div><!-- div.navbar-header -->
</div><!-- div.container-fluid -->
</nav>
';
}
?>
|
Ở phần navbar, chúng ta sẽ kiểm tra có tồn tại đăng nhập không để hiển thị navbar tương ứng.
Bây giờ các bạn chạy thử :
Nếu kết quả như thế này thì thành công rồi. Vì mình chưa đăng nhập nên nó sẽ hiển thị navbar đầu tiên.
2. Xây dựng footer admin
Phần này chúng ta sẽ viết ở file admin/includes/footer.php, các bạn mở file lên và copy đoạn code này :
|
<!-- Liên kết thư viện jQuery Form -->
<script src="<?php echo $_DOMAIN; ?>js/jquery.form.min.js"></script>
</body>
</html>
|
Giờ các bạn chạy lại và xem nguồn trang nó như hình không nhé và kiểm tra mấy cái đường dẫn thư viện Ok chưa.
3. Lời kết
Vậy là chúng ta đã xây dựng xong header và footer admin cho ứng dụng ! Sẽ có một số cập nhật cho hai phần này vào các bài sau. Bài sau, chúng ta sẽ viết chức năng đăng nhập, đăng xuất admin cho trang tin tức. Cảm ơn các bạn đã theo dõi và chúc các bạn thành công !
