PHP - Lomakkeet

Lomakkeet

PHP:n yksi olennaisista ominaisuuksista on tarjota mahdollisuudet käsitellä HTML:n lomake-elementeistä (form) saatuja tietoja.

Lomake-elementit sijoitetaan www-sivulle haluttuihin paikkohin ohjeteksteineen. Lomakekenttiin kirjoitetut tiedot ja/tai valinnat lähetetään sivulta ns lomakkeenkäsittelijälle. Lomakkeenkäsittelijä voi olla toteutettu muullakin kielellä kuin PHP-kielellä ja voi olla (kuten alla) erillisenä tiedostona tai itse www-sivulla. Lomakkeilta saadut tiedot voidaan kirjoittaa tiedostoon, tietokantaan tai lähettää erikseen varattuu sähköpostiin.
Lomakkeiden tietoja voidaan käsitellä kahdella eri tavalle eli metodilla:

POST - suositeltava, koska lomakkeilta lähetetty tieto ei jää tietokoneen muistiin (selain historiaan).
GET - esimerkiksi ei sovellu tunnusten ja salasanojen käsittelyyn (em syystä), get-metodia voidaan käyttää kun lähetetyistä tiedoista halutaan tehdä kirjanmerkki.

Lomakkeita sisältävien sekä käsittellevien tiedostojen asetukset

Lomakkeet ja lomakkeiden käsittelijöille, eli PHP:llä toteutetuille ja tietokäsitteleville www-tiedostoille, on annettava oikeudet lukea ja kirjoittaa tiedostoihin.

Näiden oikeuksien antaminen tapahtuu www-palvelimella oleviin tiedostoihin FTB-ohjelmaa käyttäen, esimerkissä FileZilla-ohjelma.

FileZilla -ohjelman käyttöliittymän oikealla olevassa www-palvelin ikkunassa, klikkaa hiiren oikella painikkeella sitä PHP-tiedostoa joka käsittellee esimerkiksi lomakeelta tulevaa tietoa.
Aukeaa kuvan valikko.



Valitse valikosta alin, Tiedosto oikeudet... (File premissions...) jolloin aukeaa seuraavan kuvan mukainen asetus ruutu.
Laita kaikkiin kohtiin rasti tai kirjoita lomakekenttään numero 777 ja paina OK.



POST-metodi, lomake-esimerkki

Esimerkissä (alla) lomakkeen www-sivulla muodostaa kaksi tekstikenttää ja Lähetä-painike. Lomake lähettää tiedot tervetuloa.php -nimiselle lomakkeenkäsittelijälle POST-metodilla. Lomakkeenkäsittelijässä tiedot vastaanotetaan _POST-metodilla ja sijoitetaan muuttujaan.

1. Testitiedosto lomakeisiin kirjoitettujen tietojen lähettämiseen POST-metodilla lomakkeenkäsittelijälle:


  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="UTF-8">
	<style>
	 .vari2{
	   color: Maroon;
     }
	</style>
   </head>
   <body>
   
    <div class="vari2">
    <form action="tervetuloa.php" method="POST"> 
      Nimi: <input type="text" name="nimi"><br> 
      Sähköposti: <input type="text" name="sahkoposti"><br> 
      <input type="submit" value="Lähetä">
    </form>
    </div>
	
   </body>
  </html>

Tulos www-sivulla, kokeile esimerkkiä:

Nimi:
Sähköposti:

Alla, tervetuloa.php lomakkeenkäsittelijä. Lomakkeenkäsittelijä kannattaa tallentaa samaan kansioon sen www-sivun kanssa mikä tiedot lähettää:


  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="UTF-8">
	<style>
     body{
       background-color: #B2D9D9;
     }
     .viesti {
       margin: auto; 
       background-color: lightgrey;
       width: 40%;
       border: 1px solid green;
       padding: 50px;
     }
     .teksti{
       text-align: center;	
     }
     .paluu{
       background-color: #4CAF50; /* Green */
       border: none;
       color: white;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       margin: 4px 2px;
       cursor: pointer;
       padding: 7px;  
     }
    </style> 
   </head>
   <body>
    <div class="viesti teksti">
	  <h3>POST-metodi</h3>
      Tervetuloa <?php echo $_POST["nimi"]; ?><br>
      Sähköpostisi on: <?php echo $_POST["sahkoposti"]; ?><br>
      <a href="sivu7.html#otsikko3"><button class="paluu">Palaa oppaaseen</button></a>
    <div>
	
   </body>
  </html>

