Obtener Datos Api Rest

En el siguiente tutorial mostraré paso a paso de la manera sencilla más posible y como formar de empezar con API REST para obtener los datos de una api usando json,javascript,php y bootstrap.

Para ello en primer lugar lo que tendremos que hacer es ver la estructura de la aplicación, la cuál se caracteriza por cargar el resultado de las operaciones de todos los archivos en el index usando javascript en sus correspondientes divs o capas, mediante este javascript también pasaremos los datos a los correspondientes archivos php utilizando ajax,y una vez que hemos llegado a estos archivos llamaremos a la colección de funciones almacenada en el archivo de ApiRestaurante.php

A continuación a través de las siguientes imágenes veremos más en detalle como está estructurada la aplicación.

-Css->En estar carpeta guardaremos los estilos almacenados en archivos css.

-Font->Fuentes Que se cargan en la vista de los datos.

-Function->Conexión a base de datos y colección de funciones para trabajar con la tabla restaurantes.

-Js->Archivos Jquery ,Javascript y Bootstrap.

-Views->Archivos php que consultan al archivo ApiRestaurante.php de la function.

-Index.php->Cargamos en divs el contenido de js y php de la aplicación.

Instalando nuestra tabla restaurantes en la base de datos ,modificamos nuestros datos de conexión revisando si tenemos la tabla bien instalada en el código php y ya tendriamos instalada la aplicación, que nos coge los 500 primeros restaurantes de zaragoza.

Ahora que ya he explicado las generalidades del contenido programado voy a pasar a exponerlo de manera más detallada explicando las partes que considero más importantes en cada uno de los archivos que realizan los procesos de la aplicación.

Es el archivo donde van a ir a parar el resultado de los procesos hechos con js,bootstrap y php.En este apartado cabe destacar sobre todo la parte de los modals, los divs que cargaran los datos, para que se pueda trabajar con los css y js.

Instalando nuestra tabla restaurantes en la base de datos ,modificamos nuestros datos de conexión revisando si tenemos la tabla bien instalada en el código php y ya tendriamos instalada la aplicación, que nos coge los 500 primeros restaurantes de zaragoza.

Ahora que ya he explicado las generalidades del contenido programado voy a pasar a exponerlo de manera más detallada explicando las partes que considero más importantes en cada uno de los archivos que realizan los procesos de la aplicación.

Ahora pasaremos a explicar lo que hace cada uno de las vistas de manera resumida, explicaremos el archivo de funciones en sus apartados importantes, y la lógica general de las funciones que conforman el archivos operaciones js.

En el siguiente paso explicaré detalladamente la función LoadRestaurantes ya que la forma de actuar de cada una de las funciones es bastante similar.

Función Load Restaurantes

En esta zona lo que hacemos es mostrar u ocultar los divs del index.php según la acción que vayamos a realizar por ejemplo queremos se vean los restaurantes que vamos a cargar en el div con identificador ver_todos, para ello usamos la propiedad show para mostrar esta capa en concreto y ocultamos todas las demás para evitarnos que se vea contenido que no queremos ver.

En el siguiente punto lo importantes como pasamos por Ajax la información al correspondiente archivo php para que se use con las consultas a bases de datos

  var parametros = {"vercontenidos" : 'si'};

       $.ajax({
                data:  parametros, //datos que se envian a traves de ajax
                url:   './views/VerTodos.php', //archivo que recibe la peticion
                type:  'post', //método de envio
                beforeSend: function () {
                    $("#ver_contenidos").html('
La información se está procesando
');                    
                        
                },
                success:  function (response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
                       $("#ver_contenidos").html(response);
                       
                
          
                }
        });

Las principales funciones el archivo js son:

EstadoApi
Consulta el estado del api para ver si se tiene que crear la base de datos o no.

EditarUno
Permite Editar un Restaurante en concreto

BorrarApi
Borrar Api mediante los datos pasados al archivo php permite borrar todos los datos de la base de datos.

OcultarRestaurantes
Esta función oculta contenido que haya de otros divs para que la aplicación se muestre bien en cada momento

CrearApi Se crea los datos en la base de datos leyendo la url correspondiente de la api comprobado si están creado los datos sino finalmente se crea.

Todas estas tareas se realizan con el archivo operaciones.js y el script ApiRestaurante.php

Se puedes descargar los archivos en el siguiente enlace: