Hướng dẫn install bootstrap laravel 8 - cài đặt bootstrap laravel 8

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
• Cài đặt laravel/ui
• Điều hướng bài viết
• Câu hỏi đầu tiên ở đây;)
• Vì vậy, có bất kỳ cách giải quyết hoặc quán tính nào không tương thích với Twitter Bootstrap?
• UI với làm mới
• Phần đăng ký.
• Tài liệu 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…

composer require laravel/ui

php artisan ui bootstrap

php artisan ui bootstrap --auth

npm install

npm run dev

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

Câu hỏi đầu tiên ở đây;)

Tôi đang học quán tính JS với Laravel 8 với Vue JS (2.6) và tạo ra một hệ thống Auth cơ bản. Bây giờ vấn đề tôi đang gặp phải rằng có một trang bootstrap mẫu hoạt động tốt khi tải trang (làm mới). Nhưng khi tôi gọi bài đăng đăng nhập và chuyển hướng nó trở lại nhà, giao diện người dùng đã bị phá hủy và một khi tôi làm mới, giao diện người dùng hoạt động tốt như vậy?

Vì vậy, có bất kỳ cách giải quyết hoặc quán tính nào không tương thích với Twitter Bootstrap?

EDIT: Cũng đã thử với Tailwind CSS 2.x nhưng có kết quả tương tự tại sao UI bị phá hủy.

UI với làm mới

UI sau khi đăng nhập chuyển hướng

Đã hỏi ngày 14 tháng 12 năm 2021 lúc 17:11Dec 14, 2021 at 17:11Dec 14, 2021 at 17:11Dec 14, 2021 at 17:11

4

Chú ý !!

Tôi đã thử trong một chiếc Laravel mới và mọi thứ đều có tác dụng

Không có vấn đề gì bây giờ.

Có thể là một số tổng hợp CSS đã sai.

Tôi đã thử mà không / với Laravel UI 3.0 và hoạt động tốt ngay bây giờ.

Cảm ơn người bạn đời đã trả lời ☺

Đã trả lời ngày 19 tháng 12 năm 2021 lúc 7:33Dec 19, 2021 at 7:33Dec 19, 2021 at 7:33Dec 19, 2021 at 7:33

composer require laravel/ui

php artisan ui bootstrap

php artisan ui bootstrap --auth

npm install

npm run dev

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

Câu hỏi đầu tiên ở đây;)

Tôi đang học quán tính JS với Laravel 8 với Vue JS (2.6) và tạo ra một hệ thống Auth cơ bản. Bây giờ vấn đề tôi đang gặp phải rằng có một trang bootstrap mẫu hoạt động tốt khi tải trang (làm mới). Nhưng khi tôi gọi bài đăng đăng nhập và chuyển hướng nó trở lại nhà, giao diện người dùng đã bị phá hủy và một khi tôi làm mới, giao diện người dùng hoạt động tốt như vậy?

Vì vậy, có bất kỳ cách giải quyết hoặc quán tính nào không tương thích với Twitter Bootstrap?

EDIT: Cũng đã thử với Tailwind CSS 2.x nhưng có kết quả tương tự tại sao UI bị phá hủy.

UI với làm mới

UI sau khi đăng nhập chuyển hướng

Đã hỏi ngày 14 tháng 12 năm 2021 lúc 17:11Dec 14, 2021 at 17:11Dec 14, 2021 at 17:11

Chú ý !!

Tôi đã thử trong một chiếc Laravel mới và mọi thứ đều có tác dụng

Không có vấn đề gì bây giờ.

npm install @babel/core @babel/preset-env

npm install --save-dev @babel/plugin-syntax-dynamic-import

Và nhớ, thêm một file .babelrc ở dưới thư mục gốc của project có nội dung như sau

php artisan ui bootstrap

À mình cần dùng thêm một thư viện nữa để từ file vue có thể dùng name của route gọi đến route thay vì phải dùng đường dẫn của nó như bình thường

composer require tightenco/ziggy

Với Inertia mình vẫn phải dùng đến một file blade cũng tương tự như với single page app thông thường.

php artisan ui bootstrap

Lưu ý để có thể gọi route với tên của nó bên js cần đặt @route trên header, còn @inertia chỉ đơn giản là để tạo ra một base div, bao gồm thuộc tính data-page chứa thông tin bao đầu của page. Đại loại nó sẽ trông như sau

php artisan ui bootstrap

Bước cuối cùng để hoàn thiện bước setup và đi vào thực hiện authenticate đó là chỉnh sửa file app.js

php artisan ui bootstrap

Nhìn chung thì trong file này có phần đặc biệt nhất là render component cho vue. Cái ${name} chính là thằng truyền vào khi render từ controller. và từ đó ta sẽ lấy đường dẫn để import và render component chỉ định. À quên @_components là mình đã định danh cho thư mục components trong resource/js nhé. Bạn cũng nên sử dụng định danh này để sử dụng đường dẫn tuyệt đối đến các file vue hoặc js, css, scss trong project. Làm điều này cực kì dễ, thêm những dòng sau vào file webpack.mix.js

php artisan ui bootstrap

Ở trên đây mình đã thực hiện định danh cho ba thư mục resources/js, resources/js/components và resources/sass.

