пятница, 21 марта 2008 г.

Страница общего доступа

После добавления нового модуля, который мы назвали public


$ symfony init-module frontend public


мы заменили стандартную страницу приветствия


// apps/.../actions/actions.class.php

public function executeIndex()

{

$c = new Criteria();

$c->addDescendingOrderByColumn(PhotoPeer::CREATED_AT);

$this->photos = PhotoPeer::doSelect($c);

}


Оформление нового шаблона :


// apps/.../modules/public/templates/indexSuccess.php

<div id="main">

<h1>Mои фотографии</h1>

<?php foreach($photos as $photo): ?>

<div class="photo">

<?php echo link_to(

image_tag('/uploads/thumbnail/'.$photo->getFilePath()),

'public/photo?id='.$photo->getId(),

'class=image title='.$photo->getDescription()

) ?>

"<?php echo $photo->getDescription() ?>"

on <?php echo $photo->getCreatedAt('d/m') ?>,

tagged <?php echo $photo->getTagsString() ?>

</div>

<?php endforeach; ?>

<div id="footer">

сделано на <?php echo link_to('symfony', 'http://www.symfony-project.com') ?>

</div>

</div>


Подгрузили стили:


// apps/..../actions/actions.class.php

public function preExecute()

{

$this->getResponse()->addStylesheet('frontend');

}


Пример стилей


body

{

font-family: "Trebuchet MS", arial, sans-serif;

background: #edd;

}

#main

{

margin: auto;

width: 680px;

padding:20px;

background: white;

}

#main h1

{

margin-bottom: 20px;

border-bottom: solid 1px lightgrey;

}

#footer

{

clear: left;

text-align:right;

}

.photo

{

width: 160px;

padding-right: 10px;

padding-bottom: 10px;

float:left;

}

a.image:hover img

{

border: solid 4px grey;

}


a.image img

{

border: solid 4px lightgrey;

}


label

{

display: block;

margin-top: 5px;



}


.comment

{

background: #eee;

border: solid 1px #ddd;

margin: 10px;

padding: 5px;

}

.comment .details

{

font-weight: bold;

}


При вызове конкретной фотографии, выполняется действие:


// apps/.../actions/actions.class.php

public function executePhoto()

{

$photo = PhotoPeer::retrieveByPk($this->getRequestParameter('id'));

$this->forward404unless($photo);

$this->photo = $photo;

}


Результат отображается с помощью шаблона:


// apps/..../modules/public/templates/photoSuccess.php

<div id="main">

<?php echo link_to('back to the photo list', 'public/index',

'style=display:block;float:right;') ?>

<h1>Picture details</h1>

<a href="/uploads/<?php echo $photo->getFilePath() ?>" title="click for the full-size version">

<?php echo image_tag('/uploads/'.$photo->getFilePath(), 'width=100%') ?>

</a><br/>

<p>

"<?php echo $photo->getDescription() ?>"

published on <?php echo $photo->getCreatedAt('d/m') ?>,

tagged <?php echo $photo->getTagsString() ?>

</p>

<div id="footer">

powered by <?php echo link_to('symfony', 'http://www.symfony-project.com') ?>

</div>

</div>


Оптимизируем приложение


У двух шаблонов общий код:


// apps/..../modules/public/templates/_photo_description.php

"<?php echo $photo->getDescription() ?>"

published on <?php echo $photo->getCreatedAt('d/m') ?>,

tagged

<?php foreach($photo->getTags() as $tag): ?>

<?php $tag=$tag->getName(); echo link_to($tag, 'public/tag?tag='.$tag) ?>

<?php endforeach; ?>


Редактируем шаблоны indexSuccess.php и photoSuccess.php:


// in apps/frontend/modules/public/templates/photoSuccess.php

<div id="main">

<?php echo link_to('back to the photo list', 'public/index',

'style=display:block;float:right;') ?>

<h1>Picture details</h1>

<a href="/uploads/<?php echo $photo->getFilePath() ?>" title="click for the full-size version">

<?php echo image_tag('/uploads/'.$photo->getFilePath(), 'width=100%') ?>

</a><br/>

<p>

