Build project Laravel 5.7 dùng Template AdminLTE v3 và Bootstrap theo NodeJS

Mục tiêu

Khởi tạo xong một Web App sử dụng Laravel 5.7, template AdminLTE v3, Boostrap 4 sử dụng NodeJS để compile các file asset (js, scss, …)

Chuẩn bị

  • Package: Npm (>= 6.4.* ), composer, nodejs (>= 8.11), PHP (>=7.1), PHP-fpm (>=7.1)
  • Mysql Workbench (hoặc các bạn có thể sử dụng bất cứ phần mềm quản lý database nào cũng được)

Khởi tạo project

Install Laravel

Các bạn có thể tham khảo cách install ngay tại trang chủ Laravel

Install AdminTemplate LTE

Install FontAwesome

Create Schema Database

Thiết lập project

Laravel DB Connection

Cần chỉnh sửa trong file .env như sau

Nhớ thay đổi <your_username><your_password> tương ứng trên máy các bạn

Laravel Migration

Tiếp theo chạy migration để khởi tạo các tables mặc định ban đầu trong Laravel

Laravel Routing

Để demo, mình sẽ tạo Router để có URL định dạng <your_domain>.com/admin/dashboard.
Các bạn mở file /routes/web.php và chỉnh sửa như sau:

Có thể các bạn sẽ thắc mắc DashboardController ở đâu ra, đừng lo, chúng ta sẽ tạo ở bước liền kề.

Laravel Controller

Sau đó các bạn mở file DashboardController.php lên và tiến hành edit chút xíu

Hiện tại View pages.dashboard.index như trên chưa có, chúng ta sẽ tiến hành tạo layouts và pages demo ở bước tiếp theo.

Laravel Blade layout (AdminLTE v3)

Mẫu template starter các bạn có thể xem ở đây.
Chúng ta sẽ dựng layout master theo cấu trúc html như Starter Page của AdminTemplate LTE.

Cấu trúc views directory

H1. Cấu trúc thư mục /resources/views/ dùng trong bài viết

Master layout

Ở phạm vi demo, các bạn có thể copy toàn bộ source trang Starter của AdminTemplate theme demo, vào file master.blade.php.

Sau khi copy toàn bộ phần HTML của Starter AdminLTE3 vào, các bạn sửa lại chỗ import files Javascript & CSS trong cấu trúc HTML như sau:

Đối với Javascript

H2. Đoạn js cần thay thế
H3. Đoạn JS mới

Đối với CSS

H4. Đoạn CSS cần thay thế
H5. Đoạn CSS mới

Dashboard page

Đến đây, các bạn mở file /resources/views/dashboard/index.blade.php, và chỉ cần thêm một dòng như sau

 

Laravel Mix config & run

Ở phiên bản Laravel 5.7, họ đã tích hợp sẵn Webpack cho chúng ta, và một package khá là hữu ích là Mix, giúp việc compile các file assets cho project (js, scss, …) trở nên dễ dàng hơn.

Các bạn mở file webpack.mix.js ngoài thư mục gốc của project và chỉnh sửa lại chút xíu. Do ở đây mình muốn chia riêng folder /admin/ cho tiện quản lý.

Tiếp theo, các bạn cần chỉnh sửa file JS bootstrap và file SCSS tổng của app.
Mở file /resources/js/bootstrap.js và chỉnh sửa chút:

H6. require thêm package ‘admin-lte’

Sau đó, mở tiếp file /resources/sass/app.scss và chỉnh sửa lại:

H7. import thêm css của 2 package này

Cuối cùng là chạy command để NodeJS sẽ hỗ trợ compile các files assets ở folder /resources/js, /resources/sass —> /public/admin/js, /public/admin/css


Và đây là kết quả nhận được sau khi bạn truy cập vào URL <your_domain>.com/admin/dashboard:

H8. Final result

Đến đây thì bài viết đã hoàn tất, nội dung bài viết có thể còn có nhiều thiếu sót, các bạn cứ việc đóng góp ý kiến thoải mái để mình có thể cải thiện chất lượng hơn về sau nhé.

Tham khảo:

  • https://www.youtube.com/watch?v=CowsopJhX3M

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.