Zend Framework 1.12.3, part 3 – adding layout to project

In last post You build application with your controller animals and action
describe.
In this part we rebuild our application, add layout and style, image.
Let’s begin.
Right click on MyDog project and choose Zend->Run command.
c01In Run Zend Command window write enable layout in Filter field.
Click Run button.
c02In project structure You see new node: layout contained script folder with
layout.phtml file.
c03If You double click this file in tree structure, you see this content:
<?php echo $this->layout()->content; ?>
You change this content it, copy content from describe.phtml file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My dog</title>
</head>
<body>
<h1>My dog</h1>
</body>
</html>

but in body tags paste:
<?php echo $this->layout()->content; ?>
and delete line:
<h1>My dog</h1>
c04Line:
<h1>My dog</h1>
You paste into describe.phtml file.
c05And then we may add same things to our website. You have title “My dog“.
Lets add its photo.
So insert img tag:
<img src="images/dog.jpg" />
and save this file.
In public node create images folder, right click on public folder and
choose New->Folder.
c06In Folder Name field write images and click on Finish button.
c07In tree project You see new folder.
c08And now You drag and drop with mouse photo into images folder in Netbeans
IDE.
You see file dog.jpg into images folder.
c09In Zend You may use baseUrl function. In this way transfer application to
another folder it will be running true. So we must modify our img tag.
<?php echo $this->baseUrl('images/dog.jpg'); ?>
c10Run applicaton.
c11In the same way You may set css style.
Create css folder in public node and in it mycss.css file.
This file create right clicking on public/css node and choosing New-
>Cascading Style Sheet.
c12In New CSS window You write mycss in File Name field and click Finish
button.
c13You see empty css file.
c14Write this line into it:
body
      {
         background-color:#e5f6cd;
         color:#3d4d25;
         text-align:center;
     }
img
       {
        align:center;
       }

c15And this new structure of application:
c16In layout.phtml add new line after meta tag:
<link rel='stylesheet' type='text/css' href='css/mycss.css' />
c17Lets see result running application.
c18

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.