<?php echo include_partial('photo_description', array(

'photo' => $photo

)) ?>

</p>

<div id="footer">

powered by <?php echo link_to('symfony', 'http://www.symfony-project.com') ?>

</div>

</div>


Редактируем главный шаблон:


// in apps/frontend/templates/layout.php

<!DOCTYPE html PUBLIC "-//W3C [17]//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>

<?php echo include_http_metas() ?>

<?php echo include_metas() ?>

<?php echo include_title() ?>

<link rel="shortcut icon" href="/favicon.ico" />

</head>

<body>

<div id="main">

<?php echo $sf_data->getRaw('sf_content') ?>

<div id="footer">

powered by <?php echo link_to('symfony', 'http://www.symfony-project.com') ?>

</div>

</div>

</body>

</html>


Удалим <div id="main"></div> и the <div id="footer"></div> из обеих шаблонов и создадим новый шаблон для действия:


// apps/.../modules/public/actions/actions.class.php

public function executeTag()

{

$this->forward404Unless($tag = $this->getRequestParameter('tag'));

$c = new Criteria();

$c->addJoin(PhotoPeer::ID, TagPeer::PHOTO_ID);

$c->add(TagPeer::NAME, $tag);

$this->photos = PhotoPeer::doSelect($c);



$this->setTemplate('Index');

}


// apps/..../modules/public/templates/indexSuccess.php

<?php if($tag = $sf_params->get('tag')): ?>

<?php echo link_to('back to the photo list', 'public/index', 'style=display:block;float:right;') ?>

<?php endif; ?>

<h1>

My pictures

<?php if($tag): ?>

tagged "<?php echo $tag ?>"

<?php endif; ?>

</h1>

<?php foreach($photos as $photo): ?>

<div class="photo">

<?php echo link_to(

image_tag('/uploads/thumbnail/'.$photo->getFilePath()),

'public/photo?id='.$photo->getId(),

'class=image title='.$photo->getDescription()

) ?>

<?php echo include_partial('photo_description', array(

'photo' => $photo

)) ?>

</div>

<?php endforeach; ?>


//apps/..../modules/public/templates/photoSuccess.php

...

<?php use_helper('Javascript'); ?>

<div id="comments">

<h2>Comments</h2>

<?php foreach($photo->getComments() as $comment): ?>

<?php include_partial('comment', array('comment' => $comment)) ?>

<?php endforeach; ?>

<div id="updateDiv">

<?php echo link_to_function('Add a comment', visual_effect('toggle_blind', 'addComment')) ?>

<?php echo form_remote_tag(array(

'url' => 'public/addComment',

'update' => 'updateDiv',

'complete' => visual_effect('highlight', 'updateDiv'),

), 'id=addComment style=display:none;') ?>

<?php echo input_hidden_tag('photo_id', $photo->getId()) ?>

<?php echo label_for('author', 'Your name') ?>

<?php echo input_tag('author') ?><br />

<?php echo label_for('body', 'Your comment') ?>

<?php echo textarea_tag('body') ?><br />

<?php echo submit_tag('submit') ?>

</form>

</div>

</div>


_comment.php для отображения коментариев:


// apps/.../modules/photo/templates/_comment.php

<?php echo use_helper('Date') ?>

<div class="comment">

<p class="details">

<?php echo $comment->getAuthor() ?> said

<?php echo distance_of_time_in_words($comment->getPhoto()->getCreatedAt('U'), $comment->getCreatedAt('U')) ?> after

</p>

<p class="body"><?php echo $comment->getBody() ?></p>

</div>


Используем Ajax :


// in apps/.../modules/public/actions/actions.class.php

public function executeAddComment()

{

$this->forward404unless($photo = PhotoPeer::retrieveByPk($this->getRequestParameter('photo_id')));

$comment = new Comment();

$comment->setPhoto($photo);

$comment->setAuthor($this->getRequestParameter('author'));

$comment->setBody($this->getRequestParameter('body'));

$comment->save();



$this->comment = $comment;

}


Ajax шаблон:


// in apps/..../modules/public/templates/addCommentSuccess.php

<?php include_partial('comment', array('comment' => $comment)) ?>


 

Комментариев нет: