chore: vypracovaný úkol

7 months ago · 8f5ea80c31
96 changed files with 233 additions and 6 deletions
--- a/README.md
+++ b/README.md
@ -1,2 +1 @@
-# PHP project template
-
+# Samostatná práce: Galerie
--- a/data/images.php
+++ b/data/images.php
@ -0,0 +1,46 @@
+<?php
+
+$images = array(
+  ["file" => "01.jpg", "keywords" => ["strom", ], "label" => "Povalený strom"],
+  ["file" => "02.jpg", "keywords" => [], "label" => "Stráň"],
+  ["file" => "03.jpg", "keywords" => [], "label" => "Mraky v údolí"],
+  ["file" => "04.jpg", "keywords" => [], "label" => "Kostky"],
+  ["file" => "05.jpg", "keywords" => [], "label" => "Culík"],
+  ["file" => "06.jpg", "keywords" => [], "label" => "Tráva"],
+  ["file" => "07.jpg", "keywords" => [], "label" => "Cesta"],
+  ["file" => "08.jpg", "keywords" => [], "label" => "Ukazatel"],
+  ["file" => "09.jpg", "keywords" => [], "label" => "Polní cesta"],
+  ["file" => "10.jpg", "keywords" => ["pes", ], "label" => "Hlava psa"],
+  ["file" => "11.jpg", "keywords" => [], "label" => "Pavučina"],
+  ["file" => "12.jpg", "keywords" => [], "label" => "Průhled na město"],
+  ["file" => "13.jpg", "keywords" => ["strom", ], "label" => "Poražený strom"],
+  ["file" => "14.jpg", "keywords" => [], "label" => "Brázda"],
+  ["file" => "15.jpg", "keywords" => ["strom", ], "label" => "Koruna stromu"],
+  ["file" => "16.jpg", "keywords" => [], "label" => "Hřebenovka"],
+  ["file" => "17.jpg", "keywords" => [], "label" => "Podzimní barvy"],
+  ["file" => "18.jpg", "keywords" => [], "label" => "Koleje"],
+  ["file" => "19.jpg", "keywords" => ["sníh", "zima", ], "label" => "Zasněžená krajina"],
+  ["file" => "20.jpg", "keywords" => [], "label" => "Fotograf"],
+  ["file" => "21.jpg", "keywords" => [], "label" => "Tekoucí mlha"],
+  ["file" => "22.jpg", "keywords" => [], "label" => "Větrná elektrárna"],
+  ["file" => "23.jpg", "keywords" => [], "label" => "Orosená pavučina"],
+  ["file" => "24.jpg", "keywords" => [], "label" => "Pohled na Říp"],
+  ["file" => "25.jpg", "keywords" => [], "label" => "Cesta po hřebeni"],
+  ["file" => "26.jpg", "keywords" => [], "label" => "Podzimní les"],
+  ["file" => "27.jpg", "keywords" => [], "label" => "Kmen stromu"],
+  ["file" => "28.jpg", "keywords" => ["pes", ], "label" => "Bretaňský ohař"],
+  ["file" => "29.jpg", "keywords" => ["sníh", "zima", ], "label" => "Zataženo"],
+  ["file" => "30.jpg", "keywords" => [], "label" => "Hory"],
+  ["file" => "31.jpg", "keywords" => [], "label" => "Podzimní pohled do krajiny"],
+  ["file" => "32.jpg", "keywords" => [], "label" => "Východ slunce"],
+  ["file" => "33.jpg", "keywords" => ["sníh", "zima", ], "label" => "Pohled na Dlouhý vrch"],
+  ["file" => "34.jpg", "keywords" => [], "label" => "Zatopené údolí"],
+  ["file" => "35.jpg", "keywords" => [], "label" => "Skalní průrva"],
+  ["file" => "36.jpg", "keywords" => [], "label" => "Cesta do lesa"],
+  ["file" => "37.jpg", "keywords" => ["strom", ], "label" => "Kmen stromu obrostlý mechem"],
+  ["file" => "38.jpg", "keywords" => [], "label" => "Zapomenutá vesnice"],
+  ["file" => "39.jpg", "keywords" => [], "label" => "Vstup do ohrady"],
+  ["file" => "40.jpg", "keywords" => ["sníh", "zima", ], "label" => "Odpočinek"],
+  ["file" => "41.jpg", "keywords" => [], "label" => "Kus skály"],
+  ["file" => "42.jpg", "keywords" => [], "label" => "Pavučina"],
+);
--- a/footer.php
+++ b/footer.php
@ -1,3 +1,12 @@
+    </div>
+</main>

