Desarrollo web y Marketing Digital

Artículos
Inicio

Obtener Datos Api Rest-Tutorial Ejemplo Api Rest Json

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.

Estructura general de los datos

 
 

Archivos Js

 
 

Archivos Php que consultan funciones

 

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.

 
Index.php

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.

En zona del head cargamos nuestros archivos css y js
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Api Personalizada</title>

<meta name="description" content="Api Restaurantes">
<meta name="author" content="Jesús Claramonte">

<link href="css/bootstrap.min.css" rel="stylesheet"> //estilos
<link href="css/style.css" rel="stylesheet">//estilos
<script src="js/jquery.min.js"></script> //jquery
<script src="js/bootstrap.min.js"></script>//bootstrap
<script src="js/operaciones.js"></script>//operaciones

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>//jqueryui cargado de manera externa
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />//jquery uy css cargado de manera externa
</head>
Crearemos los botones bootstrap

Creamos los botones con sus llamadas a los modals,juntos a los div que contendrán los resultados de las funciones js del archivo operaciones.js

<!--Begin Row-->
<div class="row" style="margin-top:5%">
<!--BEGIN MD12-->
<div class="col-md-12">
<!--BEGIN center-->
<div align="center">
<button type="button" class="btn btn-primary btn-lg" onclick="InsertarRestaurantes();">Añadir</button>
<button type="button" class="btn btn-primary btn-lg" onclick="PaginacionUno()">Paginación</button>
<button type="button" class="btn btn-primary btn-lg" onclick="LoadRestaurantes();">Ver Todos</button>
<button type="button" class="btn btn-primary btn-lg" onclick="CrearDatos();">Crear Datos</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_eliminar">Borrar Todo</button>
<button type="button" class="btn btn-primary btn-lg" onclick="OcultarRestaurantes();">Ocultar Todo</button>
<button type="button" class="btn btn-primary btn-lg" onclick="EstadoApi();">Estado Api</button>
</div>
<!--END center-->
</div>
<!--END md12-->
</div>
<!--END row-->
<div class="row" style="margin-top:2%">
<!--BEGIN MD12-->
<div class="col-md-12">

<!--Being ver todos-->
<div id="ver_todos">
<!--begin ver_contenidos-->
<div id="ver_contenidos">

</div>
<!--end ver contenidos-->
</div>
<!--end ver_todos-->

<!--Begin vista_indidivual-->
<div id="vista_indidivual">
</div>
<!--End Vista_Individual-->

<!--Begin Crear Api-->
<div id="crear_api">
</div>
<!--End Crear APi-->

<!--Begin datos_borrados-->
<div id="datos_borrados">

</div>
<!--End datos_borrados -->

<!--begin Estado API-->
<div id="estado_api">
</div>
<!--End Estado APi-->

<!--begin Datos Vacios-->
<div id="datos_vacios">
</div>
<!--END DATOS VACIOS-->

<!--begin sin Datos-->
<div id="sin_datos">
</div>
<!--END sin datos-->

<!--begin editar uno-->
<div id="editar_uno">
</div>
<!-- end editar uno-->

<!--begin change update-->
<div id="change_update">

</div>
<!--end change update-->

<!--begin borrradouno-->
<div id="borradouno">

</div>
<!--end borrradouno-->

<!--begin crearnuevo-->
<div id="crearnuevo">

</div>
<!--end crearnuevo-->

<!--begin paginas-->
<div id="paginas">
</div>
<!--end paginas-->

</div>
<!--END md12-->
</div>
<!--END row-->
En este punto crearemos el modal eliminar para pasar los datos de borrado
<!--Begin modal_eliminar -->
<div class="modal fade" id="modal_eliminar" role="dialog">
<!-- Begin Modal-dialog-->
<div class="modal-dialog modal-lg">

<!-- Modal content-->
<div class="modal-content" align="center">

<!--Begin Modal Header-->
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>

</div>
<!--End Modal Header-->

<!--Begin Modal Body-->
<div class="modal-body">
<div align="center"> <h4 class="modal-title">Desea ud realmente borrar todos los datos?</h4></div>
<!--Begin Row-->
<div class="row">

<!--BEGIN md12-->
<div class="col-md-12">

<!--BEGIN ROW-->
<div class="row">
<div class="col-md-4">

<button type="button" class="btn btn-danger btn-lg" onclick="BorrarApi()" data-dismiss="modal">SI</button>

</div>
<div class="col-md-4">

</div>
<div class="col-md-4">

<button type="button" class="btn btn-primary btn-lg" data-dismiss="modal">No</button>

</div>

</div>
<!--end row-->

</div>
<!--End md12-->
</div>
<!--End Row-->

</div>
<!-- END Modal Body-->
</div>
<!-- End Modal Content-->

</div>
<!--END Modal-dialog-->
</div>
<!--END modal_eliminar-->

