vi
new
+6
Avatar
Nguyen Van Huong @nguyen.van.huong
2.7K 150 47
Đã đăng vào thg 12 21, 2016 11:33 CH 6 phút đọc
2.3K

Tìm hiểu Laravel từ số 0 (P2)

laravel

Trong bài trước chúng ta đã tìm hiểu flow đến phần hiển thị trang trong Laravel. Bài này chúng ta sẽ cùng tìm hiểu về :

  • Tạo View
  • Tạo Controller
  • Trả về giá trị cho View
  • Tạo layout bằng blade

1. Tạo View

Chúng ta sẽ tạo một trang là contact :

http://localhost:8000/contact

1.1. Routing

Chúng ta sẽ thêm vào thiết lập access đến trang contact trong routes.php như sau :

// app/Http/routes.php

Route::get('/', 'WelcomeController@index');
Route::get('contact', 'WelcomeController@contact');   // Thêm

1.2. Controller

Sau đó sẽ thêm vào WelcomeController.php phương thức contact :

// app/Http/Controllers/WelcomeController.php

<?php namespace AppHttpControllers;

class WelcomeController extends Controller {
    // ...
    public function contact()  // thêm
    {
        return "contact";  // chúng ta không dùng hàm view mà trả về text
    }
}

Khi access vào địa chỉ http://localhost:8000/contact thì chuỗi 'contact' đơn thuần sẽ được hiển thị. Điều đó chúng tỏ việc chỉ trả về chuỗi đơn giản là hoàn toàn không vấn đề. Nhưng chúng ta sẽ thay đổi để dùng đến view() :

// app/Http/Controllers/WelcomeController.php

    public function contact()
    {
         return view("contact");  // chúng ta dùng đến hàm view()
    }
}

Nhưng khi này nếu truy cập vào địa chỉ trên thì sẽ chỉ nhận được lỗi dạng như sau :

Whoops, looks like something went wrong.

1/1 InvalidArgumentException in FileViewFinder.php line XXX:
View [contact] not found.

Và lý do chính là chúng ta chưa có tạo ra file contact.blade.php theo như nội dung lỗi đưa ra.

1.3. View

Vậy ta cần phải hãy tạo ra file đó vào thư mục view, chỉ với nội dung đơn giản nhất :

<!-- app/resources/view/contact.blade.php -->
<!DOCTYPE HTML>
<html>
<head>
    <title>Contact</title>
</head>
<body>
    <h1>Contact me!</h1>
</body>
</html>

Lúc này nếu truy cập lại thì dòng Contact me ! sẽ hiển thị. Đến đây chúng ta đã hoàn thành cách tạo một View trong Laravel.

2. Tạo Controller

Chúng ta sẽ đi đến phần tạo Controller với kịch bản như sau :

Tạo mới một trang about
Lấy ra và tổng hợp lại hiển thị của tranh tĩnh, tạo PagesController.
Hiển thị trang about bằng PagesController

2.1. Routing

Đầu tiên sẽ tiến hành thiết lập routing của trang about :

// app/Http/routes.php

// ...
Route::get('/', 'WelcomeController@index');
Route::get('contact', 'WelcomeController@contact');
Route::get('about', 'PagesController@about');    // Thêm mới
// ...

2.2. Tạo Controller

Chúng ta sẽ dùng lệnh artisan để tạo ra Controller mới. Đây là tiện ích được xây dựng trong Laravel, nếu quan tâm bạn có thể chỉ định lựa chọn list để biết được xem nó có thể làm được những việc gì.

php artisan list

// Tạo Controller
php artisan make:controller PagesController

Giờ vào kiểm tra bạn sẽ thấy một file tên PagesController.php được tạo ra trong thư mục app/Http/Controllers/ và nội dung của nó sẽ như sau :

<?php
namespace AppHttpControllers;

use AppHttpRequests;
use AppHttpControllersController;

use IlluminateHttpRequest;

class PagesController extends Controller {
    public function index()
    {
        //
    }

    public function create()
    {
        //
    }
    public function store()
    {
        //
    }
    public function show($id)
    {
        //
    }

    public function edit($id)
    {
        //
    }

    public function update($id)
    {
        //
    }

    public function destroy($id)
    {
        //
    }
}

Như bạn thấy thì mặc định nó sẽ tạo ra rất nhiều những phương thức, là những cái dành cho mục đích một cách cơ bản như thêm sửa xoá ... nhưng trog bài này thì ta sẽ xoá hết chúng đi. Mục đích chỉ là giới thiệu nên nếu bạn thấy không cần đến chúng thì khi tạo bạn sẽ chạy lệnh sau với chỉ định lựa chọn plain thì sẽ không có phương thức nào được tạo ra cả :

