Subir imágenes y datos con el mismo formulario html

Read More
Actualizar foto de perfil
Actualizar foto de perfil

¡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”

Vídeo KumbiaPHP Essentials

Read More
video esencials kumbiaphp

Bienvenido/bienvenida a KumbiaPHP.

Esta semana tenemos un vídeo dedicado a los conceptos básicos de KumbiaPHP. Los vídeos son parte de una serie para compartir conocimiento y algunas prácticas que tenemos los desarrolladores que usamos este fabuloso framework.

Pueden descargarse los slides aquí: KumbiaPHP Essentials

Próximas semanas:

    • CRUD con KumbiaPHP (Create, Read, Update, Delete)
    • ActiveRecord Essentials
    • Templates (Bootstrap, Picnic, Foundation)
    • Autenticación Simple
    • Autenticación en base de datos
  • Uploads
  • Control de Acceso con ACL

iCal con Kumbiaphp beta2

Buen día,

Este es mi primer post para la comunidad y espero les sirva:

Voy a explicar como implementar un iCal  jQuery (Calendario de eventos con estilo similar al del iphone) y poblarlo con los datos que tengo en MySQL a través de Kumbiaphp Framework:

Lo primero que deben hacer, obviamente después de tener configurado Kumbiaphp Beta2, es descargar el iCal desde aquí .  Los archivos .js se ubican en /default/app/public/javascript, el archivo .css se ubica en /default/app/public/css.

Creamos una tabla en MySQL que va a ser nuestro insumo de datos para poblar el calendario (supongo hasta aquí que ya saben que es un modelo, como se configura la base de datos y sus convenciones) :


CREATE TABLE IF NOT EXISTS `agenda` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `fecha` date NOT NULL,
    `hora_inicio` time NOT NULL,
    `hora_fin` time NOT NULL,
    `producto_id` int(11) NOT NULL,
    `cliente_id` int(11) NOT NULL,
    `estado` varchar(10) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT= 8;

Si se fijan,  la creación de la tabla está asociada a dos tablas que son cliente y producto.

En la clase modelo agenda.php se crea una función:


public function getCalendario() {
    $sql = "SELECT fecha as date, producto.nombre as title,
       CONCAT(hora_inicio, ' hasta ', hora_fin, ' ', cliente.nombres, ' ', cliente.apellidos) as 'desc'
       FROM agenda
       INNER JOIN cliente ON (agenda.cliente_id=cliente.id)
       INNER JOIN producto ON (agenda.producto_id=producto.id)";

    return $this->find_all_by_sql($sql);
}

Cómo pueden ver hay un join a dos tablas asociadas.

En el controlador agenda_controller.php se crea una función que llame la consulta creada en el modelo y lo traiga en un array:


public function verCalendario() {
    $this->calendario = Load::model('agenda')->getCalendario();
}

Luego en el directorio  /default/app/view/_shared/partials se crea un partial, decidí hacer un partial para reutilizarlo en caso de que necesite incluirlo en otras páginas.


<script type = "text/javascript">
    $(document).ready(function () {
        $("#ical").ical({
            daynames: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
            //startOnSunday: true,
            eventdates: <?php echo json_encode($Model); ?>
        });
    });
</script>
<div id="ical"></div>

Como ven estoy usando la función json_encode que me va a arrojar un formato como este:


eventdates: [{"date": "2009-03-21", "title": "My birthday", "desc": "Its my birthday!"},
{"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"}]

Los alias que utilicé en la consulta del modelo (date,title,desc) están asociados a este formato.

Y por último se implementa la vista verCalendario.phtml con el siguiente código:


<?php
echo Tag::js('jquery-1.3.2.min');
echo Tag::js('jquery-ical');
Tag::css('master');
?>
<?php echo View::content(); ?>
<?php echo View::partial('ical/script', false, array('Model' => $calendario)); ?>

Y esto es todo, espero sea de utilidad y si tienen aportes, mejoras o recomendaciones ¡bien recibidas sean!