De manera general esta sería la parte del index con sus divs,modals en llamadas a js. 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.

Archivo Operaciones.js

En este archivo llamaremos a los php e iremos mostrando u ocultando el contenido de nuestros div dependiendo de lo que queramos hacer

 En el fichero se encuentran las siguientes funciones

-LoadRestaurantes,BorrarApi,OcultarRestaurantes,VerUno,CrearDatos,BorrarApi,EstadoApi,EditarUno,BorrarApi,

OcultarRestaurantes,EliminarUno,EditarIndividualChangeInsertarRestaurantes,InsertBd,busqueda,PaginacionUno, PaginacionRegistros.

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.

$("#ver_todos").show();$("#vista_indidivual").hide();$("#crear_api").hide();  $('#datos_borrados').hide();
$("#estado_api").hide();$("#ver_contenidos").show();$("#sin_datos").hide();$('#editar_uno').hide();
$("#change_update").hide(); $("#borradouno").hide();$("#crearnuevo").hide();$("#cajita").hide();
$("#paginas").hide();

Y ahora mediante ajax pasamos los datos que consideramos oportunos a un archivo php que trabajará con el fichero ApiRestaurante.php que no es más que una colección de funciones de donde sacamos los 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); } });
Llamadas a las vistas php y a la colección de funciones

Llegados a este punto en el que hemos recibido nuestros datos primeramente desde el index.php mostrando sus div mediante el fichero operaciones.js,que a su vez pasaba los datos correpondientes en el ejemplo anterior, a la vista VerTodos.php nos tocará trabajar con la colección de funciones almacenada en ApiRestaurante.php de la carpeta function

Se ha tratado de exponer en el tutorial una manera de trabajar basada en Spa,cargando todo el contenido en el index, y una estructura mvc. En el ejemplo no se ha realizado una estructura mvc propiamente dicha, con sus clases,namespaces y autoload, ya que para un ejemplo tan excesivamente sencillo era complicarse demasiado. El fichero Apirestaurante.php sería el controlador de la aplicación y mediante el cual vamos sacando los datos llamando desde la vistas de la carpeta Views.

Vistas de la aplicación y explicación del controlador

La aplicación está compuesta de la siguientes vistas, las cuáles con su descripción son muy intuitivas de las funciones que llevan a cabo

-1 AnadirTodos-Añade un restaurante a la base de datos

-2 BorrarTodos-Vacía la tabla de la base de datos que contiene los registros.

-3 BorrarUno-Borrar de manera individual un registro

-4 CrearTodos-Crea los Datos de la aplicación metiéndolos en la base de datos habiedo leido previamente el contenido desde una api json externa

-5 EditarUno-Muestra los datos individuales de un registro antes de que se vaya editar y cambiar su contenido

-6 EditarUnoChange-Actualiza los datos que se han editando anteriormente en la vista EditarUno

-7 EstadoApi-Comprueba si los datos de la api han sido pasados a la base de datos

-8 VerBusqueda-Permite usar el buscador para que se mostrar los resultados buscados

-9 VerPaginacionRegistros-Nos muestra las páginas de los registros para verlos de manera ordenada

-10 VerPaginacionUno-Muestra los primeros 50 valores de la aplicación

-11 VerTodos-Se ven todos los archivos sin paginar

-12 VerUno-Se ve el archivo que queramos de manera individual

Finalmente nos faltaría terminar entrando en el meollo del tutorial que sería explicar la colección de funciones que formatea la api para poder trabajar con los datos de la manera adecuada.

He usado en el ejemplo la siguiente página web del ayuntamiento de zaragoza donde nos dejan datos abiertos para poder trabajar con ellos y su correspondiente documentación en github para enteranos de los distintos formatos que tienen y como podemos manejarlos, en el ejemplo he cogido los datos de restaurantes.

Datos Abiertos Api Zaragoza Documentación en github APi Zaragoza

La ruta del archivo que he cogido es la que se ve en la parte inferior. Para este caso he cogido 500 restaurantes y empezando por el número 1

 $Archivo="http://www.zaragoza.es/sede/servicio/restaurante.jsonld?rows=500&start=1";

A continuación explico cada una de las funciones explicando que es lo que hace cada una.

Total Elements

Mediante file get contents le pasamos la ruta a la función decofica el json y cuenta en el vector cuantos elementos tiene.

 function Total_Elements($Path)
{
$Api_Zaragoza=file_get_contents($Path);$Yeison_Api_Zaragoza=json_decode($Api_Zaragoza,true);
/*Contamos cuantos elementos hay*/
$Numero_Total_Restaurantes=count($Yeison_Api_Zaragoza["result"]);
return $Numero_Total_Restaurantes;
}
OpenApi

