Skip to content

Latest commit

 

History

History
271 lines (190 loc) · 13.6 KB

viikko-44.md

File metadata and controls

271 lines (190 loc) · 13.6 KB
Raw

Viikko 45 ->

Viikko 44

Maanantai

Kyselyn perusteella kurssilaisilla on perus-web-teknologiat aika hyvin hallussa, mutta aloitetaan kuitenkin perusteista, ja tehdään vähän sormiharjoituksia, niin saadaan verryteltyä koodauslihaksia.

Aloitetaan asentamalla työkalut ellei ne jo löydy työkoneista:

Tehtävä 1: staattiset perus-HTML-sivut

Toteuta HTML:llä itsellesi CV-sivu, jossa kerrot itsestäsi, osaamisestasi ja historiastasi.

Muistellaan HTML-dokumentin perusrakennetta, ja mitä metadataa head-tagiin voidaan sisällyttää. Muistutetaan mieliin perus-tagit h1-h6, p, div, a, img, numeroidut ja numeroimattomat listat, listaelementit ja taulut.

Muotoilu tai ulkoasu ei ole tässä tehtävässä olennaista, mutta pyri siihen, että käytät eri tageja asianmukaisesti, esimerkiksi voit tehdä osaamisestasi taulukon ja työhistoriastasi listan.

Tehtävä 2: useammasta HTML-sivusta koostuva sivusto

Toteuta sivusto, jossa listaat esimerkiksi 5 – 10 lempielokuvaasi, -kirjaasi tai -peliäsi, kukin omalla sivullaan. Toteuta sivusto niin, että siinä on etusivu ja alasivut, joiden välillä pystyy navigoimaan linkkien avulla. Kullakin sivulla tulisi olla ainakin yksi kuva, otsikko ja kuvaus aiheesta, perustietoja kuten julkaisuvuosi, julkaisumaa, kirjoittaja tai ohjaaja jne, ja esim. jotain anekdoottitietoa. Voit kopioida sisällön esim. imdb:stä, Wikipediasta tai muusta lähteestä, ei tarvitse kirjoittaa kaikkea itse.

Mieti sivuston rakennetta ja sisältöä ja käytä asianmukaisia semanttisia tageja kuten nav, article, section, figure, figcaption jne. Muistutetaan mieleen, miten CSS tuodaan dokumenttiin, ja miten CSS-valitsimet, luokat ja id:t toimivat. Perehdytään miten spesifisyys ja perintä vaikuttavat siihen, mitkä päällekkäiset CSS-säännöt ovat milloinkin voimassa.

Resursseja

Semanttinen HTML:

CSS lyhyesti:

Tiistai

Jatketaan web-teknologioiden kertauksella. Otetaan mukaan muotoilu ja interaktiivisuus.

HTML:ssä eri elementeillä on omat sisäänrakennetut perusmuotoilut, jotka ovat jotakuinkin standardoituja, mutta voivat hieman vaihdella eri selainten ja käyttöjärjestelmien mukaan. Jos halutaan (ja yleensähän halutaan) muotoilla web-sisältöä tarkemmin, siihen käytetään CSS:ää.

Web-palvelun muotoilun toteuttaminen pelkästään raa'alla CSS:llä on nykyisin harvinaista, sillä useimmissa projekteissa käytetään valmiita UI-kirjastoja. Nämä kirjastot kuitenkin käyttävät CSS:ää pellin alla, ja niiden debuggaaminen tai ulkoasun hienosäätäminen vaatii, että CSS on jotakuinkin hallussa. Lisäksi vaikka kirjastojen tarjoamat valmiit yksittäiset komponentit olisivat miten siistejä tahansa, sivun taitto eli asettelu jää yleensä toteuttajan harteille.

Web-palveluiden käyttöliittymän interaktiivisuuden toteuttamiseen käytetään JavaScriptiä, mutta ei pidä unohtaa, että HTML:stä löytyy nykyisin paljon valmiita sisäänrakennettuja elementtejä monenlaiseen käyttöön. Aina ei tarvitse rakentaa pyörää uudestaan, tai edes etsiä jonkun muun rakentamaa pyöräkomponenttia, jos selaimessa jo oleva pyörä täyttää tarpeet. Tiesitkö esimerkiksi, että HTML:ssä on nykyisin sisäänrakennettu dialogikomponentti ja kalenterikenttä?

Tehtävä 1: Flex-asettelu

Otetaan käyttöön HTML:n rakenteelliset tagit kuten header, footer, main ja aside. Pohjana on aiemmin toteutettu leffa/kirja/peli-sivusto, ja toteutetaan tässä tehtävässä asettelu flexboxilla, ks. viivakuva

Viivakuva

Tässä siis Main-osiossa ei ole omaa tekstisisältöä ollenkaan, vaan se on pelkästään Article- ja Aside 2-osioiden wrapperi. Yritä toteuttaa asettelu niin, että Header, Footer ja Aside 1 pysyvät aina paikallaan, mutta Main-alue rullaa silloin, kun sen sisältö ei mahdu siihen.

