Hướng dẫn laravel bootstrap 5 - khởi động laravel 5

Nội dung chính Show

• Cài đặt laravel/ui
• Điều hướng bài viết
• Tích hợp Bootstrap vào Laravel bằng chèn link CSS
• Cài đặt gói Patricktalmadge/Bootstrapper hỗ trợ viết mã nhanh
• Giao diện web sử dụng Bootstrap
• 1. Bootswatch
• 2. StartBootstrap
• 3. Free CSS
• 4. Giao diện Bootstrap cho backend miễn phí được ưu chuộng nhất
• 5. Bootstrapmade
• 6. Shapebootstrap
• Lời kết

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…

SEO (Search Engine Optimization) không còn cái gì mới lạ với các quản trị viên hệ thống website và các lập trình viên ứng dụng web. Trong năm 2015, Google đã từng thông báo các website tuân thủ Responsive sẽ nhận được điểm chất lượng SEO tốt hơn (Response một thuật ngữ ám chỉ website đó có thể hiển thị tương thích trên tất cả các thiết bị với độ phân giải khác nhau). Lý do đơn giản là hiện nay tỉ lệ người dùng sử dụng smart phone, tablet... là khá lớn, nếu giữ website chỉ được thiết kế cho các máy tính cá nhân, các website này sẽ hoạt động không tốt trên các thiết bị thông minh.

Công việc thiết kế website cũng vì thế mà khó khăn hơn bao giờ hết, để viết được một website hỗ trợ Responsive từ đầu là tốn rất nhiều thời gian. Sự ra đời của các css framework đã giúp cho các nhà phát triển web dễ chịu hơn. Số lượng các CSS framework là rất nhiều, kể đến như Pure, Bootstrap, HTML5 Boilerplate, Base, Skeleton... nhưng Laravel quyết định chọn kết duyên với Bootstrap do bootstrap khá đơn giản để sử dụng, tài liệu Bootstrap rất khoa học và đặc biệt Bootstrap có bệ đỡ là Twitter là công ty CNTT lớn do đó không phải lo ngại về hỗ trợ, lộ trình phát triển. Trong các phiên bản Laravel 5.x bootstrap đã được thiết lập sẵn cấu hình, chỉ cần tải về các package là sử dụng được. Bài viết này sẽ hướng dẫn bạn từ tích hợp Bootstrap đến cách thức lập trình, cách quản lý mã CSS và cuối cùng là biên dịch để public code lên máy chủ.

Tích hợp Bootstrap vào Laravel bằng chèn link CSS

Trong bài viết Laravel Blade phần 1, chúng ta cũng đã biết cách sử dụng thư viện Bootstrap bằng cách chèn thư viện CSS này vào template. Mỗi trang web, khi muốn sử dụng chỉ đơn giản là chèn đường dẫn đến CSS framework Bootstrap như sau:

Xem Hướng dẫn sử dụng CDN link trên Bootstrap. Ok, vậy là bạn có thể sử dụng các class để makeup cho website của mình. Bạn thực hành theo ví dụ trong bài Laravel Blade phần 2 để thấy chúng ta tạo ra một trang khá đẹp đẽ, hỗ trợ Responsive mà chỉ trong vài phút.

Cài đặt gói Patricktalmadge/Bootstrapper hỗ trợ viết mã nhanh

Gói Bootstrapper này giúp bạn thiết kế giao diện nhanh chóng mà có thể tạm quên đi những kiến thức khác ít sử dụng trong Bootstrap, ví dụ, thay vì phải viết mã HTML thuần:

Gửi tin nhắn

ta thay bằng Laravel HTML

{!! Form::submit('Gửi tin nhắn', array('class' => 'btn btn-success')) !!}

hoặc giờ đây khi đã cài đặt Patricktalmadge/Bootrapper thì đơn giản hơn nữa:

{!! Button::success('Gửi tin nhắn') !!}

Chúng ta sẽ đi vào phần cài đặt và thiết lập cấu hình cho gói patricktalmadge/bootstrapper trong Laravel. Chuyển đến thư mục gốc project và cài đặt bằng lệnh composer require