GET-metodi, lomake-esimerkki

Seuraavassa esimerkissä tietoja kerätään ja lähetetään GET-metodilla tervetuloa_get.php lomakkeenkäsittelijälle. Kokeile esimerkkiä ja tarkista mitä selaimen osoitekentässä lukee lähettämisen jälkeen.

1. Testitiedosto lomakeisiin kirjoitettujen tietojen lähettämiseen GET -metodilla lomakkeenkäsittelijälle:


  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="UTF-8">
	<style>
	 .vari3{
	   color: SlateBlue;
     }
	</style>
   </head>
   <body>
   
    <div class="vari3">
    <form action="tervetuloa_get.php" method="GET"> 
      Osoite: <input type="text" name="osoite"><br> 
      Postitoimipaikka: <input type="text" name="paikka"><br> 
      <input type="submit" value="Lähetä">
    </form>
    </div>
	
   </body>
  </html>

Tulos www-sivulla, kokeile esimerkkiä:

Osoite:
Postitoimipaikka:

Alla, tervetuloa.php lomakkeenkäsittelijä. Lomakkeenkäsittelijä kannattaa tallentaa samaan kansioon sen www-sivun kanssa mikä tiedot lähettää:


  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="UTF-8">
	<style>
     body{
       background-color: #B2D9D9;
     }
     .viesti {
       margin: auto; 
       background-color: lightgrey;
       width: 40%;
       border: 1px solid green;
       padding: 50px;
     }
     .teksti{
       text-align: center;	
     }
     .paluu{
       background-color: #4CAF50; /* Green */
       border: none;
       color: white;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       margin: 4px 2px;
       cursor: pointer;
       padding: 7px;  
     }
    </style> 
   </head>
   <body>
    <div class="viesti teksti">
	  <h3> GET-metodi
      Osoite <?php echo $_GET["osoite"]; ?><br>
      Postitoimipaikka: <?php echo $_GET["paikka"]; ?><br>
      <a href="../sivu7.html#otsikko3"><button class="paluu">Palaa oppaaseen</button></a>
    <div>
	
   </body>
  </html>

Tehtävä 36

Kopioi POST-metodin esimerkki-koodaukset erillisiin tiedostoihin.

Nimeä lomake-kentän sisältävä nimellä tiedot1.php ja tervetuloa.php niminen esimerkki koodaus nimellä laske1.php.
Vaihda tiedot1.php koodauksessa action-kohtaan laske1.php.
Siirrä tiedostot www-palvelimelle, huomaa muuttaa tiedostojen oikeuksia.
Avaa internetistä tiedot1.php selaimella ja testaa toiminta.

Muuta lomake (tiedot1.php) kysymään kolmen vastuksen arvot R1, R2 ja R3. Muuta myös name-kohtiin vastaavat nimet.
Muuta laske1.php vastaanottamaan R1, R2 ja R3 arvot.
Toteuta kolmen vastuksen rinnan kytkennän laskeminen ja tulosten näyttäminen CSS-muotoiltuna asiallisella tavalla.

Siirrä tiedot1.php tiedostosta lomake-koodaus PHP-palautussivustolle
Lisää laske1.php tiedostoon Palaa tehtäviin-teksti sekä siihen linkki jota klikkaamalla palataan PHP-palautussivustolle tehtävän 36 kohdalle.

Lomake pakollisilla kentillä ja virheiden tarkistuksilla

Seuraavassa esimerkissä lomake, lomakkeenkäsittely ja palaute www-sivulle on kaikki samassa koodauksessa. Lomakkeenkäsittelijä tarkistaa kunkin kentän tiedot onko ne yleisen normin mukaisessa muodossa ja ilmoittaa virheistä sekä ilmoittaa pakollisten kenttien täyttämättä jättämisestä.


