php, javascript

pytanie zadane 20 listopada 2022 w PHP przez GroM1321 Nowicjusz (120 p.)

chce zeby po kliknieciu w miniaturke bohatero na dole wyswietlalo sie jego zdjecie i informacje o nim

wszystko jest zczytywane z bazy

mam taki kodzik

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.php"><img src="zdj/LOGO.PNG" alt="logo" class="logo"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="mapy.php">Mapy</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="bohaterowie.php">Bohaterowie</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="dodaj.php">Członkowie</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="kontakt.php">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="d-flex main-container">
  <div class="main main-text">
      <?php
        require_once("connect.php");
        $connect = mysqli_connect($host, $user, $pass, $db) or die("Problem z połączeniem");
        $sql="SELECT zdj as zdj from bohaterowie";
        $result = mysqli_query($connect, $sql) or die("Bląd");
        if (mysqli_num_rows($result) > 0) {
          echo"<div class='mini'>";
          while ($row = mysqli_fetch_assoc($result)) {
            $zdj=$row['zdj'];
            echo "<div class='mini2'>
            <img src='zdj/$zdj' alt='$zdj' class='$zdj'>
            </div>";
          }}
          echo"</div>";
          echo"<div id='roz'>
            <script>
              document.querySelector('.$zdj').addEventListener('click', ()=>{";
              $img=$_GET[$zdj];
              require_once("connect.php");
              $connect = mysqli_connect($host, $user, $pass, $db) or die("Problem z połączeniem");
              $sql2="SELECT bohaterowie.nazwa as nazwa, klasy.nazwa as klasa, bohaterowie.zdj2 as zdj2, bohaterowie.opis as opis from bohaterowie inner join klasy on bohaterowie.klasa=klasy.id where bohaterowie.zdj='$img'";
              $result = mysqli_query($connect, $sql2) or die("Bląd");
                while ($row = mysqli_fetch_assoc($result)) {
                  $nazwa=$row['nazwa'];
                  $klasa=$row['klasa'];
                  $zdj2=$row['zdj2'];
                  $opis=$row['opis'];
                }
              echo"
            <div>
              <img src='zdj/$zdj2' alt='$zdj2'>
            </div>
            <div>
              <h1>$nazwa</h1>
              <h2>$klasa</h2>
              <p>$opis</p>
            </div>
            });
            </script>
            </div>";
            mysqli_close($connect);
            ?>
  </div>
</div>
<div style="position:absolute; bottom:0;" class="footer">
<a>Wykonał: </a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

wszystko laczy sie z baza i zczytuje bez problemu

nie jestem pewien jak zczytac nazwe kliknietego zdjecia pod zmienna

zeby sie na jego podstawie zczytywala z bazy reszta

i pozniej ma sie wszystko wyswietlic

koncowo ma to wygladac jakos tak

komentarz 20 listopada 2022 przez VBService Ekspert (253,100 p.)

Czy po kliknięciu miniaturki (obrazka) ma się pokazać obrazek i opis bez przeładowania całej strony (użycie np. fetch), czy ma się cała strona od nowa załadować: górna belka miniaturki + obrazek i opis?

komentarz 21 listopada 2022 przez GroM1321 Nowicjusz (120 p.)

najlepiej bez zaladowania calej strony, ale jak nie będzie pomysłu na to to moze być i z przeładowaniem calej strony. Ważne zeby działało, mam czas do jutra :) Głównie chodzi o to żeby wszystko pobierało z bazy(w sensie nazwy zdjęć itp, zdjecia mam w folderze)

tabelka w bazie wyglada tak:

1 odpowiedź

odpowiedź 22 listopada 2022 przez VBService Ekspert (253,100 p.)
edycja 23 listopada 2022 przez VBService

W sumie (patrząc na obrazek zaprezentowany przez Ciebie) to nie ma aż tak dużo kontentu, żeby np. wczytać cały, schować poszczególne bloki z opisami postaci, i np. za pomocą triku <label for="..."> i <input type="radio"> pokazywać poszczególne bloki wskazane przez kliknięcie na miniaturkę.

<?php
  require_once("connect.php");
  $connect = mysqli_connect($host, $user, $pass, $db) or die("Problem z połączeniem");
  $sql = 'SELECT b.*, klasy.nazwa as klasa '
       . 'FROM bohaterowie as b INNER JOIN klasy on b.klasa=klasy.id';
  $result = mysqli_query($connect, $sql) or die("Bląd");
  
  $mini_images = $character_description = '';
  while ($row = mysqli_fetch_assoc($result)) {
    $mini_images .= '<div class="mini2">'
                  . "  <label for='character-description-{$row['id']}'>"
                  . "    <img src='zdj/{$row['zdj']}' alt='{$row['zdj']}'>"
                  . '  </label>'
                  . '</div>';
    $character_description .= "<input type='radio' id='character-description-{$row['id']}' name='character-description'>"
                            . '<div><div>'
                            . "  <img src='zdj/{$row['zdj2']}' alt='{$row['zdj2']}'>"
                            . '</div>'
                            . '<div>'
                            . " <h1>{$row['nazwa']}</h1>"
                            . " <h2>{$row['klasa']}</h2>"
                            . " <p>{$row['opis']}</p>"
                            . '</div></div>';
  }
  mysqli_close($connect);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">


  <style>
    .mini {
      display: flex;
    }
    .mini img {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    .mini .mini2 {
      border: 2px solid gray;      
      transition: transform 150ms;
    }
    .mini .mini2 label {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }   
    .mini .mini2:hover {
      transform: scale(1.05);
    }
    
    .character-description {
      margin: 0.5em;
    }
    .character-description [name="character-description"] {
      display: none;
    }
    .character-description [name="character-description"]:checked + div {
      display: flex;
    }   
    .character-description [name="character-description"] + div {
      display: none;
      gap: 3em;     
    }
    .character-description [name="character-description"] + div img {
      width: 300px;
      height: 400px;
      object-fit: cover;
    }
        
  </style>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.php"><img src="zdj/LOGO.PNG" alt="logo" class="logo"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="mapy.php">Mapy</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="bohaterowie.php">Bohaterowie</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="dodaj.php">Członkowie</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="kontakt.php">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="d-flex main-container">
  <div class="main main-text">
    <div class='mini'>
      <?php echo $mini_images; ?>
    </div>
    
    <div class="character-description">
      <?php echo $character_description; ?>
    </div>
  </div>
</div>

<div style="position:absolute; bottom:0;" class="footer">
<a>Wykonał: </a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

hipotetyczny wygląd wygenerowanego kodu html: on-line