首頁 > ZEND framework, 網頁設計 > ZF in ∞ days –> day 6 –> Zend Framework 專輯管理程式

ZF in ∞ days –> day 6 –> Zend Framework 專輯管理程式

2010年6月2日  瀏覽次數 : 2,085
閱讀評論 發表評論

前幾篇我們介紹過了 Zend Framework 使用 MVC 的架構，也講解過 Layout 以及 Form 這些 API ，不過都是零零散散的資料，這次我們一口氣將我們所用過的東西串起來，讓她變成一個簡單易用的小程式，不過因為只是測試功能的小程式，所以就沒有做美術編輯嚕。

image

今天我們作的範例是參考 Tutorial: Getting Started with Zend Framework 1.10

並將相關資料套用中文資料後呈現，如有興趣可以參閱對照英文說明。

STEP 1 :

準備 DB ，將 SQL CODE 導入 SQL DB

?View Code SQL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

-- phpMyAdmin SQL Dump
-- version 3.3.3
-- http://www.phpmyadmin.net
--
-- 主機: localhost
-- 建立日期: Jun 02, 2010, 12:54 PM
-- 伺服器版本: 5.1.47
-- PHP 版本: 5.3.2
 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
 
--
-- 資料庫: 'day6'
--
CREATE DATABASE 'day6' DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
USE 'day6';
 
-- --------------------------------------------------------
 
--
-- 資料表格式： 'albums'
--
 
CREATE TABLE IF NOT EXISTS 'albums' (
  'id' int(11) NOT NULL AUTO_INCREMENT,
  'artist' varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  'title' varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ;
 
--
-- 列出以下資料庫的數據： 'albums'
--
 
INSERT INTO 'albums' ('id', 'artist', 'title') VALUES
(1, '周杰倫', '說了再見'),
(2, '郭靜', 'Encore LaLa'),
(3, '劉若英', '我們沒有在一起'),
(4, '戴愛玲 ', '跳痛'),
(5, '嚴爵', '我喜歡(不,我愛)');

image

STEP 2 :

開啟 ZF 專案 day6

並且新增 MODEL ( ZF TABLE ) Albums.php

並且增加四個方法，取回單張專輯資料，新增專輯資料，修改專輯資料，刪除專輯資料

( 增刪改查)

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<?php
 
/**
 * Albums
 * 
 * @author finpo
 * @version 
 */
 
require_once 'Zend/Db/Table/Abstract.php';
 
class Albums extends Zend_Db_Table_Abstract {
	/**
	 * The default table name 
	 */
	protected $_name = 'albums';
 
	public function init(){
 
 
	}
 
	//傳入專輯ID，並且取回專輯內容
	public function getAlbum($id) {
		$id = ( int ) $id;
		$row = $this->fetchRow ( 'id = ' . $id );
		if (! $row) {
			throw new Exception ( "找不到專輯資料 $id" );
		}
		return $row->toArray ();
	}
	//新增專輯資料
	public function addAlbum($artist, $title) {
		//將傳入歌手與專輯放入資料陣列中
		$data = array ('artist' => $artist, 'title' => $title );
		//自動新增至 DB
		$this->insert ( $data );
	}
	//更新專輯資料
	public function updateAlbum($id, $artist, $title) {
		//準備更改資料內容
		$data = array ('artist' => $artist, 'title' => $title );
		//找出資料列並更新
		$this->update ( $data, 'id = ' . ( int ) $id );
	}
	//刪除專輯
	public function deleteAlbum($id) {
		$this->delete('id=' . (int) $id);
	}
}
?>

image

STEP 3 :

設定 application/configs/application.ini

並增加資料庫設定與 layout 設定

?View Code TEXT
1
2
3
4
5
6
7
8
9
10
11

resources.db.adapter = PDO_MYSQL 
resources.db.params.host = localhost 
resources.db.params.username = root 
resources.db.params.password = 1234 
resources.db.params.dbname = day6
resources.db.params.charset = utf8
 
resources.layout.layoutPath = APPLICATION_PATH "/views/layouts/"
resources.layout.layout = "layout"
 
resources.view.doctype = "XHTML1_STRICT"

image

STEP 4 :

在 views 底下再增加 layouts 目錄，並且增加 layout.phtml 頁面 ( 請參考 day4 )

並且增加樣版的內容

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
$this->headTitle()->setSeparator(' - ');
$this->headTitle('Zend Framework Tutorial');
echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'); ?>
</head>
<body>
 
<div id="content">
<h1><?php echo $this->escape($this->title); ?></h1>
<?php echo $this->layout()->content; ?>
</div>
</body>
</html>

image

STEP 5 :

在 public 資料夾建立 CSS 資料夾並新增一個 site.css 檔案，並貼上檔案

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

body,html {
	margin: 0 5px;
	font-family: Verdana, sans-serif;
}
 
h1 {
	font-size: 1.4em;
	color: #008000;
}
 
a {
	color: #008000;
}
 
/* Table */
th {
	text-align: left;
}
 
td,th {
	padding-right: 5px;
}

image

STEP 6 :

修改 views/scripts/index/index.phtml 檔案，放入以下資料

<p><a href="<?php echo $this->url(array(’controller’=>’index’,
‘action’=>’add’));?>">Add new album</a></p>
<?php echo $this->escape($this->title) ;?>
<table>
<tr>
<th>專輯名稱</th>
<th>歌手</th>
<th>&nbsp;</th>
</tr>
<?php foreach($this->albums as $album) : ?>
<tr>
<td><?php echo $this->escape($album->title);?></td>
<td><?php echo $this->escape($album->artist);?></td>
<td>
<a href="<?php echo $this->url(array(’controller’=>’index’,
‘action’=>’edit’, ‘id’=>$album->id));?>">Edit</a>
<a href="<?php echo $this->url(array(’controller’=>’index’,
‘action’=>’delete’, ‘id’=>$album->id));?>">Delete</a>
</td>
</tr>
<?php endforeach; ?>

STEP 7 :

打開 controllers/IndexController.php 檔案並且修改 indexAction() 資料

並且在 init() 中加入 LOAD MODEL 的動作

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13

public function init() {
		/* Initialize action controller here */
		//因為這個 CLASS 每一個 ACTION 都會讀取 Albums TB，因此寫在 INIT 預設就引入 MODEL
		Zend_Loader::loadClass ( "Albums", "../application/models/" );
	}
 
	public function indexAction() {
		// action body
		$this->view->title = "我的 CD 櫃";
		$this->view->headTitle ( $this->view->title );
		$albums = new Albums ();
		$this->view->albums = $albums->fetchAll ();
	}

image

STEP 8 :

接下來我們打開 http://localhost/day6/public/index.php

就可以看到我們從資料庫中展現的資料

image

STEP 9 :

接下來我們要建立新增專輯的 FORM 在 application/forms/AlbumsForm.php

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
 
require_once ('Zend\Form.php');
 
class AlbumForm extends Zend_Form {
	public function init() {
		//form 初始值時加入四個欄位，詳細資料請參考 day5
		$this->setName ( 'album' );
		$id = new Zend_Form_Element_Hidden ( 'id' );
		$id->addFilter ( 'Int' );
		$artist = new Zend_Form_Element_Text ( 'artist' );
		$artist->setLabel ( '歌手' )->setRequired ( true )->addFilter ( 'StripTags' )->addFilter ( 'StringTrim' )->addValidator ( 'NotEmpty' );
		$title = new Zend_Form_Element_Text ( 'title' );
		$title->setLabel ( '專輯' )->setRequired ( true )->addFilter ( 'StripTags' )->addFilter ( 'StringTrim' )->addValidator ( 'NotEmpty' );
		$submit = new Zend_Form_Element_Submit ( 'submit' );
		$submit->setAttrib ( 'id', 'submitbutton' );
		$this->addElements ( array ($id, $artist, $title, $submit ) );
	}
}
 
?>

image

STEP 10 :

