CordovaIONICJSONPHPTypescript

CRUD con IONIC + PHP + Mysql

Publicado el



En este tutorial, vamos a migrar lo que realizamos en el tutorial anterior:  Angular + Mysql + PHP, a una app para android, para lo cual se realizara bajo una plataforma híbrida, mediante IONIC.

  1. INSTALACIÓN DEL IONIC
    Para instalar IONIC debemos tener instalado NODE, luego escribimos:
    npm install -g ionicCualquier error podemos ingresar a la web de IONIC
    SITIO OFICIAL
  2. CREACION DEL PROYECTO
    Para crear el proyecto, en este caso vamos a utilizar un proyecto en blanco:
    ionic start micrudtutoapp blank
  3. BASE DE DATOS
    Como vamos a migrar el tutorial anterios, la base de datos sera la misma:
  4. CODIGO PHP

  5. PARTE IONIC
    Después de crear el proyecto, ingresamos a la carpeta creado cd micrudtutoapp, ahora vamos a generar la una pagina mas ionic generate page agregar --no-module , luego vamos a modificar nuestro archivo app.module.ts de la siguiente manera:Estructura IONIC
    Ahora nos iremos a nuestra pagina donde realizaremos el listado de los productos, en este caso en el home.ts el cual añadiremos las siguientes lineas:

    En la linea #5 importamos nuestro HttpClient para poder acceder a nuestro servicio PHP, en las lineas sombreadas siguientes, lo que hacemos es consumir a traves del metodo .get de nuestro http, para lo cual solo necesitamos ingresar la URL de nuestro archivo productos.php, lo cual alojaremos en nuestro servidor, (en este caso esta alojado localmente).
  6. FRONTEND
    Lo unico que nos falta es mostrar nuestra información en nuestra vista, para eso ingresaremos a nuestro archivo home.componen.html, para lo cual ingresaremos los siguientes codigos:

    En el codigo anterior solo recorremos nuestra variable listado con un *ngFor y mostramos con la linea siguiente.
    Si han seguido todos los pasos, el resultado del código anterior debería resultar de la siguiente manera:
    Resultado del Codigo
  7. Repositorio: El código anterior y el proceso de registro, se encuentra en el siguiente repositorio: Repositorio

Deja un comentario