Bienvenidos sean a este post, ya hemos creado todos los metodos pero todavia nos faltan las vistas.
Para ello primero debemos crear un nuevo directorio llamado users dentro del directorio:
app/views/admin
Dentro de este directorio crearemos un archivo y lo llamaremos index.php, una vez creado el archivo le agregaremos el siguiente codigo:
index.php
<?php
include(APPDIR.'Views/layouts/header.php');
include(APPDIR.'Views/layouts/nav.php');
?>
<h1>Usuarios</h1>
<?php include(APPDIR.'Views/layouts/errores.php');?>
<p><a href="/usuarios/add" class="btn btn-xs btn-info">Agregar Usuario</a></p>
<div class='table-responsive'>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th>Usuario</th>
<th>Email</th>
<th>Accion</th>
</tr>
<?php foreach($usuarios as $row) { ?>
<tr>
<td><?=htmlentities($row->usuario);?></td>
<td><?=htmlentities($row->email);?></td>
<td>
<a href="/usuarios/edit/<?=$row->id;?>" class="btn btn-xs btn-warning">Editar</a>
<a href="javascript:del('<?=$row->id;?>','<?=$row->usuario;?>')" class="btn btn-xs btn-danger">Borrar</a>
</td>
</tr>
<?php } ?>
</table>
</div>
<script language="JavaScript" type="text/javascript">
function del(id, titulo) {
if (confirm("Estas seguro de querer borrar '" + titulo + "'?")) {
window.location.href = '/usuarios/delete/' + id;
}
}
</script>
<?php include(APPDIR.'Views/layouts/footer.php');?>
Esta es nuestra primera vista, en este caso la primera que veremos mostrando todos los usuarios y las acciones que podamos hacer sobre los mismos, como siempre primero tenemos los archivos de header y nav, luego un titulo, despues la pagina de los errores, a partir de aqui comenzaremos con lo interesante, primero crearemos un link para la accion de agregar nuevos usuarios (el metodo add), despues tendremos una tabla donde mostraremos a cada uno de los usuarios y sus respectivas acciones, en este caso tenemos dos acciones:
- Editar, que sera para llamar al metodo editar de la usuarios
- Borrar, llamara a una funcion de javascript para eliminar al usuario
Lo siguiente es la funcion javascript que basicamente la usaremos para preguntar si queremos borrar a dicho uuario, por el momento solo nos redirecciona a otra pagina, por ultimo tenemos el archivo footer para cerrar la pagina, veamos como quedo hasta ahora
Si lograron lo mismo que se ve en la imagen vamos por el buen camino, pasemos a ver la siguiente vista, en este caso dentro del mismo directorio crearemos un nuevo archivo llamado add.php, al cual 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 Usuario</h1>
<form method="post">
<div class="row">
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="user"> Usuario</label>
<input class="form-control" id="user" type="text" name="user" value="<?=(isset($_POST['user']) ? $_POST['user'] : '');?>" required />
</div>
<div class="control-group">
<label class="control-label" for="email"> Email</label>
<input class="form-control" id="email" type="email" name="email" value="<?=(isset($_POST['email']) ? $_POST['email'] : '');?>" required />
</div>
</div>
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="password"> Contraseña</label>
<input class="form-control" id="password" type="password" name="password" required/>
</div>
<div class="control-group">
<label class="control-label" for="password_confirm"> Confirma Contraseña</label>
<input class="form-control" id="password_confirm" type="password" name="password_confirm" required/>
</div>
</div>
</div>
<br>
<p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> Submit</button></p>
</form>
<?php include(APPDIR.'Views/layouts/footer.php');?>Esta se encargara de agregar nuevos usuarios, como iiempre al comienzo nuestro archivos de layout, luego tenemos el cuerpo donde basicamente es un formulario el cual tendra los campos para ingresar los distintos datos:
- user, para el usuario de identificacion
- email, para el correo electronico de recuperacion de clave
- password, contraseña del usuario
- password_confirm, la confirmacion de la contraseña
Por ultimo tendremos el boton para subir al nuevo usuario y luego el layout para cerrar la pagina, con esto tenemos la vista completa solo nos falta un nuevo archivo al cual llamaremos edit.php, a este nuevo archivo 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>Editar Usuario</h1>
<form method="post">
<div class="row">
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="user"> Usuario</label>
<input class="form-control" id="user" type="text" name="user" value="<?=$usuario->usuario;?>" required />
</div>
<div class="control-group">
<label class="control-label" for="email"> Email</label>
<input class="form-control" id="email" type="email" name="email" value="<?=$usuario->email;?>" required />
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">Contraseña, solo ingresa para cambiar la contraseña existente.</div>
<div class="panel-body">
<div class="control-group">
<label class="control-label" for="password"> Contraseña</label>
<input class="form-control" id="password" type="password" name="password" />
</div>
<div class="control-group">
<label class="control-label" for="password_confirm"> Contraseña</label>
<input class="form-control" id="password_confirm" type="password" name="password_confirm" />
</div>
</div>
</div>
</div>
</div>
<p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> Modificar</button></p>
</form>
<?php include(APPDIR.'Views/layouts/footer.php');?>La estructura es muy similar a lo visto en las otras vistas donde tendremos los tres layouts de siempre (header, nav y errores), despues un formulario donde tendremos una tabla con los cuatro datos (usuario, email, contraseña y confirmacion), en este caso agregamos el aviso de que el cambio de contraseña es para la existente, con esto ya tenemos nuestras tres vistas para poder trabajar con los usuarios, vamos a hacer un ejemplo para verlo en accion mediante el siguiente video
Aca podemos ver como todo funciona perfectamente, si lograron lo mismo Felicitaciones!!! Porque ya tenemos una pagina mucho mas operativa pero todavia nos faltan un par de detalles mas que agregaremos en los proximos posts, pero hasta ahora hemos visto muchos temas interesantes para poner en practica, les dejo como tenemos nuestra estructura hasta ahora:
tinchicus@dbn001vrt:~/lenguajes/PHP/proyecto$ tree
.
├── app
│ ├── Config.php
│ ├── Controllers
│ │ ├── admin.php
│ │ ├── contactos.php
│ │ ├── inicio.php
│ │ └── usuarios.php
│ ├── Helpers
│ │ ├── Database.php
│ │ ├── Sesion.php
│ │ └── Url.php
│ ├── Modelos
│ │ ├── Contacto.php
│ │ └── Usuario.php
│ └── Views
│ ├── 404.php
│ ├── admin
│ │ ├── auth
│ │ │ ├── cambia_clave.php
│ │ │ ├── login.php
│ │ │ └── reset.php
│ │ ├── index.php
│ │ └── users
│ │ ├── add.php
│ │ ├── edit.php
│ │ └── index.php
│ ├── contactos
│ │ └── index.php
│ ├── default.php
│ ├── layouts
│ │ ├── errores.php
│ │ ├── footer.php
│ │ ├── header.php
│ │ └── nav.php
│ └── tinchicus.php
├── composer.json
├── composer.lock
├── system
│ ├── ControladorBase.php
│ ├── ModeloBase.php
│ ├── Route.php
│ └── View.php
├── vendor
│ ├── autoload.php
│ ├── composer
│ │ ├── autoload_classmap.php
│ │ ├── autoload_namespaces.php
│ │ ├── autoload_psr4.php
│ │ ├── autoload_real.php
│ │ ├── autoload_static.php
│ │ ├── ClassLoader.php
│ │ ├── installed.json
│ │ ├── installed.php
│ │ ├── InstalledVersions.php
│ │ ├── LICENSE
│ │ └── platform_check.php
│ ├── filp
│ │ └── whoops
│ │ ├── CHANGELOG.md
│ │ ├── composer.json
│ │ ├── LICENSE.md
│ │ ├── SECURITY.md
│ │ └── src
│ │ └── Whoops
│ │ ├── Exception
│ │ │ ├── ErrorException.php
│ │ │ ├── Formatter.php
│ │ │ ├── FrameCollection.php
│ │ │ ├── Frame.php
│ │ │ └── Inspector.php
│ │ ├── Handler
│ │ │ ├── CallbackHandler.php
│ │ │ ├── HandlerInterface.php
│ │ │ ├── Handler.php
│ │ │ ├── JsonResponseHandler.php
│ │ │ ├── PlainTextHandler.php
│ │ │ ├── PrettyPageHandler.php
│ │ │ └── XmlResponseHandler.php
│ │ ├── Resources
│ │ │ ├── css
│ │ │ │ ├── prism.css
│ │ │ │ └── whoops.base.css
│ │ │ ├── js
│ │ │ │ ├── clipboard.min.js
│ │ │ │ ├── prism.js
│ │ │ │ ├── whoops.base.js
│ │ │ │ └── zepto.min.js
│ │ │ └── views
│ │ │ ├── env_details.html.php
│ │ │ ├── frame_code.html.php
│ │ │ ├── frame_list.html.php
│ │ │ ├── frames_container.html.php
│ │ │ ├── frames_description.html.php
│ │ │ ├── header.html.php
│ │ │ ├── header_outer.html.php
│ │ │ ├── layout.html.php
│ │ │ ├── panel_details.html.php
│ │ │ ├── panel_details_outer.html.php
│ │ │ ├── panel_left.html.php
│ │ │ └── panel_left_outer.html.php
│ │ ├── RunInterface.php
│ │ ├── Run.php
│ │ └── Util
│ │ ├── HtmlDumperOutput.php
│ │ ├── Misc.php
│ │ ├── SystemFacade.php
│ │ └── TemplateHelper.php
│ ├── phpmailer
│ │ └── phpmailer
│ │ ├── COMMITMENT
│ │ ├── composer.json
│ │ ├── get_oauth_token.php
│ │ ├── language
│ │ │ ├── phpmailer.lang-af.php
│ │ │ ├── phpmailer.lang-ar.php
│ │ │ ├── phpmailer.lang-az.php
│ │ │ ├── phpmailer.lang-ba.php
│ │ │ ├── phpmailer.lang-be.php
│ │ │ ├── phpmailer.lang-bg.php
│ │ │ ├── phpmailer.lang-ca.php
│ │ │ ├── phpmailer.lang-ch.php
│ │ │ ├── phpmailer.lang-cs.php
│ │ │ ├── phpmailer.lang-da.php
│ │ │ ├── phpmailer.lang-de.php
│ │ │ ├── phpmailer.lang-el.php
│ │ │ ├── phpmailer.lang-eo.php
│ │ │ ├── phpmailer.lang-es.php
│ │ │ ├── phpmailer.lang-et.php
│ │ │ ├── phpmailer.lang-fa.php
│ │ │ ├── phpmailer.lang-fi.php
│ │ │ ├── phpmailer.lang-fo.php
│ │ │ ├── phpmailer.lang-fr.php
│ │ │ ├── phpmailer.lang-gl.php
│ │ │ ├── phpmailer.lang-he.php
│ │ │ ├── phpmailer.lang-hi.php
│ │ │ ├── phpmailer.lang-hr.php
│ │ │ ├── phpmailer.lang-hu.php
│ │ │ ├── phpmailer.lang-hy.php
│ │ │ ├── phpmailer.lang-id.php
│ │ │ ├── phpmailer.lang-it.php
│ │ │ ├── phpmailer.lang-ja.php
│ │ │ ├── phpmailer.lang-ka.php
│ │ │ ├── phpmailer.lang-ko.php
│ │ │ ├── phpmailer.lang-lt.php
│ │ │ ├── phpmailer.lang-lv.php
│ │ │ ├── phpmailer.lang-mg.php
│ │ │ ├── phpmailer.lang-ms.php
│ │ │ ├── phpmailer.lang-nb.php
│ │ │ ├── phpmailer.lang-nl.php
│ │ │ ├── phpmailer.lang-pl.php
│ │ │ ├── phpmailer.lang-pt_br.php
│ │ │ ├── phpmailer.lang-pt.php
│ │ │ ├── phpmailer.lang-ro.php
│ │ │ ├── phpmailer.lang-ru.php
│ │ │ ├── phpmailer.lang-sk.php
│ │ │ ├── phpmailer.lang-sl.php
│ │ │ ├── phpmailer.lang-sr_latn.php
│ │ │ ├── phpmailer.lang-sr.php
│ │ │ ├── phpmailer.lang-sv.php
│ │ │ ├── phpmailer.lang-tl.php
│ │ │ ├── phpmailer.lang-tr.php
│ │ │ ├── phpmailer.lang-uk.php
│ │ │ ├── phpmailer.lang-vi.php
│ │ │ ├── phpmailer.lang-zh_cn.php
│ │ │ └── phpmailer.lang-zh.php
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── SECURITY.md
│ │ ├── src
│ │ │ ├── Exception.php
│ │ │ ├── OAuth.php
│ │ │ ├── PHPMailer.php
│ │ │ ├── POP3.php
│ │ │ └── SMTP.php
│ │ └── VERSION
│ └── psr
│ └── log
│ ├── composer.json
│ ├── LICENSE
│ ├── Psr
│ │ └── Log
│ │ ├── AbstractLogger.php
│ │ ├── InvalidArgumentException.php
│ │ ├── LoggerAwareInterface.php
│ │ ├── LoggerAwareTrait.php
│ │ ├── LoggerInterface.php
│ │ ├── LoggerTrait.php
│ │ ├── LogLevel.php
│ │ ├── NullLogger.php
│ │ └── Test
│ │ ├── DummyTest.php
│ │ ├── LoggerInterfaceTest.php
│ │ └── TestLogger.php
│ └── README.md
└── webroot
├── css
│ └── style.css
└── index.php
35 directories, 163 files
tinchicus@dbn001vrt:~/lenguajes/PHP/proyecto$Nota: Recuerden que el directorio vendor se completa con el composer
Por ultimo les dejo un archivo con los elementos que trabajamos hasta ahora:
En resumen, hoy hemos terminado de ver como administrar los usuarios, tecnicamente vimos las tres vistas que necesitamos, para este caso fueron el dashboard encargado de mostrar los usuarios existentes, la opcion de agregar uno nuevo, modificarlo y borrarlo, despues las vistas encargadas de agregar y editar o modificar, por ultimo vimos un video de como trabaja hasta ahora, 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.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 