Lee el fichero json ,lo decodifica pasándolo una matriz de 50 filas por 17 columnas, en este punto para ver bien como esta la arquitectura del json es muy recomendable en mi opinión para no volverse loco, usar var_dump porque los datos suelen estar metidos uno dentro hasta distintos niveles de profundidad, y de este manera podemos ver que es lo queremos utilizar y lo que no. Entonces he recorrido el json llenando la matriz de manera personalizada para poder tratar los datos de un modo más eficiente y personalizado, de esta manera la función ya nos devuelve la matriz para poder recorrerla a nuestro gusto.

function OpenApi($Path)
{
$Api_Zaragoza=file_get_contents($Path);
$Yeison_Api_Zaragoza=json_decode($Api_Zaragoza,true);
$Resultados_Api_Zaragoza=array();

/*Contamos cuantos elementos hay*/
$Total_Elementos=count($Yeison_Api_Zaragoza["result"]);

/*Definimos una matriz de 50 Filas por 17 Columnas*/
$Vector_Elementos=array([$Total_Elementos][17]);

/*Añadimos al vector lo valores que queremos para leerlo adecuadamente cuando queramos*/
for ($Desde=0;$Desde
Comprobar Tablas

En esta función comprobaremos que esté creada nuestra tabla restaurantes mediante el comando show tables y viendo si hay registros o no en la tabla una vez que esta haya sido creada.Al final del artículo dejaré el código para que sea descargado en este punto donde pone $Row["Tables_in_basededatos"] hay que cambiarlo donde pone basededatos por el nombre de la base de datos donde se encuentre la tabla restaurantes.Al igual que el archivo de configuración hay que ponerlo con los datos propios de nuestra conexión

function ComprobarTablas($Con)
{     
        $Resultado = mysqli_query($Con,"show tables");
		$Haber_tabla=0;

		while ($Row = $Resultado->fetch_assoc()):
		/*Tables_in_basededatos tiene que ponerse el nombre de la base de datos en basededatos*/
		$Haber_Restaurantes=trim($Row["Tables_in_basededatos"]);echo "
";
		$Comparar_Resultados=strcmp($Haber_Restaurantes,"restaurantes");

		if ($Comparar_Resultados==0):$Haber_Tabla=1;break;
		endif;

        endwhile;

		if ($Haber_Tabla==1):
        $Consulta_Total_Registros_Api_Restaurantes=mysqli_query($Con,"select count(*) as total from restaurantes");
        $Fila=$Consulta_Total_Registros_Api_Restaurantes->fetch_assoc();
		$Total_Registros_Restaurantes=$Fila["total"];
		endif;

	   if ($Total_Registros_Restaurantes>0):
	   $State_Table="si";
	   else:
       $State_Table="no";
       endif;

	return $State_Table; 
}
Meter Datos

Le pasamos el json que con su ruta correspondiente para crear los datos de la aplicación y que se vaya metiendo en la base de datos.

En un bucle contamos cuantos elementos hay del json. Una vez que lo hemos leído y decodificado concatenamos la consulta insert con sus correspondientes campos metiendo tantos insert como registros tenga el fichero.En este caso serían 500 filas por 17 columnas.

function MeterDatos($PathJson,$Con)
{

$Lectura_Api_Json=file_get_contents($PathJson);
$Api_Json_Zaragoza=json_decode($Lectura_Api_Json,true);

/*Contamos cuantos elementos hay*/
$Total_Elementos_Json=count($Api_Json_Zaragoza["result"]);

for ($Desde=0;$Desde
Función Ver Datos

Metemos en un vector todos los campos para poder visualizarlos posteriormente en la vista como queramos

function VerDatos($Con)
{ 
$Resultado_VerDatos=mysqli_query($Con,"select * from restaurantes");
$Vector_Resultados=array();
while ($Filas_Resultados=$Resultado_VerDatos->fetch_assoc()):
$Vector_Resultados[]=$Filas_Resultados;
endwhile;
return $Vector_Resultados;		
}
Borrado de datos

En esta función contamos si hay registros para saber si se ha vaciado la tabla de la base de datos

function BorrarDatos($Con)
{
$ComprobarDatosPrevios=mysqli_query($Con,"select count(*)as total from restaurantes");
$TotalRestaurantes=$ComprobarDatosPrevios->fetch_assoc();

if ($TotalRestaurantes["total"]>0):

		  $Ejecutar_BorradoDatos=mysqli_query($Con,"truncate table restaurantes");

		  if ($Ejecutar_BorradoDatos):
		  $borrado="si";
		  else:
		  $borrado="no";
		  endif;
else:
$borrado="vacio";		  
endif;	  

return $borrado;

}
Actualizar datos

Se actualizan los datos de la tabla pasando los valores a actualizar y diciéndole a la función cual es la tabla a usar devolviendo el estado de la actualización.

function ActualizaDatos($Con,$DatosPost,$Tabla)
{
$ComprobarDatosPrevios=mysqli_query($Con,"select count(*)as total from restaurantes");
$TotalRestaurantes=$ComprobarDatosPrevios->fetch_assoc();

if ($TotalRestaurantes["total"]>0):

$actualizacion=" UPDATE ";$actualizacion.=$Tabla;$actualizacion.=" ";
$totalcamposvector=count($DatosPost);

$contadorcampos=1;
 foreach ($DatosPost as $keys=>$Datos):

   if ($contadorcampos==1):
   $actualizacion.=" SET ";$actualizacion.=$keys;$actualizacion.="=";$actualizacion.="'";$actualizacion.=$Datos;$actualizacion.="',";

   else:

         if ($contadorcampos==$totalcamposvector):
        $actualizacion.=$keys;$actualizacion.="=";$actualizacion.="'";$actualizacion.=$Datos;$actualizacion.="'";
		 else:
		$actualizacion.=$keys;$actualizacion.="=";$actualizacion.="'";$actualizacion.=$Datos;$actualizacion.="',";
		 endif;
   endif;

   $contadorcampos++;

 endforeach;
 $actualizacion.=" WHERE `restaurantes`.`idRestaurante`=";$actualizacion.=$DatosPost["idRestaurante"];

 $EjecutarActualizacion=mysqli_query($Con,$actualizacion);

 if ($EjecutarActualizacion):
 $state_update="si";
 else:
 $state_update="no";
 endif;

else:
$state_update="no";   
endif;

return $state_update;

}
Función BorradoIndividual

Borrado de cada uno de los registros pasando un valor y comprobando si este se ha borrado bien

function BorradoIndividual($Con,$Registro)
{
$ConsultaBorradoIndividual="delete from restaurantes where idRestaurante=";
$ConsultaBorradoIndividual.=$Registro;$ConsultaBorradoIndividual.=";";

$Ejecutar_BorradoIndividual=mysqli_query($Con,$ConsultaBorradoIndividual);

  if ($Ejecutar_BorradoIndividual):
  $State_BorradoIndividual="si";
  else:
  $State_BorradoIndividual="no";
  endif;

return $State_BorradoIndividual;
}
Fumción InsertIndividual

En la siguiente función introducimos los datos mediante un array para que se metan dinámicamente

function InsertIndividual($Con,$ValoresPost,$Table)
{

$InsertarIndividual="INSERT INTO "; $InsertarIndividual.=$Table; $InsertarIndividual.="(";
$contadorcampos2=1;$totalcamposinsert=count($ValoresPost);

/*Formamos la primera parte del insert*/
  foreach ($ValoresPost as $keys=>$CamposInsert):
    if ($contadorcampos2==$totalcamposinsert): 
	$InsertarIndividual.=$keys;$InsertarIndividual.=")";
	else:
    $InsertarIndividual.=$keys;$InsertarIndividual.=","; 	 
    endif;
	$contadorcampos2++;

  endforeach;

    $InsertarIndividual.=" VALUES (";
    $contadorcampos3=1;

    foreach ($ValoresPost as $fields=>$ValoresInsert):
	   if ($contadorcampos3==$totalcamposinsert):
	   $InsertarIndividual.="'";$InsertarIndividual.=$ValoresInsert;$InsertarIndividual.="'";$InsertarIndividual.=");";
	   else:
	   $InsertarIndividual.="'";$InsertarIndividual.=$ValoresInsert;$InsertarIndividual.="'";$InsertarIndividual.=",";
       endif;

	$contadorcampos3++;
	endforeach;

	$Ejecutar_InsertarIndividual=mysqli_query($Con,$InsertarIndividual);

  if ($Ejecutar_InsertarIndividual):
  $State_InsertarIndividual="si";
  else:
  $State_InsertarIndividual="no";
  endif;

  return $State_InsertarIndividual;

}
Función BusquedaRestaurante

Realizamos una consulta estandar para que devuelva los resultados en un vector usando un like por el nombre de campo

function BusquedaRestaurante($Con,$NameRestaurant)
{

   $ConsultaRestaurant="SELECT * FROM `restaurantes` WHERE geonames_name like ";
   $ConsultaRestaurant.="'";$ConsultaRestaurant.="%";$ConsultaRestaurant.=$NameRestaurant;$ConsultaRestaurant.="%";$ConsultaRestaurant.="'";

   $ResultadosRestaurantes=mysqli_query($Con,$ConsultaRestaurant);

   $Vector_Restaurante=array();
   while ($Filas_Restaurante=$ResultadosRestaurantes->fetch_assoc()):
   $Vector_Restaurante[]=$Filas_Restaurante;
   endwhile;

	return $Vector_Restaurante;

}

Y con esto damos por finalizado el tutorial. Puedes descargarte el código haciendo Click aquí