App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

--- PHP y MySQL en App Inventor 2 --

Volver al índice del tutorial de PHP y MySQL

____________________________

360.- Imágenes en la base de datos MySQL. BLOB.

- Este tutorial se desarrolla en estas tres páginas, es conveniente estudiarlas en este orden:

360.- Imágenes BLOB en la base de datos MySQL. (I)

360B.- Imágenes BLOB en la base de datos MySQL. Otro método. (II)

365.- Imágenes BLOB en la base de datos MySQL. App inventor 2.

--------------------------------------------------------------------------------------------------------------------------

- Ahora se trata de guardar imágenes en la base de datos MySQL.

- Comento dos maneras:

________________________________________________
1.- Crear la base de datos y poner un campo llamado id (identificador del registro) y otro campo llamado imagenes (VARCHAR).

- Por otra parte en la web tendríamos una carpeta donde estuvieran las imágenes.

- En el campo imagenes de la base de datos, estarían las direcciones web de esas imágenes.

http://kio4.com/imagenes/foto1.jpg

http://kio4.com/imagenes/foto2.jpg

http://kio4.com/imagenes/foto3.jpg

- De esta manera las imágenes no estarían en la base de datos, sino que estarían las direcciones donde están las imágenes.

- La aplicación iría a la base de datos, tomaría la dirección de la imagen y presentaría esa imagen sabiendo su dirección.

- De esta manera la base de datos tendría menos tamaño y no tendría que contener las imágenes.

__________________________________________
2.- Las imágenes están dentro de la base de datos.

- Las imágenes se guardarían dentro de la base de dato, mediante un tipo llamado BLOB, según el tamaño requerido hay distintos tipos de BLOB.

- TINYBLOB: admite hasta 255 caracteres.
- BLOB: admite hasta 65535 caracteres.
- MEDIUMBLOB: admite hasta 16777215 caracteres.
- LONGBLOB: Permite hasta 4294967295 caracteres.

BLOB significa: Binary Large Object (Objeto Binario Grande), puede contener imágenes o cualquier tipo de datos binarios.

- Esta es la manera (BLOB) que vamos a ver en estos tutoriales...

______________________________________________
0.- BLOB, imágenes en la Base de datos MySQL.

- Para realizar nuestra aplicación, vamos a seguir los código de este tutorial:

https://manuais.iessanclemente.net/index.php/Almacenamiento_de_im%C3%A1genes_en_bases_de_datos_con_PHP

- En el tutorial de la página siguente (360B_mysql_blob_imagenes.htm) veremos otro ejemplo parecido, estudia el presente tutorial y luego pasa al siguiente que está muy relacionado.

______________________________________________
1.- Creación de la base de datos MySQL.

- La base de datos tendrá estas referencias, que utilizaremos más adelante para comunicarnos con ella por PHP.

// 1.- IDENTIFICACION nombre de la base, del usuario, clave y servidor
mysql_connect("mysql.hostinger.es", "u798509677_juan", "contraseña") or die(mysql_error()) ;
mysql_select_db("u798509677_comun") or die(mysql_error()) ;

______________________________________________
2.- Código HTM para subir la imagen a la base de datos.

- Es una página web con un formulario para subir las imágenes.

<form action="blob_subir.php" method="POST" enctype="multipart/form-data">
    <label for="imagen">Imagen:</label>
    <input type="file" name="imagen" id="imagen" />
    <input type="submit" name="subir" value="Subir"/>
</form>

- http://kio4.esy.es/blob_subir.htm

______________________________________________
3.- Código PHP para guardar el archivo de imagen recibido.

- Es una página web con un formulario para subir las imágenes.

- He puesto la información para conectarse con la base de datos.

- En este código el límite del tamaño del archivo es de 16384000, aunque el MEDIUMBLOB: admite hasta 16777215 caracteres.

- Fíjate que cuando sube una imagen, devuelve el id correspondiente, este id será necesario para luego ver ese archivo en una página web.

- Cada vez que suba un archivo consulta la base de datos.

<?php
// Conexión con la base de datos.

error_reporting (0);

mysql_connect("mysql.hostinger.es", "u798509677_juan", "contraseña") or die(mysql_error()) ;
mysql_select_db("u798509677_comun") or die(mysql_error()) ;

// Comprobamos si ha ocurrido un error.
if ( !isset($_FILES["imagen"]) || $_FILES["imagen"]["error"] > 0){
echo "Ha ocurrido un error.";
} else {
// Ahora vamos a verificar si el tipo de archivo es un tipo de imagen permitido.
// y que el tamano del archivo no exceda los 16MB
$permitidos = array("image/jpg", "image/jpeg", "image/gif", "image/png");
$limite_kb = 16384;

if (in_array($_FILES['imagen']['type'], $permitidos) && $_FILES['imagen']['size'] <= $limite_kb * 1024){

// Este es el archivo temporal:
$imagen_temporal = $_FILES['imagen']['tmp_name'];
// Este es el tipo de archivo:
$tipo = $_FILES['imagen']['type'];
// Leer el archivo temporal en binario.
$fp = fopen($imagen_temporal, 'r+b');
$data = fread($fp, filesize($imagen_temporal));
fclose($fp);

// Escapar los caracteres.
// $data = mysql_escape_string($data);
$data = mysql_real_escape_string($data);

$resultado = mysql_query("INSERT INTO dibujos (imagen, tipo_imagen) VALUES ('$data', '$tipo')") ;

if ($resultado){
echo "Archivo guardado en la base de datos, su id es ";
echo mysql_insert_id();
} else {
echo "Error al copiar el archivo.";
}
} else {
echo "Archivo no permitido, es un tipo de archivo prohibido o excede el tamano de $limite_kb Kilobytes.";
}
}
?>