php artisan make:controller --plain PagesController

Nếu bạn quan tâm thì có thể chạy lệnh sau để biết được make:controller có thể chỉ định những lựa chọn nào :

php artisan help make:controller

_help_ có thể nhận bất kì lệnh nào sau nó và trả về nội dung mô tả ý nghĩa của các lệnh đó.

Đến đây ta sẽ thêm vào phương thức about và hiển thị view. Lần này sẽ tạo thư mục pages ở trong resources/views và đặt file about.blade.php vào đó.

class PagesController extends Controller {
    public function about() {
        return view('pages.about');
    }
}

Bạn để ý sẽ thấy giá trị truyền vào tham số là pages.about, có nghĩa trong trường hợp mà thư mục resources/views có thư mục con trong nó thì sẽ cần chỉ định vào hàm view và phân cách bởi dấu phẩy như ví dụ này.

2.3. Tạo VIEW

Chúng ta sẽ tạo một file đơn giản theo đúng cấu trúc thư mục như đã nói ở trên :

blog
└── resources
     └── views
         └── pages
              └── about.blade.php

<!-- about.blade.php -->

<!DOCTYPE HTML>
<html>
<head>
    <title>About</title>
</head>
<body>
    <h1>About Me</h1>
</body>
</html>

Đến đây ta đã có thể xác nhận xem có hoạt động hay không bằng cách truy cập vào http://localhost:8000/about. Khi đó nếu bạn thấy 'About me' là ok. Bạn có thể thử thực hành tương tự với contact View đã tạo ra trước đó để hiển thị từ PagesController.

3. Trả giá trị cho View

Chúng ta sẽ thay đổi about View để nhận tên và họ từ PagesController trả về rồi hiển thị ra. Vì thế cần phải sửa để hàm view sẽ nhận 2 đối số truyền vào.

<?php // app/Http/controllers/PagesController.php
namespace AppHttpControllers;

// ...
class PagesController extends Controller {
    public function about()
    {
        // set giá trị vào mảng
        $data = [];
        $data["first_name"] = "Lady";
        $data["last_name"] = "Gaga";

        // truyền mảng vào đối số thứ 2 hàm view
        return view('pages.about', $data);

        /* Trước khi sửa
        return view('pages.about');
        */
    }

    // ...
}

Để mà hiển thị được biến đã được gửi từ controller thì cần sửa cả about.blade.php, đầu tiên sẽ sử dụng thẻ của PHP để hiển thị biến số.

<!-- resources/views/pages/about.blade.php -->
<body>
    <h1>About Me: <?= $data[first_name] ?> <?= $data[last_name] ?></h1>
</body>

Nếu truy cập lại thì sẽ hiển thị kết quả 'About me: Lady Gaga'. Đến đây là đã ok, nhưng chúng ta sẽ thử theo format của template engine của Laravel, dó là blade - nó dùng thẻ dạng {{}} :

resources/views/pages/about.blade.php
...
<body>
    <h1>About Me: {{ $data[first_name] }} {{ $data[last_name] }}</h1>
</body>

Và kết quả cũng sẽ tương tự.

4. Sử dụng Blade để tạo layout

Đến thời điểm này ta đã tạo ra 2 trang about và contact nhưng chúng đều sử dụng rất nhiều HTML, nên tiếp theo tôi sẽ giới thiệu cách tách những phần chung ra tạo file layout, và có thể sử dụng chung được cho cả 2 trang.

Tạo mới 1 file resouces/views/layout.blade.php có nội dung sau :

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>

    @yield('content')

</body>
</html>

Trong phần body tôi đã đưa vào @yield('content'), đây là phần mà nội dung của trang sẽ được đưa qua. Trong trường hợp mà có nhiều @yield, thì content mà đang được đưa vào như là đối số sẽ là tên để đặc định location. Sau đó phần nội dung trang about sẽ sửa như dưới đây :

@extends('layout')  // kế thừa layout (layout.blade.php)

 /*
 Từ @section(‘content’) đến @endsection chính là phần sẽ đưa vào @yield(‘content’) của layout view
 */
@section('content')
    <h1>About Me: {{ $data[first_name] }} {{ $data[last_name] }}</h1>
@endsection

Vậy là layout đã có thể tái sử dụng cho nhiều nơi, và để thực hành các bạn cũng có thể dùng trang contact để thử !

Bài tiếp theo, chúng ta sẽ cùng đi đến phần setting môi trường của DB, quản lý version của DB bằng, và tạo model.

To be continued ...

Nguồn : Laravel10.wordpress.com

Laravel

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí