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,像是 FrameworkBundleTwigBundle,這些 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 containerform system,使用 Doctrine (如果你需要操作資料庫的話),和更多其他的文章!

Have fun!

See Also

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


Comments