viernes, 5 de octubre de 2007

Creando un blog con CakePhp

Saludos lectores, esta ocasion escribire acerca de como crear un blog con CakePhp, este ejemplo lo tome del sitio oficial de cakephp este ejemplo constara de las siguientes operaciones:
  • Consulta de Articulos
  • Agregar nuevos Articulos
  • Modificar Articulo
  • Eliminar Articulo
Tratare de ser lo mas explicito posible

En primer lugar debemos crear nuestra tabla posts en Mysql:

CREATE TABLE posts (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
body TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
);


INSERT INTO posts (title,body,created)
VALUES ('Primer Post', 'Este es el cuerpo del primer post.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('Segundo Post', 'Este es el cuerpo del segundo post.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('Tercer Post', 'Este es el cuerpo del tercer post.', NOW());

Ahora configuremos nuestra base de datos en cake, debemos abrir el archivo database.php que se encuentra en /app/config/database.php

var $default = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'Tu_login',
'password' => 'Tu_password',
'database' => 'cake' );

Ahora crearemos nuestro Modelo Post

< ? php class Post extends AppModel { var $name = 'Post'; var $validate = array( 'title' => VALID_NOT_EMPTY,
'body' => VALID_NOT_EMPTY
);
}
? >

Aqui ponemos al array validate para asegurarnos q' a la hora q' se este ingresando un articulo los campos title y body no queden vacios.
Mediante la creación de un modelo es que se puede interactuar con la base de datos, con él se tiene las fundaciones para hacer las operaciones de ver, agregar, editar y eliminar.
Los modelos en CakePhp los debemos colocar en /app/models, en este caso el archivo que estamos creando es /app/models/post.php

Ahora pasamos a crear el Controlador

Post->findCount();
$conditions = array("id"=>"> 0");
$fields = array("id", "title", "body", "created");
$order = "Post.id DESC";
$limit = 10;
$this->set('pagination', $total_rows);
$this->pageTitle='Pagina Inicial';
$this->set('posts', $this->Post->findAll($conditions, $fields, $order, $limit));
}
function view($id)
{
$this->pageTitle='Articulos';
$this->Post->id = $id;
$this->set('post', $this->Post->read());
}
function add()
{
$this->pageTitle='Agregar Post';
if (!empty($this->data))
{
if ($this->Post->save($this->data))
{
$this->flash('Your post has been saved.','/posts');
}
}
}
function delete($id)
{
$this->pageTitle='Borrar Articulo';
$this->Post->del($id);
$this->flash('The post with id: '.$id.' has been deleted.', '/posts');
}
function edit($id = null)
{
if (empty($this->data))
{
$this->Post->id = $id;
$this->data = $this->Post->read();
}
else
{
if ($this->Post->save($this->data['Post']))
{
$this->flash('Your post has been updated.','/posts');
}
}
}
}
? >

El controlador es en donde se ejecutará toda la lógica de interacción con los posts. Debemos colocar este nuevo controlador en un archivo llamada posts_controller.php dentro del directorio /app/controllers

Dentro de nuestro controlador colocaremos todos los metodos necesarios para realizar nuestras operaciones en este caso el metodo index lo observaremos cunado el cliente coloque esta URL www.example.com/posts/index esto quiere decir que hay un controlador "posts", el cual posee un método (o función) "index".

Ahora que ya hemos conectado nuestra base de datos con el modelo y que la lógica ha sido definida en el controlador, vamos a crear una vista para el metodo index.
Las vistas de Cake deben ser colocadas en el directorio /app/views cada una dentro de un directorio llamado de acuerdo al controlador al que pertenecen (en este caso tendremos que crear un directorio llamado "posts" asi /app/views/posts/index.thtml


<h1> Blog posts </h1>


<div id="cuerpo">


< ? php foreach ($posts as $post): echo $post['Post']['id']; ? >
<div class="titulo">
<h1>
< ? php echo 'Titulo:'; echo $post['Post']['title']; echo '<a href="/posts/add"> Agregar Articulo </a>'; ? >

< ? php echo $html->link('Borrar',"/posts/delete/{$post['Post']['id']}",null,'Seguro?')?>
< ? php echo $html->link('Editar', '/posts/edit/'.$post['Post']['id']);?>
</h1>

<h3>
< ? php echo 'Creacion: '; echo $post['Post']['created']; ?>
</h3 >
</div>

<div class="arti">
<h4>

</h4>
</div>


</div>

Esta es la vista para agregar un Articulo:
/app/views/posts/add.thtml


<h1> Agregar Articulo </h1>
<form method="post" action="url('/posts/add')?>">
<p>
Titulo:
input('Post/title', array('size' => '40'))?>
tagErrorMsg('Post/title', 'Title is required.') ?>
</p>
<p>
Cuerpo del Articulo:
textarea('Post/body', array('rows'=>'10')) ?>
tagErrorMsg('Post/body', 'Body is required.') ?>
</p>
<p>
submit('Guardar post') ?>
</p>
</form>


Esta la vista para editar un Articulo:
/app/views/posts/edit.thtml


<h1> Editar Articulo </h1>
< form method="post" action="url('/posts/edit')?>" >
hidden('Post/id'); ?>
<p>
Title:
input('Post/title', array('size' => '40'))?>
tagErrorMsg('Post/title', 'Title is required.') ?>
</p>
< p >
Body:
textarea('Post/body', array('rows'=>'10')) ?>
tagErrorMsg('Post/body', 'Body is required.') ?>
</p>
<p>
submit('Actualizar') ?>
</p>
< /form>

Aqui les dejo el archivo .css que utilice para este ejemplo, este lo debemos colocar dentro del directorio /app/webroot/css/ y nombrarlo "cake.generic.css"


*{
margin:0;
padding:0;
}
body{
font-family:"frutiger linotype","lucida grande",helvetica,arial,sans-serif;
text-align:center;
color:#333;
font-size: 76%;
}
/* General Style Info */
a{
color:#003d4c;
text-decoration:underline;
}
a:hover{
color:#003d4c;
text-decoration:none;
}
a img{
border:none;
}
h1, h2, h3, h4{
font-weight:normal;
}
h1{
color: #003d4c;
margin:2px ;
font-size: 140%;
}
h2{
color:#c6c65b;
padding-top: 1em;
margin:0.3em 0;
font-size: 180%;
}
h3{
color:#003d4c;
padding-top:2px;
font-size: 120%;
}
h4{
color:#660000;
padding-top:0.5em;
font-size:120%;
}

ul, li {
margin: 0 12px 0 0;
padding-top: 2px;
}
#cuerpo{
color: black;
padding :10px 10px 10px 10px ;
border: 1px dotted #000000;
font-size: 80%;
}
.titulo{
color: black;
padding :10px 10px 10px 10px ;
border-top: 2px dotted orange;
font-size: 100%;
}
.arti{
color: #002e4d;
padding :20px 10px 50px 10px ;
font-size: 100%;
}
/* Layout */
#container{
text-align:justify;
border: 2px solid #000000;
margin: 10px 10px 10px 10px;
}
#header{
background-color:orange;
margin: 10px 10px 10px 10px ;
padding: 4px 20px;
border: 2px solid #666666;
}
#content{
/*clear:both;*/
padding: 00px 40px 10px 40px;
background-color: #eee;
color: #333;
border: 1px dotted #333333;
margin: 10px 10px 10px 10px;
width:680px;
}
#sidebar{
clear:both;
float:right;
padding: 10px 40px 10px 40px;
background-color: #eee;
color: #333;
border: 1px dotted #333333;
margin: auto 10px auto;
width:100px;
}
#footer{
clear:both;
padding: 6px 10px;
background-color:orange;
text-align: right;
border: 2px solid #999999;
margin: 10px 10px 10px 10px;/* n1=arriba n2=der n3=abajo n4=izq*/
}
/* forms */
form {
margin-top: 2em;
}
form div{
vertical-align: text-top;
margin-left: 1em;
margin-bottom:2em;
}
form div.date{
margin-left: 0em;
}
label {
display: block;
width: 140px;
font-size: 14px;
padding-right: 20px;
}
input[type=checkbox] {
float: left;
clear: left;
margin: 2px 6px 7px 2px;
}
input, textarea {
clear: both;
display:block;
font-size: 14px;
font-family: inherit;
}
select {
clear: both;
vertical-align: text-bottom;
font-size: 14px;
font-family: inherit;
}
option {
font-size: 14px;
font-family: inherit;
padding: 0 0.3em;
}
input[type=submit] {
display: inline;
vertical-align: bottom;
}
div.required {
clear: both;
color:#222;
font-weight:bold;
}

div.submit {
clear: both;
margin-top: 40px;
margin-left: 140px;
}


Debemos colocar un layout para mostrar nuestras vistas en /app/views/layouts/default.thtml



< html >
< head >

< title > Mi sitio :: < ? php echo $title_for_layout; ?> < /title >
< /head >

< body >

< ? php echo $content_for_layout ?>

</body >
< /html >

Ok pues espero sea de su agrado este ejemplo, mas adelante escribire algunos otros donde aremos uso de los helpers de Ajax

ShareThis