本文主要介紹了Symfony2框架建立專案與範本設定的方法,結合實例形式詳細分析了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。
唯一要注意的是: 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或 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. 简洁:想想看要打bb9bd6d87db7f8730c53cb084e6b4d2d, Twig输入的内容要少很多。
3. 可继承: 非常cool的一个功能
4. 安全: 转义功能默认开启, 甚至还可以为重要代码提供沙盒功能。
5. 可扩展: 需要额外的定制功能, 可以随时扩展
可继承是一个非常好的优点, 我们将使用三级继承结构来定制这个模板, 这将允许我们在三个不同层级修改模板, 方便自由定制。
主模板–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"> <p> {% 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 %} </p> <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> <p id="footer"> {% block footer %} <a href="http://blog.dengruo.com/201309/1409">Symfony2 博客教程</a> {% endblock %} </p> </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,p,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在範本與行為中取得request參數的方法
#以上是詳解Symfony2框架創建專案與設定模板的詳細內容。更多資訊請關注PHP中文網其他相關文章!