Galería De Imágenes Dinámicas Usando PHP 7 Y MySQLi

Este tutorial ayuda a crear una galería de imágenes dinámica usando PHP y MySQL . La carga y lista de imágenes es una funcionalidad muy común para la aplicación web. Ya he compartido la funcionalidad de recorte de imágenes en el cuadro de modelo usando el tutorial PHP .

Estoy ampliando mi tutorial anterior y agregué la lista de imágenes y la funcionalidad de la galería.También agregué ver imagen en el lightbox2

Hay los siguientes archivos que participarán en este tutorial:

index.php- Este archivo se utiliza para mostrar todas las imágenes.

db_connect.php- Este archivo se utiliza para la conexión de la base de datos con MySQL.

Aquí, aprenderá a crear una galería de imágenes dinámica usando PHP y MySQL .

Crear Tablas De Base De Datos MySQL

También crearemos una tabla de base de datos MySQL galleryutilizando la siguiente consulta para almacenar información de imágenes de la galería.

1 2 3 4 5 6 7

CREATE TABLE `gallery` (   `id` int(11) NOT NULL,   `user_name` varchar(255) NOT NULL,   `image_title` varchar(255) NOT NULL,   `image_description` varchar(255) NOT NULL,   `image_name` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Conexión De Base De Datos Usando MySQL

Crearemos una gallerytabla en la testbase de datos. Creemos una conexión de base de datos con php usando mysqli . Abrir db_connect.phparchivo y agregar el siguiente código:

1 2 3 4 5 6 7 8

<!--?php $dbhost = 'localhost';   $dbuser = 'root';   $dbpass = "";   $conn = mysqli_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');   $dbname = 'test';   $connection = mysqli_select_db($conn, $dbname); ?-->

Debe reemplazar dbhost , dbuser , dbpass y dbname según su configuración de MySQL.

Cargar Imagen O Datos Ficticios

Estoy ampliando mi tutorial anterior, debe cargar la imagen usando la interfaz de usuario o insertar el registro manualmente usando el siguiente sql:

//insert record

INSERT INTO gallery (id, user_name, image_title, image_description, image_name) VALUES ('', 'parvez', 'test-image', 'test desc', 'test.jpg');

Paso 1: Se agregó el archivo css y js en la sección de encabezado del index.phparchivo.

1 2 3 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css">

Paso 2: se agregaron clases css en la sección principal del index.phparchivo -

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style> ul { padding-top: 25px; } ul li{   display: inline;   padding-left:5px; } .image-link {     display: inline-block;     padding: 4px;     margin: 0 0.5rem 1rem 0.5rem;     background-color: var(--bg-color);     line-height: 0;     border-radius: var(--border-radius-large); } </style>

Paso 3: se agregó el código html al index.phparchivo para mostrar la lista.

1 2 3 4 5 6 7 8 9 10 11 12

<ul> <!--?php $sql_query="SELECT id, image_title, image_description, image_name FROM gallery"; $resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn)); while($rows = mysqli_fetch_array($resultset) ) { ?-->   <li> <a class="image-link" href="http://localhost/image-gallery/uploads/&lt;?php echo $rows[" image_name"];="" ?="">" data-title="<!--?php echo $rows["image_title"]; ?-->" data-lightbox="<!--?php echo $rows["image_name"]; ?-->"&gt;<img src="http://localhost/image-gallery/uploads/&lt;?php echo $rows[" image_name"];="" ?="">" class="img-thumbnail" width="200" height="200"/&gt;</a> </li>   <!--?php } ?--> </ul>