Descargar Slider web usando PHP y MySQL

Versión
Descargar 1560
Tamaño del archivo 0.00 KB
Recuento de archivos 1
Fecha de creación 26 diciembre, 2018
Última actualización 26 diciembre, 2018

Descargar

Descripción

Descargar Slider web usando PHP y MySQL. Las pasarelas de imágenes (Slider Web) son espacios muy importantes para captar la atención de los visitantes de una determinada página web. Por lo tanto, para crear un slider se puede realizar de varias formas:

Algunas son solo imágenes que se desplazan en un determinado periodo de tiempo.
Otras en la izquierda imágenes y/o en la derecha título, descripción y un botón de acción.

Muchos de nosotros seguro ha visto miles de sliders o carruseles en las páginas existentes en internet, los cuales se utilizan para rotar elementos que la empresa quiere mostrar como prioridad para sus potenciales clientes. Los carruseles son muy usados en los sitios de comercio electrónico y que son usados para mostrar promociones u otro aviso.

Generalmente se encuentra en la página de inicio, para captar al cliente y aumenta la experiencia del usuario. Así que si estás pensando en implementar un carrusel en tu página web, aquí tenemos la solución.

Descargar Slider web usando PHP y MySQL

En el proyecto vamos a tener la siguiente estructura de archivos con la cual crearemos un slider carrusel con título y descripción al lado derecho usando herramientas externas como el Bootstrap y/o utilizando PHP y MySQL.

index.php
dbconfig.php
php_carrusel.sql.
Librería BootStrap

Creación de base de datos.

Primeramente tenemos que ejecutar la siguiente consulta en el gestor de MySQL llamado PHPMyAdmin para crear la tabla y poblar sus respectivos registros.

La información del slider será extraído de esta tabla para mostrar las imágenes, tirulos, descripción y el botón de acción.

CREATE TABLE `carrusel` (
  `id` int(11) NOT NULL,
  `nombre` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `imagen` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `titulo_lat` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `texto_lat` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `cor_boton` varchar(20) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `texto_boton` varchar(50) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `link_boton` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `orden` int(11) NOT NULL,
  `situacion_id` int(11) NOT NULL,
  `creado` datetime NOT NULL,
  `modificado` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Tabla Carrusel';

Contenido de la tabla en la base de datos

Básicamente son los registros que serán visibles dentro del slider como ser imágenes y textos.

INSERT INTO `carrusel` (`id`, `nombre`, `imagen`, `titulo_lat`, `texto_lat`, `cor_boton`, `texto_boton`, `link_boton`, `orden`, `situacion_id`, `creado`, `modificado`) VALUES
(1, 'Slide 1', 'imagen1.jpg', 'Titulo da primera imagen', 'Contenido da primera imagen', 'success', 'Comprar', '#', 1, 1, '2018-12-25 00:00:00', NULL),
(2, 'Slide 2', 'imagen2.jpg', 'Titulo da segunda imagen', 'Contenido da segunda imagen', 'danger', 'Reservar', '#', 2, 1, '2018-12-25 00:00:00', NULL),
(3, 'Slide 3', 'imagen3.jpg', 'Titulo da tercera imagen', 'Contenido da tercera imagen', 'info', 'Visualizar', '#', 3, 1, '2018-12-25 00:00:00', NULL),
(4, 'Slide 4', 'imagen4.jpg', 'Titulo da cuarta imagen', 'Contenido da cuarta imagen', 'warning', 'Detalles', '#', 4, 1, '2018-12-25 00:00:00', NULL);

Librerías externas Boostrap

En el fichero index.php, tenemos que incluir la librería Bootstrap y los archivos que nos harán falta para implementar nuestro slider carrusel. Sin embargo, estos ficheros tienes que ser declarados en la etiqueta "<head>" de nuestro index.php

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> -->

Contenido y creación del Carrusel Slider

Todo se gestiona desde el fichero index.php, crearemos el HTML de nuestro slider carrusel y también incluimos la librería BootStrap.

<div class="jumbotron">
        <div class="row featurette">
            <div class="col-md-6">					
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <?php
                        $qnt_slide = mysqli_num_rows($resultado_carrusel);
                        $cont_marc = 0;
                        while($cont_marc < $qnt_slide){
                            echo "<li id='valor-car' data-target='#myCarousel' data-slide-to='$cont_marc'></li>";
                            $cont_marc++;
                        }
                        ?>
                    </ol>
                    <div class="carousel-inner">
                        <?php
                        $cont_slide = 0;
                        while( $row_slide = mysqli_fetch_assoc($resultado_carrusel)){
                            $active = "";
                            if($cont_slide == 0){
                                $active = "active";
                            }
                            echo "<div class='carousel-item $active'>";
                            echo "<img class='d-block w-100' src='imagen/".$row_slide['id']."/".$row_slide['imagen']."' alt='".$row_slide['nombre']."'>";
                            echo "</div>";
                            $cont_slide++;
                        }
                        ?>
                    </div>
                    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previo</span>
                    </a>
                    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Siguiente</span>
                    </a>
                </div>
                
                
            </div>
            
            <div class="col-md-6">
                <?php
                $cont_contenido = 0;
                $resultado_carrusel = mysqli_query($conn, $result_carrusel);
                while($row_slide = mysqli_fetch_assoc($resultado_carrusel)){
                    if($cont_contenido == 0){
                        $ap_cont = "block";
                    }else{
                        $ap_cont = "none";
                    }
                    echo "<div class='imagen".$cont_contenido." contenido' style='display: $ap_cont;'>";
                    echo "<h3>".$row_slide['titulo_lat']."</h3>";
                    echo "<p>".$row_slide['texto_lat']."</p>";
                    echo "<a class='btn btn-".$row_slide['cor_boton']."' href='".$row_slide['link_boton']."' role='button'>".$row_slide['texto_boton']."</a>";
                    echo "</div>";
                    $cont_contenido++;
                }
                ?>
            </div>
        </div>
    </div>

Resultado final en el navegador

Cuando abrimos en fichero index.php en el navegador Mozilla u otro navegador el resultado será el siguiente.

CONCLUSIÓN DEL ARTÍCULO

Si tenemos en mente crear una página de comercio electrónico tenemos que implementar un carrusel de imágenes para llamar la atención de los potenciales clientes con los SLIDER para brindar la información de promociones, ofertas y descuentos ocasionales. Permitiendo con ello incrementar las ventas.

Su uso es muy recomendable y la implementación muy sencilla y dinámica.