Kodulehe loomine, 10. kord

24.11.2021
 |  Kommentaare pole

Kaardi lisamine

Kontaktide lehele on mõistlik lisada kaart asukohaga.

Selleks tuleb esmalt kasutada kaardirakendust, nt Google Maps:

https://maps.google.com

Sisestada otsingureale soovitud aadress, nt Kooli 9, Tabasalu.

Avaneva vaate vasakus servas vajutada nupule:

Jaga -> Kaardi manustamine -> valida soovitud suurus nupu menüüst, kus vaikimisi väärtus on Keskmine -> KOPEERI HTML (eestikeelse kaardi korral)

Share-> Embed map -> valida soovitud suurus nupu menüüst, kus vaikimisi väärtus on Medium -> COPY HTML (ingliskeelse kaardi korral)

Saadud kood:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2029.3502701378131!2d24.531379915783607!3d59.42723251021132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x469297d7a665ba1d%3A0x17f235a1ffeef9a8!2sKooli%209%2C%20Tabasalu%2C%2076901%20Harju%20maakond!5e0!3m2!1sen!2see!4v1637415620405!5m2!1sen!2see" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

lisada kontaktide lehele soovitud kohta, mille tulemusena tekib lehele seesugune osa:

Alternatiivina võib kasutada nt OpenStreetMap’i:

https://www.openstreetmap.org

Taaskord sisestades otsingureale soovitud aadressi, Kooli 9, Tabasalu.

Avaneva vaate paremas servas liikuda üle nuppude, kuni ilmub tekst Share -> teha linnuke ruutu Include Marker -> seejärel valida HTML ja kopeerida selle all paiknevas kastis olev tekst:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=24.528254270553592%2C59.425494471198654%2C24.53829646110535%2C59.4290742787191&amp;layer=mapnik&amp;marker=59.42728442228476%2C24.533275365829468" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=59.42728&amp;mlon=24.53328#map=17/59.42728/24.53328">View Larger Map</a></small>

mille tulemusena tekib seesugune kaart:


View Larger Map

Vormi lisamine

Kontaktide lehel võiks, lisaks vahetutele kontaktandmetele olla ka vorm, mille kaudu lehe külastajad saavad ühendust võtta. Selleks saab lehele lisada vormi, mis käib märgendite <form> ja </form> vahele.

