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: 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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: 

<input type="submit" class="btn btn-success">Gửi tin nhắn</input>

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

c:\xampp\htdocs\laravel-test>composer require patricktalmadge/bootstrapper
Using version ^5.10 for patricktalmadge/bootstrapper
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
  - Installing twbs/bootstrap (v3.3.7): Downloading (100%)
  - Installing patricktalmadge/bootstrapper (5.10.0): Downloading (connecting...
Downloading (100%)
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.

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

'providers' => [
  //
  'Bootstrapper\BootstrapperL5ServiceProvider',
],

'aliases' => [
  //
  'Accordion' => 'Bootstrapper\Facades\Accordion',
  'Alert' => 'Bootstrapper\Facades\Alert',
  'Badge' => 'Bootstrapper\Facades\Badge',
  'Breadcrumb' => 'Bootstrapper\Facades\Breadcrumb',
  'Button' => 'Bootstrapper\Facades\Button',
  'ButtonGroup' => 'Bootstrapper\Facades\ButtonGroup',
  'Carousel' => 'Bootstrapper\Facades\Carousel',
  'ControlGroup' => 'Bootstrapper\Facades\ControlGroup',
  'DropdownButton' => 'Bootstrapper\Facades\DropdownButton',
  'Form' => 'Bootstrapper\Facades\Form',
  'Helpers' => 'Bootstrapper\Facades\Helpers',
  'Icon' => 'Bootstrapper\Facades\Icon',
  'InputGroup' => 'Bootstrapper\Facades\InputGroup',
  'Image' => 'Bootstrapper\Facades\Image',
  'Label' => 'Bootstrapper\Facades\Label',
  'MediaObject' => 'Bootstrapper\Facades\MediaObject',
  'Modal' => 'Bootstrapper\Facades\Modal',
  'Navbar' => 'Bootstrapper\Facades\Navbar',
  'Navigation' => 'Bootstrapper\Facades\Navigation',
  'Panel' => 'Bootstrapper\Facades\Panel',
  'ProgressBar' => 'Bootstrapper\Facades\ProgressBar',
  'Tabbable' => 'Bootstrapper\Facades\Tabbable',
  'Table' => 'Bootstrapper\Facades\Table',
  'Thumbnail' => 'Bootstrapper\Facades\Thumbnail',
]

Đâ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: 

'providers' => [
  //
  'Bootstrapper\BootstrapperServiceProvider',
],

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

<span class="pl-s1">{{ <span class="pl-c1">HTML</span><span class="pl-k">::</span>style(<span class="pl-s"><span class="pl-pds">'</span>path/to/bootstrap.css<span class="pl-pds">'</span></span>) }}</span>
<span class="pl-s1">{{ <span class="pl-c1">HTML</span><span class="pl-k">::</span>script(<span class="pl-s"><span class="pl-pds">'</span>path/to/jquery.js<span class="pl-pds">'</span></span>) }}</span>
<span class="pl-s1">{{ <span class="pl-c1">HTML</span><span class="pl-k">::</span>script(<span class="pl-s"><span class="pl-pds">'</span>path/to/bootstrap.js<span class="pl-pds">'</span></span>) }}</span>

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: 

<div class="alert alert-warning">
    Bạn chưa nhập số điện thoại để xác thực qua tin nhắn
</div>

Viết thành: 

{!! Alert::Warning('Bạn chưa nhập số điện thoại để xác thực qua tin nhắn') !!}

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

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.