php artisan ui bootstrap

Thêm các dòng sau vào phần providers và aliases trong config/app.php để thiết lập cấu hình trong Laravel

php artisan ui bootstrap

Đây là cấu hình cho các project sử dụng Laravel 5.x, còn với các phiên bản Laravel thấp hơn bạn thay cấu hình trong providers thành:

php artisan ui bootstrap

Nếu project của bạn chưa chèn đường dẫn đến các thư viện của Bootstrap nhớ chèn vào theo cách ở trên hoặc sử dụng Laravel HTML

php artisan ui bootstrap

Ok, bây giờ chúng ta đã có thể sử dụng. Ví dụ hiển thị các thông báo đến người dùng như sau:

php artisan ui bootstrap

Viết thành:

php artisan ui bootstrap

Gói Patricktalmadge/Bootrapper cũng có cái hay, tuy nhiên việc gì quá dễ cũng không tốt, khiến cho chúng ta ngại ghi nhớ kiến thức.

Giao diện web sử dụng Bootstrap

Phát triển ứng dụng web liên quan đến rất nhiều các kỹ năng khác nhau, một trong những phần việc mà mọi người sợ nhất là thiết kế giao diện. Các dự án lớn thường sẽ làm việc theo nhóm và mỗi nhóm sẽ đảm đương các công việc khác nhau: nhóm chuyên thiết kế giao diện, nhóm viết code, nhóm chuyên lo các công việc hạ tầng, triển khai máy chủ... Nếu nhân lực không dồi dào, chúng ta đành cắt bỏ đi một số phần của dự án bằng cách sử dụng lại các thiết kế có sẵn trên thị trường. Hiện nay, số lượng các giao diện miễn phí sử dụng Bootstrap là rất lớn, bạn hãy tham khảo một số mẫu website miễn phí sau:

1. Bootswatch

Nếu bạn chỉ cần những giao diện đơn giản, Bootswatch cung cấp một số lượng các theme bằng Bootstrap cũng tạm được và đương nhiên mọi thứ là miễn phí.

2. StartBootstrap

Các giao diện tại đây phong phú hơn, đặc biệt có những giao diện sử dụng Bootstrap cho các hệ thống backend là tương đối ổn.

3. Free CSS

Ở đây có rất nhiều giao diện web bằng Bootstrap miễn phí cho bạn tha hồ lựa chọn.

4. Giao diện Bootstrap cho backend miễn phí được ưu chuộng nhất

Bạn có thể tải giao diện này về tại đây, đây là một trong những giao diện backend bằng Bootstrap miễn phí mà chất lượng không thua kém giao diện trả tiền nào. Bản thân tôi cũng đã từng sử dụng giao diện này cho phần backend một số dự án web, thật tuyệt vời khi chúng ta chỉ cần tập trung vào mỗi business logic thôi mà không cần quan tâm đến thiết kế giao diện.

5. Bootstrapmade

Bootstrapmade cung cấp một lượng giao diện khủng lồ, hic chọn giao diện cũng là cả vấn đề đấy chứ.

6. Shapebootstrap

Shapebootstrap có một lượng các giao diện bootstrap miễn phí rất phong phú và rất đẹp, tuy nhiên chúng ta cần đăng ký tài khoản mới có thể tải về được. Bonus thêm cho các bạn Hơn 70 giao diện bootstrap miễn phí hàng đầu hiện nay.

Lời kết

Framework Laravel với sự tích hợp Bootstrap giúp chúng ta phát triển các ứng dụng web nhanh chóng, đẹp và hiệu quả. Đã qua dần cái thời ngồi viết code từ A-Z, cả vài tháng trời ra được cái website trông cùi bắp. Càng ngày, khi tìm hiểu sâu hơn về Laravel chúng ta thấy vị trí số 1 về PHP framework là điều hiển nhiên, Laravel là tổng hợp của những gì tốt nhất.

CÁC BÀI VIẾT KHÁC