Bài 02 – Tạo module Frontend và Backend trong Laravel 5

Sharing is caring!

bài 01, sau khi chúng ta tạo thành công project tên là “quiz” thì Laravel 5 nó tạo cho chúng ta một đống file và thư mục (nhìn đuối luôn chứ bộ). Nhưng không sao, trước khi vào phần tạo module, mình sẽ giải thích sơ bộ các file và thư mục này cho các bạn nắm nha.

1. Cấu trúc thư mục và file của Laravel 5

 STT File & Folder Giải thích
1  app  Thư mục này chứa các file chính của project
2     Console  Thư mục này chứa các file xử lý các lệnh thông qua command line
3     Events  Xử lý các event của project
4     Exceptions  Xử lý các lỗi exception
5     Http
6        Controllers  Chứa các file controller
7        Middleware  Chứa các file tiền xử lý trước khi chạy các action trong controller
8        Requests  Chứa các file xử lý Request như data submit, validation
9        kernel.php  File này cho phép chúng ta đăng ký các file middleware của riêng mình
10        routes.php  File này xử lý các request url
11     Providers  Chứa các class Provider
12  bootstrap  Chứa các file bootstrap cho application
13  config  Chứa các file liên quan đến cấu hình
14  database
15     migrations  Chứa các file giúp chúng ta chỉnh sửa các table của database
16     seeds  Chứa các file xử lý phần tạo dữ liệu ban đầu cho database
17  public
18     index.php  File để chạy application
19  resources
20     assets  Chứa các file tiền css
21     lang  Chứa file về ngôn ngữ
22     views  Chứa file template dùng để render ra HTML
23  storage
24     app  Chứa các file upload từ người dùng
25     framework  Chứa file cached
26     logs  Ghi logs
27  vendors  Chứa các package được install bằng composer
28  .env.example  File này dùng để tạo các biến môi trường(file mẫu)
29  .env  File này mới là thiệt nè(copy từ file mẫu ra rồi đổi tên lại thôi à)
30  artisan  Command line utility của Laravel, dùng để tạo các file Model, Controller….
31  composer.json  Chứa các dependencies của application

Cơ bản thì là như vậy, chắc các bạn cũng nắm được sơ sơ mấy cái thư mục này nó chứa file gì và làm gì rồi ha Happy-Grin . Trước khi vào phần tạo module cho Frontend và Backend, mình muốn chỉ các bạn cái này, đó là ở bài 01, mình có nói các bạn mở cái url: http://localhost:8080/learning/quiz/public. Thì ở đây để cho cái url nó đẹp, nó không có chữ public ở sau cùng, mình muốn là chỉ cần gõ:

http://localhost:8080/learning/quiz  ==> là vào trang frontend

http://localhost:8080/learning/quiz/admin ==> vào trang backend

Như vậy thì nhìn cái url nó đẹp hơn All-I-See-is-Love . Vậy thì các bạn làm như sau:

  1. Đứng tại thư mục learning, đổi tên thư mục quiz thành protected
  2. Đứng tại thư mục learning, copy thư mục protected/public ra ngoài thư mục learning thành thư mục quiz. (Lúc này thư mục learning có 2 thư mục là protectedquiz)
  3. Sau đó, đứng tại thư mục learning, move thư mục protected vào trong thư mục quiz.

change_dir

Đến đây, trong thư mục quiz có các file và thư mục như sau:

Chưa xong đâu các bạn, làm tiếp một bước nữa là các bạn mở file index.php trong thư mục quiz lên, tìm hai dòng sau:

và đổi chúng thành:

(đổi cái dấu .. thành chữ protected)

Vậy là xong, các bạn thử cái url: http://localhost:8080/learning/quiz xem coi nó có hiện ra chữ Laravel 5 không nha, nếu hiện ra là thành công.

Từ đây về sau, thư mục app sẽ tính từ thư mục protected/app nhé các bạn.

