Anekdootide projekti konspekt

1. Sissejuhatus

Ülesanne oli teha väike veebiprojekt PHP abil, kus on mitu anekdoodi lehte ning ühine navigeerimismenüü. Leht pidi olema mobiilisõbralik. Kasutasin HTML-i, CSS-i ja PHP include funktsiooni.

2. Pealehe ehitus

Pealeht sisaldab meta-andmeid, CSS faili ja PHP include menüü jaoks.

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 telefonis õiges suuruses. CSS lisab kujunduse.

3. 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:

<div class='nav'>
    <ul>
        <li>Avaleht</li>
        <li>1. Mootorratas</li>
        <li>2. Vaesed ja Rikkad</li>
        <li>3. Arsi</li>
    </ul>
</div>

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

4. Anekdoodi lehe näide

Iga anekdoot on eraldi PHP failis. Sisu väljastatakse lihtsa HTML-iga.

Näide lehe tein.php sisust:

<div id='anekdot'>
    <h2>Teine</h2>
    <li>Богатый рассказал шутку. Бедный не выкупил</li>
</div>

5. Jalus

Jalus on samamoodi eraldi failis jalus.php.

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

6.CSS mobiilivaade

Mobiilne CSS aktiveerub max-width:600px puhul. See muudab lehe telefonis loetavaks.

Mida mobiilivaade teeb:

• Menüü muutub vertikaalseks, et see mahuks ekraanile.
• Šriftid tehakse väiksemaks.
• Anekdoodi kast saab väiksemad marginaalid ja padjendid.
• Footer muutub kompaktsemaks.

Näide mobiili CSS-ist:

@media (max-width: 600px) {
    .nav ul { flex-direction: column; align-items: center; }
    body { font-size: 14px; }
    #anekdot { margin: 20px 10px; padding: 20px; }
    #footer { padding: 15px 10px; font-size: 0.9rem; }
}

7. Failide struktuur

• avaleht.php – esileht
• esim.php, tein.php, kolms.php – anekdootide lehed
• nav.php – menüü
• jalus.php – jalus
• anekdotleh.php – anekdootide tekstid
• anekdoot.css – kujundus