Thông thường với một single page app phía controller sẽ trả về api và các route sẽ được định nghĩa trong file api.php nhưng với inertia mọi thứ sẽ dễ dàng hơn nhiều, bạn có thể làm và trả về dữ liệu cho client một cách đơn giản y như bạn đang làm một cái web sử dụng blade của laravel vậy. Chính vì vậy phần đăng ký đăng nhập bạn hoàn toàn không cần sử dụng đến JWT mà sử dung phần đăng nhập đăng ký của Laravel hỗ trợ mà bên client vẫn có thể sử dụng được những thông tin về auth đó một cách đơn giản. Và như vậy các route bạn sẽ định nghĩa trong file web.php nhé.

Các bước cài đặt cơ bản đã xong bây giờ mình thực hiện làm thử nhé.

Phần đăng ký.

Route

php artisan ui bootstrap

Mình khá kém trong việc đặt tên mong các bạn thông cảm nhé.

Controller

Về cơ bản thì phần controller sẽ sử dụng lại các thành phần có trước trong laravel chỉ là thay vì trả về giao diện view('auth.register') thì mình dùng inertia để trả về. Trong RegisterController viết lại function showRegistrationForm như sau

php artisan ui bootstrap

à đừng quên phải khai báo thằng Inertia nhé. không là nó không biết sử dụng cái gì đâu

php artisan ui bootstrap

Vue

Tạo thư mục mới tên là auth trong thư mục components. Sau đó tạo một file là Register.vue

Mình là người làm giao diện khá kém nên mình sẽ lên https://bootsnipp.com và kiếm về một cái giao diện để sử dụng nhé. Mình đã chọn được cái này https://bootsnipp.com/snippets/3522X. Nhiệm vụ là đưa phần html vào template và tạo một file scss để đưa css vào. Sau một hồi mò mẫm và đưa nó về với đúng dạng của vue để có thể sử dụng thì phần template sẽ trông như sau

php artisan ui bootstrap

À ở trên đây mình có dụng i18n cho vue các bạn có thể tham khải bài viết này của mình để hiểu hơn về cách sử dụng nhé https://viblo.asia/p/i18n-trong-vuejs-YWOZr8Dw5Q0

Trông loằng ngoằng trên kia nhưng thực chất nó sẽ chạy ra rất xấu đấy, cần phải thêm css cho nó nữa. Vì phần css khá dài nên mình sẽ không viết css vào trong file vue nữa trông sẽ cực kì kinh dị. Mình định nghĩa một file register.scss trong thư mục resources/sass và đưa toàn bộ css định nghĩa cho file trang Register vào trong này :

php artisan ui bootstrap

Trong phần style của Regiser.vue import nội dung của nó vào như sau

php artisan ui bootstrap

Mình import như vậy là đã có định danh cho thằng sass trong webpack.mix.js như phía trên rồi nhé.

Cuối cùng là đến đoạn script rồi. Đây mới là phần đáng lưu tâm khi nói về Inertia nè.

php artisan ui bootstrap

Đại loại các phần hầu hết phần này đều viết như Vue thông thường như có hai điều đáng lưu tâm, thứ nhất mính đang dùng đến một cái biến this.$page.app.name: đây chính là một biến public được server trả về. Thứ hai đó là thay vì mình dùng axios để gọi đến server và nhận về một response dưới dạng json thì mình sử dụng this.$inertia.post.

Ví dụ với trường hợp phần thông tin gửi lên bị lỗi validator mọi thứ sẽ thật phức tạp khi bạn phải handle exception và viết nguyên một cái api validator exception trả về phía client. Client lại phải xử lý thông tin lỗi để hiện thị lên trên giao diện. Với cách gọi đến server của Inertia thế kia bạn chỉ việc share errors trong service provider và tạo props mới cũng là props thì đã xong. Hai thằng errors này sẽ được map với nhau khi bạn khai báo như vậy, và lỗi errors trả về từ server bây giờ đã là errors ở vue rồi. Lấy nó và in ra như blade phía trên thôi.

php artisan ui bootstrap

Ở phần script phía trên mình còn gọi đến một giá trị share khác của Inertia là

php artisan ui bootstrap --auth

Trên đây là cách mà controller đưa thông tin public để nhiều trang khác nhau dưới client có thể sử dụng. Ngoài ra bạn có thể truyền dữ liệu từ controller xuống client như sau.

php artisan ui bootstrap

Rồi nhìn như trên thì để sử dụng được biến filters hay organizations bạn cũng chỉ cần khai báo thêm props filters và organizations ở Vue là được rồi. Cái này không liên quan đến project đâu, mình cho vào để các bạn biết thêm thôi :v.

Mình chạy thử thôi nhỉ.

Thử trường hợp lỗi trước nhé xem thằng errors chạy có ngon không? Có vẻ ổn rồi nhỉ. Đến trường hợp đăng ký thành công nhé. À quên khi đăng nhập thành công sẽ gọi đến trang chủ Home. Trong HomeController dùng inertia để đưa về Home vue như sau nhé

php artisan ui bootstrap

Rồi bây giờ mình sẽ đưa code phần đăng nhập và đăng xuất các bạn hãy tự ghép vào project của mình nhé.

php artisan ui bootstrap --auth

php artisan ui bootstrap --auth

À thằng Login có dùng đến

php artisan ui bootstrap --auth

php artisan ui bootstrap --auth

Cuối cùng chúc bạn thực hiện thử với Inertia thành công nhé

Tài liệu tham khảo

https://reinink.ca/articles/introducing-inertia-js

https://github.com/inertiajs/pingcrm/