+<footer class="footer mt-auto py-3 bg-body-tertiary">
+    <div class="container">
+        <span class="text-body-secondary">Samostatná práce 1/5 - Galerie.</span>
+    </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>
 </html>
--- a/header.php
+++ b/header.php
@ -1,8 +1,42 @@
 <!DOCTYPE html>
-<html lang="cs">
+<html lang="cs" class="h-100" data-bs-theme="dark">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo "$title"; ?></title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="/static/css/index.css" rel="stylesheet">
 </head>
-<body>
+
+<body class="d-flex flex-column h-100">
+
+    <header>
+        <!-- Fixed navbar -->
+        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="/"><?php echo $title; ?></a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarCollapse">
+                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
+                        <li class="nav-item">
+                            <a class="nav-link" aria-current="page" href="/">Domů</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/index.php?page=autor">Autor</a>
+                        </li>
+                    </ul>
+                    <form action="/index.php" class="d-flex" role="search">
+                        <input type="hidden" name="page" value="search">
+                        <input name="text" class="form-control me-2" type="search" placeholder="Klíčové slovo" aria-label="Search">
+                        <button class="btn btn-outline-success" type="submit">Najít</button>
+                    </form>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main class="flex-shrink-0">
+        <div class="container">
--- a/includes/modal.php
+++ b/includes/modal.php
@ -0,0 +1,37 @@
+<div id="galleryModal" class="modal fade" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="galleryModalLabel">Fotografie</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
+      </div>
+      <div class="modal-body">
+        <div class="d-flex h-100 align-items-center justify-content-center">
+          <img src="" class="img-fluid" alt="Fotografie">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zavřít</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const galleryModal = document.getElementById('galleryModal')
+  if (galleryModal) {
+    galleryModal.addEventListener('show.bs.modal', event => {
+      // Button that triggered the modal
+      const button = event.relatedTarget
+      // Extract info from data-bs-* attributes
+      const image = button.getAttribute('data-bs-image')
+      const label = button.getAttribute('data-bs-label')
+      // Update the modal's content.
+      const modalTitle = galleryModal.querySelector('.modal-title')
+      const modalImage = galleryModal.querySelector('.modal-body img')
+
+      modalTitle.textContent = label
+      modalImage.src = `/static/images/image_${image}`
+    })
+  }
+</script>
--- a/index.php
+++ b/index.php
@ -1,10 +1,20 @@
 <?php

-$title = "Šablona";
+$title = "Galerie";

 include "header.php";

-echo "php project template";
+$page = $_GET["page"] ?? "home";
+
+if ($page == "home") {
+  include "pages/gallery.php";
+} elseif ($page == "autor") {
+  include "pages/author.php";
+} elseif ($page == "search") {
+  include "pages/search.php";
+} else {
+  include "pages/error.php";
+}

 include "footer.php";

