PHP - Tiedostot

Tiedostot ja PHP

PHP:llä voidaan käsitellä tiedostoja eri tavoin, esimerkiksi tiedosto voidaan avata, sulkea, sitä voi muokata ja tallentaa sekä tyhjentää. Koska lomakkeille syötettyä tietoakin voidaan tallentaa tiedostoihin käsitellään oppaassa tiedostoihin liittyviä asioita tässä kohtaa.

Tiedosto-funktioita ohjataan ohjain-moodeilla jotka ovat seuraavat:

Moodi Selite Esimerkki
r Avaa tiedoston vain luettavaksi (näytettäväksi www-sivulla) fopen()
w Avaa tiedoston kirjoitusta varten. Korvaa tiedoston sisällön tai luo uuden tiedoston jos sitä ei ole olemassa. Kirjoittaminen alkaa tiedoston alusta.
a Avaa tiedoston kirjoitusta varten. Olemassa olevan tiedon kirjoittaminen tiedostoon. Kirjoittaminen alkaa tiedoston lopusta. Luo uuden tiedoston jos sitä ei ole olemassa.
x Luo uuden tiedoston kirjoitusta varten. Palautaa ilmoituksen FALSE ja virheen jos tiedosto on jo olemassa
r+ Avaa tiedoston lukua ja kirjoitusta varten. Kirjoittaminen alkaa tiedoston alusta.
w+ Avaa tiedoston lukua ja kirjoitusta varten. Poistaa tiedostosta olemassa olevan sisällön tai luo uuden. Kirjoittaminen alkaa tiedoston alusta.
a+ Avaa tiedoston lukua ja kirjoitusta varten. Tiedon kirjoittaminen tiedoston loppuun. Luo uuden tiedoston jos sitä ei olemassa.
x+ Luo uuden tiedoston lukua ja kirjoitusta varten. Palauttaa FALSE ja virhe-ilmoituksen jos tiedosto on jo olemassa

Tiedoston avaaminen ja sulkeminen

Esimerkissä koodauksessa käytetään readfile()-funktioita avaamaan Aleksis_Kivi.txt tekstitiedosto www-sivulle, koodauksen alussa CSS-ohjeet.


  CSS-ohjeet:
  
  .muotoiluPHP1 {
   color: #9A4372;
   font-size: 12px;
   font-family:"Comic Sans MS", cursive, sans-serif;
  }
 
  PHP-koodaus:
  
  <div class="muotoiluPHP1">
   <?php
    echo readfile("Aleksis_Kivi.txt");
   ?>
  </div>
  

Tulos www-sivulla:

Oli vihdoin valmis veljesten pirtti. Viisi syitä oli sen pituus ja kolme sen leveys; itään päin antoi sen toinen, länteen toinen pää. Tultuas sisään ovesta, joka oli huoneen itäisessä päässä, seisoi oikealla suuri kiuvas-uuni, vasemmalla hinkalo, rakettu Valkoa varten talveksi. Kynnyksestä eteenpäin, lähes keskelle huonetta, oli allasi havutettu maa, mutta peripuolella oli uhkea permanto leveistä palkeista rakettu ja ylös tämän kohdalle väljä parvi. Sillä sekä asuintupana että saunana käyttelivät veljekset uutta pirttiänsä. Asuntohuoneesta noin kaksikymmentä askelta seisoi heidän aittansa, liitetty yhteen pienistä, ympyrjäisistä kuusista. (lähde: Aleksis Kivi, Seitsemän Veljestä, kuudes luku)747

Tiedoston avaaminen, fopen() ja fclose()

Tiedosto voidaan avata luettavaksi (r) eli www-sivulla esitettäväksi fopen()-funktiolla seuraavasti:


  <div class="muotoiluPHP1">
   <?php
    $omaTiedosto = fopen("Aleksis_Kivi.txt", "r") 
                  or die("Tuntematon tiedosto !");
    echo fread($omaTiedosto,filesize("Aleksis_Kivi.txt"));
    fclose($omaTiedosto);
   ?>
  </div>
  

Tulos www-sivulla:

Oli vihdoin valmis veljesten pirtti. Viisi syitä oli sen pituus ja kolme sen leveys; itään päin antoi sen toinen, länteen toinen pää. Tultuas sisään ovesta, joka oli huoneen itäisessä päässä, seisoi oikealla suuri kiuvas-uuni, vasemmalla hinkalo, rakettu Valkoa varten talveksi. Kynnyksestä eteenpäin, lähes keskelle huonetta, oli allasi havutettu maa, mutta peripuolella oli uhkea permanto leveistä palkeista rakettu ja ylös tämän kohdalle väljä parvi. Sillä sekä asuintupana että saunana käyttelivät veljekset uutta pirttiänsä. Asuntohuoneesta noin kaksikymmentä askelta seisoi heidän aittansa, liitetty yhteen pienistä, ympyrjäisistä kuusista. (lähde: Aleksis Kivi, Seitsemän Veljestä, kuudes luku)

Esimerkissä:


Tiedoston luominen, fopen()

Tiedosto voidaan luoda palvelimeen jolloin siihen voidaan kirjoittaa esim www-sivulta lomakkeen tai muuttujan kautta. Tiedosto luodaan fopen()-funktiolla käyttämällä w asetusta, esimerkissä luodaan tiedostonimi.txt tiedosto:


   <?php
    $tiedosto_muuttuja = fopen("tiedostonnimi.txt", "w")
   ?>
  

Tiedostoon kirjoittaminen, fwrite()

Palvelimessa olevaan tiedostoon voidaan kirjoittaa esim www-sivulta lomakkeen kautta tai PHP-koodauksen prosessin tuloksena muuttujan avulla.

Esimerkissä tiedostoon kirjoitetaan fwrite()-funktiolla ja muuttujien seuraavasti:


  <div class="muotoiluPHP1">
   <?php
    $teksti = fopen("tekstitiedosto.txt", "w") 
             or die("Tuntematon tiedostonimi !");
    $uusi = "Aurinko heijastuu\n";
    fwrite($teksti, $uusi);
    $uusi = "meren pinnalta\n";
    fwrite($teksti, $uusi);
    fclose($teksti);
   ?>
   <?php
   	echo readfile("tekstitiedosto.txt");
   ?>
  </div> 
  

Tulos www-sivulla:

Aurinko heijastuu meren pinnalta 33

Mikäli edellä luotu avataan uudelleen ja siihen kirjoitetaan eri tekstit, tiedoston sisältö korvautuu uusilla teksteillä.


Tiedoston avaaminen, fread()

Tiedosto-funktio fread(), tiedoston lukeminen muuttujaan, koostuu seuraavista osista:


   <?php
   	fread($muuttujan_nimi,filesize("tiedostonimi.txt"));
   ?>
  

Tiedoston avaaminen, fgets()

Tiedosto-funktio fgets() lukee tiedostosta vain yhden rivin esimerkiksi www-sivulla esitettäväksi, esimerkki:


  <div class="muotoiluPHP1">
   <?php
    $omaTiedosto = fopen("Aleksis_Kivi.txt", "r") 
                 or die("Tuntematon tiedosto !");
    echo fgets($omaTiedosto,filesize("Aleksis_Kivi.txt"));
    fclose($omaTiedosto);
  ?>
  <</div>
  

Tulos www-sivulla, yksi teksti rivi tiedostosta:

Oli vihdoin valmis veljesten pirtti. Viisi syitä oli sen pituus ja kolme sen leveys; itään päin antoi sen toinen, länteen toinen pää.

Tiedoston loppukohta, feof()

Tiedosto-funktio feof() tutkii tiedoston rivien päättymiskohdat ja lisää niihin rivinvaihtdot. Käyttökelpoinen käsiteltäessä tuntemattoman kokoisia tiedostoja, esimerkki:


  <div class="muotoiluPHP1">
   <?php
    echo "TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !! <br> ";
  
    $omaTiedosto = fopen("Aleksis_Kivi.txt", "r") 
                 or die("Tuntematon tiedosto !");
    while(!feof($omaTiedosto)) {
      echo fgets($omaTiedosto) . "<br>";
    }
    fclose($omaTiedosto);
  
    echo "TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!  ";
  ?>
  </div>
  

Tulos www-sivulla, rivien lopuissa rivinvaihto:

TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!
Oli vihdoin valmis veljesten pirtti. Viisi syitä oli sen pituus ja kolme sen leveys; itään päin antoi sen toinen, länteen toinen pää.
Tultuas sisään ovesta, joka oli huoneen itäisessä päässä, seisoi oikealla suuri kiuvas-uuni, vasemmalla hinkalo, rakettu Valkoa varten talveksi.
Kynnyksestä eteenpäin, lähes keskelle huonetta, oli allasi havutettu maa, mutta peripuolella oli uhkea permanto leveistä palkeista rakettu ja ylös tämän kohdalle väljä parvi.
Sillä sekä asuintupana että saunana käyttelivät veljekset uutta pirttiänsä.
Asuntohuoneesta noin kaksikymmentä askelta seisoi heidän aittansa, liitetty yhteen pienistä, ympyrjäisistä kuusista.

(lähde: Aleksis Kivi, Seitsemän Veljestä, kuudes luku)
TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!

Esimerkissä yllä, while-lauseella toistetaan rivi kerrallaan (fgets($omaTiedosto)) merkkijono www-sivulle esitettäväksi sekä kunkin rivin loppuun tehdään rivinvaihto.


Tiedoston merkkien käsittely, fgetc()

Tiedosto-funktio fgetc() avulla voidaan käsitellä tiedostoa merkki kerrallaan (fgets() rivi kerrallaan). Esimerkissä tiedosto näytetään merkki kerrallaan www-sivulle näyttämällä alaviiva jokaisen merkin perään:


  <div class="muotoiluPHP1">
   <?php
    echo "TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !! <br> ";
  
    $omaTiedosto = fopen("Aleksis_Kivi.txt", "r") 
                 or die("Tuntematon tiedosto !");
    while(!feof($omaTiedosto)) {
      echo fgetc($omaTiedosto) . "_";
    }
    fclose($omaTiedosto);
  
    echo "</br>TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!  ";
  ?>
  </div>
  

Tulos www-sivulla, rivien lopuissa rivinvaihto:

TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!
ï_»_¿_O_l_i_ _v_i_h_d_o_i_n_ _v_a_l_m_i_s_ _v_e_l_j_e_s_t_e_n_ _p_i_r_t_t_i_._ _V_i_i_s_i_ _s_y_i_t_Ã_¤_ _o_l_i_ _s_e_n_ _p_i_t_u_u_s_ _j_a_ _k_o_l_m_e_ _s_e_n_ _l_e_v_e_y_s_;_ _i_t_Ã_¤_Ã_¤_n_ _p_Ã_¤_i_n_ _a_n_t_o_i_ _s_e_n_ _t_o_i_n_e_n_,_ _l_Ã_¤_n_t_e_e_n_ _t_o_i_n_e_n_ _p_Ã_¤_Ã_¤_._ _ _T_u_l_t_u_a_s_ _s_i_s_Ã_¤_Ã_¤_n_ _o_v_e_s_t_a_,_ _j_o_k_a_ _o_l_i_ _h_u_o_n_e_e_n_ _i_t_Ã_¤_i_s_e_s_s_Ã_¤_ _p_Ã_¤_Ã_¤_s_s_Ã_¤_,_ _s_e_i_s_o_i_ _o_i_k_e_a_l_l_a_ _s_u_u_r_i_ _k_i_u_v_a_s_-_u_u_n_i_,_ _v_a_s_e_m_m_a_l_l_a_ _h_i_n_k_a_l_o_,_ _r_a_k_e_t_t_u_ _V_a_l_k_o_a_ _v_a_r_t_e_n_ _t_a_l_v_e_k_s_i_._ _ _K_y_n_n_y_k_s_e_s_t_Ã_¤_ _e_t_e_e_n_p_Ã_¤_i_n_,_ _l_Ã_¤_h_e_s_ _k_e_s_k_e_l_l_e_ _h_u_o_n_e_t_t_a_,_ _o_l_i_ _a_l_l_a_s_i_ _h_a_v_u_t_e_t_t_u_ _m_a_a_,_ _m_u_t_t_a_ _p_e_r_i_p_u_o_l_e_l_l_a_ _o_l_i_ _u_h_k_e_a_ _p_e_r_m_a_n_t_o_ _l_e_v_e_i_s_t_Ã_¤_ _p_a_l_k_e_i_s_t_a_ _r_a_k_e_t_t_u_ _j_a_ _y_l_Ã_¶_s_ _t_Ã_¤_m_Ã_¤_n_ _k_o_h_d_a_l_l_e_ _v_Ã_¤_l_j_Ã_¤_ _p_a_r_v_i_._ _ _S_i_l_l_Ã_¤_ _s_e_k_Ã_¤_ _a_s_u_i_n_t_u_p_a_n_a_ _e_t_t_Ã_¤_ _s_a_u_n_a_n_a_ _k_Ã_¤_y_t_t_e_l_i_v_Ã_¤_t_ _v_e_l_j_e_k_s_e_t_ _u_u_t_t_a_ _p_i_r_t_t_i_Ã_¤_n_s_Ã_¤_._ _ _A_s_u_n_t_o_h_u_o_n_e_e_s_t_a_ _n_o_i_n_ _k_a_k_s_i_k_y_m_m_e_n_t_Ã_¤_ _a_s_k_e_l_t_a_ _s_e_i_s_o_i_ _h_e_i_d_Ã_¤_n_ _a_i_t_t_a_n_s_a_,_ _l_i_i_t_e_t_t_y_ _y_h_t_e_e_n_ _p_i_e_n_i_s_t_Ã_¤_,_ _y_m_p_y_r_j_Ã_¤_i_s_i_s_t_Ã_¤_ _k_u_u_s_i_s_t_a_._ _ _(_l_Ã_¤_h_d_e_:_ _A_l_e_k_s_i_s_ _K_i_v_i_,_ _S_e_i_t_s_e_m_Ã_¤_n_ _V_e_l_j_e_s_t_Ã_¤_,_ _k_u_u_d_e_s_ _l_u_k_u_)__
TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!

Tiedoston liittäminen, include & require

PHP:llä voidaan liittää www-sivulle tiedostoksi talletettu sisältöä. Sisällön vaihtaminen onnistuu käyttämällä rakennetta:

include 'tiedostonnimi';

tai

reguire 'tiedostonnimi';

Huom! include ja require määritykset ovat keskenään identtisiä, paitsi virhetilanteissa:

require tuottaa suuren virheen (fatal error), (ilmoitus E_COMPILE_ERROR) ja pysäyttää koodin suorituksen
include tuottaa ainoastaan varoituksen (ilmoitus E_WARNING) ja koodin suoritus jatkuu loppuun asti

Sisällön näyttäminen www-sivustolla tiedostosta, copyraitti.php tiedoston sisältö:


   <?php
     echo "<p>Copyright © 2020-" . date("Y") . " player<p>";
   ?>
  
Sisällön näyttäminen www-sivustolla tiedostosta, copyraitti.php tiedoston liittäminen HTML-koodaukseen:


  <div class="muotoiluPHP1">
   <h3>Testi-otsikko</h3>
   <p>Sivuston tekstiä ja alla sivulle tiedostosta liitetty teksti:</p>
   <?php include 'copyraitti.php';?>
  </div>
  

Tulos www-sivulla, rivien lopuissa rivinvaihto:

Testi-otsikko

Sivuston tekstiä ja alla sivulle tiedostosta liitetty teksti:

Copyright © 2020-2024 player


Navigoinnin tekstit PHP:llä

Kun www-sivuston sivujen määrä, kun tässäkin oppaassa, kasvaa suuremmaksi, on ehkä helpompaa toteuttaa navigoinnin tekstit linkkeineen yhteen tiedostoon PHP:nä ja liittää ne www-sivun koodaukseen tiedostona.

Esimerkissä Menu-valikko on liitetään tiedostona www-sivun koodaukseen.

Menu PHPmenu.php nimisessä tiedostossa:


   <?php
    echo '<ul>
     <li><a class="active" href="#home">Etusivu</a></li>
     <li><a href="#tuote">Tuotteet</a></li>
     <li><a href="#palvelu">Palvelut</a></li>
     <li><a href="#yhteys">Ota yhteyttä</a></li>
    </ul>';
   ?>
  

Esimerkin www-sivun html-tiedosto CSS-ohjeineen:


  <!DOCTYPE HTML> 
  <html> 
   <head>
    <meta charset="UTF-8">
    <title>TESTISIVU</title>
    <style>
     ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #CD5C5C;
     }
     li {
      float: left;
     }
     li a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
     }
     li a:hover {
      background-color: #F08080;
     }
    </style>
   </head>
  <body>

  <!-- Alla, div:ssä liitetään muotoilu-ohje sekä 
      div:iin avataan tiedostosta menu -->
	  
   <div class="menu">
    <?php include 'PHPmenu.php';?>
   </div>

   <h2>Menu-tekstit PHP:llä</h2>
   <p>Sivun menu-tekstit on toteutettu PHP:llä.</p>

  </body>
 </html>
  
Esimerkin www-sivu (avaa/sulje)

Tehtävä 40

Vasemman reunan Menu-valikko erillisessä tiedostossa

Toteuta esimerkin pohjalta PHP-tehtävien palautussivuston viimeisen sivun vasemmassa reunassa oleva Menu-valikko.

Laita esille ko valikossa käyttämäsi koodaukset, ei siis koko sivun, tehtävien palautus-sivun koodausboksissa.




Muuttujat erillisessä tiedostossa

Toisinaan voi olla kätevää usein muutettavien muuttujien tallentaminen erilliseen tiedostoon ja liittää ne PHP-koodaukseen tiedostosta.

Esimerkissä viiden tuotteen nimet ja hinnat ovat erillisessä tiedostossa, hinnat2020.php:


  <?php
   $tuote1='Tuulettimenhihna';
   $hinta1='23.55';
   $tuote2='Kiristinsarja';
   $hinta2='78.1';
   $tuote3='Jäähdytin';
   $hinta3='678,5';
   $tuote4='Vesipumppu';
   $hinta4='47.9';
   $tuote5='Vesiletkusarja';
   $hinta5='39.2';
  ?>
  

Tiedoston hinnat2020.php liittäminen ja muuttujien tietojen näyttäminen www-sivulle:


  <div class="muotoiluPHP1">
   <?php include 'hinnat2020.php';
    echo "Tuote: $tuote1 Hinta: $hinta1 euroa<br>";
    echo "Tuote: $tuote2 Hinta: $hinta2 euroa<br>";
    echo "Tuote: $tuote3 Hinta: $hinta3 euroa<br>";
    echo "Tuote: $tuote4 Hinta: $hinta4 euroa<br>";
    echo "Tuote: $tuote5 Hinta: $hinta5 euroa<br>";
   ?>
  </div>
  

Tulos www-sivulla:

Tuote: Tuulettimenhihna Hinta: 23.55 euroa
Tuote: Kiristinsarja Hinta: 78.1 euroa
Tuote: Jäähdytin Hinta: 678,5 euroa
Tuote: Vesipumppu Hinta: 47.9 euroa
Tuote: Vesiletkusarja Hinta: 39.2 euroa

Lomakkeelta tiedot tekstitiedostoon

Lomakkeella lähetetyt tiedot voidaan kirjoitetaan tekstitiedostoon.

Esimerkin lomake (alla) lähettää viestit_kirjoita.php tiedostolle lomakkeen tiedot. Tiedosto viestit_kirjoita.php kirjoittaa tiedot osallistu.txt tiedostoon.


Lue viestit TÄSTÄ.


Esimerkki-lomakkeen koodaus:


  <div class="tausta1">
   <form action="viestit_kirjoita.php" method="POST">
    <label for="eNimi"> Etunimi </label>
    <input class="lomake1" type="text" id="eNimi" name="eNimi" placeholder="Anna etunimesi...">

    <label for="sNimi"> Sukunimi </label>
    <input class="lomake1" type="text" id="sNimi" name="sNimi" placeholder="Anna sukunimesi..">
  
    <input class="lomake1" type="submit" value="Osallistu">
   </form>
  </div><br>
   
  <p><b>Lue viestit <a id="tekstilinkki" href="lueviestit.php" target="_blank">TÄSTÄ</a>.</b></p>
  

Osallistu-painike siirtää viestin viestit_kirjoita.php tiedostolle joka avaa osallistu.txt tiedoston muuttujaan, muuttujaan "kirjoitetaan" annatut tiedot ja muuttuja suljetaan. Lisäksi sivusto antaa viestin lomakkeen täyttäjälle näkyville 3 sekunniksi jonka jälkeen avataan selaimeen uudelleen sivu jonka lomakkeella oli tiedot lähetetty.

Alla, viestit_kirjoita.php tiedoston koodaus:


 <!DOCTYPE HTML> 
 <html> 
  <head>
   <meta charset="UTF-8"> 
   <title> Lomake </title>
   <style>
    body{
     background-color: #505050;
     color: yellow;
    }
    .container {
     position: sisalto;
    }
    .ilmoitus {
	 position: absolute;
     left: 0;
     top: 50%;
     width: 100%;
     text-align: center;
     font-size: 18px;	
    }
   </style>
  </head>
  <body>
 
  <?php
   $viestit = fopen("osallistu.txt","a")
              or die("Tuntematon tiedosto.");
    
   $uusi = "\nEtunimi: ".$_POST["eNimi"].
           "\nSukunimi: ".$_POST["sNimi"].
		   "\n\n";
   fwrite($viestit,$uusi);
  
   fclose($viestit);	 	  
  ?>
  <div class="sisalto">
   <div class="ilmoitus">
    <p> Kiitos yhteyden otostasi.<br> Otamme pikaisesti yhteyttä sinuun.<br>
       (ilmoitus sulkeutuu automaattisesti 3 sekunnin kuluttua)</p>
   </div>
  </div> 
  
  <script type="text/javascript">
   (function(){
     setTimeout(function(){
      window.location="http://tietokanta.dy.fi/ohjelmointi/uusi_opiPHP/sivu8.php#otsikko11";
     },3000); /* 1000 = 1 sekuntti*/
    })();
  </script>
  
  <-- HUOM !! scriptissä yllä, location:iin linkki sinne missä lähettävä
   lomake on sijaitsee www-palvelimella -->
 </body>
 </html>
  

Esimerkki-lomakkeen alla on linkki josta siirrytään www-sivulle (lueviestit.php) jossa voi lukea viestit ja poistaa viestit. Alla tämä lue/poista viestit www-sivun koodaus:


 <!DOCTYPE HTML> 
 <html> 
  <head>
   <meta charset="UTF-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
    * {
     box-sizing: border-box;
    }
    body {
     margin: 0;
    }
    .header {
     background-color: #f1f1f1;
     padding: 20px;
     text-align: center;
    }
    .topnav {
     overflow: hidden;
     background-color: #333;
    }
    .topnav a {
     float: left;
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
    }
    .topnav a:hover {
     background-color: #ddd;
     color: black;
    }
    .column {
     float: left;
     padding: 10px;
    }
   .column.side {
    width: 25%;
   }
   .column.middle {
    width: 50%;
   }
   .row:after {
    content: "";
    display: table;
    clear: both;
   }
   /* Responsive layout */
   @media screen and (max-width: 600px) {
    .column.side, .column.middle {
     width: 100%;
    }
   }
  .viesti_lomake {
    width: 60%;
	border: 1px solid RGB(56,41,12);
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
	box-shadow: 10px 10px 5px grey;
  }
  input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    /*background-color: #f8f8f8;*/
    resize: none;
  }
  input[type=submit] {
    width: 40%;
    background-color: RGB(83,76,24); /*#4CAF50*/
    color: white;
	font-size: 18px;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type=submit]:hover {
    background-color: RGB(192,175,56);
	color: RGB(128,0,0);
  }
  #list  p {
    font: arial;
    font-size: 18px;
	width: 700px;
	padding: 10 px;
	border: 1px solid darkred;
    background-color: white;
	box-shadow: 10px 10px 5px grey;
  }
  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
  }
  .button2:hover {
	background-color: RGB(8,90,0);
    color: yellow;	
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
 </style>
 </head>
 <body>

  <div class="header">
   <h3> Viestien lukeminen </h3>
  </div>

  <div class="topnav">
   <a href="http://tietokanta.dy.fi/ohjelmointi/uusi_opiPHP/sivu8.php#otsikko11">Palaa PHP-oppaaseen</a>
   <!--<a href="#"></a>
   <a href="#"></a> -->
  </div>

  <div class="row">
   <div class="column side">
    <!--<h2>Oikealla </h2>
    <p>Tähän voi sijoittaa sisältöä</p>-->
   </div>
  
   <div class="column middle">
    <h3> Saapuneet viestit </h3>
  
    <div id="list">
     <p><iframe src="osallistu.txt" frameborder="0" height="400"
      width="100%"></iframe></p>
    </div>
  
    <p> Viestit voi poistaa painikkeella.. </p>
    <button class="button button2" id="btnfun1" name="btnfun1" onClick='location.href="?button1=1"'>
	Poista viestit </button>
  <?php
   if($_GET['button1']){fun1();}
 
   function fun1()
   {
    $viestit = fopen("osallistu.txt","w+")
              or die("Tuntematon tiedosto.");
    
    $uusi = " ";
    fwrite($viestit,$uusi);
    fclose($viestit);
   }
  ?>
  
  </div>
  
  <div class="column side">
   <!-- <h2>Vasemmalla. Tähän voi laittaa sisältöä</h2>-->
  </div>  

</div>
  
</body>
</html>

  

KESKEN





TEHTÄVÄ 1 Toteuta www-sivulle kaksi painiketta JavaScript:iä käyttäen:

Vaihda 1, josta vaihtuu painikkeen yläpuolella oleva teksti
Vaihda 2, josta vaihtuu painikkeen alapuolella oleva teksti



TEHTÄVÄ 2 Hae Google:lla kaksi pientä kuvaa ja lisää www-sivulle
kaksi kuva-elementtiä (img) JavaScript:iä käyttäen:

Kuvasta 1, josta vaihtuu painikkeen yläpuolella oleva teksti
Kuvasta 2, josta vaihtuu painikkeen alapuolella oleva teksti
Lisää kuville myös CSS-ohje jolla kuvaa klikatessa www-sivulla esitetään "painamis-efekti."