Zend Layoutによるレイアウト

intro

Zend_Layoutを利用してレイアウトを作成します。ソースコードはこちらからダウンロードできます。

1.bootstrap.phpの作成

以下のようにapplication/bootstrap.phpファイルを作成します。

<?php
set_include_path('../library' . PATH_SEPARATOR . get_include_path());

require_once 'Zend/Controller/Front.php';
require_once 'Zend/Layout.php';

$layout = Zend_Layout::startMvc();
//$layout->getView()->baseUrl = '/yourBaseUrl';
Zend_Controller_Front::run('../application/controllers');

1

2

3

4

5

6

7

8

9

<?php

set_include_path('../library' . PATH_SEPARATOR . get_include_path());

require_once 'Zend/Controller/Front.php';

require_once 'Zend/Layout.php';

$layout = Zend_Layout::startMvc();

//$layout->getView()->baseUrl = '/yourBaseUrl';

Zend_Controller_Front::run('../application/controllers');

2.レイアウトの作成

以下のようにapplication/views/scripts/layout.phtmlを作成します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple Layout Site</title>
    <link href="<?= $this->baseUrl?>/css/style.css" rel="stylesheet"
 type="text/css" />
</head>
<body>
    <div id="header"><?= $this->render('layouts/header.phtml') ?></div>

    <div id="nav"><?= $this->render('layouts/nav.phtml') ?></div>

    <div id="content"><?= $this->layout()->content ?></div>

    <div id="footer"><?= $this->render('layouts/footer.phtml') ?></div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Simple Layout Site</title>

type="text/css" />

</head>

<body>

<div id="header"><?= $this->render('layouts/header.phtml') ?></div>

<div id="nav"><?= $this->render('layouts/nav.phtml') ?></div>

<div id="content"><?= $this->layout()->content ?></div>

<div id="footer"><?= $this->render('layouts/footer.phtml') ?></div>

</body>

</html>

以下のようにapplication/views/scripts/layout/header.phtmlを作成します。

<p>Simple Layout Site</p>

1	<p>Simple Layout Site</p>

以下のようにapplication/views/scripts/layout/nav.phtmlを作成します。

<dl>
  <dt>Pages</dt>
  <dd>
    <ul>
      <li><a href="page1.html">Page 1</a></li>
      <li><a href="page2.html">Page 2</a></li>
    </ul>
  </dd>
</dl>

1

2

3

4

5

6

7

8

9

<dl>

<dt>Pages</dt>

<dd>

<ul>

</ul>

</dd>

</dl>

以下のようにapplication/views/scripts/layout/footer.phtmlを作成します。

<address>Copyright &copy; Simple Layout Site All Rights Reserved.</address>

1	<address>Copyright © Simple Layout Site All Rights Reserved.</address>

以下のようにpublic/css/style.cssを作成します。

#header
{
    width: 100%;
    border-bottom: 1px solid #cccccc;
}

#nav
{
    width: 33%;
    float: right;
}

#content
{
    width: 66%;
    float: left;
}

#footer
{
    width: 100%;
    float: none;
    clear: both;
    text-align: center;
    font-size: 10pt;
    border-top: 1px solid #cccccc;
}

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

#header

{

width: 100%;

border-bottom: 1px solid #cccccc;

}

#nav

{

width: 33%;

float: right;

}

#content

{

width: 66%;

float: left;

}

#footer

{

width: 100%;

float: none;

clear: both;

text-align: center;

font-size: 10pt;

border-top: 1px solid #cccccc;

}

3.コントローラとビューの作成

以下のようにapplication/controllers/IndexController.phpを作成します。

<?php
require_once 'Zend/Controller/Action.php';
class IndexController extends Zend_Controller_Action
{
    public function indexAction()
    {
    }
}

1

2

3

4

5

6

7

8

<?php

require_once 'Zend/Controller/Action.php';

class IndexController extends Zend_Controller_Action

{

public function indexAction()

{

}

以下のようにapplication/views/scripts/index/index.phtmlを作成します。

<p>This is content</p>

1	<p>This is content</p>

3.確認

Webサーバにアクセスし、出力がレイアウトされていることを確認してください。
以下は画面例です。

Zend_Layoutによるレイアウト

コメントを残す