Hướng dẫn bootstrap laravel 9 - bootstrap laravel 9

Nội dung chính Show

• Cài đặt laravel/ui
• Điều hướng bài viết
• Cài đặt laravel/ui
• Điều hướng bài viết
• Tạo project
• Một số tập tin quan trọng
• Vài lưu ý khi tải project từ github về chạy thử
• Cài đặt bootstrap, js, ghép theme
• Cấu hình database
• 1. Tạo tập tin migrate
• 2. Cách viết trong file migrate
• 3. Một số câu lệnh migration:
• Cách 1. Tạo trực tiếp data
• Cách 2.Tạo Model Factory
• Repository Pattern
• Repository Pattern là gì?
• Một số lý do chung ta nên sử dụng Repository Pattern:
• Sử dụng Repository Pattern trong Laravel?
• Tham Khảo

Chào các bạn, như tiêu đề ở trên thì trong bài viết này mình sẽ hướng dẫn các bạn cách tích hợp bootstrap vào trong Laravel.

Nếu như bạn là người mới biết đến Laravel hoặc chưa biết cách tích hợp Boostrap vào Laravel thì bạn có thể làm theo các bước ở bên dưới.

Trước khi đi vào chi tiết thì mình sẽ giải thích một chút. Chúng ta sẽ dùng một package tên là laravel/ui để tích hợp bootstrap vào Laravel 8. Chắc hẳn bạn đang khá là thắc mắc tại sao bootstrap thôi mà cũng phải cần đến cả cái package đúng ko?laravel/ui để tích hợp bootstrap vào Laravel 8. Chắc hẳn bạn đang khá là thắc mắc tại sao bootstrap thôi mà cũng phải cần đến cả cái package đúng ko?

Thật ra laravel/ui còn nhiều tác dụng khác nữa. Ngoài bootstrap ra thì nó còn được sử dụng để giúp các bạn setup, tích hợp Vue/React vào Laravel một cách dễ nhất nữa đó.

Với lại hiện tại Laravel không tích hợp sẵn command tạo bộ Auth (make:auth) nên bạn cũng có thể dùng thằng này để tạo ra giao diện cho Auth luôn được.

• Cài đặt laravel/ui
• Tích hợp Bootstrap vào Laravel

Cài đặt laravel/ui

Tích hợp Bootstrap vào Laravel

composer require laravel/ui

Vì đây là package nên các bạn phải cài đặt trước mơi dùng được nhé. Cài bằng lệnh sau:

Sau khi mà các bạn cài xong thì qua phần tiếp để dùng nhé.

php artisan ui bootstrap

Chạy lệnh sau để cài bootstrap:

php artisan ui bootstrap --auth

Chạy lệnh sau để cài bootstrap kèm theo auth:

npm install

Sau khi chạy lệnh để tích hợp rồi việc cần làm tiếp theo là dùng npm để chạy. Nếu bạn chưa cài các dependencies của npm thì chạy lệnh sau:

npm run dev

Tiếp theo là lệnh sau:

Điều hướng bài viết

Bạn mới nghe qua Notion và chưa biết nó là gì? Bạn muốn tìm hiểu các tính năng sử dụng…

Nội dung chính

• Cài đặt laravel/ui
• Điều hướng bài viết
• Tạo project
• Một số tập tin quan trọng
• Vài lưu ý khi tải project từ github về chạy thử
• Cài đặt bootstrap, js, ghép theme
• Cấu hình database
• 1. Tạo tập tin migrate
• 2. Cách viết trong file migrate
• 3. Một số câu lệnh migration:
• Cách 1. Tạo trực tiếp data
• Cách 2.Tạo Model Factory
• Repository Pattern
• Repository Pattern là gì?
• Một số lý do chung ta nên sử dụng Repository Pattern:
• Sử dụng Repository Pattern trong Laravel?
• Tham Khảo

