Hvordan virker nettsider? Del 3: Dynamiske sider (med PHP)

Det tok sin tid, men nå er altså del 3 kommet. Denne gangen er det dynamiske nettsider vi skal snakke om, for etter hvert var det ikke lenger nok med bare fancy styling. Med introduksjonen av serverskripting gikk HTML fra å bestå av statisk informasjon til å bli generert dynamisk.

Bakgrunn

Siden introduksjonen av nettsider hadde innholdet vært statisk. Den teksten som fantes i HTML-filen var den som ble sendt til brukeren. Hvis man hadde flere filer med samme menysystem og sidestruktur, måtte dette kopieres til hver enkelt fil en side besto av. Det er kanskje ikke nødvendig å si at dette var upraktisk. Derfor fant man en løsning.

Rundt midten av 90-tallet, noen år etter HTML kom, ble skripting mer vanlig, og i dette tilfellet er det serverskripting vi skal snakke om (skripting i nettleseren er temaet ved en senere anledning). Dette innebar å kjøre skripter på serveren, som så ville returnere HTML til brukeren. På denne måten kunne nettsidene se forskjellig ut fra bruker til bruker. Hvis man hadde et menysystem på alle sidene, kunne dette inkluderes dynamisk, og du slapp å oppdatere alle filene hvs du skulle endre en knapp i navigasjonsmenyen. I tillegg kunne serveren for eksempel inkludere data lagret i en database.

Varianter

Det finnes flere typer programmeringsspråk (inkludert underavdelingen skriptspråk) som har blitt brukt til å servere dynamiske nettsider på en server. Også språk som JavaScript, som vanligvis forbindes med skripting i netleseren til brukeren, har blitt brukt til dette (dette har blitt mer populært de siste åra). Blant de mye brukte språkene finner vi Perl, Java, ASP.NET, Python, Ruby og selvfølgelig PHP. Sistnevnte vil være mest i fokus i dette innlegget, siden det er mest utbredt, blant annet fordi det benyttes av publiseringssystemet WordPress, som blir brukt av mer enn 27% av de ti millioner mest besøkte nettsidene (ifølge denne undersøkelsen).

Oppsettet

Flere av disse språkene, inkludert PHP, fungerer ved å hekte seg på en eksisterende webserver som Apache (som driver nesten halvparten av de øverste en million nettsidene) og nginx (uttales som «Engine X»), mens andre, som Python, Ruby og JavaScript-baserte Node.js bruker en innebygd server eller en som er en del av et web-rammeverk (dvs. at serveren er knyttet mer direkte til språket, og gjerne skrevet med det).

Apache og nginx klarer seg helt fint på egen hånd. De vil da servere statiske sider. Hvis man derimot kobler til en modul som kan kjøre PHP og forteller den hvilke filer den skal kjøre (hvor filene ligger f.eks.), vil man kunne kjøre skript for å generere sidene dynamisk. Slike moduler finnes for flere ulike skriptspråk, og i flere varianter, men PHP er vanligst.

Disse skriptene kan da gjøre en rekke ting, alt fra å koble til en database eller endre filer (forutsatt at programmet som kjører skriptet har tillatelse til å gjøre dette). Skriptene får også noe informasjon fra webserveren, hovedsakelig informasjon om selve forespørselen serveren mottok, som IP-adressen den kom fra, hvilken side den etterspurte og hva slags HTTP-forespørsel det var, for eksempel GET eller POST (det kalles forespørsel selv om formålet er å sende info, noe som er litt rart siden du allerede har gjort det), i tillegg til brukeragenten (hvis det er mulig å si det på norsk). Skriptet kan også inkludere andre skript, og det kan derfor være en slags modulær struktur.

PHP: Det viktige

Kanskje burde vi også se litt på hvordan disse skriptene brukes. PHP-skript fungerer sånn at de er ment å kjøres, for så å returnere HTML til brukeren (det går helt fint å returnere andre ting også, som CSS og Javascript, hvis serveren er konfigurert riktig). Helt grunnleggende kan PHP-skript finnes i både .html-filer og .php-filer (en av de eneste forskjellene mellom disse to er at bare .php-filer kan inkluderes i andre skript), og derfor trengs det et PHP-element for å markere hvor skriptet starter og slutter. Her er et eksempel:

<h1>
<?php
  echo "Hei" . $_SERVER['HTTP_USER_AGENT'];
?>
</h1>

I dette eksempelet er det mye nytt, men vi begynner med det kjente. Hvis du har lest det første innlegget i denne serien vil du kjenne igjen at det her er brukt HTML-elementet h1, en overskrift (hvis du ikke har lest del en, gjør det nå!). Her ser vi også PHP-elementet. Det åpnes med <?php og lukker med ?>. Dette kan være plassert hvor som helst i dokumentet (eksempel på dette kommer litt senere), og det er heller ikke nødvendig å lukke dette elementet. I så fall vil skriptet vare til dokumentet er slutt.

Du ser også kanskje at jeg har brukt kommandoen echo. Dette er en spesiell kommando, siden den sender teksten den får til det endelige HTML-dokumentet brukeren får tilsendt. Å skrive echo "Hei" i et PHP-skript, vil være det tilsvarende til å skrive Hei rett i et HTML-dokuent. Forskjellen er at echo, i tillegg til å tå imot tekst, også tar imot tekst lagret i variabler, som variabelen $_SERVER (alle variabler begynner med $, dollartegn, i PHP). En variabel lagrer informasjon, og vanligvis kan denne informasjonen endres. Derfor er sidene dynamiske. Variabelen i dette tilfellet er en global variabel, som alltid er tilgjengelig, og som settes av webserveren. Den inneholder en liste med info om serveren, den gjendende forespørselen, og HTTP_USER_AGENT, altså brukeragenten. Hvis du hadde kjørt dette skriptet på en PHP-server og besøkt siden i Google Chrome med macOS, ville du fått noe som dette (her bruker jeg et blockquote-element istedet, siden dette egentlig er et slags sitat):

Hei Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Ved første øyekast ser det ut som en haug ubrukelig informasjon, siden Chrome hverken er Safari, har noe med Mozilla å gjøre, eller bruker WebKit eller Gecko som nettlesermotor, men noe fornuftig finnes i hvert fall, blant annet nettleserversjon og operativsystem. Men nå er det på tide med et annet eksempel:

// php gir verdien til en egenskap
<img src="<?php echo 'bilde.png'; ?>">
// php gir hele egenskapen
<img <?php echo 'src="bilde.png"'; ?>>
// php gir også deler av selve elementet
<im<?php echo 'g src="bilde.png" >'; ?>

Her kommer vi tilbake til det jeg nevnte litt lenger opp, om at skript-elementet kan være plassert hvor som helst i dokumentet. Det mest grunnleggende er å bruke echo til å sende ut et HTML-element, men det kan være mer lesbart å skrive HTML som HTML, og deretter plassere PHP-elementer det det trengs dynamisk innhold, som for eksempel i egenskaper eller inne i elementer. Det er også mulig å plassere php-elementet midt i åpne- eller lukkedelen av et element, som i det nederste eksempelet over, der det er PHP som putter inn g-en i img-elementet. Det sistnevnte har dessverre kanskje heller begrensede bruksområder.

Avsnitt om databaser

Det er kanskje ikke så mye mer å si om PHP, og jeg vil derfor nevne noe om en annen sterkt tilknyttet teknologi, nemlig databaser. Innenfor serverskripting har databaser vært mye brukt for å lagre data på en oversiktlig måte, særlig innenfor publiseringssystemer som WordPress, og wikisystemer som MediaWiki (mest kjent for å drive Wikipedia). For PHP er det stort sett såkalte SQL-baserte databasesystemer som brukes, oftest MySQL, eller kompatible alternativer som MariaDB.

Kommunikasjon med databasen skjer ved hjelp av SQL-språket, som står for Structured Query Language, eller strukturert spørringsspråk på norsk. SQL er basert på enkle kommandoer, som DROP for å slette en tabell og INSERT for å sette inn data i en tabell. Disse kommandoene kan blant annet kjøres fra PHP, eller via et grafisk grensesnitt som phpMyAdmin, der mange operasjoner kan gjøres med knapper og grafiske tabelloversikter, i stedet for å skrive inn kommandoene manuelt (selv om dette også er mulig).

Med PHP kan man for eksempel koble til en MySQL-server med mysqli. Dette er et (litt ufullstendig og ikke fungerende) eksempel på dette:

<?php

// Koble til
$database = new mysqli("servernavn", "brukernavn", "passord");

// Sjekk om tilkoblingen virker
// [...]

// Kjør en kommando og sjekk om den var suksessfull
$database->query("En eller annen SQL-kommando");
// [...]

// Lukk databasetilkoblingen
mysqli->close($database);

?>

En kort og liten avslutning

Det er kanskje på tide å runde av dette innlegget. Jeg skulle gjerne skrevet en hel haug mer, men hvis jeg hadde gjort det spørs det hvor lett det ville vært å forstå hvis man ikke kan en del om dette fra før (det kan imidlertid alltids hende at jeg lager mer utdypende innlegg senere). Forhåpentligvis har det vært mulig å få en liten forståelse av hvordan serverbasert skripting virker. Neste nå er klientbasert skripting, altså skripting i nettleseren, som da hovedsakelig vil si Javascript.

Var det mulig å forstå noe i dette innlegget? Var det interessant? Finnes det ting jeg kunne gjort mer tydelig eller enklere å forstå? Skriv en kommentar, så kan jeg gjøre noe med det. For oppdateringer om Multitek, følg bloggen på sosiale medier, og abonner på det månedlige nyhetsbrevet.