¡No Quiero Programar! PHP, CodeIgniter y otros frameworks!

25sep/089

Subidor de Imagenes (Tercera parte): Subir y miniaturizar

Bueno seguimos con lo del ultimo día. Ahora lo que nos queda hacer es el controlador que se ocupe de subir nuestro fichero en el servidor y luego cree una imagen en miniatura de esta (thumbnail).

Como ya dije en el articulo anterior, usaremos estas dos librerías: File Uploading Class y Image Manipulation Class.

Al ser un solo formulario lo haremos todo en una misma función del controlador. Para empezar necesitaremos subir el archivo al servidor y a su vez almacenar la información en la base de datos:

				$config['upload_path'] = './uploads/';
				$config['allowed_types'] = 'gif|jpg|png';
				$config['max_size']	= '5000';
				$config['encrypt_name'] = TRUE;

				$this->load->library('upload', $config);

				if(!$this->upload->do_upload("imagen"))
				{
					echo $this->upload->display_errors();
				}
				else
				{
					$data = $this->upload->data();
					$this->db->query("INSERT INTO `imagenes` (`imagen`, `fecha`, `ip`) VALUES (?, ?, ?)", array($data['file_name'], time(), $_SERVER['REMOTE_ADDR']));

Como veis es muy fácil de usar, hay que especificar las distintas opciones que queremos en el array config (hay mas opciones disponibles en la guía de usuario de CI). Le pasamos el "name" input del formulario para subir la imagen en la función "do_upload". Y luego simplemente añadir un registro en la base de datos con la información que nos da "$this->upload->data()";

Ahora necesitaremos que a partir de esta imagen se cree un thumbnail, lo haremos así:

18sep/080

Subidor de Imagenes (Segunda parte): Base de datos y vistas

Como siempre, el taller para esta aplicación ira enfocado a conseguir una idea o noción básica sobre el tema, es decir yo os doy una base para que podáis trabajarla y ampliarla según vuestras necesidades.

Dicho esto empezaremos creando la tabla de la base de datos que necesitaremos, como he dicho todo muy simplificado. Necesitaremos un campo que nos diga el nombre de la imagen, otro de ID, uno de fecha y otro de IP para saber desde donde nos suben esas imágenes, por si hubiese abuso esta sería una buena medida de controlarlo.

CREATE TABLE IF NOT EXISTS `imagenes` (
  `id` int(11) NOT NULL auto_increment,
  `imagen` char(255) NOT NULL,
  `fecha` int(11) NOT NULL,
  `ip` char(20) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Como veis es todo bastante simple. Podríais añadir campos como el nombre original de la imagen (dado que vamos a modificar su nombre por un hash), tamaño, en caso de que lo hagáis con usuarios pues la ID del usuario y un largo etcétera.

Después de crear la base de datos necesitaremos tener las vistas, es decir lo que el usuario verá. Primero crearemos el formulario para subir la imagen, muy simple, con un simple campo de archivo para que nos suban la imagen.

<fieldset>
	<legend>Subir imagen</legend>
	<form action="index.php/imagenes/index/do" method="post" enctype="multipart/form-data">
		<label for="imagen">Imagen</label>
        <input type="file" name="imagen" id="imagen" />
        <br />
        <label></label>
        <input type="submit" value="Subir" />
	</form>
</fieldset>

Luego crearemos la vista donde se informara al usuario del éxito al subir su fichero y la típica información como podría ser el link, el código para los foros (BBCode) para incluir la imagen con su miniatura, etc..

<p><strong>Tu imagen se ha subido correctamente!</strong></p>
<p>
	<strong>Link de tu imagen</strong>
    <br />
    <a href="<?=base_url();?>uploads/< ?=$file_name?>">< ?=base_url();?>uploads/< ?=$file_name?></a>
</p>
<p>
	<strong>Para foro</strong>
    <br />
    <textarea cols="50" rows="5">[url=< ?=base_url();?>uploads/< ?=$file_name?>][img]< ?=base_url();?>uploads/< ?=$file_name?>[/img][/url]</textarea>
</p>
<p>
	<strong>Para foro con miniatura</strong>
    <br />
    <a href="<?=base_url();?>uploads/< ?=$file_name?>"><img src="<?=base_url();?/>uploads/< ?=$raw_name?>_thumb< ?=$file_ext?>" /></a>
    <br />
    <textarea cols="50" rows="5">[url=< ?=base_url();?>uploads/< ?=$file_name?>][img]< ?=base_url();?>uploads/< ?=$raw_name?>_thumb< ?=$file_ext?>[/img][/url]</textarea>
</p>

Como veréis, uso algunas variables como $file_name que son un array de variables que nos devolverá la función de UPLOAD (subir el fichero) de la librería de CodeIgniter, por el momento os lo creéis y lo veremos en el siguiente artículo. Aun así si queréis ver que variables se nos devuelven y como funciona por encima la librería podéis verlo aquí.

Hasta la siguiente parte ;)

16sep/081

Subidor de Imagenes (Primera parte): Planificación

Hay muchas veces que no se me ocurren ideas para publicar artículos de la nada, sino que cuando estoy trabajando en alguna aplicación para mí o para asuntos profesionales pienso: "anda! esto quizá le interesa a alguien que lea el blog".

Últimamente veo que esta muy de moda páginas como ImagesHack o Photobucket que son páginas que simplemente dejan al usuario subir una imagen de su ordenador a uno de los servidores para que luego se pueda mostrar a cualquier otra persona, normalmente se suele usar para foros y sitios públicos de este tipo.

Así que todo esto me viene muy bien para introduciros dos clases muy importantes en el CodeIgniter: File Uploading Class, que es la que nos ayudará a subir la imagen, controlar todos los parámetros de esta acción y demás. La segunda clase será la Image Manipulation que nos permitirá en este caso crear un thumbnail (una imagen en miniatura) de la versión original para mejor inserción en foros y otros sitios.

La aplicación será muy sencilla y constará de dos grandes pasos:

  • Subir y tratar la imagen
  • Mostrar el link, el bbccode para los foros, etc..

Pues de momento lo dejaré aquí y el próximo articulo empezaremos con el sistema en cuestión. Si queréis venir preparados "a clase", iros mirando esas dos librerías que son las que usaremos básicamente.

Hasta pronto.

30jun/087

Gestor de noticias (Sexta parte): Crear un buscador

Aprovechando la aplicación que estamos creando del Gestor de Noticias, voy a intentar satisfacer algunas peticiones de algunos usuarios que me preguntan cómo hacer un buscador en CodeIgniter (aunque en PHP es lo mismo ya que para esto apenas uso nada de CodeIgniter).

Antes de empezar la explicación aclarar que lo que lo que estoy haciendo es un buscador muy simple y funcional, el hacer un buscador tiene muchos caminos y complicaciones extras pero no entraré en ello, al menos hoy, así que si estáis buscando cómo hacer un buscador completo y complejo este no es vuestro articulo, aquí vamos a tratarlo desde un punto de vista de iniciación.

Primero de todo necesitaremos crear unos índices FULLTEXT en nuestra base de datos para que podamos realizar bien la búsqueda con la sintaxis MATCH...AGAINST, para ello lo haremos con este código SQL:

ALTER TABLE `noticias` ADD FULLTEXT(`titulo`, `cuerpo`);
28may/089

Gestor de noticias (Quinta parte): Paginación

Bueno hoy dedicaré esté post a la paginación en CodeIgniter, ya que es un tema que para una cosa o para otra siempre acaba saliendo y acabamos con un quebradero de cabeza monumental cuando intentamos crear una buena paginación.

Cómo toda aplicación web típica, CodeIgniter nos plantea una solución, así que siempre haced uso de su guía y buscad lo que os haga falta, que os aseguro que la mayor parte del tiempo lo encontraréis. En este caso haremos uso de la "Pagination Class".

[DEMO] Podéis ver aquí cómo quedará todo después de lo que os explicaré a continuación.

Ojo: si veis que no hay ninguna noticia puesta, probad de añadirlas con el link que hay ya que en un post anterior puse el scaffolding para testear y es posible que alguien lo haya borrado para probarlo.

Para usar la paginación en nuestra web necesitaremos proceder en 3 pasos:

  1. En el controlador: cargar la librería con la configuración que deseemos.
  2. Modificar la consulta de la base de datos para que nos muestre sólo una parte en vez de todos los resultados.
  3. Añadir los enlaces (los números) para que el usuario pueda navegar a través de las páginas generadas.

10may/0815

Gestor de noticias (Cuarta parte): Formularios y validación

El otro día, en la tercera parte de estos tutoriales os enseñé lo que era el scaffolding y como nos servía para testear rápidamente nuestra aplicaciones, pero realmente no sirve como una herramienta de administración, así que para ello deberemos crear un formulario que nos permita añadir nuevas noticias a la web.

Para ello necesitaremos:

  1. Formulario para añadir los datos
  2. Código que nos valide que los datos del formulario son correctos
  3. Código que nos añada lo que recogemos del "1" a la base de datos.