https://viblo.asia/p/seeder-va-model-factory-trong-laravel-vyDZOx6Plwj https://learninglaravel.net/books/laravel/building-our-first-website https://viblo.asia/p/tim-hieu-ve-repository-pattern-trong-laravel-part-ii-oZVRgl2EMmg5

Nội dung chính

Cài đặt laravel/uilaravel/ui để tích hợp bootstrap vào Laravel 8. Chắc hẳn bạn đang khá là thắc mắc tại sao bootstrap thôi mà cũng phải cần đến cả cái package đúng ko?

Điều hướng bài viết

Tạo project

• Cài đặt laravel/ui
• Điều hướng bài viết

Cài đặt laravel/ui

Điều hướng bài viết

composer require laravel/ui

Tạo project

Một số tập tin quan trọng

php artisan ui bootstrap

Vài lưu ý khi tải project từ github về chạy thử

php artisan ui bootstrap --auth

Cài đặt bootstrap, js, ghép theme

npm install

Cấu hình database

npm run dev

1. Tạo tập tin migrate

php artisan ui bootstrap

1

Điều hướng bài viết

Tạo project

Tạo project

Một số tập tin quan trọng

php artisan ui bootstrap

2

Vài lưu ý khi tải project từ github về chạy thử

php artisan ui bootstrap

3

Một số tập tin quan trọng

Vài lưu ý khi tải project từ github về chạy thử
Chứa các cài đặt và các key của các dịch vụ sử dụng trong dự án. Ví dụ như: database, các dịch vụ lưu trữ, mailer,...

npm install

1
Chứa các cài đặt và các package của Laravel mà chúng ta cần cài đặt

php artisan ui bootstrap

7

npm install

2 Chứa các cài đặt liên quan đến javascript và sử dụng npm quản lý, cấu hình các pakage cài đặt thông qua lệnh npm
Chứa các cài đặt liên quan đến javascript và sử dụng npm quản lý, cấu hình các pakage cài đặt thông qua lệnh npm

php artisan ui bootstrap

9

Vài lưu ý khi tải project từ github về chạy thử

Cài đặt bootstrap, js, ghép theme

php artisan ui bootstrap

0

Cấu hình database

php artisan ui bootstrap

1

Cài đặt bootstrap, js, ghép theme

Cấu hình database
Thêm các thiết đặt sau vào tập tin layouts gốc của project, ở đây là home.blade.php

php artisan ui bootstrap

2

Cách 2. Sử dụng Precompiled Bootstrap Files Chúng ta vào trang chủ của Bootstrap tải các tập tin của nó về rồi thêm vào thư mục như sau Thêm các thiết đặt sau vào tập tin layouts gốc của project, ở đây là home.blade.php Chúng ta vào trang chủ của Bootstrap tải các tập tin của nó về rồi thêm vào thư mục như sau
Chúng ta vào trang chủ của Bootstrap tải các tập tin của nó về rồi thêm vào thư mục như sau

Thêm các thiết đặt sau vào tập tin layouts gốc của project, ở đây là home.blade.php

php artisan ui bootstrap

3

Cách 3. Cài đặt qua npm Laravel Mix Chúng ta sử dụng nó bằng cách định nghĩa tập tin package.json như sau Chúng ta sử dụng nó bằng cách định nghĩa tập tin package.json như sau
Chúng ta sử dụng nó bằng cách định nghĩa tập tin package.json như sau

php artisan ui bootstrap

4

Mở cmd từ thư mục gốc của project để chạy lệnh sau cài đặt Laravel Mix

php artisan ui bootstrap

5

Chúng ta viết một Mix task mới trong webpack.mix.js. Mặc định, chúng ta có thể tìm thấy các đã được biên dịch từ app.sass file thành app.css, and bundles all JS file trong thư mục sau:

php artisan ui bootstrap

6

Để chạy Mix task, ta sử dụng lệnh sau

php artisan ui bootstrap

7

Cấu hình database

Để tạo được form đăng nhập, trước tiên ta cần kết nối ứng dụng với database. File cấu hình nằm ở

npm install

3, mở ra ta có thể thấy Laravel hỗ trợ kết nối 3 kiểu database:

npm install

4và cấu hình mặc định kết nối đến mysql. Trong bài viết này ta sẽ dùng DB mysql, bạn có thể thay đổi ngay trong file cầu hình

npm install

3 Trong bài viết này ta sẽ dùng DB mysql, bạn có thể thay đổi ngay trong file cầu hình

npm install

3

php artisan ui bootstrap

8
Trong bài viết này ta sẽ dùng DB mysql, bạn có thể thay đổi ngay trong file cầu hình

npm install

3

php artisan ui bootstrap

8

Hoặc nếu để ý ta sẽ thấy, Laravel đã cấu hình sẵn cho ta hàm

npm install

6để gọi đến các config trong file

npm install

7 (nếu chưa có file này trong ứng dụng bạn copy từ file

npm install

8 rồi đổi tên đi). Do vậy để kết nối DB ta chỉ cần thay đổi file .env, chẳng hạn:

php artisan ui bootstrap

9

php artisan ui bootstrap

9

Migrate

1. Tạo tập tin migrate

Tạo migrations thông thường

php artisan ui bootstrap --auth

0

Tạo mới migrations cho bảng

php artisan ui bootstrap --auth

1

Tạo migrations chỉnh sửa bảng

php artisan ui bootstrap --auth

2

2. Cách viết trong file migrate

function up(): Có tác dụng thực thi migration. Khi muốn tạo mới 1 column thì sẽ viết trong function

npm run dev

09. Như chúng ta thấy trong trường hợp update 1 column thì chúng ta sư dụng hàm

npm run dev

0, muốn sử dụng hàm

npm run dev

0 ta phải cài thêm package tên là

npm run dev

2.function down(): Có tác dụng thực thi đoạn lệnh rollback (trở về trước đó). Trong hàm này sẽ thực thi các câu lệnh đảo ngược với function

npm install

9. Đối với tạo mới bảng, thì mặc định function

npm run dev

4 của nó sẽ là xóa bảng đó đi bằng lệnh:

npm run dev

5 Đối với chỉnh sửa bảng thì trong function down() phải viết các hàm ngược lại với function up().function Facade Schema: Là hàm Facade hỗ trợ để thực hiện các chức năng như create, update, delete bảng.- Tạo mới bảng:

npm run dev

6- Chỉnh sửa bảng:

npm run dev

7- Đổi tên bảng: từ category thành categories

npm run dev

8- Xóa bảng:

npm run dev

9Các câu lệnh tạo cấu trúc bảng hay dùng trong Migrations Modifier Column Tạo các rằng buộc cho các bảng https://viblo.asia/p/migration-trong-laravel-va-nhung-dieu-can-biet-ByEZkyEy5Q0 Khi muốn tạo mới 1 column thì sẽ viết trong function 9. Như chúng ta thấy trong trường hợp update 1 column thì chúng ta sư dụng hàm

npm run dev

0, muốn sử dụng hàm

npm run dev

0 ta phải cài thêm package tên là

npm run dev

2.function down(): Có tác dụng thực thi đoạn lệnh rollback (trở về trước đó). Trong hàm này sẽ thực thi các câu lệnh đảo ngược với function

npm install

9. Đối với tạo mới bảng, thì mặc định function

npm run dev

4 của nó sẽ là xóa bảng đó đi bằng lệnh:

npm run dev

5 Đối với chỉnh sửa bảng thì trong function down() phải viết các hàm ngược lại với function up().function Facade Schema: Là hàm Facade hỗ trợ để thực hiện các chức năng như create, update, delete bảng.- Tạo mới bảng:

npm run dev

6- Chỉnh sửa bảng:

npm run dev

7- Đổi tên bảng: từ category thành categories

npm run dev

8- Xóa bảng:

npm run dev