接著再打開 IndexController.php 增加 addAction()

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//新增專輯
	function addAction() {
		Zend_Loader::loadClass ( "AlbumForm", "../application/forms/" );
		$this->view->title = "新增一張新專輯";
		$this->view->headTitle ( $this->view->title );
		$form = new AlbumForm ();
		$form->submit->setLabel ( '新增' );
		$this->view->form = $form;
		if ($this->getRequest ()->isPost ()) {
			$formData = $this->getRequest ()->getPost ();
			if ($form->isValid ( $formData )) {
				$artist = $form->getValue ( 'artist' );
				$title = $form->getValue ( 'title' );
				$albums = new Albums ();
				$albums->addAlbum ( $artist, $title );
				$this->_helper->redirector ( 'index' );
			} else {
				$form->populate ( $formData );
			}
		}
	}

image

STEP 11 :

再將 addAction 的 VIEW 產生出來 add.phtml

?View Code PHP
1

<?php echo $this->form ;?>

image

STEP 12 :

接著我們就可以打開瀏覽器輸入 http://localhost/day6/public/index.php/index/add

image

並且我們輸入我們想要新增的資料

image

按下新增按鈕

image

就會看到我們的資料已經被成功輸入

STEP 13 :

接著新增 EDIT 的 editAction 與 VIEW 的 edit.phtml

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//修改專輯
	function editAction() {
		Zend_Loader::loadClass ( "AlbumForm", "../application/forms/" );
		$this->view->title = "修改我的專輯";
		$this->view->headTitle ( $this->view->title );
		$form = new AlbumForm ();
		$form->submit->setLabel ( '儲存' );
		$this->view->form = $form;
		if ($this->getRequest ()->isPost ()) {
			$formData = $this->getRequest ()->getPost ();
			if ($form->isValid ( $formData )) {
				$id = ( int ) $form->getValue ( 'id' );
				$artist = $form->getValue ( 'artist' );
				$title = $form->getValue ( 'title' );
				$albums = new Albums ();
				$albums->updateAlbum ( $id, $artist, $title );
				$this->_helper->redirector ( 'index' );
			} else {
				$form->populate ( $formData );
			}
		} else {
			$id = $this->_getParam ( 'id', 0 );
			if ($id > 0) {
				$albums = new Albums ();
				$form->populate ( $albums->getAlbum ( $id ) );
			}
		}
	}

?View Code PHP
1

<?php echo $this->form ;?>

image

image

STEP 14 :

接著在從我們的首頁的專輯中按下 EDIT 連結

image

就可以看到資料被帶出在欄位上

image

當我們改好資料後按下 儲存

image

一切就如我們所想的更新到資料庫中

STEP 15 :

最後我們把 DEL 的 action 與 view 也加上去

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	//刪除專輯
	public function deleteAction() {
		$this->view->title = &quot;刪除專輯&quot;;
		$this->view->headTitle ( $this->view->title );
		if ($this->getRequest ()->isPost ()) {
			$del = $this->getRequest ()->getPost ( 'del' );
			if ($del == 'Yes') {
				$id = $this->getRequest ()->getPost ( 'id' );
				$albums = new Albums ();
				$albums->deleteAlbum ( $id );
			}
			$this->_helper->redirector ( 'index' );
		} else {
			$id = $this->_getParam ( 'id', 0 );
			$albums = new Albums ();
			$this->view->album = $albums->getAlbum ( $id );
		}
	}

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11

<p>你確定要刪除這張專輯嗎? 你選的專輯是 
'<?php echo $this->escape($this->album['title']); ?>' by
'<?php echo $this->escape($this->album['artist']); ?>'?
</p>
<form method="post" action="&lt;?php echo $this-&gt;url(array('action'=&gt;'delete')); ?&gt;">
<div>
<input value="<?php echo $this->album[&#39;id&#39;]; ?>" type="hidden" name="id" />
<input value="Yes" type="submit" name="del" />
<input value="No" type="submit" name="del" />
</div>
</form>

image

image

STEP 16 :

接著在從我們的首頁的專輯中按下 DELETE 連結

image

按下後出現詢問是否刪除的按鈕

image

選擇 是 ，執行完成後回到主選單，並且已經沒有我們所選擇的專輯

image

 

OK ， 今天很高興可以用 16 個步驟就完成了增刪改查，並且完成了輸入欄位的驗證，以及表單資料回填的動作，FORM 雖然很好用，但是請切記並不是所有的網站都適合直接拿 FORM 來用。

再次感謝您的收看

關於這個案子，如果你想要下載原始碼，請按此連結下載原始碼 *不包含 Zend framework

Random Posts

Loading…

:: 把這篇好文推到書籤網站與更多人分享吧 ::
  • funp
  • Hemidemi
  • YahooKimo
  • Google
  • udn
  • Haohao
  • Live

相關文章 :

Ausir ZEND framework, 網頁設計 , , , , , ,

  1. 米米
    2010年6月3日16:04 | #1
    回覆 | 引用

    格主您好，
    先謝謝你寫了這麼詳細的教學
    不過我有點問題想請教
    就是在照您的程式碼貼上以後，在首頁的連結卻不是很正常
    不知道要解決這個問題應該要到哪裡去處理比較好?

    ?View Code TEXT
    1
2
3
4
5
6
7
8

    Add new album
http://localhost/zend/day6/public/index.php/index/index/%A1%A6controller%A1%A6/%A1%A6index%A1%A6/%A1%A5action%A1%A6/%A1%A6add%A1%A6/%A1%A5id%A1%A6/6
 
Edit
http://localhost/zend/day6/public/index.php/index/index/%A1%A6controller%A1%A6/%A1%A6index%A1%A6/%A1%A5action%A1%A6/%A1%A6edit%A1%A6/%A1%A5id%A1%A6/1
 
Delete
http://localhost/zend/day6/public/index.php/index/index/%A1%A6controller%A1%A6/%A1%A6index%A1%A6/%A1%A5action%A1%A6/%A1%A6delete%A1%A6/%A1%A5id%A1%A6/1

    另外就是在讀Class的時候
    form資料匣裡的AlbumsForm.php似乎要改成AlbumForm.php才能正常執行
    不知道其他網友是不是也遇到了相同的問題?
    再麻煩格主解答了，謝謝

  2. Ausir
    2010年6月3日16:11 | #2
    回覆 | 引用

    @米米

    親愛的米米～～
    很抱歉關於這篇的 code 我很汗顏

    因為呢 codebox 這隻外掛在處理的時候還是有一些特殊符號跑步出來
    而且圖片有拍到錯誤的

    所以呢 如果你要看正確的程式碼
    我希望你可以下載文章最下面的原始檔

    裡面的 code 才會是正確的

    另外 AlbumsForm -> AlbumForm 是正確的沒錯
    圖片拍攝的時候剛好是我打錯字的時候 真是不好意思 呵呵

  3. Ausir
    2010年6月3日16:12 | #3
    回覆 | 引用

    補充一下

    尤其是 view 的部份

    只要接在 href 後面的都被弄壞了 ＝ ＝

  4. Ausir
    2010年6月3日16:16 | #4
    回覆 | 引用

    @米米

    米米如果你測試成功
    請麻煩通報一下
    這樣我才知道這樣的解說是否足夠完成這個範例

  5. 米米
    2010年6月3日16:55 | #5
    回覆 | 引用

    @Ausir
    感謝感謝!感謝格主詳細的回覆
    後來發現是在view的index.phtml檔的’符號被改成全形了,所以才會出現錯誤
    修正成半形以後就都可以正常執行

    zendframework我還在參透的陣痛期
    希望能早日運用自如，也希望格主能繼續分享豐富的教學
    謝謝您

  6. Ausir
    2010年6月3日17:01 | #6
    回覆 | 引用

    @米米

    感謝你的測試

    相信你是第一個測試的 ^_^
    也可以幫其他正在學習的朋友一些測試

    慢慢的會在把一些 Auth Acl 的東西用上
    因為其實 form 在 CI 就有了～ layout 其實也可以解決
    但是 auth 跟 acl 就是 zend 才能玩嚕～～

  1. 本篇文章目前尚無任何 trackbacks 和 pingbacks。