<php
/*Muuttujat ja niiden nollaaminen */
 $nimiVirhe = $emailVirhe = $yht_ottoVirhe = $wwwVirhe = "";
 $nimi = $email = $yht_otto = $kommentti = $wwwsivu = "";

 if ($_SERVER["REQUEST_METHOD"] == "POST") {
   if (empty($_POST["nimi"])) {
     $nimiVirhe = "Annettu nimi ei kelpaa";
   } else {
     $nimi = test_input($_POST["nimi"]);
     /* tarkistetaan onko annetussa nimessä vai kirjaimia ja välilyöntejä */
     if (!preg_match("/^[a-åA-Å ]*$/",$nimi)) {
       $nimiVirhe = "Kirjoita vain kirjaimia ja välilyöntejä !";
     }
   }
   
   if (empty($_POST["email"])) {
     $emailVirhe = "Annettu email ei kelpaa";
   } else {
     $email = test_input($_POST["email"]);
     /* tarkistetaan onko email:n oikeassa muotoinen */
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       $emailVirhe = "Väärä email, kokeile uudelleen.";
     }
   }
     
   if (empty($_POST["wwwsivu"])) {
     $wwwsivu = "";
   } else {
     $wwwsivu = test_input($_POST["wwwsivu"]);
     /* www-sivun osoitteen tarkistaminen */
     if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$wwwsivu)) 
     {
        $wwwVirhe = "Väärä www-sivu, www.nimi.pääte"; 
     }
   }

   if (empty($_POST["kommentti"])) {
     $kommentti = "";
   } else {
     $kommentti = test_input($_POST["kommentti"]);
   }

   if (empty($_POST["yht_otto"])) {
     $yht_ottoVirhe = "yht_otto jäi valitsematta.";
   } else {
     $yht_otto = test_input($_POST["yht_otto"]);
   }
 }

 function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
 }
 
 <h2>PHP-lomake esimerkki</h2>
 <p><span class="error">* pakolliset kentät.</span></p>
 <form method="post" 
   action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
   Nimi: 
    <input type="text" name="nimi" value="<?php echo $nimi;?>">
    <span class="error">* <?php echo $nimiVirhe;?></span>
    <br><br>
   email: 
    <input type="text" name="email" value="<?php echo $email;?>">
    <span class="error">* <?php echo $emailVirhe;?></span>
    <br><br>
   www-sivu:
    <input type="text" name="wwwsivu" value="<?php echo $wwwsivu;?>">
    <span class="error"><?php echo $wwwVirhe;?></span>
    <br><br>
   Kommentti: 
    <textarea name="kommentti" rows="5" cols="40">
    <?php echo $kommentti;?></textarea>
    <br><br>
   Ota yhteyttä: 
    <input type="radio" name="yht_otto" <?php if (isset($yht_otto) 
	&& $yht_otto=="puhelin") echo "checked";?> value="puhelin">puhelin
   <input type="radio" name="yht_otto" <?php if (isset($yht_otto) 
	   && $yht_otto=="email") echo "checked";?> value="email">email
   <span class="error">* <?php echo $yht_ottoVirhe;?></span>
   <br><br>
   <input type="submit" name="submit" value="Lähetä"> 
 </form>
 
 <!-- Alla lomakkeelle syötettyjen tietojen näyttö -->
 <?php
  echo "<h3 class='vari2'>Antamasi tiedot olivat:</h3>";
  echo $nimi . "<br>";
  echo $email . "<br>";
  echo $wwwsivu . "<br>";
  echo $kommentti . "<br>";
  echo $yht_otto;
 ?>

PHP-lomake esimerkki

* pakolliset kentät.

Nimi: *

email: *

www-sivu:

Kommentti:

Ota yhteyttä: puhelin email *

Antamasi tiedot olivat:






Huomaa ! JavaScript:llä voidaan myös suorittaa lomakekenttien tarkistuksia ennen lähettämistä.


Esimerkissä (linkki) on kolme lomakekenttää ja kolme painiketta. Painikkeilla voi valita mikä toiminto tehdään.



Tehtävä 37

Tutustu TÄSTÄ avautuvan sivun lomakkeeseen sekä sen koodaukseen.

Tehtävä

Kopioi esimerkki-koodaus ja muuta koodaus laskemaan tehtävän 36 mukaisesti kolmen vastuksen rinnankytkennän resistanssi.

Muotoile lomake sekä tulosten esittäminen CSS-ohjeilla, etsi CSS-ohjeita w3schools-sivustolta tai Ohjelmointi-oppaan CSS-osasta, Lomakkeet.
Katso esimerkki tästä

Kun olet saanut kaikki toimimaan testi-tiedostossasi, siirrä CSS-ohjeet sekä koodaus PHP-tehtävien palautussivustollesi.


Tehtävä 38

Tehtävä, sarja ja rinnan lasku

Toteuta tehtävän 37 pohjalta toinen laskuri jolla voidaan laskea vastusten R1, R2 ja R3 sarja- tai rinnankytkennän kokonaisarvo Rkok.

