[Thực hành] Sử dụng route cơ bản
NỘI DUNG BÀI VIẾT
Mục tiêu
Tìm hiểu cách định nghĩa và các tình huống sử dụng Route
Mô tả
Routing là thành phần quan trọng trong Laravel, có nhiệm vụ xác định URL nào sẽ được hồi đáp. Trong Laravel xử lý routes tại routes/web.php , chúng ta tạo ví dụ Routes xác định khi nào thì chạy Index, khi nào chạy Contact và About
Hướng dẫn
Bước 1: Khởi tạo project Laravel
Chạy câu lệnh sau trong terminal để tạo project
composer create-project --prefer-dist laravel/laravel route-demo
Bước 2: Vào routes/web.php thêm đoạn code sau
Route::get('/', function () {
echo "<h2>This is Home page</h2>";
});
Route::get('/about', function () {
echo "<h2>This is About page</h2>";
});
Route::get('/contact', function () {
echo "<h2>This is Contact page</h2>";
});
Bước 3: Trên trình duyệt chạy http://localhost:8000/ để truy cập trang Index
Bước 4: Trên trình duyệt chạy http://localhost:8000/contact để truy cập trang Contact
Bước 5: Trên trình duyệt chạy http://localhost:8000/about để truy cập trang About
Bước 6: Khi Routing thực thi thì nó có thể nhận và truyền các tham số, tại routes/web.php tạo thêm route như sau
Route::get('/user', function () {
return view('user', ['name'=>'Masud Alam']);
});
Trong đó ‘user’ là view sẽ hiển thị giao diện và ‘name’ là tham số mà routes sẽ nhận giá trị
Bước 7: Tạo View để hiển thị trong resources/views/user.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Route</title>
</head>
<body>
<h1>Welcome <?= $name ?>!</h1>
</body>
</html>
Bước 8: Trên trình duyệt chạy http://localhost:8000/user
Bước 9: Chúng ta cũng có thể truyền tham số trên thanh địa chỉ khi chạy web, tại routes/web.php tạo thêm route như sau:
Route::get('/user/{name}', function ($name) {
echo "<h2>User name is $name</h2>";
});
Bước 10: Trên thanh địa chỉ trình duyệt chạy http://localhost:8000/user/Masud
Bước 11: Routing cũng hỗ trợ tham số mặc định, khi chạy web ta không cần truyền tham số vẫn được, sinh viên tạo route:
Route::get('/user-name/{name?}', function ($name = 'Sohel') {
echo "<h2>User name is $name</h2>";
});
Các bạn để ý khi chạy web ta không truyền tham số, mà các tham số lấy giá trị mặc định đã khởi tạo trong routes
Bước 12: Tạo Controller
Chạy lệnh như bên dưới để tạo Controller
php artisan make:controller HomeController
Khi tạo thành công controller có tên HomeController thì màn hình như sau
Kiểm tra HomeController vừa tạo tại app/Http/Controller/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller {
public function index() {
return view('home');
}}
Vào routes.php tạo routes thực thi controller vừa tạo xong
Route::get('/', '[email protected]');
Bước 13: Tạo view để hiển thị kết quả
Vào resources\views\ tạo trang home.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">
Welcome!
</div>
</div>
</div>
</body>
</html>
Kết quả khi chạy http://localhost:8000
Link tham khảo code: https://github.com/codegym-vn/laravel-route
Leave a Reply