Create dynamic bootstrap 4 carousel using php and mysqli

tejas deepak talkar December 30, 2020

In this tutorial we are learning about dynamic bootstrap 4 carousel using php and mysqli . First we learn about adding images in the database using HTML and php, then after we show the images in the frontend page.

  1. Create folder name  ‘upload’ in ‘htdocs’ folder.

  2. Create a ‘BIKE’ folder for images uploading.

  3. Create a database name ‘biker’.

  4. In the database create table ‘bike_img’.

  5. In this table we are creating 2 rows. 

  6. The first is ‘id’ type ‘int’ length ‘11’ and makes ‘id’ AUTO_INCREMENT.

  7. The second is ‘img’ type ‘varchar’ length ‘255’.

  8. Create two php files in the ‘upload’ folder. 

  9. one is for uploading image name ‘upload.php’. 

  10. second for showing the image in the frontend name ‘slider.php’.


Create dynamic bootstrap 4 carousel using php and mysqli


Create dynamic bootstrap 4 carousel using php and mysqli


Now we are making HTML and mysqli code for uploading images in the database. 

Create upload.php.


Connection with database 

<?php

$conn = new mysqli("localhost", "root", "", "biker");

Uploading image in database

// upload image//

if (isset($_POST['submit'])) {

    $file = $_FILES['file']['name'];

    $path = 'BIKE/' . $file;

 

    $sqli = $conn->query("INSERT INTO bike_img (img) VALUE ('$path')");

 

    if ($sqli) {

        move_uploaded_file($_FILES['file']['tmp_name'], $path);

        $msg = 'image uploaded successfully';

    } else {

        $msg = 'image uploaded failed';

    }

}

?>

Use form tag in HTML for selecting image 

<form method="post" enctype="multipart/form-data">

image upload:<input type="file" name="file">

<input type="submit" name="submit" value="upload image">

</form>


Fule code of upload.php

<?php

$conn = new mysqli("localhost", "root", "", "biker");

 

 

$msg = '';

// upload immage//

if (isset($_POST['submit'])) {

    $file = $_FILES['file']['name'];

    $path = 'BIKE/' . $file;

 

    $sqli = $conn->query("INSERT INTO bike_img (img) VALUE ('$path')");

 

    if ($sqli) {

        move_uploaded_file($_FILES['file']['tmp_name'], $path);

        $msg = 'image uploaded successfully';

    } else {

        $msg = 'image uploaded failed';

    }

}

?>

<form method="post" enctype="multipart/form-data">

image upload:<input type="file" name="file">

<input type="submit" name="submit" value="upload image">

</form>

Now we are creating slider.php to show the image in the frontend page.


Create a connection with the database.

<?php

$conn = new mysqli("localhost", "root", "", "biker");

 

$result = $conn->query("SELECT img FROM bike_img");

 

?>

Use bootstrap 4 carousel for showing slide show in frontend page.

<div class="container-fluid ">

        <div class="col-lg-6 col-md-6 col-12"></div>

        <div class="row justify-content-center mb-2">

            <div class="col-lg-10">

                <div id="demo" class="carousel slide" data-ride="carousel">

 

                    <!-- Indicators -->

                    <ul class="carousel-indicators">

                        <?php

                        $i = 0;

                        foreach ($result as $row) {

                            $actives = '';

                            if ($i == 0) {

                                $actives = 'active';

                            }

 

                        ?>

                            <li data-target="#demo" data-slide-to="<?= $i; ?>" class="<? $actives; ?>"></li>

                        <?php $i++;

                        } ?>

                    </ul>

 

                    <!-- The slideshow -->

                    <div class="carousel-inner">

                        <?php

                        $i = 0;

                        foreach ($result as $row) {

                            $actives = '';

                            if ($i == 0) {

                                $actives = 'active';

                            }

 

                        ?>

                            <div class="carousel-item <?= $actives; ?>">

                                <img src="<?= $row['img'] ?>" width="100%" height="400">

                            </div>

                        <?php $i++;

                        } ?>

                    </div>

 

                    <!-- Left and right controls -->

                    <a class="carousel-control-prev" href="#demo"  data-slide="prev">

                        <span class="carousel-control-prev-icon"></span>

                    </a>

                    <a class="carousel-control-next" href="#demo" data-slide="next">

                        <span class="carousel-control-next-icon"></span>

                    </a>

                </div>

            </div>

        </div>

    </div>

Full code of slider.php

<?php

$conn = new mysqli("localhost", "root", "", "biker");

 

$result = $conn->query("SELECT img FROM bike_img");

 

?>

 

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- google font -->

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Oswald:wght@200&display=swap" rel="stylesheet">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

 

    <title>bike</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            font-family: 'Josefin Sans', sans-serif;

        }

    </style>

 

</head>

 

<body>

 

    

    <div class="container-fluid ">

        <div class="col-lg-6 col-md-6 col-12"></div>

        <div class="row justify-content-center mb-2">

            <div class="col-lg-10">

                <div id="demo" class="carousel slide" data-ride="carousel">

 

                    <!-- Indicators -->

                    <ul class="carousel-indicators">

                        <?php

                        $i = 0;

                        foreach ($result as $row) {

                            $actives = '';

                            if ($i == 0) {

                                $actives = 'active';

                            }

 

                        ?>

                            <li data-target="#demo" data-slide-to="<?= $i; ?>" class="<? $actives; ?>"></li>

                        <?php $i++;

                        } ?>

                    </ul>

 

                    <!-- The slideshow -->

                    <div class="carousel-inner">

                        <?php

                        $i = 0;

                        foreach ($result as $row) {

                            $actives = '';

                            if ($i == 0) {

                                $actives = 'active';

                            }

 

                        ?>

                            <div class="carousel-item <?= $actives; ?>">

                                <img src="<?= $row['img'] ?>" width="100%" height="400">

                            </div>

                        <?php $i++;

                        } ?>

                    </div>

 

                    <!-- Left and right controls -->

                    <a class="carousel-control-prev" href="#demo" data-slide="prev">

                        <span class="carousel-control-prev-icon"></span>

                    </a>

                    <a class="carousel-control-next" href="#demo" data-slide="next">

                        <span class="carousel-control-next-icon"></span>

                    </a>

                </div>

            </div>

        </div>

    </div>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS-->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

</body>

 

</html>


output:-



Tags:

Post a Comment

0 Comments