GUIA DE LABORATORIO DE

FLUTTER
“CREAR UN LOGIN DE ACCESO CON BASE DE DATOS MYSQL”

PROFESOR:
DR.PETRLIK AZABACHE, IVÁN CARLO

CURSO:
LENGUAJE DE PROGRAMACIÓN ORIENTADO A WEB

LIMA. PERÚ
PASO 1:
Creamos la base de datos.

PASO 2:
Creamos la tabla y sus atributos
PASO 3:
Creamos un proyecto en php.

PASO 4:
Creamos la siguiente estructura para el php.

PASO 5:
En la carpeta UTIL creamos un archivo php en donde irá la conexión a la base de datos.
PASO 6:
Hacemos la conexión a la base de datos.

Colocamos los datos

para realizar dicha
conexión.

PASO 7:
En la carpeta BEAN creamos un archivo loginBean y creamos los Getter y Setter.
PASO 8:
En el DAO creamos un archivo LoginDao.php

PASO 9:
En el controlador creamos un LoginControlador.
Aquí falto una prueba sin utilizar la aplicación móvil de como funciona el controlador :
Por Ejemplo, si tu ejecutar el controlador directamente
http://localhost/PROYECTO_FLUTTER_LOGIN/CONTROLADOR/ LoginControlador.php?usuario=ivan&clave=123344444

Aquí en el navegador, tiene que retornarte un formato JSON de la siguiente manera :

{‘id’,’1’,‘estado’,’1’}

{‘id’,’2’, ‘estado’,’0’}
PASO 10:
Creamos un nuevo proyecto en flutter de nombre login_mysql, y nos ubicamos en el
archivo main.

Limpiamos que código que sale

por defecto y retornamos un
Widget MaterialApp().

PASO 11:

Elimina la etiqueta roja debug

que sale por defecto.

Declaramos la ruta inicial.

Se irán colocando todas las

rutas que irán en nuestro
aplicativo.

PASO 12:
Creamos un nuevo archivo de nombre login_page.

PASO 13:
Creamos una clase LoginPage de tipo StatefulWitget y retornará un Scaffold.
PASO 14:
Creamos 2 controladores para el usuario y la clave.

PASO 15:
Colocamos un Container y un Column que recibirá una lista de Widgets en donde irán
los métodos para poder trabajar de una manera más ordenada.

El widget appBar sirve de

encabezado.

El padding separa los

espacios.

Invocar al método que

todavía no ha sido creado
PASO 16:
Mediante la propiedad controller llamamos al controlador que habíamos creado
anteriormente para el usuario.

La propiedad
hintText funciona
como el
placeholder.
PASO 17:

Realizamos el mismo procedimiento para la clave.

Esta propiedad nos

permitirá ocultar el
texto de la contraseña.
Y lo llamamos en el Widget Column.

PASO 18:
Ahora creamos el botón con un Widget llamado RaiseButton.

La propiedad onPressed
es obligatorio para
cualquier tipo de botón.

Texto que irá en el

botón.
Llamamos al método.

VALIDACIÓN DE CAMPOS
PASO 1:
Crearemos las variables con las que controlaremos el formulario para poder realizar la
validación.

Inicia false porque no se

realizará ninguna validación
al inicio.

PASO 2:
PASO 3:
En el método del usuario añadimos la propiedad “validator” el cual recibirá una
variable para controlar la cantidad de caracteres.

PASO 4:
El mismo proceso se realizará para la clave.
PASO 5:
Creamos un método en el cual recibiremos los valores de la validación de los input.

PASO 6:
Llamamos a la función en el método del botón.
 CONEXIÓN CON EL PHP
PASO 1:
En el archivo pubspec.yaml dentro de dependencias agregamos el http y guardamos.

No es necesario colocar la
versión ya que al no poner
nada por defecto nos
agrega a última versión.

PASO 2:
Importamos 2 librerías.

Ésta librería nos permitirá

usar el decodificador de
tipo JSON.

Nos permitirá realizar

diferentes peticiones.
PASO 3:
Ahora nos conectaremos en al php realizado.
10.0.2.2 ( localhost) utilizando el emulador nativo del Android Studio
10.0.2.3 ( localhost) utilizando el emulador del Genymotion
O también pueden utilizar el ip local de su ordenador (192.116.0.162)
Lo colocan dentro del archivo login_page.dart en la clase _LoginPagestate

Mediante un método post le Nos dirigiremos al

pasamos los parámetros LoginControlador del php.
necesarios.

PASO 4:
Parseamos el Json

Pasamos la cadena Json a la

función JsonDecode y luego
poder buscar los valores que
necesita en el Map<String,
dynamic>
PASO 5:
Llámanos al método en la función del validar.

PASO 6:
Creamos un nuevo archivo, cuando haya entrado correctamente.
PASO 7:
Esta página nos la llamará cuando haya iniciado sesión correctamente.

PASO 8:
Importamos la página principal.
PASO 9:
Nos redireccionamos a la página principal.
Ahora usted darán su aporte , en el sentido que al ingresar el usuario y la clave te
valide si estos son correctos , te muestra la ventana principal y si no te muestra un
mensaje en la misma ventana de login “Usuario y clave Incorrecto ”