Tehtävä 2: Grid-asettelu

Tehdään sivustosta uusi versio, jossa asettelu on samanlainen kuin edellisessä tehtävässä, mutta toteutettu CSS-gridillä.

Tehtävä 3: HTML-lomake

Lisätään olemassaolevaan sivustoon uusi sivu, jolla on lomake, johon voidaan syöttää uuden elokuvan (kirjan, pelin tms) nimi, ohjaaja, julkaisija, julkaisupäivä, julkaisumaa, genre, synopsis, arvostelu (tähtien määrä 1 –5) ja tieto, onko elokuva jo katsottu.

Julkaisumaa on pudotusvalikko, genre radiopainikkeita, synopsis textarea, arvostelu numerokenttä, julkaisupäivä päivämääräkenttä ja katsottu-tieto valintaruutu (checkbox). Muut kentät ovat tekstikenttiä.

Kun käyttäjä lomakkeen OK-painiketta, sivulla oleva JS poimii arvot lomakkeen kentistä, ja luo niiden pohjalta sivulle lomakkeen viereen elokuvasta infokortin, joka näyttää suunnilleen tällaiselta:

Leffakortti

Tietoja ei tarvitse tallettaa minnekään pysyvästi, tässä vain harjoitellaan HTML:n ja JS:n yhteispeliä.

Resursseja

Flexbox:

CSS Grid:

Uusia HTML-toiminnallisuuksia:

Keskiviikko

Siirrytään tietokantojen perusteisiin. Asennetaan koneelle XAMPP. XAMPP on ohjelmistopaketti, joka sisältää Apache-verkkopalvelimen, MySQL (tai MariaDB)-tietokannan ja PHP-tulkin.

Asentamisen jälkeen avaa XAMPP Control Panel, ja käynnistä sieltä Apache ja MySQL-palvelut.

xampp

Etsi XAMPP-asennuskansiosta kansio nimeltä htdocs. Tämä on web-serverin kotikansio: jos sijoitat tähän kansioon HTML- tai PHP-tiedostoja, Apache tarjoilee ne osoitteessa http://localhost. Sijoitamme tehtävän 2 PHP-koodit tänne.

Lisäksi XAMPP tarjoaa web-käyttöliittymän MySQL-tietokantaan osoitteessa http://localhost/phpmyadmin. Oletuksena root-käyttäjällä ei ole salasanaa.

Tehtävä 1: luodaan taulut yksinkertaista tilavarausjärjestelmää varten

  • Avaa PHPMyAdmin
  • Luo uusi tietokanta nimeltä tilavaraus
  • Luo tähän kantaan taulut nimeltä tilat, varaajat ja varaukset.

tietokanta

  • Lisää tilat-tauluun sarakkeet id (INT, AUTO_INCREMENT) ja tilan_nimi (VARCHAR)

tilat

  • Varaajat-tauluun id (INT, AUTO_INCREMENT) ja varaajan_nimi (VARCHAR)

varaajat

  • Varaukset-tauluun id (INT, AUTO_INCREMENT), varaaja (INT), tila (INT) ja varauspaiva (DATE)

varaukset

  • Luo indeksit varaukset-taulun varaaja- ja tila-kentille

indeksi

  • Yhdistä varaajat- ja tilat-taulujen id-kentät varaukset-taulun varaaja- ja tila-kenttiin suunnittelija-näkymässä (designer)

designer

  • Lisää lopuksi kaikkiin tauluihin muutama rivi tietoa: ensin varaaja- ja tila-tauluihin ja sitten varaustauluun.

Tehtävä 2: luodaan tauluihin web-käyttöliittymä

Luodaan htdocs-kansioon PHP-pohjainen sivusto, jossa tietokannan tauluja voi tarkastella, ja lisätä ja poistaa niihin rivejä.

PHP-tiedostot toimivat niin, että niissä voi olla normaalia HTML-koodia, mutta sen joukkoon voi sijoittaa PHP-skriptiä kirjoittamalla sen php-tagin sisään: <?php ...php-koodia... ?>. Kun selain pyytää PHP-tiedostoa, serveri evaluoi PHP-koodit, ja palauttaa selaimelle HTML:n, jossa on evaluoinnin tulokset.

Esimerkiksi voimme luoda ruokalistan iteroimalla $menu –muuttujaa, jossa ruoat ovat listamuodossa:

<ul> 
    <?php 
        foreach($menu as $ruoka) { 
            echo "<li>" . $ruoka . "</li>"; 
        } 
    ?> 
</ul>

Evaluoinnin jälkeen serveri palauttaa esim. jotain tämän näköistä:

<ul> 
    <li>Hampurilainen</li> 
    <li>Pizza</li> 
    <li>Nuudeli</li> 
    <li>Kaurapuuro</li> 
