Mobiilimalli konspekt

1. Sissejuhatus

Minu ülesanne oli luua mobiilisõbralik veebileht teemal anekdoodid. Leht pidi kuvama ühes failis päise, sisu ja jaluse ning lugema andmeid eraldi tekstifailidest (teade.txt ja tegija.txt). Samuti pidin looma mitme anekdoodi jaoks eraldi sisulehed ning ühendama need ühiseks lahenduseks.

Kasutasin järgmiseid tehnoloogiaid:

• HTML – põhistruktuuri loomiseks
• CSS – kujunduseks ja responsive disaini saavutamiseks
• PHP – serveripoolseks failisisuga töötamiseks ja komponentide ühendamiseks

2. Koodilõigud ja selgitused

a) Päise lisamine ja JavaScripti abil sisu dünaamiline laadimine

See lõik asub failis päis.php. See lisab lehe päise ja navigeerimismenüü, mille lingid kutsuvad välja funktsiooni postForm() – see laeb uue sisu fetch() abil samasse leheossa ilma uut vahelehte avamata.

function postForm(e, url) {
    e.preventDefault();
    fetch(url)
        .then(r => r.text())
        .then(html => {
            document.getElementById("content-area").innerHTML = html;
        })
        .catch(err => console.error("Viga sisu laadimisel: ", err));
}
        

See kood võimaldab navigeerida anekdootide vahel, ilma uut lehte avamata – see muudab kasutuskogemuse sujuvaks ka mobiilivaates.

b) Faili sisu kuvamine PHP abil

Failis index.php kasutasin järgmist koodilõiku teate lugemiseks teade.txt failist:

Täna on suurepärane päev, et lugeda üks väike anekdoot!
        

Selle abil kuvatakse teade otse failist, nii et sisu saab muuta faili kaudu ilma lehe koodi redigeerimata.

c) Grid-kujundus mitme anekdoodi jaoks

Anekdootide näitamiseks kasutasin CSS grid süsteemi, mis võimaldab neid kuvada kõrvuti, kui ekraan on lai.

.anekdoodid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-items: center;
}

.anekdoot {
  background: #ffffff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
        

Selle tulemusel moodustub anekdootidest ilus võrgustik ehk grid layout. Väiksematel ekraanidel kohandub iga anekdoot automaatselt ühe veeru paigutusse.

d) Mobiilivaate reeglid

Allolev media query tagab, et ekraani alla 600 px muutub kujundus automaatselt üheveeruliseks ja tekst sobitub väiksemale ekraanile.

@media (max-width: 600px) {
  nav li {
    display: block;
    margin: 10px 0;
  }
  .anekdoodid-grid {
    grid-template-columns: 1fr;
  }
  header h1 {
    font-size: 1.8em;
  }
}
        

See on üks olulisemaid osi mobiilisõbralikkuse loomiseks. Media query võimaldab muuta elementide paigutust ja suurust vastavalt seadme ekraanilaiusele.

e) Anekdootide lehe põhiosa (anekdoot_nadal1.php)

See kood ühendab päis.php ja jalus.php ning kasutab CSS grid-paigutust, et näidata mitut anekdooti korraga ühes reas suurel ekraanil ja ühes veerus mobiilil.

<?php include("pais.php"); ?>

<section>
  <h2>Anekdoodid – Nädal 1</h2>
  <p>Siin on valik selle nädala parimaid anekdoote!</p>
</section>

<div class="anekdoodid-grid">

  <section class="anekdoot">
    <h3>Anekdoot 1</h3>
    <p>Õpetaja küsib: "Juku, miks sa hilinesid?"<br>
    Juku vastab: "Kell oli liiga kiire!"</p>
  </section>

</div>

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

Iga <section class="anekdoot"> plokk kujutab ühte anekdooti. Grid tagab, et need on kõrvuti, kuni ekraani laius muutub väiksemaks.

f) CSS grid ja mobiilivaade

.anekdoodid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-items: center;
}
@media (max-width: 600px) {
  .anekdoodid-grid { grid-template-columns: 1fr; }
}
    

Selle reegli tõttu muutub anekdootide paigutus automaatselt üherealiseks mobiiliekraanil (responsive layout).

3. Mobiilivaade

Telefonis on sisu paigutatud ühes veerus, menüü lingid asuvad üksteise all ning iga anekdoot kuvatakse eraldi kaardina, mis võtab kogu ekraani laiuse.

Pildiloleks näha:

• Päis on endiselt üleval ja nähtav.
• Menüü lingid on üksteise all keskel.
• Anekdootide „kaardid“ laienevad täislaiusesse ilma tühikuta servades.
• Tekst kohandub väiksemale ekraanile, font on endiselt loetav.