PHP tööd

Anekdootide projekti konspekt

Sissejuhatus

Ülesanne oli luua PHP abil väike veebiprojekt, kus iga anekdoot asub eraldi failis, kuid kõigil lehtedel kasutatakse ühist navigeerimismenüüd ja jalust.

Kasutasin HTML-i, CSS-i ja PHP include funktsiooni.

Pealehe ehitus

Pealeht sisaldab meta-andmeid, CSS faili ning menüüd PHP include abil.

Näide HTML algusest:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='anekdoot.css'>

Meta viewport teeb lehe mobiilisõbralikuks.
CSS lisab kujunduse.

Navigeerimismenüü

Menüü on eraldi failis nav.php ja lisatakse igale lehele PHP include abil.

Näide PHP include:

<?php include('nav.php'); ?>

nav.php sisu:

<nav class='menu'>
    <ul>
        <li><a href='esimene.php'>1. Nali</a></li>
        <li><a href='teine.php'>2. Nali</a></li>
        <li><a href='kolmas.php'>3. Nali</a></li>
    </ul>
</nav>

Menüü on eraldi failis, et see ei korduks iga lehe sees.

Anekdoodi lehe näide

Iga anekdoot asub eraldi PHP failis.

Näide failist esimene.php:

<div id='anekdot'>
    <h2>Esimene</h2>
    <ul>
        <li>Mees otsustas hakata dieedile, aga dieedil oli temast kahju ja ta jättis ta rahule.</li>
    </ul>
</div>

Jalus

Jalus on eraldi failis jalus.php.

Näide include'ist:

<?php include('jalus.php'); ?>

CSS mobiilivaade

Mobiili CSS aktiveerub max-width:600px puhul ja muudab menüü vertikaalseks ning teksti väiksemaks.

Näide mobiili CSS-ist:

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    nav li a {
        font-size: 17px;
        font-weight: 600;
    }
    p {
        font-size: 17px;
    }
    footer {
        font-size: 15px;
    }
}

Failide struktuur

esimene.php – esimene anekdoot
teine.php – teine anekdoot
kolmas.php – kolmas anekdoot
nav.php – menüü
jalus.php – jalus
anekdotleht.php – anekdootide tekstid
anekdoot.css – kujundus

Mobiilivaate pildid