Chương trình học
Step 1: tạo layouts cho Frontend
- Tạo thư mục
templates\frontend - Tạo file cấu trúc chính
templates\frontend\layout.html.twig
<!doctype html>
<html lang="vi" class="h-100">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/assets/vendor/bootstrap/css/bootstrap.min.css" type="text/css" />
<!-- Font awesome -->
<link rel="stylesheet" href="/assets/vendor/font-awesome/css/font-awesome.min.css" type="text/css" />
<!-- Custom css - Các file css do chúng ta tự viết -->
<link rel="stylesheet" href="/assets/frontend/css/style.css" type="text/css" />
<!-- Block title - Đục lỗ trên giao diện bố cục chung, đặt tên là `title` -->
<title>Nền tảng - Kiến thức cơ bản về WEB |
{% block title %}
{% endblock %}
</title>
<!-- End block title -->
<!-- Block custom-styles - Đục lỗ trên giao diện bố cục chung, đặt tên là `custom-styles` -->
{% block customstyles %}
{% endblock %}
<!-- End block custom-styles -->
</head>
<body>
<!-- header -->
{{ include('frontend/layouts/includes/header.html.twig') }}
<!-- end header -->
<main role="main">
<!-- Block content - Đục lỗ trên giao diện bố cục chung, đặt tên là `content` -->
{% block content %}
{% endblock %}
<!-- End block content -->
</main>
<!-- footer -->
{{ include('frontend/layouts/includes/footer.html.twig') }}
<!-- end footer -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/assets/vendor/jquery/jquery.min.js"></script>
<script src="/assets/vendor/popperjs/popper.min.js"></script>
<script src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/vendor/feather/feather.min.js"></script>
<!-- Custom script - Các file js do mình tự viết -->
<script src="/assets/frontend/js/app.js"></script>
<!-- Block custom-scripts - Đục lỗ trên giao diện bố cục chung, đặt tên là `custom-scripts` -->
{% block customscripts %}
{% endblock %}
<!-- End block custom-scripts -->
</body>
</html>
- Chúng ta sẽ tách phần giao diện header ra file riêng.
- Tạo thư mục
templates\frontend\layouts\includes\ - Tạo file
templates\frontend\layouts\includes\header.html.twig`
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="https://nentang.vn">Nền tảng</a>
<div class="navbar-collapse collapse" id="navbarCollapse" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Trang chủ <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/backend/pages/dashboard.php">Quản trị</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/frontend/product/list.php">Sản phẩm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/frontend/pages/about.php">Giới thiệu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/frontend/pages/contact.php">Liên hệ</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0" method="get" action="/frontend/product/search.php">
<input class="form-control mr-sm-2" type="text" placeholder="Tìm kiếm" aria-label="Search"
name="keyword_tensanpham">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Tìm kiếm</button>
</form>
</div>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="/frontend/checkout/cart.php">Giỏ hàng</a>
</li>
<li class="nav-item text-nowrap">
{% if session['email'] %}
<!-- Nếu đã đăng nhập thì hiển thị Thông tin Tài khoản -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cá nhân
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Thông tin</a>
<a class="dropdown-item" href="#">Danh sách Đặt hàng</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/frontend/auth/logout.php">Đăng xuất</a>
</div>
</li>
{% else %}
<!-- Nếu chưa đăng nhập thì hiển thị nút Đăng nhập -->
<a class="nav-link" href="/frontend/auth/login.php">Đăng nhập</a>
{% endif %}
</li>
</ul>
</div>
</nav>
- Tạo file
templates\frontend\layouts\includes\footer.html.twig`
<footer class="footer mt-auto py-3">
<div class="container">
<span>Bản quyền © bởi <a href="https://nentang.vn">Nền Tảng</a> - <script>document.write(new Date().getFullYear());</script>.</span>
<span class="text-muted">Hành trang tới Tương lai</span>
<p class="float-right">
<a href="#">Về đầu trang</a>
</p>
</div>
</footer>
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
Bài học trước Bài học tiếp theo