--- a/lib/widgets.php
+++ b/lib/widgets.php
@ -0,0 +1,13 @@
+<?php
+
+function tile_image($image, $label, $i) {
+  $img_src = "/static/images/thumbs/thumb_" . $image;
+  echo '<div class="col-sm-3 col-md-2">';
+  echo '  <div class="card mb-3">';
+  echo "    <img src='$img_src' alt='image_$i' class='card-img-top' data-bs-toggle='modal' data-bs-image='$image' data-bs-label='$label' data-bs-target='#galleryModal'>";
+  echo '    <div class="card-body">';
+  echo '      <p class="card-text">' . $label . '</p>';
+  echo '    </div>';
+  echo '  </div>';
+  echo '</div>';
+}
--- a/pages/author.php
+++ b/pages/author.php
@ -0,0 +1,23 @@
+
+<div class="card" style="width: 18rem;">
+  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
+    <title>Placeholder</title>
+    <rect width="100%" height="100%" fill="#868e96"></rect>
+    <text x="35%" y="50%" fill="#dee2e6" dy=".3em">Avatar image</text>
+  </svg>
+  <div class="card-body">
+    <h5 class="card-title">Autor</h5>
+    <p class="card-text">
+      Ivan Pomykacz
+    </p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">PRG 3. IM</li>
+    <li class="list-group-item">Samostatná práce</li>
+    <li class="list-group-item">13. listopadu</li>
+    <li class="list-group-item">Galerie</li>
+  </ul>
+  <div class="card-body">
+    <a href="https://git.asgard.odbornaskola.cz/mist/galerie" class="card-link">source</a>
+  </div>
+</div>
--- a/pages/error.php
+++ b/pages/error.php
@ -0,0 +1,4 @@
+<?php
+
+echo '<div class="alert alert-danger" role="alert">Stránka nenalezena</div>';
+
--- a/pages/gallery.php
+++ b/pages/gallery.php
@ -0,0 +1,14 @@
+<?php
+
+require_once "lib/widgets.php";
+require_once "data/images.php";
+
+include "includes/modal.php";
+
+echo '<div class="row">';
+for ($i = 0; $i < count($images); $i++) {
+  tile_image($images[$i]["file"], $images[$i]["label"], $i);
+}
+echo '</div>';
+
+?>
--- a/pages/search.php
+++ b/pages/search.php
@ -0,0 +1,30 @@
+<?php
+
+require_once "lib/widgets.php";
+require_once "data/images.php";
+
+include "includes/modal.php";
+
+$search = $_GET["text"] ?? "";
+$search = trim($search);
+$search = strtolower($search);
+
+if (empty($search)) {
+  echo '<div class="alert alert-warning" role="alert">Neplatné klíčové slovo.</div>';
+}
+else {
+  echo "<p class='lead'>Výsledky hledání pro klíčové slovo: $search</p>";
+
+  echo '<div class="row">';
+  for ($i = 0; $i < count($images); $i++) {
+    $keywords = $images[$i]["keywords"];
+    if (!empty($search)) {
+      if (!in_array($search, $keywords)) {
+        continue;
+      }
+    }
+    tile_image($images[$i]["file"], $images[$i]["label"], $i);
+  }
+  echo '</div>';
+}
+
--- a/static/css/index.css
+++ b/static/css/index.css
@ -0,0 +1,8 @@
+
+main > .container {
+  padding: 60px 15px 0;
+}
+
+.card-img-top {
+  cursor: pointer;
+}
--- a/static/images/image_01.jpg
+++ b/static/images/image_01.jpg
--- a/static/images/image_02.jpg
+++ b/static/images/image_02.jpg
--- a/static/images/image_03.jpg
+++ b/static/images/image_03.jpg
--- a/static/images/image_04.jpg
+++ b/static/images/image_04.jpg
--- a/static/images/image_05.jpg
+++ b/static/images/image_05.jpg
--- a/static/images/image_06.jpg
+++ b/static/images/image_06.jpg
--- a/static/images/image_07.jpg
+++ b/static/images/image_07.jpg
--- a/static/images/image_08.jpg
+++ b/static/images/image_08.jpg
--- a/static/images/image_09.jpg
+++ b/static/images/image_09.jpg
--- a/static/images/image_10.jpg
+++ b/static/images/image_10.jpg
--- a/static/images/image_11.jpg
+++ b/static/images/image_11.jpg
--- a/static/images/image_12.jpg
+++ b/static/images/image_12.jpg
--- a/static/images/image_13.jpg
+++ b/static/images/image_13.jpg
--- a/static/images/image_14.jpg
+++ b/static/images/image_14.jpg
--- a/static/images/image_15.jpg
+++ b/static/images/image_15.jpg
--- a/static/images/image_16.jpg
+++ b/static/images/image_16.jpg
--- a/static/images/image_17.jpg
+++ b/static/images/image_17.jpg
--- a/static/images/image_18.jpg
+++ b/static/images/image_18.jpg
--- a/static/images/image_19.jpg
+++ b/static/images/image_19.jpg
--- a/static/images/image_20.jpg
+++ b/static/images/image_20.jpg
--- a/static/images/image_21.jpg
+++ b/static/images/image_21.jpg
--- a/static/images/image_22.jpg
+++ b/static/images/image_22.jpg
--- a/static/images/image_23.jpg
+++ b/static/images/image_23.jpg
--- a/static/images/image_24.jpg
+++ b/static/images/image_24.jpg
--- a/static/images/image_25.jpg
+++ b/static/images/image_25.jpg
--- a/static/images/image_26.jpg
+++ b/static/images/image_26.jpg
--- a/static/images/image_27.jpg
+++ b/static/images/image_27.jpg
--- a/static/images/image_28.jpg
+++ b/static/images/image_28.jpg
--- a/static/images/image_29.jpg
+++ b/static/images/image_29.jpg
--- a/static/images/image_30.jpg
+++ b/static/images/image_30.jpg
--- a/static/images/image_31.jpg
+++ b/static/images/image_31.jpg
--- a/static/images/image_32.jpg
+++ b/static/images/image_32.jpg
--- a/static/images/image_33.jpg
+++ b/static/images/image_33.jpg
--- a/static/images/image_34.jpg
+++ b/static/images/image_34.jpg
--- a/static/images/image_35.jpg
+++ b/static/images/image_35.jpg
--- a/static/images/image_36.jpg
+++ b/static/images/image_36.jpg
--- a/static/images/image_37.jpg
+++ b/static/images/image_37.jpg
--- a/static/images/image_38.jpg
+++ b/static/images/image_38.jpg
--- a/static/images/image_39.jpg
+++ b/static/images/image_39.jpg
--- a/static/images/image_40.jpg
+++ b/static/images/image_40.jpg
--- a/static/images/image_41.jpg
+++ b/static/images/image_41.jpg
--- a/static/images/image_42.jpg
+++ b/static/images/image_42.jpg
--- a/static/images/thumbs/thumb_01.jpg
+++ b/static/images/thumbs/thumb_01.jpg
--- a/static/images/thumbs/thumb_02.jpg
+++ b/static/images/thumbs/thumb_02.jpg
--- a/static/images/thumbs/thumb_03.jpg
+++ b/static/images/thumbs/thumb_03.jpg
--- a/static/images/thumbs/thumb_04.jpg
+++ b/static/images/thumbs/thumb_04.jpg
--- a/static/images/thumbs/thumb_05.jpg
+++ b/static/images/thumbs/thumb_05.jpg
--- a/static/images/thumbs/thumb_06.jpg
+++ b/static/images/thumbs/thumb_06.jpg
--- a/static/images/thumbs/thumb_07.jpg
+++ b/static/images/thumbs/thumb_07.jpg
--- a/static/images/thumbs/thumb_08.jpg
+++ b/static/images/thumbs/thumb_08.jpg
--- a/static/images/thumbs/thumb_09.jpg
+++ b/static/images/thumbs/thumb_09.jpg
--- a/static/images/thumbs/thumb_10.jpg
+++ b/static/images/thumbs/thumb_10.jpg
--- a/static/images/thumbs/thumb_11.jpg
+++ b/static/images/thumbs/thumb_11.jpg
--- a/static/images/thumbs/thumb_12.jpg
+++ b/static/images/thumbs/thumb_12.jpg
--- a/static/images/thumbs/thumb_13.jpg
+++ b/static/images/thumbs/thumb_13.jpg
--- a/static/images/thumbs/thumb_14.jpg
+++ b/static/images/thumbs/thumb_14.jpg
--- a/static/images/thumbs/thumb_15.jpg
+++ b/static/images/thumbs/thumb_15.jpg
--- a/static/images/thumbs/thumb_16.jpg
+++ b/static/images/thumbs/thumb_16.jpg
--- a/static/images/thumbs/thumb_17.jpg
+++ b/static/images/thumbs/thumb_17.jpg
--- a/static/images/thumbs/thumb_18.jpg
+++ b/static/images/thumbs/thumb_18.jpg
--- a/static/images/thumbs/thumb_19.jpg
+++ b/static/images/thumbs/thumb_19.jpg
--- a/static/images/thumbs/thumb_20.jpg
+++ b/static/images/thumbs/thumb_20.jpg
--- a/static/images/thumbs/thumb_21.jpg
+++ b/static/images/thumbs/thumb_21.jpg
--- a/static/images/thumbs/thumb_22.jpg
+++ b/static/images/thumbs/thumb_22.jpg
--- a/static/images/thumbs/thumb_23.jpg
+++ b/static/images/thumbs/thumb_23.jpg
--- a/static/images/thumbs/thumb_24.jpg
+++ b/static/images/thumbs/thumb_24.jpg
--- a/static/images/thumbs/thumb_25.jpg
+++ b/static/images/thumbs/thumb_25.jpg
--- a/static/images/thumbs/thumb_26.jpg
+++ b/static/images/thumbs/thumb_26.jpg
--- a/static/images/thumbs/thumb_27.jpg
+++ b/static/images/thumbs/thumb_27.jpg
--- a/static/images/thumbs/thumb_28.jpg
+++ b/static/images/thumbs/thumb_28.jpg
--- a/static/images/thumbs/thumb_29.jpg
+++ b/static/images/thumbs/thumb_29.jpg
--- a/static/images/thumbs/thumb_30.jpg
+++ b/static/images/thumbs/thumb_30.jpg
--- a/static/images/thumbs/thumb_31.jpg
+++ b/static/images/thumbs/thumb_31.jpg
--- a/static/images/thumbs/thumb_32.jpg
+++ b/static/images/thumbs/thumb_32.jpg
--- a/static/images/thumbs/thumb_33.jpg
+++ b/static/images/thumbs/thumb_33.jpg
--- a/static/images/thumbs/thumb_34.jpg
+++ b/static/images/thumbs/thumb_34.jpg
--- a/static/images/thumbs/thumb_35.jpg
+++ b/static/images/thumbs/thumb_35.jpg
--- a/static/images/thumbs/thumb_36.jpg
+++ b/static/images/thumbs/thumb_36.jpg
--- a/static/images/thumbs/thumb_37.jpg
+++ b/static/images/thumbs/thumb_37.jpg
--- a/static/images/thumbs/thumb_38.jpg
+++ b/static/images/thumbs/thumb_38.jpg
--- a/static/images/thumbs/thumb_39.jpg
+++ b/static/images/thumbs/thumb_39.jpg
--- a/static/images/thumbs/thumb_40.jpg
+++ b/static/images/thumbs/thumb_40.jpg
--- a/static/images/thumbs/thumb_41.jpg
+++ b/static/images/thumbs/thumb_41.jpg
--- a/static/images/thumbs/thumb_42.jpg
+++ b/static/images/thumbs/thumb_42.jpg