- Subimos varias imágenes mediante: http://kio4.esy.es/blob_subir.htm

- He subido dos imágenes.

- Si consultamos la base de datos veremos que las imágenes están en la base de datos con el tipo BLOB.

- Además también se guarda el tipo de imagen.

______________________________________________
4.- Código PHP para visualizar el archivo de imagen guardado.

<?php
// Conexión con la base de datos.

error_reporting ( 0 );

mysql_connect("mysql.hostinger.es", "u798509677_juan", "contraseña") or die(mysql_error()) ;
mysql_select_db("u798509677_comun") or die(mysql_error()) ;

// Si la variable imagen no ha sido definida nos dará un advertencia.
$id = $_GET['id'];

if ($id > 0){
// Vamos a crear nuestra consulta SQL
$consulta = "SELECT imagen, tipo_imagen FROM dibujos WHERE id = $id";
// Con mysql_query la ejecutamos en nuestra base de datos indicada anteriormente
// de lo contrario mostraremos el error que ocacionó la consulta y detendremos la ejecución.
$resultado= @mysql_query($consulta) or die(mysql_error());

// Si el resultado fue exitoso
// obtendremos el dato que ha devuelto la base de datos
$datos = mysql_fetch_assoc($resultado);

//Ruta va a obtener un valor parecido a "imagenes/nombre_imagen.jpg" por ejemplo
$imagen = $datos['imagen'];
$tipo = $datos['tipo_imagen'];

// Ahora colocamos la cabeceras correcta según el tipo de imagen.
header("Content-type:". $tipo);

echo $imagen;
}

?>

______________________________________________
5.- Código HTM para ver la imagen.

<img src="blob_ver.php?id=1" />
<img src="blob_ver.php?id=2" />
<img src="blob_ver.php?id=3" />
<img src="blob_ver.php?id=4" />
<img src="blob_ver.php?id=5" />

- Hay que poner la página php para visualizar las imágenes y el id, indicando la imagen que se quiere ver.

- Es decir que en una página htm llamamos al blob_ver.php, poniendo además el id de la imagen que queremos ver.

- Aquí podemos ver las cinco imágenes identificadas como id= 1, 2, 3, 4 y 5 que enlazo en el archivo blob_ver.htm:

- http://kio4.esy.es/blob_ver.htm

- Si quisiéramos ver la imágenes individuales, las identificamos por medio de su id.

http://kio4.esy.es/blob_ver.php?id=1

http://kio4.esy.es/blob_ver.php?id=2

http://kio4.esy.es/blob_ver.php?id=3

http://kio4.esy.es/blob_ver.php?id=4

http://kio4.esy.es/blob_ver.php?id=5

______________________________________________
6.- Ver todas las imágenes guardadas.

- Subimos estos dos archivos y luego pulsamos en:

http://kio4.esy.es/blob2_listado.php

<?php
error_reporting (0);

mysql_connect("mysql.hostinger.es", "u798509677_juan", "contraseña") or die(mysql_error()) ;
mysql_select_db("u798509677_comun") or die(mysql_error()) ;

            
$sql = "SELECT id FROM dibujos ORDER BY id DESC"; 
$result = mysql_query($sql);
?>
<HTML>
<HEAD>
<TITLE>Listado de imagenes BLOB.</TITLE>
</HEAD>
<BODY>
<?php
while($row = mysql_fetch_array($result)) {
?>
<img src="blob2_ver_imagen.php?id=<?php echo $row["id"]; ?>" /><br/>
<?php 
}
mysql_close();
?>
</BODY>
</HTML>

<?php
error_reporting (0);

mysql_connect("mysql.hostinger.es", "u798509677_juan", "contraseña") or die(mysql_error()) ;
mysql_select_db("u798509677_comun") or die(mysql_error()) ;

if(isset($_GET['id'])) {
$sql = "SELECT imagen, tipo_imagen FROM dibujos WHERE id=" . $_GET['id'];
$result = mysql_query("$sql") or die("<b>Error:</b> Error al obtener la imagen.<br/>" . mysql_error());
$row = mysql_fetch_array($result);
header("Content-type: " . $row["tipo_imagen"]);
echo $row["imagen"];
}
mysql_close();
?>

______________________________________________
- Propuesta.

- Modifica el código para que no estén los datos de conexión en cada archivo PHP.

Puedes verlo al final del tutorial: 337_php_mysql_web_2.htm (2.- Seguridad)

_________________
_______________________________