Kurssin oppimistehtävät teemoittain

Tee tehtävät aikataulun mukaisesti käytyäsi ensin läpi kyseisen teeman materiaaliin.

Teema 1: HTML-perusteita

Tehtävä1

Tee palvelimella students.osao.fi sijaitsevan kotihakemistosi public_html-hakemistoon alihakemisto, jonka nimi on amva48-49.

Tee sinne dokumentti index.html, joka toimii kurssitehtäviesi pääsivuna.

Voit suunnitella sivun itse muuten, mutta siinä on oltava linkit jokaiseen oppimistehtävään.

Sivulla on oltava linkki, josta pääsee Linkit-sivulle. Kerää Linkit-sivulle kurssin aiheisiin liittyviä linkkejä. Tee tässä vaiheessa ainakin kaksi linkkiä verkosta löytyviin hyviin html-oppaisiin ja linkki sivulle, jossa on HTML-värikoodit.

Tehtävä 2

Tee alla olevissa linkeissä olevien kuvien mukaiset sivut käyttäen HTML-kieltä.
sivu 1 sivu 2

Huomioi seuraavat kohdat:

• Voit suunnitella logon itse kuvankäsittelyohjelmalla tai tallentaa sen tästä
• Tilaa esite-linkistä pääsee lomake-sivulle
• Takaisin pääsivulle-linkistä pääsee pääsivulle
• Tieke-linkistä pääsee osoitteeseen www.tieke.fi. Sivu avautuu uuteen ikkunaan.
• Lomakkeen Lähetä-toimintoa ei tarvitse toteuttaa lainkaan, mutta Tyhjennä-painike toimii.
• Moduulit on numeroitu käyttäen listaa.
• Sivu on asemoitu kutakuinkin mallin mukaisesti. Esimerkkisivulla on hyödynnetty asemoinnissa taulukkoa, joka reunaviivat eivät ole näkyvissä, mutta voit toteuttaa asemoinnin jotain muutakin tekniikkaa käyttäen.

Tee kurssin pääsivullesi linkki tehtävään. Tehtävää ei tarvitse palauttaa Moodleen.

Teema:PHP-kielen perusrakenteet

Tehtävä 3

Tee luvun 2 esimerkissä oleva Hello World-ohjelma.
Muokkaa ohjelmaa niin, että teksti tulostuu punaisella ja suuremmalla fontilla kuin esimerkissä.

Tee pääsivullesi linkki ohjelmaan. Palauta tiedosto myös Moodleen.

Tehtävä 4

Tee luvussa 5 oleva muuttujaesimerkki, jos PHP:n muuttujat ja tietotyypit eivät ole sinulle tuttuja. Esimerkkiä ei tarvitse palauttaa!

Tee laskin.php -ohjelma, jossa on seuraavat toiminnot seuraavassa järjestyksessä:

1. Ohjelmassa on muuttuja $ekaluku jonka alkuarvo on 3
2. Ohjelmassa on toinen muuttuja $tokaluku, jonka alkuarvo on 0
3. $tokaluku-muuttujaa kasvatetaan yhdellä
4. $summa=$ekaluku+$tokaluku
5. $erotus=$ekaluku-$tokaluku
6. $tulo=$ekaluku*$tokaluku
7. $summa-muuttujan arvoon lisätään $tulo
8. $summa jaetaan muuttujan $erotus arvolla
9. $apuluku saa saman arvon kuin muuttuja $summa
10. tulostetaan selkeästi näkyviin kaikkien muuttujien nimet, arvot ja tietotyypit

Tee pääsivullesi linkki ohjelmaan. Palauta tiedosto myös Moodleen.

Tehtävä 5

Kokeile luvussa 7 olevia esimerkkejä, mikäli PHP:n ohjausrakenteet ovat sinulle uusia.

Esimerkkejä ei tarvitse palauttaa!

Tee ohjelma karkaus.php, joka tulostaa kaikki karkausvuodet seuraavan sadan vuoden ajalta. Ohjelma on melko vaativa, joten tee se vaiheittain seuraavia ohjeita seuraten. Siirry seuraavaan vaiheeseen vasta kun olet saanut edellisen vaiheen toimimaan.

