Asenna ensin XAMPP.

1) Tutustu sivut.webin tyylipohjien ja PHP:n materiaaleihin.

2) Tee PHP-pohjainen matkailusivusto. Materiaalia.

  • Tee taitto div-lohkoilla. Esimerkki
  • Lisää sisältösivut switch-case-rakenteella ja include() -funktiolla. Esimerkki:
    <a href=index.php?sivu=0>Aloitus</a>
    <a href=index.php?sivu=1>Ruotsi</a>
    <a href=index.php?sivu=2>Norja</a>
    <?php
    if (isset($_GET["sivu"])) {  
    switch($_GET["sivu"]) {
            case 0: include("aloitus.html"); break;
            case 1: include("ruotsi.html"); break;
            case 2: include("norja.html"); break;
            default: include("aloitus.html");
        } 
    }
     
         

Lopputulos voisi olla vaikkapa tällainen mutta PHP-pohjainen. Harjoituksen matkakohteet ovat Goa, Gore, Kap Verde, Melbourne ja Tasmania. Esimerkki.

3) Laajenna matkailusivustoa:
Sivuston yläosassa on otsikko, valikkorivillä Etusivu  ja kolme maanosaa . Kunkin maanosan kohdalle tulee vasemmalle valikko, jossa on kolme maata. Tiedot voi kirjoittaa itse tai hakea Wikipediasta. Kuvia ei tarvita. Sivuston ulkonäkö on siis suunnilleen samanlainen kuin tässä esimerkissä. Esimerkin lähdekoodit.

Lomakkeen käsittely

<form action="lomake.php" method="post">
<p><input type="text" name="Muuttuja1" size="10"/></p>
<p><input type="text" name="Muuttuja2" size="10"/></p>
<p><input type="submit" name="nappi" value="Lähetä"/></p>
</form>

<?php
if (isset($_POST["Muuttuja1"]) && isset($_POST["Muuttuja2"])) {
$m1 = $_POST["Muuttuja1"];
$m2 = $_POST["Muuttuja2"];
echo $m1." ".$m2;
}
?>

Palautettavat harjoitukset

  1. Tee ohjelma, joka kysyy painon ja pituuden sekä laskee ja tulostaa painoindeksin. Painoindeksi lasketaan kaavalla massa / pituus / pituus. Pituus kirjoitetaan senttimetreinä.
  2. Lisää ohjelmaan toiminto, joka kertoo, onko henkilö ali-, normaali- vai ylipainoinen.   
  3. Tee ohjelma, joka vastaa toiminnaltaan katetuottotaulukkoa. Aiheeseen liittyvät kaavat. Lisätehtävä: piirrä kuvaajat.
  4. Tee ohjelma, joka pyytää lämpötilan Fahrenheit-asteissa ja antaa vastauksen Celsius-asteissa. Kaava:  C_asteet = 5*(F_asteet -32)/9.
  5. Tee ohjelma, joka muuntaa Celsius-asteet. Fahrenheit-asteiksi.
  6. Miten voi toteuttaa ohjelman, jossa muunnostavan voi valita?
  7. Tee ohjelma, joka vastaa toiminnaltaan lainataulukkoa. Aiheeseen liittyvät kaavat. Lisätehtävä: piirrä kuvaajat.

Lisätehtäviä: lue materiaalit ja tee harjoitukset Koulutuskeskus Salpauksen materiaalista:
PHP ja HTML 
PHP-kielen perusteita  
PHP ja ohjausrakenteet 
PHP ja lomakkeet 
PHP ja aliohjelmat   
MySQL-perusteita 
MySQL-tietokannan luonti  
MySQL ja dynaamiset www-sivut

Esimerkkitietokantayhteys:

<?php
$yhteys = mysql_connect("localhost", "root") or die("Kantaan ei saatu yhteyttä: ".mysql_error());
mysql_select_db("foorumi", $yhteys) or die("Kantaa ei saatu valittua: ".mysql_error());
$tulos = mysql_query("SELECT * FROM viestit", $yhteys);
while($tulosrivi = mysql_fetch_array($tulos)) {
echo $tulosrivi['nimi']." ".$tulosrivi['aika']." ".$tulosrivi['viesti']."<Br>";
}
mysql_close();
?>

4) Tee tietokantaa käyttävä foorumi.

5) Parantele foorumia. Lisää tietokantaan aikaleimakenttä, otsikkokenttä ja linkit, jotka näyttävät viestit ajan, otsikon tai nimimerkin mukaan järjestettynä.

6) Tee foorumiin hallintasivu.

7) Tee foorumiin haku nimimerkin tai otsikon ym. perusteella.

8) Tee sovellus, joka laskee auton polttoaineen kulutuksen ja polttoainekustannukset/km. Syöttötietona lomakkeessa on päivämäärä, kilometrit, litrat ja tankkauksen hinta. Tankkauskerrat tallennetaan tietokantaan ja tarvittaessa kaikki tankkauskerrat voidaan tulostaa näytölle ja niiden alle keskimääräinen kulutus ja polttoainekustannukset/km.

Lopputyö

Tee sivusto, joka käyttää ulkoista tyylitiedostoa, sivut lisätään include()-funktiolla ja joka sisältää toimivan tietokantaominaisuuden, esim. vieraskirjan.

Aihe: Oma tai Matkailu. Sivuston yläosassa on otsikko, valikkorivillä Etusivu, kolme maanosaa ja Vieraskirja. Kunkin maanosan kohdalle tulee vasemmalle valikko, jossa on kolme maata. Tiedot voi kirjoittaa itse tai hakea Wikipediasta. Sivuston rakenne on siis suunnilleen samanlainen kuin tässä esimerkissä. Esimerkin lähdekoodit.

Arvioitavat asiat:

  • Muotoilutyylien (CSS) ja sivumallin käyttö
    • Free CSS templates
    • LayOutGala
  • Sivujen sisältö
  • Xhtml
  • Navigointivalikko CSS Menu Builderilla tai CSS Menu Makerilla
    • CSS Menu Builder
    • CSS Menu Maker
  • PHP ja tietokanta
    • Xampp
    • PHPMyAdmin
  • Karttalinkki
    • Google maps
  • Kuvien käyttö
    • Lightbox
    • Picasa
    • The Gimp
  • Youtube-upotus

Palautus zip-pakettina osoitteeseen:
heikkilaakso at yahoo piste com

 

 

 

 

 

 

 

 

 

 

 

Linkit
Johdatus PHP-kieleen
MureaKuha
Pm-netti
Sivut.web
Ohjelmointiputka
Jorkki.com
PHP ja mySQL
MySQL