Konspekt
Sissejuhatus
Ülesanded: Luua mobiilisõbralik veebileht anekdootide näitamiseks.Kasutatud tehnoloogiad: HTML5, CSS3, PHP, meta viewport.
1. Failide lugemine PHP-ga
Mida teeb: Loeb tekstifailidest sisu ja kuvab lehel.<?php
echo nl2br(file_get_contents("teade.txt"));
echo file_get_contents("autor.txt");
?> Selgitus: file_get_contents() loeb faili, nl2br() muudab reavahetused <br> tagideks.
2. Mobiilne Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Anekdootide ja avalehte dünaamiline laadimine
Mida teeb: Kontrollib URL parameetrit ja kuvab faili sisu.<?php
if (isset($_GET["id"])) {
$id = (int)$_GET["id"];
$file = "anekdood{$id}.txt";
if (file_exists($file)) {
echo "<h2>Anekdoot " . $id . "</h2>";
echo "<div class=\"anekdoot-text\">" . nl2br(file_get_contents($file)) . "</div>";
} else {
echo "<h2>Anekdooti ei leitud</h2>";
echo "<p>Vali mõni teine anekdoot menüüst.</p>";
}
} else {
if (file_exists("avaleht.txt")) {
echo "<h2>Teade!</h2>";
echo "<div class=\"avaleht-text\">" . nl2br(file_get_contents("avaleht.txt")) . "</div>";
} else {
echo "<h2>Avaleht</h2>";
echo "<p>See on anekdootide lehekülg. Vali üks anekdoot menüüst.</p>";
}
}
?> 4. CSS mobiilivaatele
Mida teeb: Lihtne kujundus, mis töötab mobiilse seadme ekraanil.@media (max-width: 360px) {
html {font-size: 13px;}
body {font-size: 0.85rem;}
nav a {padding: 8px 12px;}
header, footer {padding: 12px 8px;}
main {font-size: 0.85rem;}
.text-content {font-size: 0.85rem;}
}
Leht kohandub automaatselt väikese ekraani laiusega. Menüü lühendatakse, tekst väiksemaks, kõik elemendid mahuvad ekraanile.
Mobiilne vaade
