Karuzela Bootstrap pobierająca dane z bazy SQL
sql
Tworzymy bazę danych pod nasze slajdy.
1 2 3 4 5 6 7 8 | CREATE TABLE IF NOT EXISTS `carousel` ( `id` INT(2) NOT NULL, `obraz` VARCHAR(200) COLLATE utf8_polish_ci NOT NULL, `opis` VARCHAR(200) COLLATE utf8_polish_ci NOT NULL, `naglowek` VARCHAR(200) COLLATE utf8_polish_ci NOT NULL, `akapit` text COLLATE utf8_polish_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci; |
polacz.php
Podmieniamy uzytkownik, haslo i baze na swoje dane.
1 2 3 4 5 | <?php $baza = new mysqli("localhost", "uzytkownik", "haslo", "baza"); if (mysqli_connect_errno()) die( "Blad: ".mysqli_connect_error() ); ?> |
index.php
Kod naszego pokazu slajdów w oparciu o bootstrap.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <?php include "polacz.php"; $html["item"] = ""; $html["li"] = ""; if ($sql = $baza->prepare("SELECT * FROM carousel;")) { $sql->execute(); $sql->bind_result($id, $link, $opis, $naglowek, $akapit); while ($sql->fetch()){ if ($id == 0){ $html["li"].= '<li data-target="#myCarousel" data-slide-to="0" class="active"></li>'; $html["item"].= '<div class="item active"> <img src="'.$link.'" alt="'.$opis.'"> <div class="carousel-caption"> <h3>'.$naglowek.'</h3> <p>'.$akapit.'</p> </div> </div>'; } else { $html["li"].= '<li data-target="#myCarousel" data-slide-to="'.$id.'"></li>'; $html["item"].= '<div class="item"> <img src="'.$link.'" alt="'.$opis.'"> <div class="carousel-caption"> <h3>'.$naglowek.'</h3> <p>'.$akapit.'</p> </div> </div>'; } } echo '<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators">' .$html["li"]. ' </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox">' .$html["item"]. '</div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>'; $sql->close(); } $baza->close(); ?> |