Bài 05 – Backend: Xây dựng trang login

Sharing is caring!

Chào các bạn. Hôm nay tui trở lại với series Xây dựng hệ thống làm trắc nghiệm Quiz. Hiện tại, version mới nhất của Laravel là 5.4, cho nên từ bài này trở đi, tui sẽ làm trên version 5.4 luôn nha. Các bài trước thì lúc đó Laravel vẫn còn là 5.2 nhưng nó không có khác biệt gì lắm đâu, những thao tác của các bài trước làm trên 5.2 thì vẫn có thể làm được trên 5.4. Vậy thống nhất là dùng version 5.4 nha các bạn.

Bài hôm nay sẽ hướng dẫn các bạn tạo một trang login cho module backend, Nói thì nghe dê lắm luôn, nhưng các bạn phải làm các việc sau:

  • Tạo cái User model (đã tạo ở bài trước rồi hen).
  • Tạo cái view cho trang login.
  • Tạo cái Controller để hiển thì trang login, logout.
  • Tạo cái Middleware để kiểm tra xem nếu user chưa login thì sao, mà login rồi thì sao.

Sơ sơ là 4 cái việc như vậy, tiểu tiết thì nhiều. Nhưng trước khi làm, tui muốn update cái phần ModuleServiceProvider tạo ở bài 02 để các bạn nếu có dùng subdomain cho phần admin (ví dụ: admin.mywebsite.com) thì vẫn đáp ứng được.

1. Update lại phần ModuleServiceProvider:

Đầu tiên, tại thư mục quiz, các bạn tạo thư mục admin cùng cấp với thư mục protected. Sau đó các bạn copy các file trong thư mục protected/public vào thư mục admin, cuối cùng các bạn có cây thư mục như sau:

Trong thư mục admin, các bạn mở file index.php lên tìm hai dòng như sau:

sửa nó lại thành:

Tiếp theo, hiện tại nếu các bạn đã đọc và làm theo bài 02 thì cái file config/module.php sẽ là:

các bạn đổi code lại như sau:

Cuối cùng là sửa lại code cho ModuleServiceProvider. Các bạn mở file protected/app/Modules/ModuleServiceProvider.php, update code như sau:

Hi vọng mọi thứ vẫn chạy ổn  Overjoy

2. Cài đặt laravelcollective/html:

Để tiện lợi trong việc viết code html trong template cững như đổ data vào các control html như text, select box, checkbox, radio… thì trong Laravel có một thư viện là laravelcolective/html (https://laravelcollective.com/docs/5.3/html, hiện tại đã update lên cho phù hợp với Laravel 5.4 rồi) dùng để render các control của html5. để install thì các bạn dùng composer để install như sau:

Các bạn nhớ phải chuyển vào thư mục protected rồi hãy run cái lệnh trên nha:

Sau khi chờ cho nó chạy xong thì các bạn xem cái file protected/composer.json thì sẽ thấy nó đã cập nhật cái package laravelcollective/html với version là 5.4:

Các bạn mở file config/app.php lên:

tìm cái mục ‘providers’ thêm dòng sau ‘Collective\Html\HtmlServiceProvider::class,’ vào cuối của mục ‘providers’:

tìm mục ‘aliases’ thêm 2 dòng sau vào cuối:

‘Form’ => Collective\Html\FormFacade::class,
‘Html’ => Collective\Html\HtmlFacade::class,

3. Tạo master layout:

Sau một thời gian thử nghiệm các kiểu, thì tui giới thiệu các bạn một cái template cho backend có tên là AdminLTE (download và preview ở đây: almsaeedstudio.com). Đây là template html thiết kế trên cơ sở của bootstrap, cho nên chúng ta sẽ phải lắp ráp nó vô theo chuẩn template của Laravel.

Đối với Laravel, template có thể chia ra như sau: Master và Partial. Với nhưng đoạn html dùng chung, thì ta để nó trong Master, còn những đoạn html thay đổi theo từng chức năng thì ta để nó trong Partial, sau đó ghép nó lại rồi sau cùng mới render toàn bọ 1 trang html hoàn chỉnh.

Laravel dùng blade để tạo template, với blade thì cú pháp của nó đơn giản, dễ hiểu, có thể kết hợp với code php để fill dữ liệu vào template (các bạn xem thêm blade ở đây, https://laravel.com/docs/5.4/blade)

Ở đây, tui sẽ tạo 2 cái main layout, một cho trang login và 1 cho tất cả các trang khác. Lý do là cái template AdminLTE nó apply css lên tag <body> cho trang login và các trang còn lại là khác nhau.

3.1. Tạo main layout cho trang login:

Tui quy định, cái nào là main layout thì tui đặt trong thư mục Views/layouts của module tương ứng là Backend hoặc Frontend. Ở đây tui làm Backend nên tui sẽ tạo môt file main layout tên là authentication.blade.php

Tất cả các file layout đều có dạng ten-file-layout.blade.php

Các bạn tạo file Views/layouts/authentication.blade.php và code như sau:

Ở đây các bạn thấy, @yield(‘SOMETHING_HERE’) chính là nơi để bạn đổ data vào từ bên Controller vào. Tạm thời các bạn cứ hiểu như vậy nha. Ở phần trên, tui có giới thiệu các bạn cái AdminLTE đó, giờ tui sẽ ráp nó vô cái layout này.

3.2. Tạo thư mục để chứa các file css, js:

Đầu tiên, các bạn tạo cho tui các thư mục trong thư mục admin như sau:

Cái này là tùy biến, không bắt buộc phải theo cấu trúc này nha các bạn. Tiếp theo là các bạn giải nén cái file AdminLTE-2.3.11.zip (download ở đây https://almsaeedstudio.com/download/AdminLTE-master). Sau khi giải nén ra thì các bạn thấy cái thư mục dist, trong này các bạn quan tâm đến cái thư mục css js của nó nhé.

Trong thư mục dist/css, các bạn copy cái file AdminLTE.min.css và thư mục skins về thư mục admin/media/local/css của project mình.

Trong thư mục dist/js, các bạn copy file app.min.js về thư mục admin/media/local/js của project mình.

Đó là copy các file css và js của template AdminLTE. Bây giờ, trong thư mục admin/media/local/css, các bạn tạo 2 file css tên là google-font.cssmain.css có nội dung như sau:

google-font.css:

main.css

Cuối cùng, thư mục admin của các bạn sẽ giống vầy:

3.3. Cài các thư viện cho css và js:

Tiếp theo, các bạn cài các thư viện như jquery, bootstrap, awesome-font…. bằng lệnh bower (như đã giới thiệu ở bài 01), những thư viện này các bạn cho nó vào thư mục admin/media/vendor.

Tại thư mục admin, các bạn tạo 1 file tên là .bowerrc với nội dung sau:

file này dùng để chỉ ra cái thư mục để lưu các thư viện bằng lệnh bower

Tại thư mục admin này luôn, các bạn chạy cái lệnh:

Nếu cái git bash nó không chạy cái lệnh này thì các bạn mở CMD của Windows lên, chuyển vô thư mục admin để chạy nha. Tui cũng không hiểu tại sao git bash nó không chạy

Nó hỏi gì thì các bạn cứ nhấn Enter để lấy giá trị default là được. Sau cùng, nó tạo ra cái file bower.json như sau:

Mỗi khi bạn install một thư viện thì nó sẽ lưu lại trong cái file bower.json này, sau này update cho nó dễ. Tiếp theo, các bạn install các thư viện sau: jquery, bootstrap, awesome-font… Cũng đứng tại thư mục admin, chạy lệnh:

Chú ý, cái flag –save là để lưu các thư viện này vào file bower.json nha các bạn. (Cái này là do tui lười, gõ nhiều thư viện, install một lần cho nhanh, chứ các bạn vẫn có thể install từng thư viện một bằng cách mỗi lệnh là tên 1 thư viện thôi nha)

3.4. Update lại file authentication.blade.php:

Để thuận tiện cho việc thêm các file css cũng như js vào trong template, tui sẽ tạo một cái array để chứa các đường dẫn các thư viện này, sau đó dùng vòng for để loop ra trong template cho nhanh, không cần thêm bằng tay từng cái.

Các bạn tạo trong thư mục config một file tên là backend.php(file này cũng tương tự như file module.php, chứa các biến dùng chung trong Backend):

Nội dung như sau:

update file layouts/authentication.blade.php:

Đến đây, các bạn sẽ thắc mắc là ủa, cái biến $assets, $item ở đâu ra? Trả lời là cái biến $assets là biến được truyền vào template thông qua Controller, biến $item là biến trong vòng for (do tui đã nói là blade cho phép khai báo biến PHP luôn)

Hàm asset() là cái hàm helper nó dùng bất kỳ trong View hay Controller hay Model đều được, hàm này nó sẽ trả về full url dẫn đến cái file js hay css (xem thêm các hàm helper khác ở đây https://laravel.com/docs/5.4/helpers). Qua phần Controller nha các bạn.

4. Viết Controller/View cho trang login:

Với mỗi một phần việc, tui sẽ tạo một Controller và một thư mục view tương ứng. Đối với admin thì tui sẽ tạo một Controller cho chức năng login và cái thư mục Views/admin chứa các partial template trong đó, như vậy sẽ dễ quản lý source code hơn. Các bạn tạo các file như sau:

Trước khi code phần này, thì tui sẽ nói qua cái phần guard. Để sử dụng cái model Models/User.php cho việc validate login thì các bạn phải khai báo cho Laravel biết là bạn dùng guard tên là gì, ứng với cái guard này thì dùng Model nào. Trong trường hợp này các bạn sẽ có 2 cái guard, 1 cái dùng cho Backend và 1 cái dùng cho Frontend( để học viên login vào làm bài test).

Các bạn mở file config/auth.php lên, các bạn thêm vào phần ‘guards’ tên là “user” như sau:

phần providers, các bạn thêm như sau:

Các bạn thấy, cái guard nó dùng provider là “user”, thì phần providers các bạn phải định nghĩa một cái provider là “user”. Provider “user” này dùng model là cái file User.php mà các bạn đã tạo ở bài 04 đấy. Cái tên provider là gì cũng được nha các bạn, miễn là bạn đặt tên ở phần providers như thế nào thì bạn ghi y vậy ở phần provider của phần guards.

Rồi, tiếp theo là code phần Controllers/AuthController.php:

Trong hàm __construct(), tui lấy cái guard tên là “user” mà tui khai báo trong cái file config/auth.php bằng hàm Auth::guard(), thì tất cả những gì liên quan đến User khi login đều được biến $guard lưu lại. Tiếp theo, tui tạo một biến để dùng trong cái template tên là “assets”, do cái array media là lưu các đường dẫn của file css, js mà lại được gọi trong main template thì phải tạo biến assets này thông qua hàm share(), ý là biến toàn cục vậy, dùng ở main layout hay partial layout đều được (tạm thời các bạn cứ hiểu cái biến assets là vậy nha, các bài sau tui sẽ giải thích rõ hơn với trường hợp cụ thể). Biến “assets” này sẽ giữ giá trị là cái array media trong file config/backend.php

Hàm getLogin() là hàm sẽ render cái partial layout admin/login.blade.php thông qua hàm helper view(). tham số đầu tiên là path dẫn đến cái file layout, tham số thứ hai là array chứa các biến sẽ đổ data vào cái layout đó.

Code phần admin/login.blade.php:

Dòng @extends(‘Backend::layouts.authentication’) có nghĩa là cái template admin/login.blade.php này sẽ dùng main layout là cái layous/authentication.blade.php. Chúng ta phải ghi “Backend::” phía trước để báo cho Laravel biết là dùng trong thư mục Views của module “Backend”. Trong AuthController.php, hàm getLogin() tui cũng phải ghi “Backend::” ở phía trước khi chỉ ra đường dẫn đến cái layout login.blade.php

Để đổ data là biến ‘page_title’ từ Controller vào khu vực ‘title’ trong layouts/authentication.blade.php, các bạn dùng:

@section(‘title’, $page_title)

Để render nguyên cái form login vào cái khu vực “content” trong layouts/authentication.blade.php thì các bạn dùng

@section(‘content’)

<!– HTML CODE IS HERE –>

@stop hoặc @endsection

Trong hàm getLogin() của AuthController.php, tui có truyền một cái biến là ‘login_or_lock’, biến này giữ cái tên css class là “login-page”, các bạn edit lại cái main layout authentication.blade.php:

Cái cú pháp của blade {{ $login_or_lock }} nó tương đương với lệnh <?php echo $login_or_lock; ?>

Tiếp theo là tạo route để render cái trang login, các bạn update lại file Backend/routes.php:

Ở dây tui không viết trục tiếp callback function cho cái hàm Route::get() nữa mà tui mapping nó với cái hàm getLogin() của AuthController bằng cái array key ‘uses’, đặt tên cho cái route này là ‘admin.login’ bằng array key là ‘as’, đặt tên để tránh tường hợp cái url của các bạn nó dài quá, viết cực mỗi khi dùng nó để redirect hay gì đó thì mình gọi thông qua cái tên này. Ví dụ: thay vì bạn gọi như sau để redirect về trang login:

thì các bạn có thể gọi bằng tên:

Đến đây, nếu các bạn gõ cái url : http://localhost:8080/learning/quiz/admin/login thì sẽ thấy cái trang login nó như vầy:

 

Chúc các bạn làm được như tui, bài đến đây cũng khá dài, cho nên tui ngừng ở đây. Bài kế tiếp tui sẽ nói cái phần validate login và Middleware để kiểm tra là đã login hay chưa. Cám ơn các bạn đã xem, nhớ share bài nhé.  Happy-Grin

Sharing is caring!

Bài 04 - Config database và tạo các Model tương ứng với các table

Vincent Le

Tui là Lê Minh Đạt, tên tiếng anh là Vincent(do thích nhân vật Vincent Valentine, ai từng là fan của trò Final Fantasy VII thì sẽ biết nhân vật này, hehe). Đang tập tành làm một blogger viết về mảng lập trình, mong muốn được chia sẻ những gì đã học được, tích góp được trong 10 năm đi làm thợ code.

shares