Author: HenryStivens

¡Hola Kumbieros! Hoy les traigo un tutorial básico para quienes deseen conocer como subir imágenes y datos con el mismo formulario. Es una pregunta recurrente que hemos tenido en nuestro chat de Slack y no es sencilla de responder por ese medio, por eso les presentaré un ejemplo práctico de la creación y actualización de usuario con foto de perfil.

Crearemos un modelo, un controlador y tres vistas, usaremos la librería Upload incluida en KumbiaPHP para gestionar la subida del archivo. Al final dejo el enlace con el código fuente en un repositorio en Github para que puedan ver el ejemplo completo, incluso descargarlo y ponerlo a funcionar.

Base de datos

Lo primero es la tabla en la base de datos:

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `age` int(11) NOT NULL DEFAULT '0',
  `email` varchar(255) NOT NULL,
  `photo` varchar(255) DEFAULT 'default.png',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

Modelo

Ahora el modelo que hereda de ActiveRecord para que nos de la capacidad de operaciones con la tabla de la base de datos:

Archivo: app/models/user.php

<?php

/**
* Clase para manejar los datos del usuario, tabla 'user'
*/
class User extends ActiveRecord 
{

}

Controlador

Ahora el controlador que nos permitirá pasar y recibir datos de las vistas. Arrancaremos con el listado de usuarios y para esto creamos la función index.

Archivo: app/controllers/user_controller.php

<?php
/**
 * Controlador para las acciones y vistas con el usuario
 */
class UserController extends AppController
{

    public function index()
    {
        $this->data = (new User)->find();
    }
}

Vistas

Y su respectiva vista.

Archivo: app/views/user/index.phtml

<h1>Lista de usuarios</h1>
<?= Html::linkAction('create', 'Crear', 'class="button"') ?>
<?php View::content() ?>
<?php if (count($data)) { ?>
    <table class="u-full-width">
        <thead>
            <tr>            
                <th>Nombre</th>
                <th>Edad</th>
                <th>Correo</th>
                <th>Foto</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($data as $item) { ?>
                <tr>
                    <td><?= $item->name ?></td>
                    <td><?= $item->age ?></td>
                    <td><?= $item->email ?></td>
                    <td><?= $item->photo ?></td>
                    <td><?= Html::linkAction("edit/$item->id", 'Editar') ?> | <?= Html::linkAction("update_photo/$item->id", 'Actualizar foto') ?></td>
                </tr> 
            <?php } ?>        
        </tbody>
    </table>
<?php } else { ?>
    <h2>No hay ningún registro</h2>
<?php } ?>

Continue reading «Subir imágenes y datos con el mismo formulario html»