PHP

Lomakekentälle ohjeteksti

<-- CSS-muotoilu, esim. www-sivun style-tiedostossa -->

.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;
}


 
<-- Ohjeen liittäminen lomakekenttiin. 
    Huom ! Poista keltaisella merkityistä _ kohdista rivinvaihto ! -->

 <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>

Lomakkeen avaava painike

 
<-- Lomakkeeseen liitettävät osat -->

<button class="accordion"> Painikkeessa näkyvä teksti tähän. <button>

<div class="panel">
 <!-- form-elementti sisältöineen sijoitetaan tähän kohtaan.
 
      Tässä voi olla lähes mikä muu tahansa html-elementti joka  
      avautuu painikkeella. -->
</div>

<script>
 var acc = document.getElementsByClassName("accordion");
 var i;

 for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
 }
</script>


<-- Tarvittava CSS-muotoilu -->

button.accordion {
    background-color: #a5d424;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-family:"Comic Sans MS", cursive, sans-serif;
    font-size: 16px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #2d4005;
    color: #7FFF00;
}

button.accordion:after {
    content: '\25BC'; /*02795*/
    font-size: 18px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\25B2"; /*02796*/
    color: #7FFF00;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}

Tiedosto

 
<-- Tiedoston avaaminen www-sivulle -->

<?php
  echo readfile("Aleksis_Kivi.txt");
?> 

 
<-- CSS-muotoilu PHP:koodille -->

<-- Tämä osa head-elementtiin sivun koodauksen alkuu:  -->

 <style type="text/css">
  @variables {
   tekstiVari: #9a4372;
   
  }
  div.muotoiluPHP1 {
   background-color: var(tekstiVari);
   color: #9a4372;
   font-size: 10px;
   font-family:"Comic Sans MS", cursive, sans-serif;
 }
 </style>


<-- Muotoilun liittäminen PHP-koodiin:  -->

<div class="muotoiluPHP1">
 <?php
  echo readfile("Aleksis_Kivi.txt");
 ?>
</div>

Tiedoston avaaminen, fopen() ja fclose()

 
<-- Tiedoston avaaminen www-sivulla näytettäväksi -->

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

Tiedoston luominen

 
  $tiedosto_muuttuja = fopen("tiedostonnimi.txt", "w")
  

Tiedostoon kirjoittaminen, fwrite()

 
<?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);
?>
  

 
Esimerkin tekstitiedosto.txt sisältö:

Aurinko heijastuu
meren pinnalta
  

Tiedoston avaaminen, fread()

Tiedoston avaaminen, fgets()

 
<-- Yhden rivin luku tiedostosta -->

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

Tiedoston loppukohta, feof()

 
<-- Tiedoston loppu kohta -->

<div class="muotoiluPHP1">
 <?php
  echo "TÄMÄ TEKSTI EI OLE TIEDOSTOSTA !!  ";
  
  $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>

Tiedoston merkkien käsittely, fgetc()

 
<-- Tiedoston loppu kohta -->

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

Tiedoston liittäminen, include & require

 
<-- Sisältö php-tiedostona, teksti_10.php -->

<?php
 echo "<p>Copyright © 2016-" . date("Y") . " salmonplayer.fi<p>";
?>


<-- www-sivulle koodaus -->

<h3>Testi-otsikko</h3>
<p>Sivuston tekstiä ja alla sivulle tiedostosta liitetty teksti:</p>
<?php include 'teksti_10.php';?>
 

Navigoinnin tekstit PHP:llä

 
<-- Navigoinnin tekstit ja linkit php-tiedostona, menuPHPtesti.php -->

<?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-tiedosto (menu_php.php) -->

<!DOCTYPE HTML> 
<html lang="en"> 
<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 'menuPHPtesti.php';?>
 </div>

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

</body>
</html>
 

Muuttujat erillisestä tiedostosta

 
<-- hinnat2016.php tiedosto -->

<?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';
?>


<-- www-sivulle koodaus -->

<h3>Testi-otsikko</h3>
<p>Sivuston tekstiä ja alla sivulle tiedostosta liitetty teksti:</p>
<?php include 'teksti_10.php';?>
 

	
 
Tehtävä 4

TEHTÄVÄ PUUTTUU TOISTAISEKSI