9Các câu lệnh tạo cấu trúc bảng hay dùng trong Migrations Modifier Column Tạo các rằng buộc cho các bảng https://viblo.asia/p/migration-trong-laravel-va-nhung-dieu-can-biet-ByEZkyEy5Q0
Khi muốn tạo mới 1 column thì sẽ viết trong function

npm install

9. Như chúng ta thấy trong trường hợp update 1 column thì chúng ta sư dụng hàm

npm run dev

0, muốn sử dụng hàm

npm run dev

0 ta phải cài thêm package tên là

npm run dev

2.function down(): Có tác dụng thực thi đoạn lệnh rollback (trở về trước đó). Trong hàm này sẽ thực thi các câu lệnh đảo ngược với function

npm install

9. Đối với tạo mới bảng, thì mặc định function

npm run dev

4 của nó sẽ là xóa bảng đó đi bằng lệnh:

npm run dev

5 Đối với chỉnh sửa bảng thì trong function down() phải viết các hàm ngược lại với function up().function Facade Schema: Là hàm Facade hỗ trợ để thực hiện các chức năng như create, update, delete bảng.- Tạo mới bảng:

npm run dev

6- Chỉnh sửa bảng:

npm run dev

7- Đổi tên bảng: từ category thành categories

npm run dev

8- Xóa bảng:

npm run dev

9Các câu lệnh tạo cấu trúc bảng hay dùng trong Migrations Modifier Column Tạo các rằng buộc cho các bảng https://viblo.asia/p/migration-trong-laravel-va-nhung-dieu-can-biet-ByEZkyEy5Q0

php artisan ui bootstrap --auth

3
Như chúng ta thấy trong trường hợp update 1 column thì chúng ta sư dụng hàm

npm run dev

0, muốn sử dụng hàm

npm run dev

0 ta phải cài thêm package tên là

npm run dev

2.
function down(): Có tác dụng thực thi đoạn lệnh rollback (trở về trước đó).
Trong hàm này sẽ thực thi các câu lệnh đảo ngược với function

npm install

9.
Đối với tạo mới bảng, thì mặc định function

npm run dev

4 của nó sẽ là xóa bảng đó đi bằng lệnh:

npm run dev

5
Đối với chỉnh sửa bảng thì trong function down() phải viết các hàm ngược lại với function up().
function Facade Schema: Là hàm Facade hỗ trợ để thực hiện các chức năng như create, update, delete bảng.
- Tạo mới bảng:

npm run dev

6
- Chỉnh sửa bảng:

npm run dev

7
- Đổi tên bảng: từ category thành categories

npm run dev

8
- Xóa bảng:

npm run dev

9
Các câu lệnh tạo cấu trúc bảng hay dùng trong Migrations
Modifier Column
Tạo các rằng buộc cho các bảng
https://viblo.asia/p/migration-trong-laravel-va-nhung-dieu-can-biet-ByEZkyEy5Q0

php artisan ui bootstrap --auth

3

Chú ý nếu không migrate mà không chạy được thì các bạn có thể tách ra làm 2 file migration để chạy. Để drop một foreign ta dùng:

0 Chúng ta nên để ý quy tắc đặt tên foreign

1 Để drop một foreign ta dùng:

0 Chúng ta nên để ý quy tắc đặt tên foreign

1
Để drop một foreign ta dùng:

0
Chúng ta nên để ý quy tắc đặt tên foreign

1

3. Một số câu lệnh migration:

Chạy các migration

composer require laravel/ui

72Resest lại migration Lệnh trên sẽ rollback toàn bộ CSDL của bạn hay đúng hơn là chạy toàn bộ function down() trong các file migration của bạn:

3Chạy lại migration Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate của bạn

4 Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate đồng thời chạy tấy cả các seeder

5Rollback migrate

