本文執行個體講述了Symfony2架構建立項目與模板設定的方法。分享給大家供大家參考,具體如下:
環境準備與概覽
習慣於在windows使用netbean編輯器並使用virtualbox虛擬centos系統, 預將nginx+php-fpm+mysql, 當然apache也是不錯的選擇, 使用http://symfony在windows與centos上作為開發網域名稱。
一、下載與環境設定
1. 如何於centos上面建立開發環境不再詳述, 當然也可以在windows上面建立開發環境。
2. 關於使用 symfony代替127.0.0.1 在liunx系統中修改/etc/hosts檔案, win7系統中修改 C:\Windows\System32\drivers\etc\host 檔案(需要用管理員權限開啟)
加入類似於IP 別名1 別名2的內容即可, 如:
複製代碼 代碼如下:
# /etc/hosts 127.0.0.1 symblog dev symfony
3.手動下載symfony2, 也可以參照這個頁面用Composer 進行安裝。http://symfony.com/doc/current/book/installation.html
唯一需要注意的是: app/cache 和app/logs目錄需要設定成777許可權。windows的開發環境應該不存在這個問題。
4. 修改apache 或者nginx設定檔symfony網域名稱指向下載的symfony檔案的web目錄。
此時應該可以通過 http://symfony/app_dev.php 訪問到symfony的預設頁面, 有幾個demo可以參照學習。
app_dev.php 預設載入了一個開發工具條在下面, 顯示了當前頁面的一些資訊, 極大地方便了程式的調試, 只有當環境變數為dev時才會顯示。
5. 使用composer安裝時, 會提示輸出mysql等相關資訊, 需要修改這些資訊, 或者是直接下載的檔案, 可以進入頁面的“Configure” 進行相關設定。
Bundles(也許可以稱之為包, 束, 程式集,或者項目, 還是用英文吧)是symfony的基礎東東, 一個個分享出來可重複利用的代碼封裝, 甚至於symfony本身是作為一個bundles啟動並執行。 包括控制器、模組、模板, 甚至於映像與js, css樣式表等資源。 很雜亂的東西, 區別不同的bundles使用了php5.3以後的命名空間, 大部分cpenal, da虛擬機器主機好像只有php5.2版本吧, 無法運行symfony2了。
二、建立一個Bundle
在下面的例子中將建立一個部落格, Symfony 提供了大量工具來快速地建立項目。 比如我們可以用它來快速建立一個部落格的基礎bundle.
複製代碼 代碼如下:
php app/console generate:bundle –namespace=Blogger/BlogBundle –format=yml
運行後直接採用所有的預設設定即可。 可以方便地建立我們所需要的基本控制器, 模組與模板等。 包含了下面的行為:
註冊Bundles
在symfony中所有使用的bundles都要求先被註冊, 有些bundles只會使用於開發測試環境(dev or test), 如前文提及的開發工具條. 下面這斷代碼顯示了bundles建立命令如何註冊BloggerBlogBundle這個bundle.
// app/AppKernel.phpclass AppKernel extends Kernel {public function registerBundles() {$bundles = array(// ..new Blogger\BlogBundle\BloggerBlogBundle(),);// .. return $bundles; } // ..}}
路由
作為一個架構, 路由功能被bundler建立器建立於app/config/routing.yml, symfony是用yml格式來儲存配置資訊。
複製代碼 代碼如下:
# app/config/routing.yml
BloggerBlogBundle:
resource: "@BloggerBlogBundle/Resources/config/routing.yml"
prefix: /
prefix首碼選項允許我們可以將其放置於如blog、news等子目錄下。
檔案
除了以上設定檔外, 其它大部分檔案產生為src目錄下, 如同大部分mvc架構。 在src下產生Blogger目錄, 並有BlogBundle子目錄存放著各種相關東東。不同的是類似於blogger的目錄對應著php命名空間。
預設控制器
Bundle產生器在src下面產生了預設了控制器。 通過訪問: http://symfony/app_dev.php/hello/world 可以看到簡單的問候。 關於這個頁面是如何產生:
路由
還是路由, 不同的是前面的路由是在整個程式裡面註冊使用, 這裡的路由是控制具體頁面使用, src/Blogger/BlogBundle/Resources/config/routing.yml 控制了BloggerBlogBundle, 包含以下程式片斷:
複製代碼 代碼如下:
# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
pattern: /hello/{name}
defaults: { _controller: BloggerBlogBundle:Default:index }
參數: 進行url檢測, 符合/hello/{name}結構的任意值將被賦予給{name},
方式: 沒有對形式進行限制, 理論可以put, get, post, delete所有的操作都可以進行。
後續: 如果符合以上兩條, 那麼{name}將會傳導至特定檔案, 以上為src/Blogger/BlogBundle/Controller/DefaultController.php檔案中的default控制器的index行為將被使用。
控制器
在預設生產的bundler中, 控制器行為相當簡單, {name}參數被傳入並被傳出到模板檔案:
// src/Blogger/BlogBundle/Controller/DefaultController.phpnamespace Blogger\BlogBundle\Controller;use Symfony\Bundle\FrameworkBundle\Controller\Controller;class DefaultController extends Controller{public function indexAction($name){return $this->render('BloggerBlogBundle:Default:index.html.twig', array('name' => $name));}}
BloggerBlogBundle:Default:index.html.twig 會使用 BloggerBlogBundle views檔案夾中 Default檔案夾下面index.html.twig模板檔案.
模板檔案
開啟上述模板檔案, 非常簡單的一句代碼:
{# src/Blogger/BlogBundle/Resources/views/Default/index.html.twig #}Hello {{ name }}!
以上就是symfony的整個mvc流程, 這麼多檔案的作用只是輸出一個 “hello world”. 理論上不用bundler建立器, 只是手動建立上述檔案也可以實現相同效果。花費的時間就多了去了。
回到正題, 我們是建立部落格系統, 所以不需要 hello world,
1.移除控制器 src/Blogger/BlogBundle/Controller/DefaultController.php
2.移除模板 src/Blogger/BlogBundle/Resources/views/Default/
3.最後移除路由 src/Blogger/BlogBundle/Resources/config/routing.yml
整個世界清靜了。
三、讓我們開始建立部落格的首頁
Twig的優點
在symfony中我們可以使用 Twig和php(這不是廢話嘛)作為模板。使用Twig的以下優點:
1. 快: 是編繹過的php類, 可以佔用更少的資源
2. 簡潔:想想看要打<?php ?>, Twig輸入的內容要少很多。
3. 可繼承: 非常cool的一個功能
4. 安全: 轉義功能預設開啟, 甚至還可以為重要代碼提供沙箱功能。
5. 可擴充: 需要額外的定製功能, 可以隨時擴充
更多內容, 請移步:http://twig.sensiolabs.org/
可繼承是一個非常好的優點, 我們將使用三級繼承結構來定製這個模板, 這將允許我們在三個不同層級修改模板, 方便自由定製。
主模板–level 1
<!– app/Resources/views/base.html.twig –><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"; charset=utf-8" /><title>{% block title %}symfony{% endblock %} – blog</title><!–[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]–>{% block stylesheets %}<link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'><link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />{% endblock %}<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" /></head><body><section id="wrapper"><header id="header"><div>{% block navigation %}<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav>{% endblock %}</div><hgroup><h2>{% block blog_title %}<a href="#">symfony</a>{% endblock %}</h2><h3>{% block blog_tagline %}<a href="#">creating a blog in Symfony2</a>{% endblock %}</h3></hgroup></header><section>{% block body %}{% endblock %}</section><aside>{% block sidebar %}{% endblock %}</aside><div id="footer">{% block footer %}<a href="http://blog.dengruo.com/201309/1409">Symfony2 部落格教程</a>{% endblock %}</div></section>{% block javascripts %}{% endblock %}</body></html>
上面代碼在引入了一個js檔案, 在ie9版本前的瀏覽器中實現html, 以及兩個css檔案匯入google fronts.
這構成了網頁的主要內容結構, 相當於drupal的html.tpl.php+page.tpl.php.
讓我們看一下頭部檔案
複製代碼 代碼如下:
<title>{% block title %}blog{% endblock %} – symfony</title>
{% 標籤中即不是html, 也不是php, 他是3個Twig標籤中的一個, 用於執行某些動作。 這裡可以找到完整的Twig控制動作用於這個標籤。 回到當前代碼, 是用於尋找title的block並輸出他, 如果沒有則輸出預設的symblo這個詞。
Twig的可續承特性可以用於修改title, 我們可以在其它模板檔案中重寫它:
{% extends '::base.html.twig' %}
{% block title %}The blog title goes here{% endblock %}
上面代碼首先繼承了第一次定義這個block的檔案, 然後修改它。 網站標題部分會輸出 'The blog title goes here – symfony'。
一般而言, 我們引用模板檔案時會採用bundle:controller:template, 但是以上代碼並沒有bundle 和controller, 不包含這兩個欄位會直接引用app/Resources/views/ 檔案夾下面的檔案。
在css樣式表中, 我們可以發現另一個Twig標籤{{, 這是一個輸出(說些什麼)標籤。
複製代碼 代碼如下:
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
這個標籤用於輸出變數或者運算式, 上面例子輸出了asset函數的傳回值, 這個函數提供可移植的方式來返回css,js, 圖片的地址。
這個標籤可以以特定格式輸出我們想要內容, 比如時間:
複製代碼 代碼如下:
{{ blog.created|date("d-m-Y") }}
全部過濾列表在 Twig 文檔可以查到。
最後一個標籤並沒有在上述代碼中出現, 它是{#, 只是一個注釋標籤
複製代碼 代碼如下:
{# 注釋內容可以輸出在這裡 #}
接下來我們將建立css樣式表web/css/screen.css , 加入以下內容.
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }.clear { clear: both; }#wrapper { margin: 10px auto; width: 1000px; }#wrapper a { text-decoration: none; color: #F48A00; }#wrapper span.highlight { color: #F48A00; }#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }#header ul.navigation { list-style: none; text-align: right; }#header .navigation li { display: inline }#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }#header h2 a { color: #000; }#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }.main-col { width: 700px; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }.sidebar { width: 239px; padding: 10px; display: inline-block; }.main-col a { color: #F48A00; }.main-col h1,.main-col h2{ line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #F48A00; }.main-col p { line-height: 1.5em; margin-bottom: 20px; }#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }
Bundler模板–level 2
現在我們為blog bundler 建立模板, 建立src/Blogger/BlogBundle/Resources/views/layout.html.twig 並加入:
複製代碼 代碼如下:
{# src/Blogger/BlogBundle/Resources/views/layout.html.twig #}
{% extends '::base.html.twig' %}
{% block sidebar %}
Sidebar content
{% endblock %}
非常簡單的代碼,1. 繼承了一級模板, 並且為部落格內容特別定製了側邊欄, 很顯然我們並不想部落格的布局與其它頁面一樣。 類似drupal7中page–content-type.tpl.php模板, 定製了某一特殊類型內容的布局。
具體頁面配置–level 3
這個階段已經涉及到建立具體頁面, 所以需要先建立控制器src/Blogger/BlogBundle/Controller/PageController.php
// src/Blogger/BlogBundle/Controller/PageController.phpnamespace Blogger\BlogBundle\Controller;use Symfony\Bundle\FrameworkBundle\Controller\Controller;class PageController extends Controller{public function indexAction(){return $this->render('BloggerBlogBundle:Page:index.html.twig');}}
然後建立相應的Twig檔案: src/Blogger/BlogBundle/Resources/views/Page/index.html.twig
複製代碼 代碼如下:
{# src/Blogger/BlogBundle/Resources/views/Page/index.html.twig #}
{% extends 'BloggerBlogBundle::layout.html.twig' %}
{% block body %}
Blog homepage
{% endblock %}
建立路由將首頁引導到我們剛建立的頁面:src/Blogger/BlogBundle/Resources/config/routing.yml
複製代碼 代碼如下:
# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
pattern: /
defaults: { _controller: BloggerBlogBundle:Page:index }
requirements:
_method: GET
再次訪問 http://symfony/app_dev.php可以看見簡單的首頁。
四、再建立一個about頁面
路由:在src/Blogger/BlogBundle/Resources/config/routing.yml中加入
複製代碼 代碼如下:
# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_about:
pattern: /about
defaults: { _controller: BloggerBlogBundle:Page:about }
requirements:
_method: GET
當以get方式訪問about頁時執行位於BloggerBlogBundle命名空間的page控制器about動作。
控制器: 在src/Blogger/BlogBundle/Controller/PageController.php 於page控制器中加入about動作
複製代碼 代碼如下:
// src/Blogger/BlogBundle/Controller/PageController.php
// ..
public function aboutAction()
{
return $this->render('BloggerBlogBundle:Page:about.html.twig');
}
// ..
模板: 建立src/Blogger/BlogBundle/Resources/views/Page/about.html.twig 並加入相關分頁檔
複製代碼 代碼如下:
{# src/Blogger/BlogBundle/Resources/views/Page/about.html.twig #}
{% extends 'BloggerBlogBundle::layout.html.twig' %}
{% block body %}
about page
{% endblock %}
簡單的三個流程增加了關於頁面:http://symfony/app_dev.php/about
希望本文所述對大家基於Symfony架構的PHP程式設計有所協助。