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
//viblo.asia/p/seeder-va-model-factory-trong-laravel-vyDZOx6Plwj //learninglaravel.net/books/laravel/building-our-first-website //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 bootstrap1
Đ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 bootstrap2
Vài lưu ý khi tải project từ github về chạy thử
php artisan ui bootstrap3
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 install1
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 bootstrap7
npm install2 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 bootstrap9
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 bootstrap0
Cấu hình database
php artisan ui bootstrap1
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 bootstrap2
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 bootstrap3
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 bootstrap4
Mở cmd từ thư mục gốc của project để chạy lệnh sau cài đặt Laravel Mix
php artisan ui bootstrap5
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 bootstrap6
Để chạy Mix task, ta sử dụng lệnh sau
php artisan ui bootstrap7
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 install3, mở ra ta có thể thấy Laravel hỗ trợ kết nối 3 kiểu database:
npm install4và 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 install3 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 install3
php artisan ui bootstrap8
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 install3
php artisan ui bootstrap8
Hoặc nếu để ý ta sẽ thấy, Laravel đã cấu hình sẵn cho ta hàm
npm install6để gọi đến các config trong file
npm install7 [nếu chưa có file này trong ứng dụng bạn copy từ file
npm install8 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 bootstrap9
php artisan ui bootstrap9
Migrate
1. Tạo tập tin migrate
Tạo migrations thông thường
php artisan ui bootstrap --auth0
Tạo mới migrations cho bảng
php artisan ui bootstrap --auth1
Tạo migrations chỉnh sửa bảng
php artisan ui bootstrap --auth2
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 dev09. 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 dev0, muốn sử dụng hàm
npm run dev0 ta phải cài thêm package tên là
npm run dev2.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 install9. Đối với tạo mới bảng, thì mặc định function
npm run dev4 của nó sẽ là xóa bảng đó đi bằng lệnh:
npm run dev5 Đố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 dev6- Chỉnh sửa bảng:
npm run dev7- Đổi tên bảng: từ category thành categories
npm run dev8- Xóa bảng:
npm run dev9Cá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 //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 dev0, muốn sử dụng hàm
npm run dev0 ta phải cài thêm package tên là
npm run dev2.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 install9. Đối với tạo mới bảng, thì mặc định function
npm run dev4 của nó sẽ là xóa bảng đó đi bằng lệnh:
npm run dev5 Đố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 dev6- Chỉnh sửa bảng:
npm run dev7- Đổi tên bảng: từ category thành categories
npm run dev8- Xóa bảng:
npm run dev9Cá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 //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 install9. 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 dev0, muốn sử dụng hàm
npm run dev0 ta phải cài thêm package tên là
npm run dev2.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 install9. Đối với tạo mới bảng, thì mặc định function
npm run dev4 của nó sẽ là xóa bảng đó đi bằng lệnh:
npm run dev5 Đố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 dev6- Chỉnh sửa bảng:
npm run dev7- Đổi tên bảng: từ category thành categories
npm run dev8- Xóa bảng:
npm run dev9Cá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 //viblo.asia/p/migration-trong-laravel-va-nhung-dieu-can-biet-ByEZkyEy5Q0
php artisan ui bootstrap --auth3
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 dev0, muốn sử dụng hàm
npm run dev0 ta phải cài thêm package tên là
npm run dev2.
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 install9.
Đối với tạo mới bảng, thì mặc định function
npm run dev4 của nó sẽ là xóa bảng đó đi bằng lệnh:
npm run dev5
Đố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 dev6
- Chỉnh sửa bảng:
npm run dev7
- Đổi tên bảng: từ category thành categories
npm run dev8
- Xóa bảng:
npm run dev9
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
//viblo.asia/p/migration-trong-laravel-va-nhung-dieu-can-biet-ByEZkyEy5Q0
php artisan ui bootstrap --auth3
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/ui72Resest 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 --auth4
8
Bước 2: UsersTableSeeder.php trong thư mục
9
php artisan ui bootstrap --auth4
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 bootstrap21 Cách 2: Chạy tất cả các seeder được gọi vào file seeder gốc:
php artisan ui bootstrap22 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 bootstrap21 Cách 2: Chạy tất cả các seeder được gọi vào file seeder gốc:
php artisan ui bootstrap22Cá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 bootstrap21
Cách 2: Chạy tất cả các seeder được gọi vào file seeder gốc:
php artisan ui bootstrap22
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 bootstrap23 Bước 1: Tạo Model Factory cho bảng users với tên
php artisan ui bootstrap23
php artisan ui bootstrap --auth5
Bước 1: Tạo Model Factory cho bảng users với tên
php artisan ui bootstrap23
php artisan ui bootstrap --auth5
Bước 2: Sau khi hoàn thành bước 1, chúng ta sẽ được 1 file
php artisan ui bootstrap23 trong thư mục
php artisan ui bootstrap25 . 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 --auth6
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 --auth6
Bước 3: Bây giờ trong function
php artisan ui bootstrap26 của
php artisan ui bootstrap27 class chúng ta sử dụng hàm helper
php artisan ui bootstrap28 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 --auth7
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 bootstrap29 trong
php artisan ui bootstrap30 //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ư //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 --auth8
//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 --auth8
Trong controller tương ứng thêm hàm
php artisan ui bootstrap31 để khới tạo repository sử dụng trong các function như sau
php artisan ui bootstrap --auth9
Tham Khảo
//viblo.asia/p/seeder-va-model-factory-trong-laravel-vyDZOx6Plwj //learninglaravel.net/books/laravel/building-our-first-website //viblo.asia/p/tim-hieu-ve-repository-pattern-trong-laravel-part-ii-oZVRgl2EMmg5