6 Với lệnh này, toàn bộ file có batch mới nhất trong bảng migration sẽ chạy tất cả các function down() hay chính xác hơn là đảo ngược lại thay đổi mà nó tạo ra cho CSDL. Nếu bạn không định nghĩa nội dung cho function down thì lệnh rollback coi như không có hiệu lực đồng nghĩa với việc migration đó vẫn tồn tại trong cơ sở dữ liệu.2Resest lại migration Lệnh trên sẽ rollback toàn bộ CSDL của bạn hay đúng hơn là chạy toàn bộ function down() trong các file migration của bạn:

3Chạy lại migration Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate của bạn

4 Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate đồng thời chạy tấy cả các seeder

5Rollback migrate

6 Với lệnh này, toàn bộ file có batch mới nhất trong bảng migration sẽ chạy tất cả các function down() hay chính xác hơn là đảo ngược lại thay đổi mà nó tạo ra cho CSDL. Nếu bạn không định nghĩa nội dung cho function down thì lệnh rollback coi như không có hiệu lực đồng nghĩa với việc migration đó vẫn tồn tại trong cơ sở dữ liệu.

2Resest lại migration Lệnh trên sẽ rollback toàn bộ CSDL của bạn hay đúng hơn là chạy toàn bộ function down() trong các file migration của bạn:

3Chạy lại migration Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate của bạn

4 Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate đồng thời chạy tấy cả các seeder

5Rollback migrate

6 Với lệnh này, toàn bộ file có batch mới nhất trong bảng migration sẽ chạy tất cả các function down() hay chính xác hơn là đảo ngược lại thay đổi mà nó tạo ra cho CSDL. Nếu bạn không định nghĩa nội dung cho function down thì lệnh rollback coi như không có hiệu lực đồng nghĩa với việc migration đó vẫn tồn tại trong cơ sở dữ liệu.
Resest lại migration
Lệnh trên sẽ rollback toàn bộ CSDL của bạn hay đúng hơn là chạy toàn bộ function down() trong các file migration của bạn:

3
Chạy lại migration
Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate của bạn

4
Lệnh này nhằm rollback toàn bộ CSDL đồng thời chạy lại luôn toàn bộ các file migrate đồng thời chạy tấy cả các seeder

5
Rollback migrate

6
Với lệnh này, toàn bộ file có batch mới nhất trong bảng migration sẽ chạy tất cả các function down() hay chính xác hơn là đảo ngược lại thay đổi mà nó tạo ra cho CSDL.
Nếu bạn không định nghĩa nội dung cho function down thì lệnh rollback coi như không có hiệu lực đồng nghĩa với việc migration đó vẫn tồn tại trong cơ sở dữ liệu.

Seeder

Cách 1. Tạo trực tiếp data

Bước 1: Tạo 1 seeder mới cho bảng users có tên là

7

8 Bước 2: UsersTableSeeder.php trong thư mục

9

8 Bước 2: UsersTableSeeder.php trong thư mục

9

php artisan ui bootstrap --auth

4

8
Bước 2: UsersTableSeeder.php trong thư mục

9

php artisan ui bootstrap --auth

4

Bước 3: Bây giờ chúng ta chỉ cần gọi

7 class vào function run() trong file seeder gốc. Bước 4: Chúng ta sẽ có 2 cách chạy. Cách 1: Chỉ định trực tiếp class seeder cần chạy bằng lệnh

php artisan ui bootstrap

21 Cách 2: Chạy tất cả các seeder được gọi vào file seeder gốc:

php artisan ui bootstrap

22 Bước 4: Chúng ta sẽ có 2 cách chạy. Cách 1: Chỉ định trực tiếp class seeder cần chạy bằng lệnh

php artisan ui bootstrap

21 Cách 2: Chạy tất cả các seeder được gọi vào file seeder gốc:

php artisan ui bootstrap

22Cách 2.Tạo Model Factory
Bước 4: Chúng ta sẽ có 2 cách chạy.
Cách 1: Chỉ định trực tiếp class seeder cần chạy bằng lệnh

php artisan ui bootstrap

21
Cách 2: Chạy tất cả các seeder được gọi vào file seeder gốc:

php artisan ui bootstrap

22

