Thuc Hanh 1

PHÁT TRIỂN ỨNG DỤNG MÃ NGUỒN MỞ
BÀI THỰC HÀNH 1

LAYOUT TRONG LARAVEL
1
▪ Mỗi website đều cần phải thiết kế bố cục

(layout) dùng chung cho việc hiển thị các
trang nội dung.
▪ Một số layout website:
2
▪ Thông thường layout sẽ có các thành phần chung

cố định (header, footer, logo, sidebar, . . .) và các
thành phần thay đổi theo nội dung của từng trang
trong website.
▪ Để tận dụng lại các layout đã thiết kế, cũng như dễ
dàng cập nhật bảo trì, Laravel hỗ trợ các trang nội
dung trong website sử dụng các layout đã được
thiết kế sẵn.
3
▪ Ví dụ1: Tạo một file Layout có tên là main và sử dụng

layout main cho một trang nội dung.
Bước 1: Tại thư mục views/layouts, tạo một file có tên là
main.blade.php với nội dung như sau: Tiêu đề thay đổi
<!DOCTYPE html>
<html> tại trang áp dụng
<head>
<title>@yield('title')</title> layout
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body> Sử dụng hàm
<header style='text-align:center'> asset để lấy đường
<img src="{{asset('images/banner.jpg')}}" width="1000px"> dẫn hình ảnh, thư
</header>
<main> mục chứa hình ảnh
@yield('content') nằm tại thư mục
</main> public
<footer>
<div class='row' style='text-align:center'>
<div class='col-4'>TRỤ SỞ</div>
Nội dung chính
<div class='col-4'>THÔNG TIN CHUNG</div> thay đổi tại trang
<div class='col-4'>BẢN ĐỒ</div>
</div>
áp dụng layouts
</footer>
</body>
</html>
4
▪ Ví dụ1:
Bước 2: Tạo một trang nội dung và sử dụng layout main
- Tạo Route:
Route::get('/trang1','App\Http\Controllers\ViduLayoutController@trang1');
- Tạo ViduLayoutController và thêm function trang1():

class ViduLayoutController extends Controller
{
function trang1()
{
return view("vidulayout.trang1");
}
}
5
▪ Ví dụ1:
Bước 2:
- Tạo file trang1.blade.php tại thư mục views/vidulayout:
@extends("layouts.main") trang1.blade.php sử dụng layout main
@section("title","Trang nội dung 1") Đặt tiêu đề cho trang
@section("content") Đặt nội dung cho trang
<div class="bg-primary m-5"

style='height:300px;display:flex;align-items:center; justify-
content:center;color:white'>
NỘI DUNG CHÍNH CỦA TRANG 1
</div>
@endsection
6
▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:
Khi bấm vào

các mục,
các cuốn
sách sẽ thay
đổi theo
mục được
chọn, các
phần còn lại
(banner,
sidebar) giữ
nguyên.
Trang chủ hiển thị 8 cuốn sách có giá rẻ nhất

7

Bước 1: Tại thư mục views/layouts, tạo một file có tên là
sach_layout.blade.php với nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<header style='text-align:center'>
<img src="{{asset('images/banner_sach.jpg')}}" width="1000px">
</header>
<main style="width:1000px; margin:2px auto;">
<div class='row'>
<div class='col-3 pr-0'>
<nav class="navbar navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Tiểu thuyết</a>
</li>
. . . .
</ul>
</nav>
<img src="{{asset('images/sidebar_1.jpg')}}" width="100%" class='mt-1'>
<img src="{{asset('images/sidebar_2.jpg')}}" width="100%" class='mt-1'>
</div>
<div class='col-9'>
@yield('content')
</div>
</div>
</main>
</body> 8
</html>

Bước 2:
- Tạo Route:
Route::get('/sach','App\Http\Controllers\ViduLayoutController@sach');
- Tạo function sach() trong file ViduLayoutController:

function sach()
{
$data = DB::select("select * from sach order by gia_ban asc limit 0,8");
return view("vidusach.index", compact("data"));
}
9

Bước 2:
- Tạo file index.blade.php tại thư mục views/vidusach:
@extends("layouts.sach_layout")
Sử dụng hàm asset để
@section("title","Sách")
lấy đường dẫn hình
@section("content") ảnh, thư mục chứa
hình ảnh nằm tại thư
<div class='list-book'> mục public
@foreach($data as $row)
<div class='book'>
<img src="{{asset('book_image/'.$row->file_anh_bia)}}" width='200px'

height='200px'><br>
<b>{{$row->tieu_de}}</b><br/>
<i>{{number_format($row->gia_ban,0,",",".")}}đ</i>
</div>
@endforeach
</div>
@endsection
10

Bước 3:
- Bổ sung thêm CSS:
.navbar {
background-color: #ff5850;
font-weight:bold;
}
.nav-item a {
color: #fff!important;
}
.navbar-nav {
margin:0 auto;
}
.list-book{
display:grid;
grid-template-columns:repeat(4,24%);
}
.book {
margin:10px;
text-align:center;
} 11

Kết quả sau khi thực hiện bước 3
Tuy nhiên
khi bấm vào
các mục vẫn
chưa hiển
thị được các
cuốn sách
tương ứng
với từng
mục
12

Bước 4:
- Tạo Route để xử lý hiển thị cuốn sách theo từng mục:
Route::get('/sach/theloai/{id}','App\Http\Controllers\ViduLayoutController@theloai');
Tham số được truyền trên trình duyệt (truyền theo phương thức GET), khi chạy đường dẫn
thay thế {id} bằng một giá trị cụ thể tương ứng với thể loại sách
- Tạo function theloai() trong file ViDuController:

Function theloai() có tham số $id tương ứng với tham số {id} được truyền trong đường dẫn
function theloai($id)
{
$data = DB::select("select * from sach where the_loai = ?",[$id]);
return view("vidusach.index", compact("data"));
}
13

Bước 5:
- Gắn đường dẫn vào các danh mục thể loại và mục Trang chủ:
Gắn đường dẫn
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{{url('sach')}}">Trang chủ</a>
</li>
<a class="nav-link" href="{{url('sach/theloai/1')}}">Tiểu thuyết</a>
</li>
<a class="nav-link" href="{{url('sach/theloai/2')}}">Truyện ngắn - tản văn</a>
</li>
<a class="nav-link" href="{{url('sach/theloai/3')}}">Tác phẩm kinh điển</a>
</li>
</ul>
Các Thể loại tiểu thuyết, truyện ngắn – tản văn, tác phẩm kinh điển có giá trị id lần lượt là 1, 2, 3
14
▪ Bài tập: Bổ sung thêm chức năng, khi nhấn vào mỗi cuốn
sách sẽ hiển thị ra thông tin chi tiết của cuốn sách theo định
dạng như hình sau:
15
HỎI & ĐÁP
16

Thuc Hanh 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Thuc Hanh 1

Uploaded by

Copyright:

Available Formats

PHÁT TRIỂN ỨNG DỤNG MÃ NGUỒN MỞ

BÀI THỰC HÀNH 1

▪ Mỗi website đều cần phải thiết kế bố cục

▪ Thông thường layout sẽ có các thành phần chung

▪ Ví dụ1: Tạo một file Layout có tên là main và sử dụng

- Tạo ViduLayoutController và thêm function trang1():

@section("title","Trang nội dung 1") Đặt tiêu đề cho trang

@section("content") Đặt nội dung cho trang

<div class="bg-primary m-5"

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

Khi bấm vào

Trang chủ hiển thị 8 cuốn sách có giá rẻ nhất

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

- Tạo function sach() trong file ViduLayoutController:

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

<img src="{{asset('book_image/'.$row->file_anh_bia)}}" width='200px'

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

- Tạo function theloai() trong file ViDuController:

▪ Ví dụ 2: Sử dụng layout và tạo một trang web như sau:

You might also like