Projekt - část 2

Projekt - část 2

  • Úvod
  • Projekt - část 2

Projekt - část 2

V tomto úkolu si domovskou stránku rozdělíme na menší části, oddělíme si zejména části, které budeme v budoucnu používat i na dalších stránkách.

1. Přejmenuj soubor index.html na index.php

2. Ve složce s projektem si vytvoř složku layout a v ní vytvoř tyto 4 soubory:

  1. footer.php
  2. head.php
  3. navigation.php
  4. scripts.php

3. Postupně přesunuj části kód ze souboru index.php do jednotlivých souborů ve složce layout tak, že vždy přesuneš odpovídající část do správného připraveného souboru a v souboru index.php ji nahradíš vložením php kódu pro připojení daného souboru např.: 

<?php require __DIR__ . '/layout/head.php'; ?>

Výsledek:

Nakonec by všechny soubory měly vypadat takto:

layout/head.php

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>Můj blog</title>
  <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
  <!-- Font Awesome icons (free version)-->
  <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
  <!-- Google fonts-->
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
  <!-- Core theme CSS (includes Bootstrap)-->
  <link href="css/styles.css" rel="stylesheet" />
</head>

layout/navigation.php

<!-- Navigation-->
<div id="progress-bar" class="progress-bar"></div>
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
  <div class="container px-4 px-lg-5">
    <a class="navbar-brand" href="index.html">Můj blog</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ms-auto py-4 py-lg-0">
        <li class="nav-item">
          <a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Domů</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-lg-3 py-3 py-lg-4" href="blog.html">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Kontakt</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link px-lg-3 py-3 py-lg-4 dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Čeština
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Čeština</a></li>
            <li><a class="dropdown-item" href="#">Angličtina</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

layout/footer.php

 <!-- Footer-->
 <footer class="border-top">
   <div class="container px-4 px-lg-5">
     <div class="row gx-4 gx-lg-5 justify-content-center">
       <div class="col-md-10 col-lg-8 col-xl-7">
         <div class="small text-center text-muted fst-italic">
           Copyright &copy; Můj blog 2021
         </div>
       </div>
     </div>
   </div>
 </footer>

layout/scripts.php

<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>

index.php

<!DOCTYPE html>
<html lang="en">

<?php require __DIR__ . '/layout/head.php'; ?>

<body>

  <?php require __DIR__ . '/layout/navigation.php'; ?>

  <!-- Page Header-->
  <header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">
    <div class="container position-relative px-4 px-lg-5">
      <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
          <div class="site-heading">
            <h1>Můj blog</h1>
            <span class="subheading">Základní šablona pro kurz PHP</span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Main Content-->
  <div class="container px-4 px-lg-5 mt-4">
    <div class="row gx-4 gx-lg-5 justify-content-center">
      <!-- About me section-->
      <section class="col-12 col-md-10 col-lg-4">
        <h2>O mně</h2>
        <div class="row">
          <div class="col-12">
            <img src="assets/img/about.jpg" alt="Já" class="img-fluid" />
          </div>
          <div class="col-12">
            <table class="table table-striped table-hover table-about">
              <tr>
                <th>Jméno:</th>
                <td>Delphia Bee</td>
              </tr>
              <tr>
                <th>Narozen:</th>
                <td>21. 4. 1985</td>
              </tr>
              <tr>
                <th>Email:</th>
                <td>
                  <a href="mailto:delphia.bee@test.cz">delphia.bee@test.cz</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </section>
      <!-- Blog section -->
      <section class="col-md-10 col-lg-8">
        <h2>Blog</h2>
        <!-- Post preview-->
        <article class="post-preview">
          <a href="post.html">
            <div class="row">
              <div class="col-md-4">
                <img src="assets/img/post-bg.jpg" class="img-fluid" />
              </div>
              <div class="col-md-8">
                <h3 class="post-title">
                  Man must explore, and this is exploration at its greatest
                </h3>
              </div>
              <div class="col-12 mt-3">
                <h4 class="post-subtitle">
                  Problems look mighty small from 150 miles up
                </h4>
              </div>
            </div>
          </a>
          <p class="post-meta">
            Posted by
            <em>Start Bootstrap</em>
            on September 24, 2021
          </p>
        </article>
        <!-- Divider-->
        <hr class="my-4" />
        <!-- Post preview-->
        <article class="post-preview">
          <a href="post.html">
            <div class="row">
              <div class="col-md-4">
                <img src="assets/img/post2.jpg" class="img-fluid" />
              </div>
              <div class="col-md-8">
                <h3 class="post-title">
                  Man must explore, and this is exploration at its greatest
                </h3>
              </div>
              <div class="col-12 mt-3">
                <h4 class="post-subtitle">
                  Problems look mighty small from 150 miles up
                </h4>
              </div>
            </div>
          </a>
          <p class="post-meta">
            Posted by
            <em>Start Bootstrap</em>
            on September 24, 2021
          </p>
        </article>
        <!-- Divider-->
        <hr class="my-4" />
        <!-- Post preview-->
        <article class="post-preview">
          <a href="post.html">
            <div class="row">
              <div class="col-md-4">
                <img src="assets/img/post3.jpg" class="img-fluid" />
              </div>
              <div class="col-md-8">
                <h3 class="post-title">
                  Man must explore, and this is exploration at its greatest
                </h3>
              </div>
              <div class="col-12 mt-3">
                <h4 class="post-subtitle">
                  Problems look mighty small from 150 miles up
                </h4>
              </div>
            </div>
          </a>
          <p class="post-meta">
            Posted by
            <em>Start Bootstrap</em>
            on September 24, 2021
          </p>
        </article>
        <!-- Divider-->
        <hr class="my-4" />
        <!-- Pager-->
        <div class="d-flex justify-content-end mb-4">
          <a class="btn btn-primary text-uppercase" href="#!">Starší články →</a>
        </div>
      </section>
    </div>
  </div>

  <?php require __DIR__ . '/layout/footer.php'; ?>

  <?php require __DIR__ . '/layout/scripts.php'; ?>

</body>

</html>