(Các bạn có thấy cái file web.config không? File này dùng để cấu hình chạy PHP trên IIS nhé, ở đây chúng ta chạy PHP với Apache nên chỉ quan tâm đến file .htaccess thôi)

2. Tạo module frontend và backend:

Với cấu trúc thư mục như trên, chúng ta có thể viết code được rồi. Nhưng do chúng ta cần tách biệt rõ ràng code của frontend và code của backend (do frontend và backend đều có Controller, View, Middleware….), cho nên chúng ta phải sử dụng cách phân chia frontendbackend thành những module độc lập nhau. Với cách viết module này, nếu sau này chúng ta cần viết Restful API thì chỉ cần thêm một module tên là “api” là xong, không ảnh hưởng đến những module kia.

Giả sử các bạn đang đứng tại thư mục SERVER_ROOT/learning/quiz/protected/app nha

2.1. Tạo thư mục tên là Modules

2.2. Tiếp theo, các bạn mở file SERVER_ROOT/learning/quiz/protected/composer.json lên và tìm đến cái đoạn “psr-4”

Các bạn thêm “App\\Modules\\” : “app/Modules” vào ngay sau dòng “App\\”: “app/” như sau:

Điều này có nghĩa là bạn báo với Laravel rằng, namespace “App\\Modules” sẽ được trỏ đến thư mục “app/Modules”, để cho autoload nó có thể tự động load các file trong thư mục này. Để cho thuận tiện cho việc quản lý file, các bạn nên dẫn namespace theo path thư mục.

Vd:

Nếu path là app/Modules/Controllers, thì namespace là App\Modules\Controllers

Nếu path là app/Models, thì namespace là App\Models

 

Đứng tại thư mục SERVER_ROOT/learning/quiz/protected, các bạn chạy lệnh sau để update lại file autoload, nếu không khi chạy nó sẽ báo lỗi là không tìm thấy file đó nha.

2.3. Tại thư mục SERVER_ROOT/learning/quiz/protected/app/Modules, các bạn tạo cây thư mục cho module FrontendBackend như sau:

mod_02

2.4. Tiếp theo, các bạn tạo cho mình file module.php trong thư mục SERVER_ROOT/learning/quiz/protected/config như sau:

2.5. Kế tiếp, chúng ta phải tạo một Provider để Laravel nó có thể load các module này vào. Tại thư mục SERVER_ROOT/learning/quiz/protected/app/Modules, các bạn tạo một file php tên là ModuleServiceProvider.php với đoạn code như sau:

Url gốc nó sẽ tính từ chỗ này: http://localhost:8080/learning/quiz. Bắt đầu từ chổ này nó sẽ detect xem là có chữ “admin” hoặc “admin/gi_do_tiep_phia_sau” không? Nếu có thì nó sẽ load các file trong Backend, ngược lại thì load trong Frontend.

Sau khi tạo file này xong, chúng ta sẽ thêm nó vào phần autoload provider. Các bạn mở file SERVER_ROOT/learning/quiz/protected/config/app.php, tìm đến dòng có chữ ‘providers’:

Và thêm cái Provider của mình vào cuối dòng ngay sau dòng App\Providers\RouteServiceProvider::class này:

2.6. Cuối cùng, trong mỗi thư mục FrontendBackend, các bạn tạo thêm file routes.php để xử lý các route request cho từng module này. Tạm thời thì để trống file routes.php này nha các bạn.

Để test xem cấu trúc module của mình có hoạt động tốt không, các bạn mở file routes.php trong thư mục Frontend lên và thêm đoạn code sau:

Sau đó các bạn chạy url http://localhost:8080/learning/quiz/welcome, nếu thấy chữ “Welcome Quiz” là các bạn đã config đúng rồi đó. Congratulations!  Geek

Sharing is caring!

Bài 01 - Cài đặt Git Bash, Composer và Laravel 5
Bài 03 - Phân tích và thiết kế database sử dụng MySQL 5

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