Cách 2.Tạo Model Factory

Chúng ta sẽ tiếp tục ví dụ với bảng users bằng việc tạo Model Factory cho nó và cùng cảm nhận nhé. Bước 1: Tạo Model Factory cho bảng users với tên

php artisan ui bootstrap

23 Bước 1: Tạo Model Factory cho bảng users với tên

php artisan ui bootstrap

23

php artisan ui bootstrap --auth

5
Bước 1: Tạo Model Factory cho bảng users với tên

php artisan ui bootstrap

23

php artisan ui bootstrap --auth

5

Bước 2: Sau khi hoàn thành bước 1, chúng ta sẽ được 1 file

php artisan ui bootstrap

23 trong thư mục

php artisan ui bootstrap

25 . Tiếp đó chúng ta sẽ tạo dữ liệu, trong Model Factory đã tích hợp sẵn thư viện tạo dữ liệu giả Faker. Tiếp đó chúng ta sẽ tạo dữ liệu, trong Model Factory đã tích hợp sẵn thư viện tạo dữ liệu giả Faker.

php artisan ui bootstrap --auth

6
Tiếp đó chúng ta sẽ tạo dữ liệu, trong Model Factory đã tích hợp sẵn thư viện tạo dữ liệu giả Faker.

php artisan ui bootstrap --auth

6

Bước 3: Bây giờ trong function

php artisan ui bootstrap

26 của

php artisan ui bootstrap

27 class chúng ta sử dụng hàm helper

php artisan ui bootstrap

28 với 2 đố số truyền vào:

• Class models cần tạo dữ liệu.
• Số bản ghi cần tạo.

php artisan ui bootstrap --auth

7

Repository Pattern

Trong các dự án Laravel, chúng ta thường áp dụng mẫu thiết kế Repository Pattern để triển khai dự án

Repository Pattern là gì?

• Repository Pattern là lớp trung gian giữa tầng Business Logic và Data Access, giúp cho việc truy cập dữ liệu chặt chẽ và bảo mật hơn.
• Repository đóng vai trò là một lớp kết nối giữa tầng Business và Model của ứng dụng.

Một số lý do chung ta nên sử dụng Repository Pattern:

• Một nơi duy nhất để thay đổi quyền truy cập dữ liệu cũng như xử lý dữ liệu.
• Một nơi duy nhất chịu trách nhiệm cho việc mapping các bảng vào object.
• Tăng tính bảo mật và rõ ràng cho code.
• Rất dễ dàng để thay thế một Repository với một implementation giả cho việc testing, vì vậy bạn không cần chuẩn bị một cơ sở dữ liệu có sẵn.

Sử dụng Repository Pattern trong Laravel?

Tạo một class định nghĩa một Inteface class chung cho các class repository, ở đây mình tạo

php artisan ui bootstrap

29 trong

php artisan ui bootstrap

30 https://github.com/tuananh97/quickstart/blob/master/app/Repositories/EloquentRepository.php Với mỗi Model, tạo một class repository để định nghĩa các method. Ví dụ như https://github.com/tuananh97/quickstart/blob/master/app/Repositories/EloquentRepository.php Với mỗi Model, tạo một class repository để định nghĩa các method. Ví dụ như

php artisan ui bootstrap --auth

8
https://github.com/tuananh97/quickstart/blob/master/app/Repositories/EloquentRepository.php
Với mỗi Model, tạo một class repository để định nghĩa các method. Ví dụ như

php artisan ui bootstrap --auth

8

Trong controller tương ứng thêm hàm

php artisan ui bootstrap

31 để khới tạo repository sử dụng trong các function như sau

php artisan ui bootstrap --auth

9

Tham Khảo

https://viblo.asia/p/seeder-va-model-factory-trong-laravel-vyDZOx6Plwj https://learninglaravel.net/books/laravel/building-our-first-website https://viblo.asia/p/tim-hieu-ve-repository-pattern-trong-laravel-part-ii-oZVRgl2EMmg5