</ul>

Tietokantaan otetaan yhteys ja sieltä kysellään tietoa esim. näin:

<?php 
    $host= "localhost"; 
    $username = "dbuser"; 
    $database = "somedb"; 
    $password = "password"; 
    try { 
        $yhteys = new PDO("mysql:host=$host;dbname=$database", $username, $password); 
        $yhteys->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    } 
    catch(PDOException $e){ echo "<p>".$e->getMessage()."<p>"; } 
    $sql_lause =  "SELECT * FROM table"; 
    try { 
        $query= $yhteys->prepare($sql_lause); 
        $query->execute(); 
    }  
    catch (PDOException $e) { die("VIRHE: " . $e->getMessage()); } 
    $result= $query->fetchAll(); 
?>

Resurssit:

Torstai

Harjoitellaan Pythonin virtuaaliympäristön pystyttämistä, kirjaston asentamista ja tietokantojen kanssa työskentelyä.

Varsinaisessa projektissa tullaan käyttämään Django-frameworkkia, jossa on omat luokat tietokantojen käsittelyyn ja näkymien rakentamiseen, mutta käytetään tässä verryttelyharjoituksessa kevyempiä työkaluja.

Tehtävä: SQLite-kannan käsittely ja cli-käyttöliittymä

Navigoidaan terminaalilla kansioon, johon projekti halutaan tehdä, ja annetaan komento python –m venv venv. Tämä luo suljetun virtuaaliympäristön, johon voidaan asentaa kirjastoja paikallisesti niin, että eri projektien riippuvuudet eivät sotke toisiaan. Virtuaaliympäristö käynnistetään Windowsissa komennolla venv\Scripts\activate, minkä jälkeen ympäristöön voi asentaa kirjastoja pip-komennolla.

SQLite on kevyt SQL-tietokantamoottori, joka sisältyy useimpiin uusiin käyttöjärjestelmiin. Tehtävänä on toteuttaa Pythonilla ja SQLitellä sama rakenne kuin edellisessä XAMPP-tehtävässä, eli tilanvaraustietokanta. Lisäksi toteutetaan tekstipohjainen käyttöliittymä, jolla käyttäjä voi tarkastella ja muokata taulujen sisältöä.

SQLite3-kirjasto tulee Pythonin mukana, mutta asennetaan taulujen esittämistä helpottamaan Tabulate-kirjasto komennolla pip install tabulate.

Pythonin SQLitellä käytetään tietokantaa tiedostosta database.db seuraavasti:

import sqlite3 
from tabulate import tabulate 

conn = sqlite3.connect('database.db') 
cursor = conn.cursor() 

cursor.execute('''SELECT * FROM table;''') 
rows = cursor.fetchall() 
if rows: 
    print(tabulate(rows, headers=["ID", "Value"], tablefmt="grid")) 
else: 
    print("No rows in table.")

Komento sqlite3.connect('database.db') tarkistaa, onko tuon nimistä tiedostoa jo olemassa, ja ellei ole, se luo sen.

Resursseja:

Perjantai

Jatketaan Pythonin parissa: tällä kertaa otetaan käyttöön sen HTTP-kirjasto, ja perehdytään, miten MySQL-kantojen kanssa toimitaan.

Tehtävä: HTTP-backend MySQL-tietokannalle

Tehdään XAMPP-tehtävän MySQL-kantaa käyttävä web-käyttöliittymä, joka pyörii Pythonilla toteutetun web-serverin päällä. Käytämme HTTP-palvelimen luomiseen Pythonin standardikirjastoon kuuluvaa HTTP-kirjastoa. MySQL:ää varten täytyy asentaa ajuri: pip install mysql-connector-python.

Yksinkertainen HTML:ää tarjoileva palvelin rakentuu esim. näin:

from http.server import HTTPServer, BaseHTTPRequestHandler

class myHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-Type', 'text/html')
        self.end_headers()
        self.wfile.write(b'<h1>Hello world</h1>')

server = HTTPServer(('localhost', 8000), myHandler)
server.serve_forever()

...ja paikalliseen MySQL-palvelimeen otetaan yhteys tähän tapaan:

import mysql.connector

db_host = "localhost"
db_user = "varaus-admin"
db = "tilavaraus"
db_password = "varaus-admin"

mydb = mysql.connector.connect(
    host = db_host,
    user = db_user,
    password = db_password,
    database = db
)

mycursor = mydb.cursor()
mycursor.execute("SELECT * FROM varaajat;")
result = mycursor.fetchall()
mycursor.close()
print(result)

Luo ensin näkymät taulujen sisällön tarkastelua varten. Jos ehdit, toteuta myös rivien lisääminen ja poistaminen. Voit rakentaa HTML-näkymät käsin, tai halutessasi voit käyttää jotain template-kirjastoa kuten Jinja.

Resurssit: