Nguyễn Văn Sáu

Khoa CNTT2
saunv@ptithcm.edu.vn
2021
 Tên MH: WEB FRAMEWORK (2TC), Mã MH: MĐ501057
 Thời gian: 45 giờ; (Lý thuyết: 15giờ; Thực hành, thí
nghiệm, thảo luận, bài tập: 28 giờ; Kiểm tra 2 giờ)
 Hình thức thi: Trắc nghiệm Thời gian thi: 60 phút
 Điều kiện dự thi kết thúc mô đun: Tham dự >= 70% số
giờ học.
 I. Vị trí, tính chất của mô đun:
○ Vị trí: CHUYÊN ĐỀ THAY THẾ KHÓA LUẬN TỐT
NGHIỆP
○ Tính chất: quan trọng

2
 II. Mục tiêu của bài mô đun:
 1. Về kiến thức:
○ Hiểu và biết cách xây dựng website với Laravel
○ Làm việc với mô hình MVC trong laravel
○ Sử dụng được Blade template
○ Hiểu về cách dùng Vue.js với Laravel
 2. Về kỹ năng:
○ Có khả năng xây dựng một ứng dụng web bằng cách sử dụng PHP
framework Laravel
○ Có khả năng sử dụng Laravel với Vue.js
○ Có khả năng tạo các CSDL và truy vấn dữ liệu trong hệ quản trị CSDL MySQL
○ Có khả năng cài đặt composer, laravel, tạo được project thiết kế website.
 3. Về năng lực tự chủ và trách nhiệm:
○ Có khả năng tự chủ giải quyết vấn đề
○ Có tinh thần trách nhiệm trong học tập

3
Bài 1- Giới thiệu Laravel
Bài 2- Routes and Views
Bài 3- Blade Template, Bootstrap
Bài 4- Laravel Collective
Bài 5- Controllers
Bài 6- Kết nối Database - Migration
Bài 7- Nhập xuất dữ liệu - Forms - Validation
Bìa 8- Authentication, Middleware
Bài 9- Session, Paginating
Bài 10- October CMS
Bài 11- Vue.js Framework
4
 W. Jason Gilmore, Easy Laravel 5: A Hands On Introduction Using a
Real-World Project, leanpub, 2018
 Keyword: Laravel + your question (Eng/Vie)

5
• Laravel là một Framework để phát triển ứng dụng
web.
• Laravel được đánh giá là một framework mạnh và
dễ học
• Điều kiện tiên quyết: PHP cơ bản & Hệ quản trị
CSDL

Hoạt động: Sinh viên tìm hiểu thêm về Laravel

• Lịch sử
• Tại sao nên học Laravel?
• Điểm mạnh điểm yếu của Laravel?
• ...
7
1. Cài đặt môi trường phát triển PHP: Apache, PHP,
MySQL... : XAMPP (SV tự làm)
2. Cài đặt công cụ quản lý các thư viện: Composer
3. Tạo một Laravel project mới

8
Vào địa chỉ https://getcomposer.org/

9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
localhost/myproject/public/

24
- Copy file .htaccess từ thư mục myproject/public ra
thư mục cha của nó, tức là myproject, và:
- Đổi tên file server.php thành index.php
localhost/myproject/

25
THỰC HÀNH:
1. Cài đặt XAMPP
2. Cài đặt Composer
3. Tạo 1 Laravel project đặt tên là myproject
4. Cấu hình cho website myproject có thể được truy
xuất từ đường dẫn http://localhost/myproject/

26
• Routes là quy tắc gọi thực thi file PHP của Laravel.
• Routes được chứa trong thư mục /routes/

• api.php: điều khiển routes của ứng dụng, như "quản lý

giỏ hàng", ...
• web.php: điều khiển routes của các views (trang)
28
Route::METHOD('URL', ACTION);
Một số METHODs: get, post, put, delete, match, group...
Ví dụ:

29
Ví dụ:

30
• Views dung để hiển thị nội dung lên màn hình, thường
views là các trang HTML.
• Views chứa trong thư mục /resources/views/

• Tên file chứa các views có dạng name.blade.php

• Tại sao có chữ blade? Chúng ta sẽ học sau

31
32
33
THỰC HÀNH:
1. Xây dựng 4 trang home, about, products, contact.
Nội dung các trang là những câu text bình thường,
chẳng hạn "Chào các bạn, đây là trang home."
2. Cài đặt các Routes để truy cập vào các trang đã tạo.

34
• Blade là dạng cú pháp đơn giản được cung cấp bởi Laravel.
• Sử dụng Blade để tạo các mẫu header, footer, sidebar ..., rồi
include vào Views.
• Blade cũng có những cấu trúc điều khiển như If else,
for, foreach, ...

36
• Blade là dạng cú pháp đơn giản được cung cấp bởi Laravel.
• Sử dụng Blade để tạo các mẫu hiển thị của header, footer,
sidebar ..., rồi include vào Views.
• Blade cũng có những cấu trúc điều khiển như If else,
for, foreach, ...
• Blade phải được thể hiện trong dạng file name.blade.php
• Các file Blade được lưu trong thư mục resources/views

37
• In giá trị của biến: {{ $name }}
• Chèn nội dung: @include('footer')
• Cấu trúc điều kiện:
@if(điều_kiện)
câu_lệnh;
@elseif(điều_kiện)
câu_lệnh;
@else
câu_lệnh;
@endif;
• Vòng lặp for:
@for ($i = 0; $i < 10; $i++)
câu_lệnh;
@endfor
38
• Vòng lặp while:
@while (true)
câu_lệnh;
@endwhile
• Vòng lặp foreach:
@foreach ($users as $user)
câu_lệnh;
@endforeach
• Vòng lặp forelse:
@forelse ($users as $user)
{{ $user->name }}
@empty
Không có user nào!
@endforelse
39
• Giả sử ta cần tạo 1 template dùng chung cho các trang web.
Template đó có phần nội dung ở giữa, đầu trang có header,
cuối trang có footer.
• Ta sẽ tạo các mẫu hiển thị header và footer và mẫu hiển thị
nội dung các trang.
• Các trang được viết dưới dạng view.
• 01 file mytemplate.blade.php
• Tất cả sẽ được chứa trong /resources/views/, ta tổ chức
các file như sau:

40
41
• Nội dung file mytemplate.blade.php:

42
• Nội dung file about.blade.php:

43
• Kết quả:

44
• Xem source code:

45
• Chèn header và footer vào template:

46
• Kết quả:

47
• THỰC HÀNH: Xây dựng website bán hàng đơn giản dùng
blade template. Website có các trang sau:
1. Home
2. About
3. Products
4. Contact
5. News
• Các trang đều có header và footer giống nhau được lưu
trong includes
• Tập dùng Bootstrap để thiết kế giao diện. Download và
tham khảo các ví dụ mẫu của Bootstrap tại:
https://github.com/twbs/bootstrap/releases/download/
v5.1.0/bootstrap-5.1.0-examples.zip

48
49
50
• Laravel collective là một package cung cấp cho chúng ta
cách viết form, html với cú pháp ngắn gọn hơn, dễ nhìn
hơn.
• Để sử dụng được Laravel Collective, ta phải cài thêm
package đó

52
• Cài đặt Laravel collective bằng Composer:

53
• File contact.blade.php:

54
• Kết quả:

55
• THỰC HÀNH: Tạo view "Nhập hàng" và viết form nhập
hàng với các mục sau:
• Mã hàng
• Tên hàng
• Đơn vị tính
• Giá nhập:
• <Lưu>

56
• Controller là nơi chứa các xử lý, tính toán logic.
• Controller được đặt bên trong thư mục
/app/Http/Controllers/

58
User Routing

Controller

View

59
60
• Nội dung file myController.php:

61
• Giả sử trong file myController.php, ta viết hàm
xemngay():

62
• Để sử dụng hàm xemngay(), ta viết một Route như sau:

use App\Http\Controllers\myController;

63
• Kết quả:

64
• Ví dụ 2:

65
• Ví dụ 3:

• Ghi chú: Nếu ta

đưa nhiều biến
cho view, dùng
dấu phẩy để
tách các cặp

66
• Dùng phpMyAdmin tạo một database ví dụ

68
• Dùng phpMyAdmin tạo một database ví dụ

69
Chọn database myproject mới tạo, chọn <Đặc quyền>
(privileges)

70
Chọn database myproject mới tạo, chọn <Đặc quyền>
(privileges)
12345678

71
Mở file htdocs/myproject/.env, sửa một số thông tin:

72
Có thể tham khảo thêm file
htdocs/myproject/config/database.php:

73
• Công cụ Migration giúp người phát triển web định nghĩa
liệu một cách nhẹ nhàng hơn là dùng các câu lệnh SQL
• Giả sử yêu cầu website myproject là: Xây dựng một website
quản lý bán hàng đơn giản gồm 4 trang: trang giới thiệu
shop, trang đăng ký thành viên, trang liệt kê danh sách sản
phẩm và trang mua hàng. Không yêu cầu thiết kế đẹp, chỉ
cần dùng 1 blade template đơn giản. Chủ yếu là đáp ứng
được yêu cầu hiển thị, tương tác, xử lý và lưu trữ dữ liệu.

74
• CSDL cho website được thiết kế đơn giản như sau:

75
• Tạo Migration dùng để tạo table products, members,
invoices, registers:

76
• Kết quả:

77
• Nội dung của Migration:

78
• Chạy Migration:

79
• Kết quả là có 4 tables được tạo ra từ 4 Migrations + 1 table
tên là migrations dùng để ghi log

80
• Chú ý: Nếu chạy lệnh php artisan migrate mà gặp lỗi
"SQLSTATE[42000]: Syntax error or access violation: 1071
Specified key was too long; max key length is 767 bytes", là
do Laravel mặc định dùng bộ ký tự utf8mb4 mà database
của ta dùng bộ ký tự khác (utf8_unicode_ci hoặc
utf8_general_ci chẳng hạn). Khi đó, ta phải mở file
/app/Providers/AppServiceProvider.php và thêm 2 dòng
lệnh:
use Illuminate\Support\Facades\Schema;

public function boot()

{
Schema::defaultStringLength(191);
}

81
•

82
• Hoạt động: Chỉnh sửa và thêm các Migrations để tạo một
database hoàn chỉnh cho website myproject.
• Tự học: Tham khảo thêm tại
https://laravel.com/docs/8.x/migrations để biết cú pháp
định nghĩa dữ liệu của Laravel Migration.

83
84
85
86
87
Cấu trúc table products:

88
Cấu trúc table members:

89
Cấu trúc table invoices:

90
• CHÚ Ý:
Với một table đã tồn tại, hoặc table đã có chứa dữ liệu, ta
không thể tạo mới (create) nó, mà phải chỉnh sửa (edit)
nó.

• Tự học: Sinh viên tham khảo tại

https://laravel.com/docs/8.x/migrations để biết đầy đủ cú
pháp định nghĩa dữ liệu của Laravel Migration.

91
• Tạo Database tên myProject và thêm các bảng như đã trình
bày ở trên.

92
Công dụng của Form là để nhập/xuất dữ liệu.
Cần đưa tham số url vào phương thức Open của form để route
định hướng đúng.

94
Để nhập dữ liệu, Form dùng phương thức POST (POST là một
phương thức của giao thức HTTP)

95
Công dụng của Form là để nhập/xuất dữ liệu.
Cần đưa tham số url vào phương thức Open của form để route
định hướng đúng.

96
97
Công dụng của Form là để nhập/xuất dữ liệu.
Cần đưa tham số url vào phương thức Open của form để route
định hướng đúng.

98
Để nhập dữ liệu vào Database, Laravel dùng phương thức
POST cho Form (POST là một phương thức của HTTP)

Để đọc dữ liệu lên trang web, ta dùng phương thức GET (GET
là một phương thức của HTTP)

99
Giao thức HTTP đã được học ở học phần Internet cơ bản hay
Lập trình web cơ bản... Bạn nào quên có thể tham khảo tại
https://www.w3schools.com/tags/ref_httpmethods.asp

100
Xác nhận dữ liệu/ Kiểm tra dữ liệu
Laravel cung cấp rất nhiều rules xác nhận dữ liệu. Tham khảo
tại https://laravel.com/docs/<version>/validation

Để có thể xác nhận dữ liệu, ta phải sử dụng thư viện Validator

101
Xác nhận dữ liệu/ Kiểm tra dữ liệu
Laravel cung cấp rất nhiều rules xác nhận dữ liệu. Tham khảo
tại https://laravel.com/docs/<version>/validation

Để có thể xác nhận dữ liệu, ta phải sử dụng thư viện Validator

102
Xác nhận dữ liệu/ Kiểm tra dữ liệu
Laravel cung cấp rất nhiều rules xác nhận dữ liệu. Tham khảo
tại https://laravel.com/docs/<version>/validation

103
Xác nhận dữ liệu/ Kiểm tra dữ liệu
Laravel cung cấp rất nhiều rules xác nhận dữ liệu. Tham khảo
tại https://laravel.com/docs/<version>/validation

104
Ràng buộc Khóa ngoại (Foreign key constraist): Là một
ràng buộc quan trọng trong quá trình nhập liệu.
Laravel Validation cung cấp rule exists để kiểm tra rang buộc
khóa ngoại.

105
a

106
a

107
a

108
Laravel - Validation rules.pdf

109
HOẠT ĐỘNG:
Viết các form nhập liệu cho Users, Products và Invoices

110
a

111
HOẠT ĐỘNG:
Viết các form nhập liệu cho Users, Products và Invoices

112
a

113
a

114
a

115
Tạo các trang Login và Register
Dữ liệu lưu trong các tables Users và Password_resets

117
a

118
a

User name được lưu trong biến

{{Auth::user()->name}}

119
a

120
• Cung cấp giải pháp lọc các điều kiện HTTP từ các request,
như xác thực người dùng, CSRF protection...

121
• Ví dụ: Tạo trang index.blade.php trong thư mục
resources/views/admin:

• Khai báo route kiểm tra đăng nhập:

• Nếu chưa đăng nhập thì sẽ chuyển đến trang đăng nhập.

122
• Cấm user mở trang không được phép:

File CheckAdmin.php sẽ được lưu tại thư mục

/app/Http/Middleware/

123
• File CheckAdmin.php sẽ được lưu tại thư mục
/app/Http/Middleware/

124
• Thêm class CheckAdmin vào file /app/Http/Kernel

125
• Khai báo Route:

• Khi đó, nếu user không phải là "Admin" thì không vào được
trang admin/index

126
• sdsdasd

129
• sdsdasd

123456

130
132