1. Ohjelma tulostaa kaikki vuosiluvut väliltä 2009-2109. (Vinkki: For)
2. Muuta ohjelmaa niin, että se tulostaa vain kaikki 4:llä jaolliset vuosiluvut väliltä 2009-2109. (Vinkki: if ja jakojäännös-operaattori %)
3. Muuta ohjelmaa niin, että se huomioi poikkeukset: Vuosi on karkausvuosi, jos se on jaollinen neljällä mutta ei sadalla. Kaikki 400 jaolliset ovat kuitenkin karkausvuosia.(Vinkki: Sisäkkäiset if-lauseet tai AND ja OR)
4. Lisää ohjelmaan laskuri, joka laskee kuinka monta karkausvuotta välillä on. Ohjelma tulostaa lopuksi tekstin "Karkausvuosia on ???".
5. Tutustu PHP:n dokumentaatioon osoitteessa www.php.net ja etsi date()-funktion syntaksi. Muuta sen ja mahdollisesti muiden kalenteri-funktioiden avulla ohjelmaa niin, että ensimmäinen vuosi on kuluva vuosi ja viimeinen vuosi on sata vuotta eteenpäin. Näin ohjelmaa ei tarvitse päivitää, kun vuosi vaihtuu. Lisää ohjelman alkuun teksti tänään on p.k.vvvv (päiväys suomalaisessa muodossa).

Tee pääsivullesi linkki ohjelmaan. Palauta tiedosto myös Moodleen.

Huom! Mikäli et saa toimimaan kohtia 2 ja 3, tee kuitenkin kohdat 4 ja 5.

Tehtävä 6

Tee luvun 8 lopussa oleva esimerkki, missä on koottu yhteen ohjelmaan taulukkoesimerkit. Taulukoita tarvitaan kurssilla myöhemmin, joten käy luku 8 huolellisesti läpi.

Tee pääsivullesi linkki esimerkkiin. Tiedostoa ei tarvitse palauttaa Moodleen.

Tehtävä 7

Tee luvuissa 9 ja 10 olevat esimerkit kaikki samaan php-tiedostoon. Tee pääsivullesi linkki tiedostoon. Tiedostoa ei tarvitse palauttaa Moodleen.

Tehtävä 8

Tutustu PHP:n dokumentaatioon osoitteessa www.php.net ja etsi funtioiden pi,round() ja rand()-funktion syntaksit. Tee niiden avulla ohjelma joka arpoo ympyrän säteen satunnaisesti väliltä 0-10 , laskee ympyrän pinta-alan ja tulostaa sen kahdella desimaalilla kuvan mukaisesti.

Tehtävä 9

Täydennä tehtävässä 5 tehtyä karkausvuosiohjelmaa siten, että joka toinen vuosiluku tulostetaan eri värillä.
Lisää ohjelmaasi seuraava funktio ja toteuta värinvaihto funktiota kutsumalla.

function vaihdaVari()
   {
   static $vari;
      if($vari=="##1E8EF2")
      {
         $vari="#000000";
      }
      else
      {
         $vari="##1E8EF2";
      }
     return ($vari);
   }

Tee muutokset sivullesi ja palauta tiedosto Moodleen.

Teema:HTML-lomakkeen käsittely PHP:n avulla

Tehtävä 10

• Tee luvussa 1 oleva esimerkki (lomake.html ja lomaketiedot.php).
  Tee sivullesi linkki tiedostoon lomake.html. Lähdekoodia ei tarvitse palauttaa Moodleen.
• Lisää tiedoston lomaketiedot.php loppuun funktio phpinfo( ). Saat sen avulla tietoa Apachen ja PHP:n asetuksista.
• Tutki tuloksena saatavasta taulukosta mitä ympäristömuuttujien arvoja selain on lähettänyt palvelimelle ja miten get-metodilla lähetetyt tiedot näkyvät palvelimella.
• Muuta lomake.html tiedostoa niin, että käytettävä metodi on post. Tutki mitä eroa huomaat vastauksena saatavan sivun URL-osoitteessa ja miten phpinfo()-funktiolla saatavat tiedot poikkeavat get-metodilla lähetetyistä tiedoista. Kirjoita vastauksesi tekstitiedostoon ja palauta vastauksesi moodleen.
• Poista tiedostosta lomaketiedot.php funktio phpinfo(). Se paljastaa ulkopuolisille sellaista tietoa palvelimen asetuksista, jota tunkeutujat voivat käyttää hyväkseen, että funktiota ei kannata koskaan jättää vapaasti ladattavalle sivulle.

Tehtävä 11

Tee luvussa 4 oleva esimerkki 1. Lähetä lomaketiedot omaan sähköpostiisi ja katso millaisessa muodossa sat tiedot sähköpostiisi.

