|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

B4A en español - Juan Antonio Villalpando
(BASIC4Android)

-- Tutorial de B4A --

Volver al índice del tutorial

____________________________

30C.- MySQL con imágenes.

- Tutoriales. MySQL con imágenes.

- Presentación.

Vamos a ver varias formas de trabajar con imágenes en base de datos. Voy a comentar varios métodos.
1.- Las imágenes se encuentran en un servidor web y la base de datos solo contiene el nombre de los archivos existentes.
2.- Convertimos la imagen a String. Subimos el String a MySQL. Bajamos el String. Convertimos el String en imagen.
3.- Insertamos en la base de datos imágenes mediante los tipos BLOB.

NOTA: Para estas explicaciones he utilizado el hosting gratuito 000webhost.com, en mi caso con el dominio:

http://elandroide.webatu.com/

______________________

1.- La imágenes se encuentran en una carpeta de un servidor web y la base de datos solo contiene el nombre de los archivos existentes..

Accederíamos a un servidor web mediante un dominio, por ejemplo: http://android_de_juan.com
En un directorio del hosting al que se dirige ese dominio tenemos una serie de imágenes, por ejemplo,
directorio: imagenes
archivos: fresa.gif, limon.gif y pera.gif

Bajar los dibujos de fresa, limon y pera para realizar las pruebas: dibujos de las frutas

Podríamos acceder a esas imágenes de esta manera...

http://elandroide.webatu.com/imagenes/fresa.gif
http://elandroide.webatu.com/imagenes/limon.gif
http://elandroide.webatu.com/imagenes/pera.gif

NOTA: si solo queremos bajar imágenes, en vez de utilizar este procedimiento de Base de datos, podríamos bajarlas directamente mediante el módulo HttpUtils2, consulta el programa ImageDownloader del tutorial de B4A.
Sin embargo aquí vamos a utilizar Base de datos para localizar la imagen y luego mediante HttpUtils2 cargarlas en el programa. Hay que tener en cuenta que esto es un ejercicio de aprendizaje.

______________________
- Empezamos.

Supongamos que tenemos una base de datos llamada "graficos" y dentro de ella una tabla llamada "dibujos" con estos campos:

ID
nombre
comentario
varchar (3) varchar(12) varchar(200)
- Puede contener hasta 1000 dibujos.
- Normalmente suele ser de tipo INT
- Se puede prescindir.
- Aquí estarían los nombres de los dibujos.
- El número máximo de caracteres del nombre completo lo he puesto de 12.
- Aquí un comentario para cada dibujo.
- Se puede prescindir.

Por ejemplo:

ID
nombre
comentario
1 fresa.gif Esto es una bonita fresa.
2 limon.gif Limón agrio.
3
pera.gif Pera dulce.

Fíjate que en el campo nombre está solamente el nombre del dibujo con su extensión: fresa.gif

Ahora realizaríamos el mismo procedimiento que hemos estudiado en el tutorial de MySQL visto anteriormente.

Diseño y código

Mediante el Designer creamos un layout que le llamamos layout

 

Situamos dos Botones y tres ImageView como indico en la imagen.

 

Los Label de datos se crean en el código. Podríamos haber creado todos los Views en el código y así no tendríamos necesitar de crear el Layout.

Debemos marcar las librerías:

HTTP, HttpUtils2, JSON

Código del Basic4Android
Sub Process_Globals

' Juan Antonio Villalpando
' juana1991@yahoo.com 

Dim hc As HttpClient
Dim tarea1, n As Int
tarea1 = 1    ' Es la tarea 1
End Sub

Sub Globals
    ' Crearemos 9 etiquetas. Debemos declarar 4 x 4
    Dim Labels(4, 4) As Label
    Dim numero_label As Int
    numero_label = 0

    Dim ImageView1, ImageView2, ImageView3 As ImageView
    Dim lista As List
End Sub

Sub Activity_Create(FirstTime As Boolean)
If FirstTime Then
hc.Initialize("hc")
End If
' Creamos mediante código 9 etiquetas en grupos de 3
 Dim ancho, alto As Int
    ancho = 80dip
    alto = 60dip
    
     For y = 1 To 3
        For x = 1 To 3
            Dim b As Label
            numero_label = numero_label + 1
            b.Initialize("Label") 
            b.TextSize = 14
            b.Text = numero_label
            b.Tag = numero_label
            ' El -80 es para que salga la primera columna más a la izquierda.
            Activity.AddView(b, -80 + x * (ancho + 10dip), y * (alto + 10dip), ancho, alto)
            Labels(x, y) = b        
        
    Next
      Next
Activity.LoadLayout("layout")
        
End Sub

Sub Buscar_dibujo
ProgressDialogShow("Buscando dibujos.")

Dim req As HttpRequest
Dim Query As String

Query="SELECT * FROM grafico" ' Where ID=" & n
' req.InitializePost2("http://192.168.1.3/imagenes_web.php", Query.GetBytes("UTF8"))
req.InitializePost2("http://elandroide.webatu.com/imagenes_web.php", Query.GetBytes("UTF8"))
hc.Execute(req, tarea1) '''''''' En ResponseSuccess hará el Case de tarea1

End Sub

' Esta es la Respuesta de la orden hc.Execute
Sub hc_ResponseSuccess (Response As HttpResponse, tarea As Int)
Dim res As String
res = Response.GetString("UTF8")
Log("Respuesta del servidor: " & res)
Dim parser As JSONParser
parser.Initialize(res)

Select tarea

' ************* Tarea1 *****************
Case tarea1
' Ver todas la información de la Base de datos.


lista.Initialize
lista = parser.NextArray

Log(lista)
Dim m As Map
For n = 1 To 3
m = lista.Get(n-1)

Labels(1,n).Text= m.Get("ID")          ' 1
Labels(2,n).Text= m.Get("nombre")      ' fresa.gif
Labels(3,n).Text= m.Get("comentario")  ' Esto es fresa
 Next
ProgressDialogHide
End Select

Response.Release
End Sub


' Error en la conexión con la Base de datos.
Sub hc_ResponseError (Response As HttpResponse, Reason As String, StatusCode As Int, tarea As Int)
Log("Error: " & Reason & ", StatusCode: " & StatusCode)
If Response <> Null Then
Log(Response.GetString("UTF8"))
Response.Release
End If
ProgressDialogHide
End Sub

Sub Button1_Click
' Muestra toda la información de la base de datos
    Buscar_dibujo
End Sub

Sub Button2_Click
' Situa los dibujos en los ImageView. Utiliza el módulo de servicio ImageDownloader
' para bajar las imágenes de Internet 
Dim m As Map
    Dim links As Map
    links.Initialize
    m = lista.Get(0)
    links.Put(ImageView1, "http://elandroide.webatu.com/imagenes/" & m.Get("nombre"))
    m = lista.Get(1)
    links.Put(ImageView2, "http://elandroide.webatu.com/imagenes/" & m.Get("nombre"))
    m = lista.Get(2)
    links.Put(ImageView3, "http://elandroide.webatu.com/imagenes/" & m.Get("nombre"))
    CallSubDelayed2(ImageDownloader, "Download", links)
End Sub

Además del código anterior debemos añadir un módulo de servicio (Project / Add New Module / Service module)
llamado
ImageDownloader

ImageDownloader lo podemos encontrar en los tutoriales de B4A.

- El archivo imagenes_web.php es el mismo que hemos visto en anteriores ocasiones para obtener datos en tipo JSON desde la base de datos...

imagenes_web.php        
// De los tutoriales de b4a

// Adaptado a local por Juan Antonio Villalpando
// juana1991@yahoo.com 

<?php

// $databasehost = "localhost";
// $databasename = "android";
// $databaseusername ="root";
// $databasepassword = "1234";

 $databasehost = "mysql12.000webhost.com";
 $databasename = "9048122_imagen";
 $databaseusername ="9048122_imagen";
 $databasepassword = "contraseña";


$con = mysql_connect($databasehost,$databaseusername,$databasepassword) or die(mysql_error());
mysql_set_charset("utf8"); mysql_select_db($databasename) or die(mysql_error()); $query = file_get_contents("php://input"); $sth = mysql_query($query); if (mysql_errno()) { header("HTTP/1.1 500 Internal Server Error"); echo $query.'\n'; echo mysql_error(); } else { $rows = array(); while($r = mysql_fetch_assoc($sth)) { $rows[] = $r; } print json_encode($rows); } ?>

 

En el tutorial de WebView (apartado 4) también vimos cómo bajar archivos de Internet.

______________________

2.- Convertimos la imagen a String. Subimos el String a MySQL. Bajamos el String. Convertimos el String en imagen.

 

NOTA: un String es una cadena de caracteres, por ejemplo "AASWEEERFFDCVDDFGVVV", utilizo indistintamente las expresiones String y Cadena.

- Proceso.

Subir

- Tomamos un archivo de imagen, por ejemplo fresa.gif.
- Convertimos la Imagen en String base64


cadena = codifica.EncodeBase64(Buffer)
- Subimos esa imagen_convertida en string a MySQL mediante los métodos visto en el tutorial de MySQL (INSERT)
---------------------------------------------------------------------------------------------
Bajar

- Con los métodos vistos bajamos los registros de MySQL. La imagen viene en String
- Convertimos el String en Imagen.

Buffer.InitializeFromBytesArray(codifica.DecodeBase64(cTmp),0,8000)
- El archivo obtenido lo copiamos en la SDCard con el nombre de freson.gif
- Cargamos un ImageView con la imagen obtenida.

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

Vamos a cargar un archivo en la tarjeta SdCard de nuestro emulador Android.
La SdCard se reconoce en el código mediante DirRootExternal
En LINUX sería el directorio /mnt/sdcard

Sería conveniente que repasaras el tutorial del LINUX del Android para conocer cómo podemos entrar en ese directorio desde los comandos de LINUX.

Esta es una forma de copiar el archivo fresa.gif desde el ordenador a la SdCard del emulador.
C:\Users\juan>adb -e push "C:\imagenes\fresa.gif" "/mnt/sdcard"

Para borrarlo

C:\Users\juan>adb -e shell rm -r /mnt/sdcard/fresa.gif


Nosotros vamos a introducir el archivo fresa.gif desde el código de Basic4Android. Para ello vamos a utilizar dos carpetas:

- Files que se encuentra en la carpeta donde está el código que estamos realizando.
Hay que tener en cuenta que la carpeta Files en "Tiempo de diseño" es de lectura y escritura. Pero en "Tiempo de ejecución" solo es de lectura. Es decir, no podemos cambiar ni guardar información en esa carpeta durante la ejecución del programa.
La carpeta Files se reconoce en el código como DirAssets

- DirRootExternal es la tarjeta SdCard, esta sí es de lectura y escritura en "Tiempo de ejecución", pero no podemos acceder a ella directamente desde el Explorador de Windows. En este caso habría que utilizar el adb como hemos visto anteriormente.

En resumidas cuentas, vamos a copiar "manualmente" el archivo fresa.gif en la carpeta Files y mediante el código lo pasaremos a la SdCard, que es DirRootExternal (no nos hará falta hacerlo con los comandos de LINUX).

______________________
- Base de datos

Primero vamos a preparar una base de datos llamada imagen y dentro de ella una tabla llamada dibujos con la siguiente estructura:

Comentarios del código en los botones.

Button1_Click

Toma el archivo fresa.gif y lo convierte en cadena de caracteres.

OutputStream1.InitializeToBytesArray(8000)
' 8000 es el tamaño de un buffer

cadena = codifica.EncodeBase64(Buffer)
Muestra esa cadena en el Label1.

R0lGODlhXgBfAPcAAABjKQBzMQB7MQC.........

 

 

En el dibujo de la derecha se ve como aparece en el Label1 la cadena de caracteres que representa al archivo fresa.gif.

He puesto que el Label1 tenga un tamaño de texto pequeño para poder visualizar un gran número de caracteres, aunque son bastantes más que los que aparecen.

Button2_Click

Inserta la cadena (la imagen) en la base de datos.
El código vuelve al Select subir, aunque en subir no es necesario hacer nada más.
hc.Execute(req, subir)


Así se guarda la cadena que representa la imagen en la base de datos.

Button3_Click

Va al servidor de MySQL y busca el registro cuyo ID=1

Ejecuta el Select bajar

Obtiene la respuesta:
'res = [{"ID":"1","nombre":"R0lGODlhXgBfAPcAAABjKQBzMQB7MQC...", "comentario":"Esto es fresa"}]
Mediante la librería JSON convierte(parser) esa información a Lista y Mapa.

- Obtiene la cadena que está en "nombre".
- Convierte la cadena a código de imagen:

Buffer.InitializeFromBytesArray(codifica.DecodeBase64(cTmp),0,8000)

- Crea en la SdCard un archivo llamado freson.gif

Introduce el archivo freson.gif en el ImageView1 para ser visto.

________________________
- Código y Designer.

Designer - Layout

 


Librerías necesarias:
HTTP, JSON y StringUtils

Mediante el Designer creamos la pantalla que muestro en el dibujo de la izquierda.

 

Insertamos un Label: Label1 de gran tamaño y lo configuramos para que el tamaño del texto sea pequeño

Tres Buttons y un ImageView

Guardamos el Layout con el nombre: layout


 

Código del Basic4Android
Sub Process_Globals
    Dim hc As HttpClient
    Dim subir, bajar As Int
    subir = 1    ' Es la tarea 1
    bajar = 2 ' Es la tarea 2

' Juan Antonio Villalpando
' juana1991@yahoo.com

' octubre-13
End Sub

Sub Globals
    
    If File.Exists(File.DirRootExternal,"fresa.gif") = False Then
    ' Hemos guardado fresa.gif en la carpeta Files.
    ' Ahora lo copiamos en la SDCard.
        File.Copy(File.DirAssets,"fresa.gif",File.DirRootExternal,"fresa.gif")
    End If
    
    Dim cadena As String ' Esto será la imagen convertida a String
    Dim Label1 As Label
    Dim ImageView1 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    If FirstTime Then
    hc.Initialize("hc")
    End If
    Activity.LoadLayout("layout")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

' Esta es la Respuesta de la orden hc.Execute
Sub hc_ResponseSuccess (Response As HttpResponse, tarea As Int)

Select tarea

Case subir
' Para subir no hace falta poner aqui ningún código
' ya que sube directamente al pulsar el botón 2 y no envía respuesta.
' res = Response.GetString("UTF8")
' Log("Respuesta del servidor: " & res)

Case bajar
' Obtiene de la base de datos la cadena de caracteres que forma la imagen.
Dim res As String
res = Response.GetString("UTF8")
Dim parser As JSONParser
parser.Initialize(res)

        Log("Respuesta del servidor: " & res)
        'res =  [{"ID":"1","nombre":"ARJIIIOJKNDKUIVNN......", "comentario":"Esto es fresa"}]
        ' El Log solo muestra 4000 caracteres.

'''''''''''''''''''''''''''''''''''''''''''
' Convierte la cadena a Imagen
        Dim l As List
        l = parser.NextArray
        If l.Size = 0 Then
        Label1.Text = "N/A"
        Else
            Dim codifica As StringUtils 
            Dim cTmp As String  
            Dim out As OutputStream

            Dim m As Map
            Dim Buffer  As InputStream 
            m = l.get(0)
            cTmp = m.Get("nombre")
            Label1.Text = cTmp
            Buffer.InitializeFromBytesArray(codifica.DecodeBase64(cTmp),0,8000)  

            out = File.OpenOutput(File.DirRootExternal,"freson.gif",False)
            File.Copy2(Buffer,out)
            out.close  
'   Situa la imagen en el ImageView1   
            ImageView1.Bitmap=LoadBitmap(File.DirRootExternal,"freson.gif")
        End If

End Select
ProgressDialogHide
End Sub

' Error en la conexión con la Base de datos.
Sub hc_ResponseError (Response As HttpResponse, Reason As String, StatusCode As Int, tarea As Int)
Log("Error: " & Reason & ", StatusCode: " & StatusCode)
If Response <> Null Then
Log(Response.GetString("UTF8"))
Response.Release
End If
ProgressDialogHide
End Sub

Sub Button1_Click ' CONVERTIR
' Convierte la imagen a cadena de caracteres (string.
    Dim codifica As StringUtils 
    Dim InputStream1 As InputStream
    InputStream1 = File.OpenInput( File.DirRootExternal, "fresa.gif")
    Dim OutputStream1 As OutputStream
    OutputStream1.InitializeToBytesArray(8000)
    File.Copy2(InputStream1, OutputStream1)
    Dim Buffer()  As Byte
    Buffer = OutputStream1.ToBytesArray
    ' Convierte la imagen a String (cadena de caracteres.
    cadena = codifica.EncodeBase64(Buffer)    
    Label1.text = cadena
End Sub

Sub Button2_Click ' SUBIR
' Sube la cadena al servidor MySQL.
Dim req As HttpRequest
Dim Query As String

Query="INSERT INTO dibujos(ID,nombre,comentario) VALUES(1,'" & cadena & "','Esto es fresa')"
req.InitializePost2("http://elandroide.webatu.com/imagenes.php", Query.GetBytes("UTF8"))
hc.Execute(req, subir) '''''''' En ResponseSuccess hará el Case de subir
End Sub

Sub Button3_Click ' BAJAR
' Baja la cadena del servidor MySQL.
' La convierte la cadena de caracteres en Imagen.
' La sitúa la imagen en ImageView1

ProgressDialogShow("Buscando lista de imagenes.")

