Kirjautuminen

Haku

Tehtävät

Oppaat: PHP-ohjelmointi: Osa 7 - Nettisivusto

  1. Osa 1 - Johdanto
  2. Osa 2 - Muuttujat
  3. Osa 3 - if-rakenne
  4. Osa 4 - for-silmukka
  5. Osa 5 - Taulukot
  6. Osa 6 - Lomakkeet
  7. Osa 7 - Nettisivusto
  8. Osa 8 - Lisää silmukoista
  9. Osa 9 - Tiedostot
  10. Osa 10 - Omat funktiot
  11. Osa 11 - Istunnot
  12. Osa 12 - Tietokannat
  13. Osa 13 - Tietoturva
  14. Osa 14 - Olio-ohjelmointi
  15. Osa 15 - Kuvien luonti
  16. Osa 16 - Säännölliset lausekkeet
  17. Osa 17 - Merkistöt
  18. Osa 18 - PHP:n ongelmat

Kirjoittaja: Antti Laaksonen. Vuosi: 2011.

Tässä oppaassa teemme kokonaisen PHP:tä hyödyntävän nettisivuston, jossa jokainen sivu käyttää samaa sivupohjaa. Sivuston pääsisältönä on simulaatio, jossa voi tarkastella nopan silmälukujen jakaumaa, kun noppaa heitetään monta kertaa. Sivustolla on myös palautelomake, joka lähettää palautteen eteenpäin sähköpostitse.

Lopullinen sivusto toiminnassaan on tässä: Aapelin kotisivu.

Sivupohja

Yleinen tapa toteuttaa nettisivusto on käyttää jokaisella sivulla samanlaista pohjaa, jossa on esimerkiksi sivuston valikkorakenne. Suoraviivainen tapa toteuttaa tällainen nettisivusto on kirjoittaa jokainen sivu samanlaisen HTML-pohjan sisään. Tässä tulee kuitenkin ongelmaksi, että jos sivupohja muuttuu, muutos täytyy tehdä erikseen jokaiseen sivuun. PHP tulee apuun tässä asiassa.

Tarkastellaan Aapelin kotisivun etusivua:

<!DOCTYPE html>
<html>
  <head>
    <title>Aapelin kotisivu</title>
  </head>
  <body>
    <h1>Aapelin kotisivu</h1>
    <p>
      <a href="index.html">Etusivu</a> |
      <a href="matikka.html">Matematiikka</a> |
      <a href="palaute.html">Palaute</a>
    </p>
    <h2>Etusivu</h2>
    <p>Tervetuloa Aapelin kotisivulle!</p>
  </body>
</html>

Jaamme nyt sivun uudestaan kolmeen osaan:

Tiedoston yla.php sisältö:

<!DOCTYPE html>
<html>
  <head>
    <title>Aapelin kotisivu</title>
  </head>
  <body>
    <h1>Aapelin kotisivu</h1>
    <p>
      <a href="index.php">Etusivu</a> |
      <a href="matikka.php">Matematiikka</a> |
      <a href="palaute.php">Palaute</a>
    </p>

Tiedoston ala.php sisältö:

  </body>
</html>

Tiedoston index.php sisältö:

<?php include("yla.php"); ?>
<h2>Etusivu</h2>
<p>Tervetuloa Aapelin kotisivulle!</p>
<?php include("ala.php"); ?>

Jatkossa voimme tehdä kaikki uudet sivut samaan tapaan kuin tiedoston index.php. Komento include liittää sivun alkuun tiedoston yla.php sisällön ja sivun loppuun tiedoston ala.php sisällön. Jos sivun yläosa tai alaosa muuttuu, riittää muuttaa yhtä tiedostoa.

Nopan heitto

Aapelin kotisivun Matematiikka-osiossa voi tarkastella, miten nopan antamat silmäluvut jakautuvat, kun noppaa heitetään monta kertaa. Pääsivu matikka.php on seuraavanlainen:

<?php include("yla.php"); ?>
<h2>Matematiikka</h2>
<p>Kuinka monta kertaa haluat heittää noppaa?</p>
<ul>
  <li> <a href="noppa.php?kerrat=100">100 kertaa</a>
  <li> <a href="noppa.php?kerrat=1000">1000 kertaa</a>
  <li> <a href="noppa.php?kerrat=10000">10000 kertaa</a>
</ul>
<?php include("ala.php"); ?>

Ideana on, että sivun noppa.php osoitteessa kerrotaan nopan heittokertojen määrä. Tähän tietoon pääsee käsiksi PHP:ssä taulukon $_GET avulla samaan tapaan kuin lomakkeiden yhteydessä. Erona aiempaan on kuitenkin, että missään ei ole lomaketta vaan tieto lisätään suoraan sivun osoitteeseen.

Sivun noppa.php koodi on seuraava:

<?php include("yla.php"); ?>
<h2>Nopanheitto</h2>
<?php
for ($i = 1; $i <= 6; $i++) {
    $jakauma[$i] = 0;
}
$kerrat = $_GET["kerrat"];
for ($i = 1; $i <= $kerrat; $i++) {
    $heitto = rand(1, 6);
    $jakauma[$heitto]++;
    echo "<img src=\"noppa{$heitto}.png\" alt=\"$heitto\">";
    if ($i % 20 == 0) {
        echo "<br>";
    }
}
echo "<h3>Jakauma</h3>";
echo "<ul>";
for ($i = 1; $i <= 6; $i++) {
    echo "<li>silmäluku {$i} tuli {$jakauma[$i]} kertaa";
}
echo "</ul>";
?>
<?php include("ala.php"); ?>

Koodissa oleva silmukka heittää noppaa halutun määrän kertoja arpomalla funktiolla rand kokonaisluvun väliltä 1–6. Taulukkoon $jakauma lasketaan kunkin nopan silmäluvun lukumäärä. Esimerkiksi $jakauma[1] kertoo, kuinka monta kertaa silmäluku 1 on esiintynyt.

Koodi myös tulostaa kaikki heitetyt nopat sivulle. Noppien kuvat ovat tiedostoissa noppaX.png, jossa X on nopan silmäluku. Silmukan lopussa oleva koodi lisää rivinvaihdon 20 nopan välein käyttämällä apuna jakojäännöstä. Rivinvaihto tulee aina, kun muuttujan $i arvo on jaollinen 20:llä, eli 20, 40, 60 jne. nopan kohdalla.

Palautelomake

Lopuksi teemme vielä palautelomakkeen, jonka kautta lähetetty palaute välittyy Aapelille sähköpostitse.

Palautelomake on sivulla palaute.php:

<?php include("yla.php"); ?>
<h2>Palautelomake</h2>
<form action="lahetys.php" method="post">
  <p>Nimi: <br>
  <input type="text" name="nimi"></p>
  <p>Palaute: <br>
  <textarea name="viesti"></textarea></p>
  <p><input type="submit" value="Lähetä"></p>
</form>
<?php include("ala.php"); ?>

Sivu lahetys.php lähettää lomakkeen tiedot eteenpäin sähköpostitse:

<?php
$nimi = $_POST["nimi"];
$viesti = $_POST["viesti"];
$ok = mail("aapeli@ohjelmointiputka.net",
           "Palaute",
           "Nimi: $nimi\nViesti: $viesti");
if ($ok) {
    header("Location: kiitos.php");
} else {
    header("Location: virhe.php");
}
?>

Funktio mail lähettää palautteen eteenpäin sähköpostitse. Funktiolle annetaan viestin vastaanottaja, otsikko ja sisältö. Viestin lähetyksen jälkeen on toteutettu ohjaus uudelle sivulle funktiolla header. Jos lähetys onnistuu, uusi sivu on kiitos.php ja muuten virhe.php.


Kommentit

fineppu [19.03.2012 22:56:27]

Lainaa #

Meikäläisellä ei tuo palaute juttu vaan kerta kaikkisesti toimi, ohjaa aina tälle virhe.php :ta vastaavalle sivulle. Koodin olen tarkastanut moneen kertaan, ja virheitä en itse löydä =/

JarkkisT [13.07.2012 12:11:45]

Lainaa #

fineppu kirjoitti:

Meikäläisellä ei tuo palaute juttu vaan kerta kaikkisesti toimi

Onhan palvelimella oikein konfiguroitu mail-funktio? Kaikki palveluntarjoajat eivät anna sitä käyttää ja muidenkin on oltava oikein konfiguroituja.

Kirjoita kommentti

Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.

Muista lukea keskustelun ohjeet.
Tietoa sivustosta