Laravel 教學：建立您的第一個首頁

引言

你好，有志於網頁開發的各位！我很興奮能成為您探索 Laravel 世界的導師。作為一個教導計算機科學超過十年的老師，我可以告訴你，Laravel 是最強大且樂趣無窮的框架之一。今天，我們將使用 Laravel 創建我們的第一個首頁。別擔心如果您之前從未編過程——我們會一步步來，不久之後，您就能像專業人士一樣打造美麗的網頁！

Laravel - Home

Laravel 是什麼？

在我們深入之前，讓我們快速聊聊 Laravel 實際上是什麼。想像你正在蓋房子。Laravel 就像你的可靠工具箱，裡面裝滿了各種便捷的工具，讓工作變得更容易、更快。它是一個 PHP 框架，幫助開發者在每次創建網絡應用程序時不必重新發明輪子。這就像有了一堆預先製造的樂高部件，你可以快速組合出令人驚艷的東西！

預備知識

要跟隨本教程，您需要：

一台電腦（顯然！）
在您的機器上安裝 PHP（版本 7.3 或更高）
Composer（一個 PHP 依賴管理器）
一個文本編輯器（我推薦 Visual Studio Code，但使用您熟悉的即可）
一顆冒險的心和學習的願望！

如果您還沒有這些設置，別擔心。外面有許多優秀的教程可以幫助您準備好開發環境。

設置 Laravel

步驟 1：安裝 Laravel

首先，讓我們安裝 Laravel。打開您的終端（別害怕，這只是與計算機進行文字交流的方式），並輸入以下命令：

composer create-project --prefer-dist laravel/laravel my-first-laravel-project

這個命令告訴 Composer 在名為 my-first-laravel-project 的文件夹中創建一個新的 Laravel 項目。這可能需要幾分鐘，所以您可以趁這個時間喝杯咖啡或跳一小段舞。

步驟 2：導航到您的項目

完成後，讓我們移動到新的項目文件夹：

cd my-first-laravel-project

恭喜！您現在已經在您的第一個 Laravel 項目中。感覺不錯吧？

創建您的首頁

步驟 3：理解路由

在 Laravel 中，路由就像是應用程序的前台接待。它們決定訪客抵達網站時應該去哪裡。讓我們打開 routes/web.php 文件。這是我們告訴 Laravel 當有人訪問我們的首頁時應該做什麼的地方。

您會看到像這樣的內容：

Route::get('/', function () {
return view('welcome');
});

這是 Laravel 的默認路由。它說，“當有人訪問我們網站的根目錄 ('/') 時，顯示 'welcome' 視圖。” 但我們想要創建自己的首頁，所以讓我們改一改！

步驟 4：創建一個控制器

控制器就像是應用程序的經理。它們處理請求並返回響應。讓我們為我們的首頁創建一個控制器：

php artisan make:controller HomeController

這個命令在 app/Http/Controllers/HomeController.php 創建一個新文件。打開它並讓我們添加一個方法：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
public function index()
{
return view('home');
}
}

這個 index 方法將負責顯示我們的首頁。

步驟 5：更新路由

現在，讓我們更新我們的 routes/web.php 文件以使用我們新的控制器：

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

這告訴 Laravel，“當有人訪問 '/', 使用 HomeController 的 index 方法。”

步驟 6：創建視圖

現在，我們需要為我們的首頁創建實際的 HTML。在 resources/views/home.blade.php 創建一個新文件並添加一些 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>歡迎來到我的第一個 Laravel 網站！</title>
</head>
<body>
<h1>你好，Laravel 世界！</h1>
<p>這是我的第一個 Laravel 首頁。令人興奮的時刻！</p>
</body>
</html>

步驟 7：運行您的應用程序

現在是見證真實時刻的時候了！在終端中，運行以下命令：

php artisan serve

這會啟動一個開發服務器。打開您的瀏覽器並訪問 http://localhost:8000。您應該能看到您的新首頁！

添加一些特色

步驟 8：使用 Blade 模板

Laravel 使用一個叫做 Blade 的模板引擎。它就像是具有超能力的 HTML。讓我們更新我們的 home.blade.php 以使用一些 Blade 功能：

@extends('layouts.app')

@section('content')
<h1>歡迎來到 {{ config('app.name') }}！</h1>
<p>現在的時間是 {{ now() }}。</p>
@endsection

現在在 resources/views/layouts/app.blade.php 創建一個新文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', config('app.name'))</title>
</head>
<body>
@yield('content')
</body>
</html>

這創建了一個可重用的佈局，我們的首頁（以及未來的頁面）都可以使用。

結論

就是这样！您已經創建了您的第一個 Laravel 首頁。我們涵蓋了很多內容——從設置 Laravel 到創建路由、控制器和視圖。記住，學習編程是一段旅程，而不是一個目的地。持續練習，持續探索，最重要的是，樂在其中！

以下是我們在本教程中涵蓋的主要 Laravel 概念的快速參考表：

概念	描述
路由	定義 URL 和應用程序如何響應請求
控制器	處理請求邏輯並返回響應
視圖	包含應用程序提供給用戶的 HTML
Blade	Laravel 的模板引擎，用於創建動態視圖

開心編程，並歡迎來到 Laravel 的奇妙世界！

Credits: Image by storyset

下一教程:

Laravel - 概述