Dim req As HttpRequest
Dim Query As String
Query="SELECT ID,nombre,comentario FROM dibujos WHERE ID LIKE '1'"
req.InitializePost2("http://elandroide.webatu.com/imagenes.php", Query.GetBytes("UTF8"))

ProgressDialogHide
hc.Execute(req, bajar) '''''''' En ResponseSuccess hará el Case de bajar

End Sub

Ha sido probado en un servidor local con WAMP y en el servidor hosting gratuito de 000webhost.com

imagenes.php        (Copiar este archivo en C:\wamp\www o en el servidor de Internet)
// De los tutoriales de b4a

// Adaptado a local por Juan Antonio Villalpando
// juana1991@yahoo.com 

<?php

// $databasehost = "localhost";
// $databasename = "android";
// $databaseusername ="root";
// $databasepassword = "1234";

 $databasehost = "mysql12.000webhost.com";
 $databasename = "9048122_imagen";
 $databaseusername ="9048122_imagen";
 $databasepassword = "contraseña";


$con = mysql_connect($databasehost,$databaseusername,$databasepassword) or die(mysql_error());
mysql_set_charset("utf8"); mysql_select_db($databasename) or die(mysql_error()); $query = file_get_contents("php://input"); $sth = mysql_query($query); if (mysql_errno()) { header("HTTP/1.1 500 Internal Server Error"); echo $query.'\n'; echo mysql_error(); } else { $rows = array(); while($r = mysql_fetch_assoc($sth)) { $rows[] = $r; } print json_encode($rows); } ?>

______________________

3.- Insertamos en la base de datos imágenes mediante los tipos BLOB.

Las imágenes dentro de la base de datos.

- Bien, podemos tener una carpeta en Internet con las imágenes y en la base de datos enlaces a esas imágenes, pero... ¿podríamos meter en la base de datos las imágenes?, es decir que las imágenes estuvieran dentro de la base de datos.

- Pues sí, cuando creamos o modificamos la base de datos hay una opción para poner el tipo de dato VARCHAR, INT,.. hay varias llamadas BLOB (BLOB, MEDIUMBLOB y LONGBLOB), si establecemos ese Tipo, podemos introducir la imagen en la base de datos.

- Es distinto introducir la imagen en la base de datos en tipo BLOB, que convertir la imagen a String y luego introducir ese String en la base, como hemos visto en el apartado anterior.

Por ejemplo si convertimos una imagen en String podemos obtener esta cadena:

R0lGODlhXgBfAPcAAABjKQBzMQB7MQC.........

En cambio si cargamos esa imagen mediante tipo BLOB en la base de datos, se obtendrá esto:

0x4749483839615e005f00f....

 

La información de la imagen se guarda como una serie de caracteres.

Si queremos cargar una imagen BLOB en la base de datos, llamaríamos a un archivo .php, éste contendrá una línea que convertirá la imagen a BLOB y la subirá a la base de datos.

Si queremos recuperar una imagen BLOB de la base de datos, llamaríamos a un archivo .php, éste contendrá una línea que convertirá el BLOB a imagen.

En este tutorial podemos estudiar cómo introducen un obtienen una imagen de tipo BLOB en una base de datos utilizando .php.

- Empezamos

Partimos de que estoy utilizando un hosting gratuito 000webhost.com y tengo el subdominio http://elandroide.webatu.com

En ese hosting tengo la base de datos a9048122_imagen.

Voy a crear en esa Base una tabla llamada imagenes, pero esta vez la voy a crear importando el código de creación.
Creo en mi ordenador un archivo llamñado tabla_imagenes.sql con este contenido...

tabla_imagenes.sql
CREATE TABLE imagenes (
id INT NOT NULL auto_increment,
imagen LONGBLOB,
tipo VARCHAR(255),
PRIMARY KEY (id)
);

Vamos a la base de datos a9048122_imagen e Importamos el archivo tabla_imagenes.sql que tenemos en nuestro ordenador.
Ponemos los caracteres de tipo latin1.

Ya hemos creado en nuestra base de datos a9048122_imagen la tabla imagenes.

Ahora vamos a Insertar tres dibujos en esa tabla, aquí están...

Ya tenemos las tres imágenes subidas de tipo BLOB. Fíjate que en tipo de imagen he puesto image/gif.

Ahora se trata de captarlas mediante un archivo .PHP y descodificarlas para poder interpretarlas como imágenes:

base64_decode($datos['imagen']);

________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información