本文實例講述了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.php class 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.php namespace 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.php namespace 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程序設計有所幫助。