IMAGEN EN BASE DE DATOS

En este tutorial les voy a enseñar a trabajar con imágenes y una base de datos con PHP y MySQL. Vamos a utilizar Dreamweaver CS5, el cual nos va a ahorrar bastante tiempo en algunas cosas.

Al trabajar con imágenes y bases de datos tenemos dos opciones, la primera es guardar la imagen en la base de datos, y la segunda es guardar la ruta de la imagen en la base de datos. El primer caso haría que la base de datos se vuelva un poco pesada, así que usaremos el segundo caso, almacenando únicamente la ruta de la imagen en la base de datos. Esta forma es más fácil y práctico de trabajar con imágenes.

Bueno ahora empecemos. Primero en Dreamweaver vamos a crear un nuevo sitio. Nos vamos al menú Sitio y escogemos Nuevo sitio en la pestaña Sitio, le ponemos un nombre y su ruta:

Luego nos vamos a la pestaña Servidores, ahí damos clic en el símbolo + y llenamos con la siguiente información (en mi caso uso el puerto 8081, si usan otro deben modificar eso):

Luego en la pestaña avanzadas realizamos lo siguiente:

Luego damos clic en Guardar, en la primera ventana y seleccionamos el servidor que creamos:

Luego damos clic en Guardar.

Este proceso es en la version CS5 de Dreamweaver, en la versión 8 es un poco diferente.

Una vez hecho esto creamos un nuevo archivo PHP y lo guardamos en la ruta del sitio, en mi caso C:xampphtdocsPracticaImagenes le vamos a poner el nombre de formulario.php.

Ahora vamos a crear la base de datos que contendrá la información de las imágenes. Usando el phpMyAdmin que trae el XAMPP vamos a crear la base ImagenesPractica y dentro la tabla Catalogo con los siguientes campos:

Ahora en Dreamweaver en el archivo formulario.php nos vamos al menú Ventana -> Bases de datos. En el panel que aparece damos clic en el símbolo + y escogemos “Conexión MySQL” y llenamos los datos como se muestra:

Ahora vamos a crear una página que se llame ingreso_exitoso.php la cual contendrá el texto “El dato ha sido ingresado correctamente”.

Cerramos el archivo ingreso_exitoso.php y luego nos vamos al archivo formulario.php. Allí vamos a crear un formulario como el que se muestra en la imagen:

Junto a cada elemento del formulario puse el nombre que tiene cada uno, y el cuadro de la derecha muestra los atributos de la lista Tipo. Bueno en la imagen me faltó un botón que se diga Enviar. Ahí lo incluyen. Una vez hecho esto vamos al menú Insertar -> Objetos de datos -> Insertar registros -> Insertar registro y llenamos como se muestra:

Se debe ir escogiendo cada columna y asignarle el valor correspondiente. En tras insertar, ir a escogemos la página que creamos antes que solo tiene un texto. Damos clic en Aceptar.

Ahora en la ruta del sitio que en mi caso es C:xampphtdocsPracticaImagenes vamos a crear una carpeta llamada images y dentro de ella dos carpetas, una llamada Camisetas y otra llamada Accesorios.

Hasta el momento lo que hace Dreamweaver es llenar la base de datos con lo que tenemos en el formulario. Pero todavia no almacena la ruta de la imagen. Eso vamos a hacer ahora. Antes tenemos un combobox que nos pide el tipo, ya sea Camiseta o Accesorio (suponiendo que es una tienda deportiva) si escogemos camiseta se debe guardar la imagen en C:xampphtdocsPracticaImagenesimagesCamisetas y si escogemos Accesorio se debe guardar en C:xampphtdocsPracticaImagenesimagesAccesorios y además almacenar esa ruta en la base de datos.

Estando en el archivo formulario.php nos vamos en Dreamweaver a la opción de Código (Ver -> Código) y ubicamos la siguiente línea de código:

Debajo de la línea subrayada vamos a insertar el siguiente código PHP:

$tipo_prod = $_POST["lstTipo"];

//Guardar imagen

if(is_uploaded_file($_FILES['fleImagen']['tmp_name'])) { // verifica haya sido cargado el archivo

$ruta= “images/$tipo_prod/”.$_FILES['fleImagen']['name'];

move_uploaded_file($_FILES['fleImagen']['tmp_name'], $ruta);

}

Más abajo tenemos el código:

GetSQLValueString($_POST['fleImagen'], “text”),

Lo modificamos y le ponemos lo siguiente:

GetSQLValueString($ruta, “text”),

Listo ahora guardamos el archivo formulario.php y probamos la página web en el navegador.

Al llenar el formulario y escoger una imagen ésta se guarda en la carpeta correspondiente según sea Camiseta o Accesorio y su ruta se guarda en la base de datos:

Ahora vamos a mostrar los datos en otro archivo. Creamos un nuevo archivo llamado catalogo.php

Vamos al menú Ventana -> Vinculaciones. En el panel damos clic en el símbolo + y llenamos el cuadro de diálogo como se muestra:

Damos clic en Aceptar. Ahora vamos al menú Insertar -> Objetos de datos -> Datos dinámicos -> Tabla dinámica:

Guardamos la página y la ejecutamos en el navegador, y podemos ver los datos de la base. Ahora para ver la imagen en lugar de la ruta nos vamos al código y ubicamos el siguiente código:

En la parte que dice <td><?php echo $row_catalogo_imag['Imagen']; ?></td> le modificamos por lo siguiente:

<td><img src=”<?php echo $row_catalogo_imag['Imagen']; ?>” / ></td>

Actualizamos la página y vemos las imágenes: