Ditutorial kali ini writecode masih membahas Carousels/slide, didalam setiap tampilan website pasti anda akan sering menemui yang nama Carousels/slide gambar yang berpindah secara otomatis, Carousels sangat populer di situs web E-Commerce dan terutama di beranda karena membuat situs web lebih mudah digunakan dan meningkatkan pengalaman pengguna. Jadi jika Anda berpikir untuk menerapkan Carousel dalam proyek Anda, maka Anda berada di tempat yang tepat. Dalam tutorial ini Anda akan belajar cara membuat Bootstrap Carousel Responsive Menggunakan PDO PHP dan MySQL. langkah-langkahnya bisa anda ikuti dibawah ini :
Directory
- Images
file php
- index.php
- dbconfig.php
- class.pdo.php
Baca Juga : Carousal Product Responsive Ponsel dan Desktop
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Oct 20, 2017 at 11:28 AM -- Server version: 10.1.19-MariaDB -- PHP Version: 5.6.28 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `database` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_slider` -- CREATE TABLE `tbl_slider` ( `id` int(11) NOT NULL, `title` varchar(100) NOT NULL, `img_slider` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `tbl_slider` -- INSERT INTO `tbl_slider` (`id`, `title`, `img_slider`) VALUES (1, 'We are creative', '1.jpg'), (2, 'We are creative', '2.jpg'), (3, 'We are creative', '3.jpg'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_slider` -- ALTER TABLE `tbl_slider` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_slider` -- ALTER TABLE `tbl_slider` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
<?php
/*koneksi database*/
class database
{
private $dsn;
public $default = array(
'datasource' => 'Database/Mysql',
'persistent' => false,
'host' => 'localhost',
'login' => 'root',
'password' => '',
'database' => 'database',
'prefix' => 'tbl_',
'encoding' => 'UTF8',
'port' => '',
);
public function dbkoneksi() {
static $instance;
if ($instance === null) {
$opt = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => FALSE,
);
$dsn = 'mysql:host=' .$this->default['host'] . ';dbname=' .$this->default['database'] . ';charset=' .$this->default['encoding'];
$instance = new PDO($dsn, $this->default['login'], $this->default['password'], $opt);
}
return $instance;
}
}
$dbcon = new database();
$dbs = $dbcon->dbkoneksi();
include_once 'class.pdo.php';
$fetchdata = new classPDO($dbs);File class.pdo.php class ini berfungsi untuk menampilkan data dalam database script kodenya seperti dibawah ini :
<?php
/*clas PDO*/
class classPDO
{
private $db;
function __construct($dbs) {
$this->db=$dbs;
}
public function getShowslider() {
$query = "SELECT `id`, `title`, `img_slider` FROM `tbl_slider`";
$stmt = $this->db->prepare($query);
$stmt->execute();
$data = array();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
return $data;
}
}
Script index.php seperti dibawah ini :
<?php
include_once 'dbconfig.php';//load koneksi database
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://bootsnipp.com/dist/bootsnipp.min.css">
<title>Bootstrap</title>
<style type="text/css">
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: rgba(8, 13, 21, 0.34);
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">
<a class="navbar-brand animate" href="https://bootsnipp.com">Bootstrap</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle " data-toggle="dropdown">Bootstrap <span class="caret"></span>
<span style="font-size:.5em; position:absolute; top:3px; left:2px"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">CSS Frameworks</li>
<li class="active"><a href="#" class="">Bootstrap</a></li>
<li class=""><a href="#" class="">Foundation</a></li>
<li class=""><a href="#" class="">Semantic UI</a></li>
<li class=""><a href="#" class="">Materialize</a></li>
<li class=""><a href="#" class="">Pure</a></li>
<li class=""><a href="#" class="">Bulma</a></li>
<li class="dropdown-header">References</li>
<li class=""><a href="#" class="">CSS Reference</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- start -->
<div class="container" style="margin-top:30px;">
<div class="row">
<div class="col-lg-12">
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$nol=0;
$cls =null;
$stmt = $fetchdata->getShowslider();
foreach ($stmt as $key):
if($nol==0):
$cls ='active';
else:
$cls ='.';
endif;
?>
<li data-target="#bs-carousel" data-slide-to="<?php echo $nol?>" class="<?php echo $cls?>"></li>
<?php $nol++; endforeach?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$noslide=0;
$clsslide =null;
foreach ($stmt as $key):
if($noslide==0):
$clsslide ='active';
else:
$clsslide ='.';
endif;
?>
<div class="item slides <?php echo $clsslide?>">
<div class="slide-1" style="background-image: url('images/<?php echo $key['img_slider']?>');"></div>
<div class="hero">
<hgroup>
<h1><?php echo $key['title']?></h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<?php $noslide++; endforeach?>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
<footer class="bs-docs-footer">
<div class="container">
<p style="text-align: center;">Footer me</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>Potongan kode Carousel seperti dibawah ini, script dibawah ini yang akan menampilkan Carouselnya di halam beranda.
Baca Juga : Cara menampilkan data json ke dalam datatables menggunakan jquery
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$nol=0;
$cls =null;
$stmt = $fetchdata->getShowslider();
foreach ($stmt as $key):
if($nol==0):
$cls ='active';
else:
$cls ='.';
endif;
?>
<li data-target="#bs-carousel" data-slide-to="<?php echo $nol?>" class="<?php echo $cls?>"></li>
<?php $nol++; endforeach?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$noslide=0;
$clsslide =null;
foreach ($stmt as $key):
if($noslide==0):
$clsslide ='active';
else:
$clsslide ='.';
endif;
?>
<div class="item slides <?php echo $clsslide?>">
<div class="slide-1" style="background-image: url('images/<?php echo $key['img_slider']?>');"></div>
<div class="hero">
<hgroup>
<h1><?php echo $key['title']?></h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<?php $noslide++; endforeach?>
</div>
</div>Sekian tutorial Carousel Bootstrap Responsive, silakan dipelajari dan dikembankan sesuai dengan kebutuhan anda, bila ada kesalahan dalam koding silakan kirim komentar
Baca Juga : Cropping image php mysql jquery in modal bootstrap
Posting Komentar
Posting Komentar