Esmalt tuleb määrata, mida tehakse pärast seda, kui vajutatakse vormi saatmise nuppu (siinkohal nt kasutatakse samas kataloogis olevat faili andmed.php andmete edasiseks töötlemiseks:

<form action="andmed.php">
</form>

Vormil võib olla erinevaid elemente:

  • <input> – andmete sisestamiseks
  • <label> – märgis, missuguse
  • <select> – rippmenüü tekitamiseks
  • <textarea> – mitmerealise teksti sisestamiseks
  • <button> – vajutatava nupu kuvamiseks
  • <fieldset> – andmete kogumi eristamiseks
  • <legend> – kasutatakse andmete kogumi kohta info kuvamiseks
  • <datalist> – eelnevalt määratletud andmete kogum
  • <output> – kuvab nt arvutuste tulemuse (mis on koodi poolt tekitatud)

Vormil võib olla erinevaid andmete sisestamise välju <input>, vaikimisi andmevälja liigiks on text:

  • <input type=”button”> – tekitab nupu
  • <input type=”checkbox”> – tekitab linnukese kasti
  • <input type=”color”> – tekitab värvivaliku kasti
  • <input type=”date”> – tekitab kuupäeva valiku – NB! kalender on ingliskeelne ja kuupäeva formaat sõltub kasutaja veebilehitsejast
  • <input type=”datetime-local”> – tekitab kuupäeva ja kellaaja sisestamiseks sobilikud andmed
  • <input type=”email”> – tekitab e-posti sisestamise lahtri
  • <input type=”file”> – tekitab faili lisamise võimaluse
  • <input type=”hidden”> – tekitab kasutaja jaoks nähtamatu andmevälja, mille abil on võimalik edastada vajalikku informatsiooni
  • <input type=”image”> – määratleb pildi andmete edastamise nupuna
  • <input type=”month”> – tekitab võimaluse valida kuupäev
  • <input type=”number”> – tekitab võimaluse sisestada number
  • <input type=”password”> – tekitab salasõna sisestamise lahtri, kus sisestavad märgid on peidetud
  • <input type=”radio”> – tekitab nimekirja, kust on võimalik valida üks väärtus
  • <input type=”range”> – tekitab vahemiku
  • <input type=”reset”> – tekitab nupu, mis alglaeb vormi
  • <input type=”search”> – tekitab otsingulahtri
  • <input type=”submit”> – tekitab nupu vormi andmete edastamiseks
  • <input type=”tel”> – tekitab võimaluse telefoninumbri sisestamiseks
  • <input type=”time”> – tekitab võimaluse aja sisestamiseks
  • <input type=”url”> – tekitab võimaluse failiaadressi lisamiseks
  • <input type=”week”> – tekitab võimaluse nädala määramiseks

Nüüd vaatleme lähemalt ühe tagasisidevormi loomist, mis sisaldaks:

  • vormi edastaja nime (kasutades input type=”text”)
  • vormi edastaja e-posti aadressi (kasutades input type=”email”)
  • pöördumise sisu (kasutades välja textarea)
  • üht nimekirja valikutest, millest on võimalik valida üks (kasutades input type=”radio”)
  • üht rippmenüüd, millest on võimalik valida üks väärtus (kasutades elementi select)
  • paari linnukese kasti valikute tegemiseks (kasutades input type=”checkbox”)
  • nuppu andmete edastamiseks
  • nuppu vormi alglaadimiseks
<form action="andmed.php" id="andmevorm" method="post">
  <input class="andmed" type="text" name="nimi" placeholder="Sisestage palun oma nimi"><br>
  <input class="andmed" type="email" name="epost" placeholder="Sisestage palun oma e-posti aadress"><br>
  <textarea class="andmed" name="sonum" rows="3" columns="30" placeholder="Palun kirjutage siia oma sõnumi sisu"></textarea><br>
  <input class="valikud" type="radio" id="valik1" name="valikud" value="Roblox">
  <label for="valik1">Roblox</label><br>
  <input class="valikud" type="radio" id="valik2" name="valikud" value="Minecraft">
  <label for="valik2">Minecraft</label><br>
  <input class="valikud" type="radio" id="valik3" name="valikud" value="Muu">
  <label for="valik3">Muu</label><br><br>
  <label class="valikud" for="autod">Valige palun oma lemmikauto:</label><br>
  <select class="andmed" name="auto" id="autod" form="andmevorm">
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Toyota">Toyota</option>
    <option value="Audi">Audi</option>
  </select><br>
  <input class="valikud" type="checkbox" id="soiduvahend1" name="soiduvahend1" value="Ratas">
  <label class="valikud" for="soiduvahend1"> Mul on jalgratas</label><br>
  <input class="valikud" type="checkbox" id="soiduvahend2" name="soiduvahend2" value="Touks">
  <label class="valikud" for="soiduvahend2"> Mul on tõukeratas</label><br>  
  <input class="nupp" type="reset" value="Tühista">
  <input class="nupp" type="submit" value="Edasta">
</form>

Kui lisada veidi kujundust:

#andmevorm
{
  width: 100%;
  background-color: white;
}
.andmed
{
  width: 95%;
  padding: 0.5%;
  margin: 1% 2%;
  text-align: left;
  font-family: 'Arial';
  font-size: 16px;
}
.valikud
{
  margin: 1% 2%;
  font-family: 'Arial';
  font-size: 16px;
}
.nupp
{
  width: 45%;
  margin: 2%;
  padding: 1%;
}

tekib seesugune vorm:

Vormi andmete edastamiseks, vajutades nupule Edasta on loodud php keeles fail andmed.php, mille sisu on järgmine:

<!DOCTYPE html>
<html> 
<head>
  <title>Tulemus!</title>
</head>
<body>
 Tere tulemast <?php echo $_POST["nimi"]; ?>!<br>
 Teie e-posti aadress on: <?php echo $_POST["epost"]; ?><br>
 Teie sõnumi sisu on: <?php echo $_POST["sonum"]; ?><br>
 Teie lemmikmäng on: <?php echo $_POST["valikud"]; ?><br>
 Teie lemmikauto on: <?php echo $_POST["auto"]; ?><br>
 <?php
 if (isset($_POST["soiduvahend1"]))
 {
   echo "Teil ON jalgratas<br>";
 } 
 else
 {
   echo "Teil EI OLE jalgratast<br>";
  }
  if (isset($_POST["soiduvahend2"]))
  {
    echo "Teil ON tõukeratas<br>";
  } 
  else
  {
    echo "Teil EI OLE tõukeratast<br>";
  }
?>
<a href="kontakt.html">Tagasi kontaktide lehele</a>
</body>
</html>

Selle tulemusena tekib järgmine info (tumedas kirjas on toodud vormi sisestatud andmed):

Tere tulemast Nimi!
Teie e-posti aadress on: eesti@eesti.ee
Teie sõnumi sisu on: ilusad sõnad
Teie lemmikmäng on: Minecraft
Teie lemmikauto on: Saab
Teil ON jalgratas
Teil EI OLE tõukeratast

Tagasi kontaktide lehele