Symfony 教學 Chapter 2. 用 Symfony 建立你的第一個頁面 | SPACECOWBOY.

You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.

Symfony 教學 Chapter 2. 用 Symfony 建立你的第一個頁面

建立一個新頁面，不論是是一個 HTML 頁面或是一個 JSON 的接口，都需要進行兩個步驟：

  1. 建立 Route：Route 是指你頁面網址，並指向一個 Controller
  2. 建立 Controller：Controller 是一個用來建構頁面的 PHP function，接收傳進來的 Request 資訊並產生一個 Symfony Response，Response 包含 HTML 內容、JSON 字串、或者甚至像圖片或 PDF 這樣的二進制檔案。
See Also

Symfony 採納 HTTP Request-Response 的生命週期，想了解更多請看 Symfony and HTTP Fundamentals

建立一個頁面：Route 和 Controller

Tip

在這之前，請先確定你已經閱讀基本設定的章節，並且已能用瀏覽器訪問你的 Symfony App。

假設你要建立一個 /lucky/number 的頁面，該頁面產生並顯示一個幸運數字 (沒錯，一個亂數）。實作時，你需要先產生一個 Controller class，在該 class 內建立一個 method，當某人訪問 /lucky/number 網址時，該 method 將會被執行。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
// src/AppBundle/Controller/LuckyController.php
namespace AppBundle\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class LuckyController
{
    /**
     * @Route("/lucky/number")
     */
    public function numberAction()
    {
        $number = random_int(0, 100);

        return new Response(
            '<html><body>Lucky number: '.$number.'</body></html>'
        );
    }
}

在理解這段程式碼之前，先測試看看！如果你使用 PHP 內建的 web server，請訪問 http://localhost:8000/lucky/number

如果能看到一個幸運數字，先恭喜你！但在你要去簽樂透之前，先來了解一下這是如何運作的吧。還記得先前建立頁面的兩個步驟嗎？

  1. 建立一個 route：在 numberAction() 上方的 @Route 註解就是一個 route 設定，定義了該頁面的網址。你可以在 routing 章節了解更多的細節，其中也包括了如何建立 有參數 的網址。
  2. 建立一個 controller：在 route 設定下方的 numberAction() 我們稱之為 controller，這是一個讓 你 建立頁面邏輯以及最終返回一個 Response 物件的 function。你可以在 controllers 章節了解更多的細節，其中也包含如何建立 JSON 的 response。

The Web Debug Toolbar：除錯的夢幻神器

如果你的頁面可以運作，那你應該能在瀏覽器的最下方看到一條 Bar，這我們稱之為「Web Debug Toolbar」，他會是你除錯時的最佳夥伴。在你開發的同時，你可以體驗到他所擁有的所有資訊，將滑鼠移到不同的按鈕上，或是點擊這些按鈕，你可以得到像是 routing、效能、log 紀錄、以及更多的資訊。

Rendering a Template (使用 Service Container)

如果你要在 controller 返回 HTML 的內容，你可能會需要 render 一個 template。幸運的是 Symfony 自帶 Twig ，Twig 是一個易於使用、功能強大、也十分有趣的 Template 引擎。

首先，請看下方的程式碼的第 5 行，我們匯入了 Controller 這個 class，然後讓你的 LuckyController class 繼承該基底類別：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// src/AppBundle/Controller/LuckyController.php

// ...
// --> 新增這行 use 的程式碼
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class LuckyController extends Controller
{
    // ...
}

然後使用 render() function 來 render 一個 template，並帶入 number 這個變數來顯示他：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// src/AppBundle/Controller/LuckyController.php

// ...
class LuckyController extends Controller
{
    /**
     * @Route("/lucky/number")
     */
    public function numberAction()
    {
        $number = random_int(0, 100);

        return $this->render('lucky/number.html.twig', [
            'number' => $number,
        ]);
    }
}

最後，template 相關的檔案可以放在 app/Resources/views 的資料夾，建立一個 app/Resources/views/lucky 子資料夾並在裏頭建立一個 number.html.twig 的檔案，檔案內容如下：

1
2
3
{# app/Resources/views/lucky/number.html.twig #}

<h1>Your lucky number is {{ number }}</h1>

{{ number }} 是 Twig 用於 印出 變數內容的語法，重新訪問 http://localhost:8000/lucky/number，你就能看到新的幸運數字了！

在 建立和使用 Templates 文章中，我們能對 Twig 有完整的了解：像是如何使用迴圈、render 其他的 template、和 Twig 強大的 layout 繼承機制。

檢視專案的資料夾結構

好消息！你已經在兩個最重要的資料夾寫程式了，讓我們來介紹一下各個資料夾的用途：

  • app/
    包含像是設定檔和 template 檔案，基本上只要不是 PHP 的程式碼都會放在這邊。

  • src/
    你的 PHP 程式碼放在這邊。

    99% 的時間，你都會在 src/ (PHP 檔案) or app/ (其他非 PHP 的檔案)，如果你繼續往下閱讀，你將能了解有那些事是在這兩個資料夾內完成的。

那其他資料夾可以做什麼呢?

  • bin/
    很常在文件看到的 bin/console 就在該資料夾中 (和其他較不重要的執行檔)。
  • tests/
    該資料夾存放自動化測試的檔案 (例如：單元測試)。
  • var/
    該資料夾存放自動產生的一些檔案，像是快取檔 (var/cache/)，log 檔 (var/logs/) 和 session 的檔案 (var/sessions/)。
  • vendor/
    該資料夾存放第三方套件的檔案，透過 Composer 這個套件管理工具來下載。
  • web/
    該資料夾是你網頁服務器的根目錄，在這邊存放任何需要公開存取的檔案 (像是 CSS, JS 和圖檔)。

Bundles 和 Configuration

你的 Symfony 專案預裝了一些 bundle，像是 FrameworkBundle 和 TwigBundle，這些 Bundle 類似於 plugin 的概念，但有個重要的不同點：一個 Symfony 專案的 所有 機能都來自於一個 bundle。

我們會在 app/AppKernel.php (在 app/ 資料夾中少見的幾個 PHP 檔案) 這個檔案註冊需要的 bundle，每個 bundle 提供各類的 功能 (或者稱為 service)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
            new Symfony\Bundle\TwigBundle\TwigBundle(),
            // ...
        ];
        // ...

        return $bundles;
    }

    // ...
}

舉個例子，TwigBundle 負責將 Twig 相關的工具加進你的專案中！

最終你將會下載並加入更多第三方 bundle 到你的專案之中，以增加更多的開發工具。想像一下一個 bundle 可以幫助你做資料分頁的處理，這種 bundle 是存在的喔！

你可以在 app/config/config.yml 檔案設定 bundle 的行為，該檔案和其他相關的細節 (像是環境和參數設定) 會在 設定 Symfony (以及環境設定) 章節中討論到。

What's Next?

恭喜！你已經開始專精 Symfony 並學習一個全新的方法來開發優雅、實用、快速、和易於維護的程式專案。

那麼，是時候來閱讀以下的文章，以精進 Symfony 的基礎：

之後再學習一些重要的章節，像是 service container，form system，使用 Doctrine (如果你需要操作資料庫的話)，和更多其他的文章！

Have fun!

See Also

此篇文章主要翻譯自 Symfony 官方文件，並做了些許的修改，原始文章請見此連結

Comments