Sistema Buscador de Gifs en PHP

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.

Table of Contents

Video Explicativo

¡Gifs Ilimitados a Tu Alcance! Crea un Buscador con PHP Hoy Mismo!

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

<!DOCTYPE html>
<html lang="es">
<!-- Establece el idioma del documento, importante para la accesibilidad y el SEO. -->

<head>
    <meta charset="UTF-8">
    <!-- Define la codificación de caracteres para el contenido. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Asegura una visualización adecuada y una experiencia de usuario óptima en dispositivos móviles. -->
    <title>GIFs de Giphy</title>
    <!-- Título de la página, se muestra en la pestaña del navegador. -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <!-- Incluye Pico CSS, un framework CSS minimalista, para estilos básicos. -->
    <link rel="stylesheet" href="style.css">
    <!-- Enlace a la hoja de estilos personalizada para estilos específicos de la página. -->
    <link rel="shortcut icon" href="./faviconconfiguroweb.png" type="image/x-icon">
    <!-- Favicon personalizado para la pestaña del navegador. -->
</head>

<body>
    <!-- Inicio del cuerpo del documento. -->

    <!-- Script PHP para verificar si se ha realizado una búsqueda. -->
    <?php $searchPerformed = isset($_GET['search']) && !empty($_GET['search']); ?>

    <main class="container">
        <!-- Contenedor principal para el contenido de la página. -->
        <h1>Buscador de GIFs en Giphy</h1>
        <!-- Título principal de la página. -->

        <!-- Formulario de búsqueda para enviar términos de búsqueda mediante GET. -->
        <form action="" method="GET">
            <input type="text" name="search" placeholder="Escribe algo divertido..." required>
            <!-- Campo de texto para la entrada del usuario. -->
            <button type="submit">Buscar</button>
            <!-- Botón para enviar el formulario. -->
        </form>

        <!-- Bloque condicional para mostrar un GIF destacado si no se ha realizado una búsqueda. -->
        <?php if (!$searchPerformed) : ?>
            <div class="gif-destacado">
                <!-- Contenedor para el GIF destacado. -->
                <a href="https://configuroweb.com/"><img src="configuroweb.gif" alt="GIF destacado"></a>
                <!-- Enlace y imagen del GIF destacado. -->
            </div>
        <?php endif; ?>

        <div class="gif-container">
            <?php
            if (isset($_GET['search'])) {
                $apiKey = 'tu_api_key_aquí';
                $search = urlencode($_GET['search']);
                $url = "https://api.giphy.com/v1/gifs/search?api_key=$apiKey&q=$search&limit=40";

                $ch = curl_init();
                curl_setopt($ch, CURLOPT_URL, $url);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                $output = curl_exec($ch);
                curl_close($ch);

                $data = json_decode($output, true);
                if (!empty($data['data'])) {
                    foreach ($data['data'] as $gif) {
                        $originalUrl = $gif['images']['original']['url'];
                        echo "<div class='gif' onclick='openModal(\"" . $gif['images']['fixed_height']['url'] . "\", \"" . $originalUrl . "\")'><img src='" . $gif['images']['fixed_height']['url'] . "' alt='GIF'></div>";
                    }
                } else {
                    echo "<p>No se encontraron resultados. Intenta con otro término de búsqueda.</p>";
                }
            }
            ?>
        </div>

    </main>

    <!-- Modal para visualizar el GIF en detalle. -->
    <div id="gifModal" class="modal">
        <span id="closeModal" class="close">&times;</span>
        <!-- Botón para cerrar el modal. -->
        <img class="modal-content" id="img01">
        <!-- Contenido de imagen del modal. -->
        <div id="modalInfo">
            <!-- Información adicional y enlace de descarga en el modal. -->
            ...
        </div>
    </div>

    <script src="script.js"></script>
    <!-- Enlace al archivo JavaScript para funcionalidades interactivas. -->
</body>

</html>

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étodo GET. Esto se hace chequeando si el parámetro search existe 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 onclick que llama a la función openModal con la URL del GIF y su URL de descarga como argumentos.
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 evento onclick asociado 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 evento window.onclick).
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

Recent commits:

Se crea README.md, GitHub
se sube portada, GitHub
primera versión funcional Sistema Buscador de Gifs en PHP, Mauricio