Tee sivullesi linkki tiedostoon lomake.html. Lähdekoodia ei tarvitse palauttaa Moodleen.

Tehtävä 12

Tee palautelomake, jolla käyttäjä voi antaa palautetta www-sivuistasi. Käytä ainakin neljää erilaista lomakekenttää. Lomaketiedot lähetetään sähköpostiin.

Tee sivullesi linkki tiedostoon lomake.html. Palauta lähdekoodi Moodleen.

Tehtävä 13

Tee luvussa 4 oleva esimerkki 2.

Tee sivullesi linkki tiedostoon. Lähdekoodia ei tarvitse palauttaa Moodleen.

Tehtävä 14

Tee vähintään 5 kysymyksen tietokilpailu, josta saa tuloksena pisteitä. Voit keksiä kysmykset, pisteytyksen ja kilpailun toteutuksen itse. Sinun ei tarvitse käyttää toteutuksessa esimerkkiä 2 hyväksesi, ellet halua, vaan voit suunnitella sen ihan itse.

Vinkki: Voit toteuttaa pisteiden laskemisen niin, että otat käyttöön muuttujan $pisteet. Tarkista jokainen kysymys erikseen if-lauseella ja kasvata muuttujaa $pisteet, mikäli vastaus on oikein.

Toinen tapa pisteiden laskemiseksi on laittaa kustakin vastauksesta saatava pistemäärä valintapainikkeen value-arvoksi. Tällöin pisteet saa helposti laskettua for each-silmukalla. Katso esimerkki for each-silmukasta HTML-lomakkeita käsittelevän teeman luvun 4 esimerkistä 1.

Tee sivullesi linkki tehtävään ja palauta lähdekoodi Moodleen

TEEMA:TIEDOSTON KÄSITTELY

Tehtävä 15a:

Tee luvussa oleva esimerkki 1.

Tee sivullesi linkki tiedostoon. Lähdekoodia ei tarvitse palauttaa Moodleen.

Tehtävä 15b:

Täydennä oppimistehtävässä 14 tekemääsi tietokilpailua siten, että se tallentaa vastaajan pisteet tekstitiedostoon. Katso malli teoriaosan esimerkistä 2, mutta sovella se omaan ohjelmaasi mm. muuttujien nimien osalta.

Tee sivullesi linkki tehtävään ja palauta lähdekoodi Moodleen.

Tehtävä 16

Tee yksinkertainen vieraskirja, jossa on näkyvissä kaikki viestit siinä järjestyksessä, kun ne on lisätty. Uusi viesti kirjoitetaan tiedoston loppuun. Katso vieraskirjan mallikuva tästä: vieraskirja.jpg

Vinkki: Jotta viestiin kirjoitetut rivinvaihdot tulostuisivat oikein, kirjoita viesti käyttäen funktiota nl2br(teksti), esim. fwrite($file, nl2br($_POST['viesti']))

Lisätehtävä: Muuta tehtävää siten, että uusin viesti tulee ensimmäiseksi. Vinkki: Lue koko vanha tiedosto ensin muistiin fread()-funktiolla.

Tee sivullesi linkki tehtävään ja palauta lähdekoodi Moodleen.

TEEMA:EVÄSTEET

Tehtävä 17

Luo tekstinkäsittelyohjelmalla dokumentti, jossa vastaat tässä tehtävän yhteydessä oleviin kysymyksiin 1)-4). Palauta tekstitiedosto Moodleen. Ennen kuin aloitat tehtävää tutustu selaimesi asetuksiin ja muuta asetuksia niin, että ennen evästeiden hyväksymistä kysytään sallitaanko eväste.

Osa 1:
Tee luvussa olevan esimerkin osa 1. Kun testaat koodia, selaimesi pitäisi kysyä sallitko evästeen tallentamisen.
Kysymys 1a) Etsi selaimen tallentama eväste koneesi kiintolevyltä ja avaa se vaikkapa muistiolla. Kopioi vastaukseen evästeen sisältämä teksti. Miten tulkitset tekstin?
Kysymys 1b) Tutki milloin eväste vanhenee. Miten saat sen selville?

Osa 2:
Poista eväste koneeltasi ja muuta selaimen asetuksia niin, että estät evästeiden tallentamisen (muista poistaa osoite sallituista sivuista). Testaa sivuasi tämän jälkeen.
Kysymys 2)Mitä ero on sivun toiminnassa ja miksi?

Osa 3:
Salli selaimesi evästeet. Muuta ohjelmaasi luvussa olevan esimerkin toisen osan mukaiseksi.
Kysymys 3)Selitä omin sanoin mahdollisimman tarkasti if-lauseella toteutetun php-scriptin toiminta.

Osa 4:
Evästeiden arvot tallennetaan palvelimelle globaaliin taulukkomuuttujaan $_COOKIE. Lisää sivun loppuun painikkeiden alle koodi, joka tulostaa kyseisen assosiatiivisen taulukon arvot avaimineen. Käytä funktiota print_r($_COOKIE).
Kysymys 4) Selitä, miksi funktiolla tulostettu laskurin arvo ja echo-lauseella tulostettu muuttujan arvo eroavat toisistaan.

Tee sivullesi linkki lopulliseen tehtävän ratkaisuun ja palauta vastaukset kysymyksiin Moodleen.

Tehtävä 18

Tee yksinkertainen äänestysohjelma, jossa voi valita kolmesta vaihtoehdosta yhden. Äänestyksen sen hetkiset tulokset näkyvät sivulla heti äänestämisen jälkeen. Käytä tulosten tallennukseen tekstitiedostoa. Estä moneen kertaan äänestäminen evästeen avulla.

Tee sivullesi linkki tehtävään ja palauta lähdekoodi Moodleen.

VINKKI: Toteuta ensin toiminto, joka estää moninkertaisen äänestämisen. Se on helpompi tehdä kuin tulosten tallentaminen

Tulokset voi tallentaa tekstitiedostoon eri riveille tai samalle riville erotinmerkin avaulla erotettuna. Käsittely riippuu valitusta tallenusmuodosta.

TEEMA:ISTUNNON HALLINTA

Tehtävä 19

• Tee teoriaosan esimerkki 2 (kaksi erillistä php-tiedostoa)
• Tee sivulle 2 linkki Poistu. Siitä pääsee sivulle 3, jossa istunto lopetetaan (kts. esimerkki 3) ja käyttäjälle tulee ilmoitus: "Kiitos käynnistäsi!".
• Täydennä ratkaisua niin, että selaimen Edellinen-painikkeella ei pääse takaisin sivulle 2, vaan käyttäjälle tulee ilmoitus: "Istunto on päättynyt, palaa aloitussivulle!".

Palauta Moodleen kaikki tiedostot pakattuna yhdeksi zip-tiedostoksi.

TEEMA:KURSSIN KOONTA

Loppukoe

Käy tekemässä Moodlessa oleva loppukoe. Se koostuu monivalintakysymyksistä ja lyhytvastauksista. Aikaa kokeen suorittamiseen on 60 minuuttua.

Oma Web-sovellus

Suunnittele ja toteuta oma web-sovellus, jossa osoitat osaavasi soveltaa kurssilla opeteltuja asioita.

Voit valita aiheen itse. Sovelluksessa on käytettävä joko tekstitiedoston käsittelyä tai evästeitä tai istunnon hallintaa.

Arvioinnissa huomioidaan kurssilla opiskeltujen asioiden monipuolinen hyödyntäminen ja itsenäinen soveltaminen sekä ohjelman vaativuus

Vinkkejä aiheiksi:

• Toteuta tehtävän 14 tyyppinen tietokilpailu niin, että jokainen kysymys on eri sivulla. Voit katsoa ideaa netisä Älypää-tietokilpailusta. Pistetilannetta voi kuljettaa sivulta toiselle esimerkiksi piilokentässä tai session-muuttujissa. Jos haluat lisää haastavuutta, vit liittää mukaan 10 parhaan pisteiden tallentamisen. Tässä kannattaa hyödyntää taulukkoa ja sen lajittelua.

• Tee hedelmäpelin tyylinen peli, jossa arvotaan kolme kokonaislukua tai kuvaa. Jos tulee kaksi tai kolme samaa, niin tulee voitto. keksi säännöt itse. Panosten ja voittojen ylläpitoon voit hyödyntäää session-muuttujia, evästeitä tai tekstitiedostoa. Jos arvot kuvia, niin kuvat kannattaa nimetä 1.jpg, 2.jpg, jne. Satunnaislukuja saat arvottua funktiolla rand, katso sen syntaksi php.netistä.

• Tee tekstitiedoston avulla puhelinluettelo, jossa voidaan katsella tietoja ja lisätä niitä.

• Tee jonkun urheilulajin pisteenlasku laskuri tai muu laskuri. Tässä on mallina yksi alkeellinen versio.