Kap 9: Serversystem

statisk nettside: Innhold, HTML og CSS.
dynamisk nettside: Programkode påvirker innholder de tre
- klient/nettleser: Javascript (nesten enerådende)
- server: Serverscript, f.eks. PHP, Perl, Javascript, C#, Java, Python (mange), SQL
serverpakke:
- *AMP, f.eks. WAMP/MAMP/LAMP eller XAMPP (som i IBE211)
  - Apache: webserver. Lytter normalt på port 80 (http, usikret) og 443 (https, dvs SSL-sikret)
  - MySQL/MariaDB: databaseserver. Vanligvis port 3306 (usikret)
  - PHP/Perl: serverscript
- Windows: XAMPP legges i c:\xampp og WAMP i c:\wamp64.
- Mac: Se i /Applications.

Kap 10: Første nettside med PHP

Start webserver i XAMPP (eller WAMP) Control Panel.
Gå til serverens WWW-root: c:\xampp\htdocs eller c:\wamp64\www.
Lag tekstfil "datotest.php" med vanlig HTML ... <body><p> Dagens dato er: <p></body>...
- Hent denne med URL localhost/datotest.php
Legg til <?php echo date("d/m/y"); ?> mellom <p></p>
- Sjekk at det virker. Reload (ctrl-R) viser samme (datoen endres jo ikke).
- endre fra "d/m/y" til "d/m/y h:m:s" (w3s)
PHP må stå mellom <?php ... ?>
- kan ha flere slike PHP-blokker i HTML-dokumentet

Kap 11: Databaseserver

diverse verktøy for å administrere db
- som i kurset: MySQL-konsoll eller phpmyadmin,
- boka bruker MySQL Workbench
- mange andre verktøy finnes,
- også mulig som utvidelse i VS Code
start databaseserver i XAMPP (eller WAMP) Control Panel
oppgi brukernavn og passord (default: "root" og ""; ja, faktisk: Tomt passord).
opprett/velg database (i boka kalt "schema") i boka: "sitatregister"
opprett tabeller med navn, kolonner, egnede datatyper og primær/fremmednøkler.
- CREATE TABLE sitat med id (INT, primærnøkkel), tekst (tekst)
- INSERT INTO sitat ... (3 rader)
- CREATE TABLE person med id (INT, primærnøkkel), navn (tekst) og periode (tekst).
- INSERT INTO person ... (2 rader)
- ALTER TABLE sitat, legg til personid (INT, fremmednøkkel til person)
- UPDATE TABLE sitat, legg inn korrekt personid for hvert sitat (til en rad som finnes i person)
- DELETE FROM ... (hvis en vil slette).
brukere
- root er admin, har alle rettigheter
- boka legger inn bruker "webgrensesnitt" med begrenset rettighet
  - (hos kursets webserver har dere "ibe102groupxx" som databasekonto)
- hvis nødvendig: legg til rettighet for denne bruker, slik at den kan gjøre SELECT, INSERT, UPDATE og DELETE
- (dette gjøres fra konsollet, phpmyadmin e.l.)
datatyper i MySQL
- BOOLEAN (kan ha verdi true eller false)
- INTEGER (32 bit, heltall fra ca -2,14 milliarder til +2,14 milliarder)
- FLOAT (32 bit, desimaltall, også kalt flyttall)
- DATETIME for å lagre dato og klokkeslett, format "YYYY-MM-DD HH:MM:SS"
- VARCHAR(X) tekst med plass til max X tegn (ikke mer enn 65,536)
- TEXT: tekst med mye plass
- (det finnes endel flere varianter av disse som er nevnt i boken)

Kap 12 Koble webserver og database

se litt på PHP
- case-sensitiv på navn vi gir til variabler og funksjoner
- case-insensitiv på nøkkelordene i språket (som for, while, if, ...)
  - samme med SQL og HTML (nøkkelordene er case-insensitiv)
database
- koble til: $conn = mysqli_connect ("localhost", "root", "", "sitatregister");
- hente data: $datasett = $conn->query ( "SELECT id, tekst FROM sitat" );
- løkke for å hente en enkelt rad: while ( $rad = mysqli_fetch_array ($datasett) ) { ... }
- inni løkka: Ta ut data fra rad: $rad[ "id" ] og $rad["tekst"]

Kap 13 Slå sammen data for visning

Hente fra 2 tabeller
- sitatdata hentes fra sitat, og persondata fra person
- SELECT sitat.id, sitat.tekst, person.navn, person.periode FROM person, sitat WHERE person.id = sitat.personid;
- kobler person og sitat (i FROM), et kryssprodukt som gir alle kombinasjoner av person og sitat
  - vi har 2 personer og 3 sitater, så det blir 2*3=6 rader i kryssproduktet
- velger ut de som har samme id i person og sitat (i WHERE)
- tar kun med de kolonner vi vil vise i nettsiden (mellom SELECT og FROM)
viser resultatet på ulike måter
- først: i en <table> med 3 rader (<tr>), og 3 kolonner (dropper å vise id)
- dernest, i avsnitt med 3 <p>, et avsnitt for hvert resultat (boka kaller avsnittet for "region")
- kunne også vist det i en liste (<ul> eller <ol>) med 3 <li>..</li> for enkeltresultat
Eksempel: Hente ut tilfeldig sitat
- legger til ORDER BY RAND() LIMIT 1
- RAND() er en funksjon som gir tilfeldig desimaltall mellom 0 og 1
- ORDER BY RAND() vil sortere på dette tilfeldige tallet
- LIMIT 1 returnerer den første raden
- (ORDER BY og LIMIT er nøkkelord i SQL)
- Unødvendig å lage slike "fancy" eksempel i dette kurset, men ...
Tekstsøk i data
- Klient:
  - Presentere et skjema som <form action='' method='GET'>
    - Bruker skriver søketekst inn i et felt for tekstinput: <input type='text' name='søketekst'>
    - En knapp for å sende inn skjema: <button type='submit' name='søkeknapp'>Søk</button>
  - Når knappen trykkes, sendes skjemaet (de to variablene med verdier) inn
    - bruker metoden "GET" (alternativet er "POST")
    - kan observeres i adresselinjen (litt uheldig, kanskje, hvis en har skrevet inn passord?)
- Server:
  - Anta at variabler sendes via GET-arrayet (fordi metoden i skjemaet er GET)
  - Sjekk om knappen er trykket ($_GET['søkeknapp'])
  - Finn ut hvilken søketekst som ble sendt inn (ligger i $_GET['søketekst'])
  - Konstruer SQL-spørring
    - Operatoren LIKE for å sjekke om en tekst finnes i en kolonne
    - SELECT ... FROM ... WHERE tekst LIKE ' ... ' (sette inn søketeksten)
  - Send spørring til database
  - Vent på svar
  - Vis svar, evt. feilmelding
    - konstrueres som HTML, skrives ut med echo/print
    - dette blir sendt tilbake til klienten
HTML skjema
- ligger mellom <form action="..." method="GET" > ... </form>
- inputfelt av ulike typer: <input type="..." name="..." />
  - tekstboks <input type="text" name="adresse" />
    - angi "placeholder" (ledetekst i tekstfeltet)
    - angi "value" (standardverdi), "maxlength"
  - fargevelger: type="color"
  - dato/tidvelger: "date", "datetime-local", "time"
  - angi epost-adresse: "e-mail"
  - url-angivelse: "url"
  - tallvelger: "number" eller "range", med/uten spin-button. Angi "min" og "max", kanskje "step"
  - "password": som "text", men maskerer det som tastes inn
- tekstområde (<textarea rows=".." cols=".." maxlength="..">)
- nedtrekksliste (<select> og <option>)
  - <option value=".."> ... </option>
- ledetekster (<label>)
- knapper (<button>)
  - <button type="submit" name="søkeknapp">Søk!</button>

Kap 14 Flere skjema for CRUD

CRUD = Create, Read, Update, Delete
- Kap 13 viste Skjema for søking (R=Read)
Skjema for innlegging av person (C=Create)
- lager et program: "leggtilperson.php".
- viser nettside med <form>...</form>
  - inputfelt for navn og periode (for en person i sitatregistret)
- hvis bruker har fylt ut noe
  - INSERT INTO person ...
  - verdiene hentes fra $_GET( ) eller $_POST(..)
    - avhenger av om method="GET" eller "POST" i <form>
  - VIKTIG: Vaske verdiene, f.eks. med real_escape_string (en funksjon i PHP)
Skjema for innlegging av sitat: "leggtilsitat.php" (også C=Create)
- skjema lar bruker skrive inn sitat og velge person fra meny
- menyen konstruert som <select> med en <option> for hver person i databasen
Skjema for sletting: "personadministrasjon.php" (D=Delete)
- vis alle personene i <table> med "Slett"-mulighet
- hvis slettID satt, gjør DELETE FROM person WHERE ...
Skjema for oppdatering: "oppdaterperson.php" (U=Update)
- Legg til "Oppdater"-valg i "personadministrasjon.php"
- hvis ønsket, gjør UPDATE person SET ... WHERE ...

IKKE GJENNOMGÅTT RESTEN AV BOKA

Kap 15-18 er nyttige eksempler for å øve på PHP.

Kap 15 Case: Gjestebok

Kap 16 Case: Besøksstatistikk

Kap 17 Case: Blogg

Kap 18 Case: Bildegalleri

---

Kap 19 Modellering

Kap 20 Oppsummering databaser

Kap 21 GIMP (bildemanipulering)