Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][MySQL][PHP]Karuzela w bootstrapie - dane z bazy danych mysql
Forum PHP.pl > Forum > Przedszkole
brzanek
Witam mam problem ze zrobieniem czegoś podobnego do karuzeli w bootstrapie.
Mam obrazek i przyciski po lewej stronie i po prawej.
Na obrazku mam warunki pobierane z bazy danych takie jak temperatura i tym podobne. Dane są na obecną godzinę. Po kliknięciu w przycisk po prawej stronie bez przeładowania strony pobierane dane z bazy danych na obrazku zmieniają się.
W bazie danych mam dane z podziałem na godziny.

Próbuję to zrobić na podstawie właśnie karuzeli ale zamiast wyświetlać raz obraz to powiela się o tyle razy ile jest rekordów w bazie danych.
Tak wygląda kod.
  1. <?php
  2. include('../darksky1/db.php');
  3. ?>
  4. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  5. <!-- Optional theme -->
  6. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  7. <!-- Latest compiled and minified JavaScript -->
  8. <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  9. <link href="style/style.css" rel="stylesheet">
  10. <?
  11. echo '<div class="row">';
  12. echo '<div class="col-md-2">menu</div>';
  13.  
  14. $result = $mysqli->query("SELECT * FROM prognoza_godzinowa WHERE hid_miasto =1 ORDER BY id ASC");
  15. while ( $row = mysqli_fetch_array($result) ) {
  16. echo '<div id="carousel-example-generic2" class="carousel slide col-md-7">';
  17. echo '<ol class="carousel-indicators">';
  18. echo '<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>';
  19. echo '</ol>';
  20. echo '<div class="carousel-inner">';
  21. echo '<div class="item active">';
  22. echo '<img src="images/new_mapa1.jpg" class="img-responsive" alt="Responsive image">';
  23. echo '<div class="">';
  24. echo '<div class="dzienp0">'.date("d/m/Y H:i:s", $row['htime']).' </div>';
  25. echo '</div>';
  26. echo '</div>';
  27. echo '</div>';
  28. echo '<a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">';
  29. echo '<span class="icon-prev"></span>';
  30. echo '</a>';
  31. echo '<a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">';
  32. echo '<span class="icon-next"></span>';
  33. echo '</a>';
  34. echo '</div>';
  35. }
  36. echo '<div class="col-md-3">godziny</div>';
  37. echo '</div>';
  38. ?>
  39.  
  40. <!-- JavaScript plugins (requires jQuery) -->
  41. <script src="https://code.jquery.com/jquery.js"></script>
  42. <!-- Include all compiled plugins (below), or include individual files as needed -->
  43. <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
  44. <?
  45. ?>
nospor
No przeciez obraz wyswietlasz w petli no to czemu sie dziwisz ze wyswietla sie tyle razy ile petla sie wykonuje razy?
brzanek
Ok zmieniłem dałem obrazem przed pętlą ale teraz mam wszystkie dane nałożone na siebie.
  1. <?php
  2. include('../darksky1/db.php');
  3. ?>
  4. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  5. <!-- Optional theme -->
  6. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  7. <!-- Latest compiled and minified JavaScript -->
  8. <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  9. <link href="style/style.css" rel="stylesheet">
  10. <?
  11. echo '<div class="row">';
  12. echo '<div class="col-md-2">menu</div>';
  13. echo '<div id="carousel-example-generic2" class="carousel slide col-md-7">';
  14. echo '<ol class="carousel-indicators">';
  15. echo '<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>';
  16. echo '</ol>';
  17. echo '<div class="carousel-inner">';
  18. echo '<div class="item active">';
  19. echo '<img src="images/new_mapa1.jpg" class="img-responsive" alt="Responsive image">';
  20. echo '<div class="">';
  21. $result = $mysqli->query("SELECT * FROM prognoza_godzinowa WHERE hid_miasto =1 ORDER BY id ASC");
  22. while ( $row = mysqli_fetch_array($result) ) {
  23. echo '<div class="dzienp0">'.date("d/m/Y H:i:s", $row['htime']).' </div>';
  24. }
  25. echo '</div>';
  26. echo '</div>';
  27. echo '</div>';
  28. echo '<a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">';
  29. echo '<span class="icon-prev"></span>';
  30. echo '</a>';
  31. echo '<a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">';
  32. echo '<span class="icon-next"></span>';
  33. echo '</a>';
  34. echo '</div>';
  35. echo '<div class="col-md-3">godziny</div>';
  36. echo '</div>';
  37. ?>
  38.  
  39. <!-- JavaScript plugins (requires jQuery) -->
  40. <script src="https://code.jquery.com/jquery.js"></script>
  41. <!-- Include all compiled plugins (below), or include individual files as needed -->
  42. <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
  43. <?
  44. ?>

Adres strony http://pogoda-zachodniopomorskie.pl/progno...nowa/index2.php
nospor
masz moze statyczny kod html ktory realizuje to co chcesz? Bo na chwile obecna odnosze wrazenie ze nie wiesz jak to zrobic generalnie w html by dzialalo. Baza danych tutaj nie jest problemem.
brzanek
Statyczny kod html pobrany ze strony bootstrap'a
  1. <div class="container">
  2. <div class="row">
  3. <h1>Karuzela / Slider z opisem</h1>
  4.  
  5. <div id="carousel-example-generic2" class="carousel slide">
  6. <!-- Wskaźniki w postaci kropek -->
  7. <ol class="carousel-indicators">
  8. <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
  9. <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
  10. <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
  11. </ol>
  12.  
  13. <!-- Slajdy -->
  14. <div class="carousel-inner">
  15. <div class="item active">
  16. <img src="https://placehold.it/1280x500" alt="">
  17. <!-- Opis slajdu -->
  18. <div class="carousel-caption">
  19. <h3>To jest opis</h3>
  20. <p>pierwszego slajdu</p>
  21. </div>
  22. </div>
  23.  
  24. <div class="item">
  25. <img src="https://placehold.it/1280x500" alt="">
  26. <!-- Opis slajdu -->
  27. <div class="carousel-caption">
  28. <h3>To jest opis</h3>
  29. <p>drugiego slajdu</p>
  30. </div>
  31. </div>
  32.  
  33. <div class="item">
  34. <img src="https://placehold.it/1280x500" alt="">
  35. <!-- Opis slajdu -->
  36. <div class="carousel-caption">
  37. <h3>To jest opis</h3>
  38. <p>trzeciego slajdu</p>
  39. </div>
  40. </div>
  41.  
  42. </div>
  43.  
  44. <!-- Strzałki do przewijania -->
  45. <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
  46. <span class="icon-prev"></span>
  47. </a>
  48. <a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
  49. <span class="icon-next"></span>
  50. </a>
  51. </div>
  52. </div>

Tu działa bez problemu ale u mnie nie chce.
Zależy mi na tym aby obrazek był stały a zmieniały się tylko dane pobierane z bazy danych nakładane na obrazek.
nospor
Kod html co teraz podales jest zupelnie inny niz probujesz stworzyc w php. Ja sie pytam, czy masz dzialajacy kod html do tego co probujesz stworzyc.
brzanek
Jak bym miał działający kod html to bym go przerobił w php.
Więc jak to powinno być?
nospor
Cytat
Jak bym miał działający kod html to bym go przerobił w php.
Ja sie nie pytalem co bys zrobil jakbys mial. Ja zadalem proste pytanie czy masz i oczekiwalem prostej odpowiedzi - TAK/NIE.
brzanek
Nie mam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.