Este Sistema Buscador de Gifs en PHP se comunica con el API de Giphy extrae los Gifs según el criterio de búsqueda y los muestra en pantalla, esta es una solución que de Giphy para que directamente puedas mostrar sus imágenes desde tu propio sitio.
Video Explicativo
Esta aplicación es plenamente gratuita y la puedes descargar y reutilizar libremente como las aplicaciones de mi apartado Gratis donde tengo más de 80 aplicaciones que te podrían servir.
Esta aplicación de Gifs consta principalmente de dos archivos que llevan toda la lógica, el archivo index.php y el archivo script.js. En adición el look and feel de la página se lleva con Pico CSS un framework minimalista CSS más ligero que Bootstrap.
Comunicación con Giphy
Para poder generar los Gifs es necesario comunicarte efectivamente con el API de Giphy, para esto debes acceder al siguiente enlace:
https://developers.giphy.com/docs/api/
Te debes dar de alta en Giphy y en el apartado API Explorer podrás generar tu Token, este Token tendrás que agregarlo en el archivo index.php en la línea 51 donde dice “tu_api_key”
Explicación de Archivos Sistema Buscador de Gifs en PHP
Por la sencillez de la aplicación no abarcaré una explicación tan exhaustiva del funcionamiento del software, sin embargo cada script está documentado completamente para entender el flujo de proceso de la aplicación.
Código del archivo index.php
GIFs de Giphy
Buscador de GIFs en Giphy
![GIF](" . $gif[)
";
}
} else {
echo "No se encontraron resultados. Intenta con otro término de búsqueda.
";
}
}
?>
Código del archivo script.js
// Obtener elementos
var modal = document.getElementById("gifModal");
var modalImg = document.getElementById("img01");
var downloadLink = document.getElementById("downloadBtn"); // Actualizar según el nuevo botón de descarga
var closeModal = document.getElementById("closeModal");
// Función para abrir el modal con el GIF seleccionado
function openModal(imgSrc, downloadSrc) {
modal.style.display = "block";
modalImg.src = imgSrc;
downloadLink.href = downloadSrc; // Aquí se establece la URL de descarga directa
}
// Cerrar el modal al hacer clic en (x)
closeModal.onclick = function() {
modal.style.display = "none";
}
// Cerrar el modal al hacer clic fuera de la imagen
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
}
Flujo del funcionamiento del Sistema Buscador de Gifs
Flujo del Backend (PHP)
- Inicio y Verificación de Búsqueda: Al cargar la página (
index.php), el script PHP inicial verifica si el usuario ha enviado una consulta de búsqueda a través del métodoGET. Esto se hace chequeando si el parámetrosearchexiste y no está vacío. - Formulario de Búsqueda: El usuario ingresa un término de búsqueda en el formulario y lo envía. El formulario utiliza el método
GET, lo que significa que la búsqueda se agrega a la URL como un parámetro de consulta (?search=termino). - Procesamiento de Búsqueda:
- Si se ha realizado una búsqueda, el script PHP realiza una llamada a la API de Giphy utilizando
curl, enviando el término de búsqueda. - La API responde con un conjunto de datos JSON que incluye información sobre los GIFs encontrados.
- Este JSON se decodifica y se procesa para mostrar cada GIF en la página. Para cada GIF, se genera un elemento HTML que incluye una imagen (thumbnail) y un evento
onclickque llama a la funciónopenModalcon la URL del GIF y su URL de descarga como argumentos.
- Si se ha realizado una búsqueda, el script PHP realiza una llamada a la API de Giphy utilizando
- Mostrar GIF Destacado: Si no se ha realizado ninguna búsqueda, se muestra un GIF destacado por defecto. Esta es una funcionalidad condicional que solo se activa si el usuario no ha enviado un término de búsqueda.
Flujo del Frontend (HTML y JavaScript)
- Estructura HTML: La página contiene un formulario de búsqueda, un contenedor para mostrar los GIFs buscados o un GIF destacado, y un modal que se usa para visualizar un GIF en tamaño completo y ofrecer un enlace de descarga.
- Interacción con JavaScript:
- Cuando un usuario hace clic en uno de los GIFs, la función
openModal(imgSrc, downloadSrc)se invoca gracias al eventoonclickasociado con cada imagen de GIF. Esta función recibe las URLs de la imagen seleccionada y de descarga, las asigna al modal, y luego muestra el modal. - El modal puede ser cerrado haciendo clic en el botón de cierre (
closeModal) o haciendo clic fuera del modal (gestionado por el eventowindow.onclick).
- Cuando un usuario hace clic en uno de los GIFs, la función
- Visualización y Descarga de GIFs:
- Dentro del modal, el usuario puede ver el GIF en un tamaño mayor y tiene la opción de descargar el GIF directamente haciendo clic en el enlace de descarga, el cual se actualiza dinámicamente con la URL de descarga del GIF seleccionado.
Este flujo de trabajo integra aspectos del desarrollo web tanto del lado del servidor como del cliente, utilizando PHP para el procesamiento del backend y HTML/JavaScript para la interactividad del frontend. La experiencia del usuario es dinámica y responde a las acciones del usuario, desde la búsqueda hasta la visualización y la descarga de GIFs.
Repositorio del Sistema Buscador de Gifs
Como siempre te recomiento te pegues una pasada por el blog, te garantizo que te gustará y cualquier duda quedo al pendiente, me puedes contactar a mi Whatsapp en el siguiente enlace:
https://configuroweb.com/WhatsappMessenger
Para desarrollos a medida me puedes contactar en el siguiente enlace de contacto
