PHP / Las vistas para CMS

Bienvenidos sean a este post, hoy agregaremos las vistas necesarias para finalizar la aplicacion.

Ante todo debemos crear un nuevo directorio llamado contactos dentro de:

app/Views/admin 

Una vez creado el directorio crearemos un nuevo archivo al cual llamaremos index.php y le agregaremos el siguiente codigo:

index.php

<?php
include(APPDIR.'Views/layouts/header.php');
include(APPDIR.'Views/layouts/nav.php');
?>

<h1>Contactos</h1>

<?php include(APPDIR.'Views/layouts/errores.php');?>

<p><a href="/contactos/add" class="btn btn-xs btn-info">Agregar Contacto</a></p>

<div class='table-responsive'>
    <table class='table table-striped table-hover table-bordered'>
    <tr>
        <th>Nombre</th>
        <th>Email</th>
        <th>Telefono</th>
        <th>Action</th>
    </tr>
    <?php foreach($contactos as $row) { ?>
    <tr>
        <td><?=htmlentities($row->apellido . ", " . $row->nombre);?></td>
        <td><?=htmlentities($row->correo);?></td>
        <td><?=htmlentities($row->telefono);?></td>
        <td>
            <a href="/contactos/edit/<?=$row->id;?>" class="btn btn-xs btn-warning">Editar</a>
            <a href="javascript:del('<?=$row->id;?>','<?=$row->nombre . chr(32)  .  $row->apellido;?>')" class="btn btn-xs btn-danger">Eliminar</a>
        </td>
    </tr>
    <?php } ?>
    </table>
</div>

<script language="JavaScript" type="text/javascript">
function del(id, title) {
    if (confirm("Quieres eliminar a '" + title + "'?")) {
        window.location.href = '/contactos/delete/' + id;
    }
}
</script>

<?php include(APPDIR.'Views/layouts/footer.php');?>

Esta va a ser la pagina de inicio de los contactos, como siempre tendremos nuestros cuatro archivos de layouts (header, nav, errores y footer), luego tendremos una tabla donde se mostrara el nombre completo, el email y el telefono, finalizando en dos acciones, editar y borrar, esto gracias al dato que le enviamos desde el metodo index, tambien tendremos la funcion en javascript que se encargara de eliminar al contacto pero antes nos preguntara si queremos hacerlo, les dejo un ejemplo de como se ve

Ya tenemos nuestra pagina de inicio ahora pasemos a la encargada agregar nuevos contactos, para ello en el mismo directorio deben crear un nuevo archivo que llamaremos add.php y le agregaremos el siguiente codigo:

add.php

<?php
include(APPDIR.'Views/layouts/header.php');
include(APPDIR.'Views/layouts/nav.php');
include(APPDIR.'Views/layouts/errores.php');
?>

<h1>Agregar Contacto</h1>

<form method="post">

    <div class="row">

        <div class="col-md-6">

            <div class="control-group">
                <label class="control-label" for="nombre"> Nombre</label>
                <input class="form-control" id="nombre" type="text" name="nombre" value="<?=(isset($_POST['nombre']) ? $_POST['nombre'] : '');?>" required  />
            </div>

            <div class="control-group">
                <label class="control-label" for="apellido"> Apellido</label>
                <input class="form-control" id="apellido" type="text" name="apellido" value="<?=(isset($_POST['apellido']) ? $_POST['apellido'] : '');?>" required  />
            </div>

        </div>

        <div class="col-md-6">

            <div class="control-group">
                <label class="control-label" for="tel"> Telefono</label>
                <input class="form-control" id="tel" type="number" name="tel" value="<?=(isset($_POST['tel']) ? $_POST['tel'] : '');?>"  />
            </div>

            <div class="control-group">
                <label class="control-label" for="email"> E-mail</label>
                <input class="form-control" id="email" type="email" name="email" value="<?=(isset($_POST['email']) ? $_POST['email'] : '');?>"  />
            </div>

        </div>

    </div>

    <br>

    <p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> Subir</button></p>

</form>

<?php include(APPDIR.'Views/layouts/footer.php');?>

Este es un poco mas practico pero tiene lo suyo, aqui tenemos nuevamente a nuestros layouts y despues un div donde contendra cada uno de los campos (nombre, apellido, email y telefono) donde informaremos el valor que corresponda, por ultimo tenemos el boton para subir la informacion, recuerden que la verdadera magia la hace el controlador, por ultimo debemos crear otro archivo que llamaremos edit.php y le agregaremos el siguiente codigo:

edit.php

<?php
include(APPDIR.'Views/layouts/header.php');
include(APPDIR.'Views/layouts/nav.php');
include(APPDIR.'Views/layouts/errores.php');
?>

<h1>Edit Contact</h1>

<form method="post">

    <div class="row">

        <div class="col-md-6">

            <div class="control-group">
                <label class="control-label" for="nombre"> Nombre</label>
                <input class="form-control" id="nombre" type="text" name="nombre" value="<?=$contacto->nombre;?>" required />
            </div>
            <div class="control-group">
                <label class="control-label" for="apellido"> Apellido</label>
                <input class="form-control" id="apellido" type="text" name="apellido" value="<?=$contacto->apellido;?>" required />
            </div>

        </div>

        <div class="col-md-6">

            <div class="control-group">
                <label class="control-label" for="tel"> Telephone</label>
                <input class="form-control" id="tel" type="number" name="tel" value="<?=$contacto->telefono;?>" />
            </div>
            <div class="control-group">
                <label class="control-label" for="email"> Email</label>
                <input class="form-control" id="email" type="email" name="email" value="<?=$contacto->correo;?>" />
            </div>

        </div>

    </div>

    <p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> Subir</button></p>

</form>

<?php include(APPDIR.'Views/layouts/footer.php');?>

Este va a ser la vista encargada de editar la informacion de cada contacto, en ella tendremos los mismos campos que en la vista de carga de un nuevo usuario pero esta vez le pasaremos la infomracion que recibimos por medio del objeto contacto, observen como utiliza cada campo para asignarlo al valor de cada campo, por ultimo una vez modificado si presionamos el boton ira al controlador y desde ahi hara toda la magia, con esto ya tenemos nuestra tres vistas, pasemos a probar como funciona nuestra nueva aplicacion mediante el siguiente video

Nota:
Para iniciar el servidor usen php -S localhost:8000 -t webroot desde la raiz del proyecto

En el video vemos como nuestra aplicacion quedo completamente funcional permitiendonos hacer una administracion completa de los contactos pero esto aun no termina.

En resumen, hoy hemos completado todo lo relacionado al CMS, hemos visto las tres vistas que se necesitan, hemos hablado de cada una de ellas, hemos verificado su funcionamiento mediante un video, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.