Costruire un’applicazione reale con Zend Framework ( parte 3 )

Di admin in Php, Zend Framework Controls: +-close

Layout

Utilizzando le conoscenze acquisite, implementeremo ora un layout leggermente più complesso in modo da prendere realmente domestichezza con la Two Step View per poter quindi passare al vero passo successivo, ovvero la realizzazione del primo modello.

Aprimo il nostro IndexController, modificando il contenuto esistente con questo nuovo contenuto:

  class IndexController extends Zend_Controller_Action {
    public function init(){
      $response = $this->getResponse();
      $response->insert('header', $this->view->render('header.phtml'));
      $response->insert('menu', $this->view->render('menu.phtml'));
      $response->insert('columnLeft', $this->view->render('columnLeft.phtml'));
      $response->insert('columnRight', $this->view->render('columnRight.phtml'));
      $response->insert('footer', $this->view->render('footer.phtml'));
    }

    public function indexAction(){
      $this->view->pageTitle = 'Paesidelmondo Application Example';
      $this->view->bodyTitle = 'Paesidelmondo';
      $this->view->bodyContent = '

One morning, when Gregor Samsa woke [...]

';
    }
  }

Per evitare spreco di spazio ho omesso il contenuto di $this->view->bodyContent, che potete sostituire con ciò che vi pare. Abbiamo modificato il metodo init() inserendo all’interno del $response il contenuto dei file header.phtml, menu.phtml, columnLeft.phtml, columnRight.phtml e footer.phtml, file che creeremo all’interno di views\scripts e che conterranno:

header.phtml

Paesidelmondo Header

menu.phtml


Pagina 17
Pagina 18
Pagina 19
Pagina 20

columnLeft.phtml

Menù Sx

Pagina 1
Pagina 2
Pagina 3
Pagina 4
Pagina 5
Pagina 6
Pagina 7
Pagina 8

columnRight.phtml

Menù Dx

Pagina 9
Pagina 10
Pagina 11
Pagina 12
Pagina 13
Pagina 14
Pagina 15
Pagina 16

footer.phtml

Powered By Razorblade

layout.phtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title><?php echo $this->escape($this->pageTitle); ?></title>
    <link rel="stylesheet" href="<?php echo $this->baseUrl(); ?>/css/main.css" type="text/css">
  </head>
  <body>
    <!-- start container -->
    <div id="container">

      <!-- start subContainer -->
      <div id="subContainer">

        <!-- start header -->
        <div id="header"><?php echo $this->layout()->header;?></div>
        <!-- end header -->

        <!-- start menu -->
        <div id="menu"><?php echo $this->layout()->menu;?></div>
        <!-- end menu -->

        <!-- start columnLeft -->
        <div id="columnLeft"><?php echo $this->layout()->columnLeft;?></div>
        <!-- end columnLeft -->

        <!-- start content -->
        <div id="content"><?php echo $this->layout()->content ?></div>
        <!-- end content -->

        <!-- start columnRight -->
        <div id="columnRight"><?php echo $this->layout()->columnRight;?></div>
        <!-- end columnRight -->

        <!-- start footer -->
        <div id="footer"><?php echo $this->layout()->footer;?></div>
        <!-- end footer -->

      </div>
      <!-- end subContainer -->

    </div>
    <!-- end container -->
  </body>
</html>

L’index.phtml può restare invariato, per completezza comunque questo è il codice che lo compone:

index.phtml

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

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

Per finire posto il codice css:

main.css

	/**************************************************************************
	* Layout CSS
	* Scritto da Sergio Rinaudo
	* Validato W3C
	**/

	/**************************************************************************
	* Stili Generici
	**/

	* {
		margin:0;
		padding:0;
		border:0;
		border-style:solid;
	}  

	body {
		height: 100%;
		color: #85859c;
		font-family: tahoma, arial, sans-serif;
		font-size: 10px;
		text-align: center;
	}  

	h1 {
		margin:0px;
		padding:0px;
	}

	h2{
		margin:0px;
		padding:0px;
	}

	h3 {
		margin:0px;
		padding:0px;
	}

	h4 {
		margin:0px;
		padding:0px;
	}

	h5 {
		margin:0px;
		padding:0px;
	}

	h6 {
		padding:0px;
		margin:0px;
	}

	ul {
		list-style-type:none;
		margin:0px;
		padding:0px;
	}

	li {
		margin:0px;
		padding:0px;
		list-style-type:none;
	}

	div {
		margin:0px;
		padding:0px;
	}

	p {
		margin:0px;
		padding:0px;
	}

	a {
		text-decoration:none;
		color:#0e7bb7;
	}

	a:hover {
		margin:0px ;
		padding:0px;
		color:#5488cc;
		text-decoration:none;
	}

	a:visited {
		margin:0px ;
		padding:0px;
		color:#5488cc;
		text-decoration:none;
	}

	br {
		margin:0px;
		padding:0px;
	}

	img {
		margin:0px;
		padding:0px;
	}

	b {
		margin:0px;
		padding:0px;
	}

	i {
		margin:0px;
		padding:0px;
	}

	u {
		margin:0px;
		padding:0px;
	}

	table {
		margin:0px;
		padding:0px;
	}

	tr {
		margin:0px;
		padding:0px;
	}

	td {
		margin:0px;
		padding:0px;
	}

	form {
		margin:0px;
		padding:0px;
	}

	input {
		margin:0px;
		padding:0px;
	}

	fieldset {
		margin:0px;
		padding:0px;
	}

	legend {
		margin:0px;
		padding:0px;
	}

	label {
		margin:0px;
		padding:0px;
	}

	textarea {
		margin:0px;
		padding:0px;
	}

	span {
		display: none;
	}

	/**************************************************************************
	* Stili Sito
	**/

	#container {
		margin: 0px auto;
		width: 100%;
		border-color: #9e9ec3;
		border-width: 0px 0px 0px;
		border-style: solid;
	}

	#subContainer {
		margin: 0px auto;
		width: 100%;
		border: 0px solid #9e9ec3;
	}

	#container #subContainer #header {
		height: 80px;
		overflow: hidden;
		width: 100%;
		border: 0px solid #000000;
	}

	#container #subContainer #menu {
		margin-bottom: 1px;
		width: 100%;
		height: 21px;
		border-top: 1px solid #9e9ec3;
		border-bottom: 1px solid #9e9ec3;

	}

	#container #subContainer #menu ul {
		list-style-type: none;
		float: left;
		width: auto;
		border: 0px solid #000000;
		overflow: hidden;
		width: 100%;
	}

	#container #subContainer #menu li {
		width: 25%;
		height: 19px;
		float: left;
		overflow: hidden;
		text-align: center;
		font-size: 11px;
		font-weight: bold;
		padding-top: 3px;
	}

	#container #subContainer #menu li a {
		padding-top: 3px;
		width: 129px;
		height: 19px;
	}

	#container #subContainer #columnLeft {
		float:left;
		width: 20%;
		margin: 0px;
		border: 0px solid #48c000;
		text-align: center;
	}

	#container #subContainer #columnLeft ul {
		font-weight:bold;
		width: 100%;
		border-right: 1px solid #9e9ec3;
	}

	#container #subContainer #columnLeft ul li {
		padding: 2px 0px 2px 0px;
		width: 100%;
		border-bottom: 1px solid #9e9ec3;
		margin: 0px auto;
	}

	#container #subContainer #columnLeft ul li a {
		width: 100%;
		padding: 2px;
		color: #9e9ec3;
	}

	#container #subContainer #content {
		width: 60%;
		height: auto;
		margin: 0px;
		border: 0px solid #ff0000;
		float:left;
		text-align:center;
	}

	#container #subContainer #content p {
		padding: 10px ;
	}

	#container #subContainer #columnRight {
		float: right;
		width: 20%;
		margin: 0px;
		border: 0px solid black;
	}

	#container #subContainer #columnRight ul {
		font-weight:bold;
		width: 100%;
		border-left: 1px solid #9e9ec3;
	}

	#container #subContainer #columnRight ul li {
		padding: 2px 0px 2px 0px;
		width: 100%;
		border-bottom: 1px solid #9e9ec3;
		margin: 0px auto;
	}

	#container #subContainer #columnRight ul li a {
		width: 100%;
		padding: 2px;
		color: #9e9ec3;
	}

	#container #subContainer #footer {
		border: 0px solid black;
		clear: both;
		width: 100%;
		height: 90px;
	}

	#container #subContainer #footer p {
		width: 100%;
		border: 0px solid black;
		padding: 2px;
	}

Un’ultima nota prima di chiudere: non possiamo utilizzare $this->nomeVariabile all’interno dei file inclusi in init.

(1 votes, average: 5.00 out of 5)

Loading ...

Share and Enjoy:

Zend Framework: gestione dei moduli ed esempio modulo di amministrazione Come usare Zend_Layout per la gestione dei moduli In quest'articolo...
Un bootstrap object oriented per Zend Framework ( applicazione reale Zend Framework p.12 ) Trasformiamo il nostro bootstrap in una classe php Il codice...
Zend Framework: Zend_Form con ReCaptcha Utilizzare il webservice ReCaptcha per validare i form ReCaptcha è...
Neobazaar annunci gratuiti: esempio di una applicazione sviluppata con Zend Framework Nasce Neobazaar.com, annunci gratuiti in Italia: interamente sviluppato con Zend...
Zend Framework: introduzione al componente Zend_Form Creare form web con Zend Form Con Zend Framework possiamo...

Related posts brought to you by Yet Another Related Posts Plugin.

Comments (3)

Tags: applicazioni con zend framework, two step view, zend, zend framework, ZF

3 Responses to “Costruire un’applicazione reale con Zend Framework ( parte 3 )”

on 02 Feb 2009 at 5:30 am1Zend Framework: gestione dei moduli ed esempio modulo di amministrazione | Hello World!

[...] Implementazione di un layout complesso per la gestione dei layouts [...]
on 27 May 2009 at 10:11 am2amedeo

Ottimi esempi chiari e precisi. Il tutorial migliore, meglio strutturato e meglio organizzato che ho trovato fino ad ora !
on 27 May 2009 at 11:48 am3Sergio Rinaudo

Ciao Amedeo,
ti ringrazio per il complimento, ti consiglio di leggere anche questo http://razorblade.netsons.org/2009/05/06/creare-un-progetto-zend-framework-180-con-zend_tool-e-wamp-server/ se non lo hai ancora fatto, la versione 1.8 di zend ha portato diverse novità.

L’articolo di questa pagina tuttavia è ancora valido, cambia solo la posizione del layout che nella nuova versione sta in una directory all’esterno di view/script

Trackback URI | Comments RSS

Hello World:

Recent Posts