Käytä tehtävän 37 koodausta, lisää toinen painike koodaukseen sekä sarjakytkennän laskeminen.

Käytä omia funktioita (2kpl) laskemaan ja näyttämään laskun tulos sen perusteella kumpi laskutoimitus suoritetaan.

Jos valitaan Laske sarja-painiketta näytetään tulosten yläpuolelle teksti
Sarja-laskun tulos:

Jos valitaan Laske Rinnan-painiketta näytetään tulosten yläpuolelle teksti
Rinnan-laskun tulos:


Lomakekentälle ohjeteksti

Esimerkissä liitetään lomakekentille ohjetekstit joka näkyy kun hiiren osoitin viedään lomakekentän päälle.

Nimi:
Kirjoita:
Etunimi Sukunimi

Sähköposti:
Kirjoita esim:
etunimi.sukunimi@edu.hel.fi

Esimerkin CSS-ohjeet ja HTML-koodaus:


  
 CSS-ohjeet:
 
 .vihje {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
 }

 .vihje .vihjeteksti {
    visibility: hidden;
    width: 220px;
    background-color: #800000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
 }

 .vihje .vihjeteksti::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #800000 transparent transparent transparent;
 }

 .vihje:hover .vihjeteksti {
    visibility: visible;
    opacity: 1;
 }


 HTML-koodaus:
 
 <form action="tervetuloa.php" method="post">
  Nimi: <div class="vihje"> <input type="text" name="nimi">
 <span class="vihjeteksti">
  Kirjoita:<br> Etunimi Sukunimi 
 </span></div><br>
  Sähköposti: <div class="vihje"> <input type="text" name="sahkoposti">
 <span class="vihjeteksti">
  Kirjoita esim:<br> etunimi.sukunimi@edu.hel.fi
 </span></div>
 </form>

Painike josta voi avata sekä sulkea lomakkeen

Lomake voidaan laittaaa www-sivulle näkymättömiin ja se voidaan avata www-sivulle erilaisilla tavoilla näkyväksi.
Alla olevan esimerkin HTML-koodaukset ja CSS ohjeet löytyvät seuraavia klikkaamalla:
painike
lomake.

Osallistumis-lomake




Esimerkki-lomake internet-sivustolla

Internet-sivustolle sijoitettu yhteydenotto-lomake, alla linkki:

Siirry esimerkkiin tästä


Esimerkissä käytetyt tiedostot (tiedostojen nimet näkyvät selaimen osoitekentässä):

demoviesti.php - lomake, johon täytetään tietoja,
Lähetä-painikkeella tiedot lähetetään "lomakkeen käsittelijälle".

viesti_1k.php - lomakkeen käsittelijä, avautuu selaimeen antamaan ilmoituksen, 
avaa viestit.txt tekstitiedoston sekä kirjoittaa tiedostoon lomakkeelta lähetetyt tiedot. 
Tiedosto avaa selaimeen 4 sekunnin kuluttua demoviesti.php sivun.
 
xfile.php - www-sivu joka näyttää viestit.txt tekstitiedoston sisällön.

poista_viestit.php - poistaa viestit.txttekstitiedostosta viestit.

viestit.txt - tekstitiedosto jonne lomake kirjoittaa viestejä.
Huomaa! Tekstitiedosto on tallennettava UTF-8 koodattuna, valinta tehtävä kun viestit.txt tekstitiedostoa 
ollaan luomassa esimerkiksi Windows:n muistiolla.
Tehtävä 39

Esimerkin lomake PHP-tehtävien palautussivustolle

Tutki miten ja mitä sivuja yllä oleva Lomake esimerkki käyttää, eli avaa internet selaimessa

Lomake-sivulla on footer-osassa linkki eräässä sanassa, sanaa klikkaamalla www-sivustolla pääsee lukemaan viestit.

Viestien lukemiseen tarkoitetulla sivulla on footer:ssa eräässä sanassa linkki jota klikkaamalla viestit voi poistaa


Tehtävässä käytettävät tiedostot on siirrettävissä ryhmän kansiosta FileZillalla (Viestilomake-kansio tai opettajan ilmoittamassa paikassa).

Perehdy aluksi tiedostojen PHP-, JavaScript- ja from-koodaukseen.


Toteuta hyödyntäen tiedostojen koodauksia PHP-tehtävien palautussivustollesi lomake jolla voi lähettää viestejä, lukea saapuneet viestit sekä poistaa viestit teksti-tiedostosta.




Design and edit player