XAMPP

Hva er XAMPP?

XAMPP er et utvalg av server-programmer, samlet i én pakke.
X -> Cross Platform, fungerer på alle operativsystem (Windows, MacOs, Linux)
A -> Apache, en webtjener som lar oss dele websider som vi lager
M -> MariaDB, en open-source versjon av MySQL, som brukes til databaser
P -> PHP, programmeringsspråk. Gjør at vi kan bruke PHP på websidene vi lager.
P -> Perl, et scriptingspråk. Jeg har ikke hatt behov for dette – enda.

Hvor finner jeg XAMPP?

https://www.apachefriends.org/download.html – velg nyeste versjon for ditt OS.

Hvordan installerer jeg XAMPP? (Windows)

Start installasjonen, og trykk Next. La alt være avhuket, og trykk next. Velg hvor du vil legge XAMPP. Pga. rettigheter og User Account Control anbefales det å helst legge XAMPP på en annen disk enn C:\ eller å legge det på Users\[ditt brukernavn]. Trykk next, og huk vekk “learn more about Bitnami for XAMPP”. Trykk Next, og next igjen.

Hvordan bruker jeg XAMPP?

Når installasjonen er ferdig, gå til mappa der du installerte XAMPP. Høyreklikk “xampp-control.exe” og velg “Run as Administrator”. Du vil da se et vindu som ser slik ut:

Inni “Modules” er det listet opp alle serverne som er installert på din maskin.

  1. Service viser om du har installert server-programmet som en service på din maskin, altså at serveren starter opp av seg selv så snart maskinen skrur seg på, og står og går i bakgrunnen selvom du ikke starter opp XAMPP.
  2. Module viser navnet på serveren
  3. PID(s) viser Process ID’en(e) til serveren. Hvert program som kjøres på en datamaskin har en slik, og det kan være nyttig å vite den konkrete ID’en på en prosess, f.eks hvis serveren har låst seg.
  4. Port(s) viser hvilke porter i nettverket som tjeneren bruker. En datamaskin kan ha opptil flere IP-adresser, men porten vil være den samme; så hvis jeg har en webserver, så vil den typisk være på port 80. Jeg kan da komme inn på den ved å skrive localhost:80 i browseren. Localhost er forøvrig alltid adressen til den maskinen du er på.
  5. ACTIONS
    1. Start gjør at du kan starte eller stoppe serveren.
    2. Admin peker på de forskjellige administrasjonssidene som hver server har.
    3. Config lister opp forskjellige konfigurasjonsfiler. Det kan være lurt å lage en kopi av originalene før du begynner å endre disse, i tilfelle noe skulle gå galt.
    4. Logs lister opp forskjellige 

For enkelhetsskyld til senere, trykk på Config øverst i høyre hjørnet. I vinduet som kommer opp, Finn linjen der det står Editor, og trykk på folder-ikonet. Finn mappen der din tekst-editor ligger. Om du ikke vet hvor den finnes, trykk windows-knappe, skriv navnet på editoren. Når den kommer opp, høyreklikk og velg “Open File Location”. Kopiér adresselinja over,og legg til navnet på exefila (f.eks [adresselinje]/code.exe). Trykk save.

Apache

Web-server

Trykk “Start” på linja til Apache i XAMPP. For å sjekke at Apache fungerer, start en browser, og skriv localhost. Du vil da komme inn på en XAMPP side. Grunnen til at du blir sendt hit er fordi i xampp/htdocs ligger det en fil som heter index.php, som automatisk blir hentet når du går inn på localhost. 

Gå til xampp/htdocs og lag en mappe som du kaller sites. Gå inn i sites, og lag en mappe som heter test, og inni denne mappen lager du en tekstfil som du kaller index.html. Pass på at filen kun heter det, og ikke index.html.txt – det kan være en idé å skru på filtype-visning i windows, så du slipper dette problemet. 

Åpne opp index.html i din favoritt tekstbehandler (IKKE Word eller lignende, men Visual Studio Code eller lignende). Inni dokumentet kan du skrive:

For nå skal du ikke tenke så mye over akkurat hva som står, eller hvordan dette er satt opp, bare kopier teksten, og pass på at alle tegnene er riktige. Lagre filen, og gå tilbake til browseren din. Skriv localhost/sites/test og trykk enter. Hvis du har gjort alt riktig, bør du nå få opp noe som ligner på dette:

Jippi! Du har nå en webserver oppe og går på din maskin, og kan opprette flere mapper med index.html for å lage mange nettsider, og undersider. 

Kan resten av omverden få tilgang til nettstedene? I utgangspunktet, nei. Man setter gjerne opp XAMPP for ha et miljø til å drive med utvikling, og da trenger man ikke å gjøre sin maskin sårbar for “det åpne nett”. Hvis man er inneforstått med risikoen og likevel ønsker å gjøre det, må man gjøre to ting. 

  1. Åpne riktig port på router’en (for Apache er det port 80 og 443)
  2. Finne din eksterne IP-adresse
    1. Dette er beskrevet i punkt 6 i portåpningsguiden over, men kort fortalt kan du gå inn på whatsmyip.org.

Når dét er gjort kan du bruke din eksterne IP-adresse, og bytte ut “localhost” i eksemplet over, slik at du får [din-eksterne-ip]/sites/test, uten firkant-klammene. Send det til en bekjent, og se om de kan se nettsiden.

Sikkerhetsmessig kan det være noen baktanker ved å bruke en direkte IP-adresse – man kan i verste fall bli utsatt for hacking. Det man vanligvis gjør er å kjøpe (eller finne gratis) domenenavn, som man heller peker på IP-adressen, eller at man holder alt lukket på sin lokale datamaskin, og heller laster opp filene på en “hosting-site”. Da kan man kalle filene sine for “development environment”, altså miljøet som man utvikler på (dev miljø, på kortform), og nettsiden man laster opp ferdigredigerte filer på for “production environment” (prod miljø på kortform). Dette er kjekt fordi man da kan lage nye undersider, ny funksjonalitet, leke og herje på sin lokale maskin, uten at noe blir ødelagt på den nettsiden som folk faktisk kan komme inn på. Man laster da kun opp filer på prod. siden når man har sjekket at det siste man lagde fungerer som det skal.

PHP

Siden Apache er satt opp med PHP i XAMPP, så trenger du ikke starte en egen tjener for å bruke PHP. PHP er et fullverdig programmeringsspråk, som brukes for å kommunisere med databaser, skape webapplikasjoner, og tilføre logikk (dynamikk) til ellers statiske HTML-sider.


For å teste PHP, så kan du endre filtypen på html-filen vi lagde i punktet over fra .html til .php.

På h1-linjen kan vi legge til: 

<?php echo "Vi tester at PHP fungerer!"; ?>

Bare for å forklare hva denne linjen gjør:

  • Den første delen, “<?php” betyr “vi ønsker å skrive php-kode her”.
  • “echo” betyr “skriv denne teksten ut”, og blir alltid etterfulgt av to anførstelstegn, oftest med innhold inni.
  • Etter det siste anførselstegnet setter vi inn et semikolon for å si at “vi er ferdige med echo-kommandoen”.
  • Vi avslutter så med “?>” for å si at vi ferdige med å skrive PHP.

Lagre dokumentet, gå til nettleseren og last inn siden på nytt. Hvis du nå får teksten som vi skreiv over, så har du gjort alt riktig.

MySQL / MariaDB

DataBase Management system (SQL, phpmyadmin, Relational databases)

Finn først raden til Apache, trykk config og trykk på phpMyAdmin. Pass på at filen åpner seg i en tekstbehandler (f.eks Visual Studio Code), hvis ikke kan filen se veldig kaotisk ut. Se til at linje 18 til 24 ser ut som dette, og endre hvis det er noe som er ulikt. Gå deretter til XAMPP Control Panel, finn raden til MySQL, og trykk Start. 

Lagre filen, og gå ut av den. 

Åpne en browser, og gå til localhost/phpmyadmin. Der kan du logge inn med brukernavn root, og ikke noe passord. Trykk “Do” (“Gjør” på norsk), og du vil nå være logget inn på phpMyAdmin. phpMyAdmin er en nettside der du kan enkelt opprette databaser, tabeller og innhold til tabellene, samt sette opp relasjoner (forhold) mellom hver tabell. Det at MySQL-serveren kjører gjør at vi kan kjøre SQL, både i terminalvindu og i phpMyAdmin. SQL er forøvrig et programmeringsspråk som benyttes for å lage, lese, oppdatere og slette, populært kalt CRUD på engelsk (Create, Read, Update, Delete). Bare for å vise enkel funksjonalitet kan vi opprette en tabell og legge til noen eksempeldata. Vi kunne gjort dette med SQL, men vi velger å gjøre det direkte i phpMyAdmin.

Hvis du aldri har vært borti databaser før, og synes alt dette virker veldig overveldende, så se for deg et regneark, typ Excel. Relasjonsdatabaser (som vi nå driver med) kan minne veldig om regneark, men det har også mye mer funksjonalitet utover det regneark kan gjøre.

Helt til i venstre, i margen finner du New. Trykk på denne for å opprette en ny database.

Skriv inn et navn, f.eks nettsidetest, og trykk Opprett knappen.

I den venstre margen har du nå fått en ny database, med navnet som vi ga den. Legg merke til at det ligger en del andre databaser der fra før som vi ikke har opprettet – det er databaser som mysql og phpMyAdmin bruker for å kunne fungere. Hvis du endrer på dem, eller sletter dem, så vil du ødelegge programmet, så det er best å holde fingrene av fatet.

Når du trykket “Gjør” ble du også sendt direkte til denne siden:

Her kan du opprette den første tabellen til databasen din, og velge hvor mange kolonner den skal ha. La oss kalle den User, og la den ha 4 kolonner. Trykk Gjør.

Nå skal vi sette opp kolonnene slik at de er klare til å motta informasjonen på den måten som vi vil. Kopier slik at du har samme oppsett som under:

Merk spesielt øverste linje som har Primary på Indeks, og huket av for A_I. Ikke tenk for my på dette, men kort fortalt, så står A_I for Auto Increment, og vil gjøre at Id-kolonnen vil bestå av et løpenummer, som begynner på 1, og vokser med en for hver rad som blir lagt til. Primary på Indeks vil si at Id-kolonnen er en primærnøkkel. Mer om det senere. For nå, trykk på Gjør-knappen. Dersom du er nysgjerrig på hvordan man kunne gjort dette i SQL, har jeg lagt ved koden under:

Okei, så nå har vi laget en database, databasen har fått en tabell, og tabellen har fått fire kolonner, men den har enda ingen rader. 

Legg merke til at phpMyAdmin alltid viser hvilken SQL-kode den har kjørt, for at du skal få det resultatet som du gjør. Legg også merke til at det ikke finnes noen data i tabellen, kun kolonnene.

Igjen finnes det mange måter å gjøre dette på, men vi bruker “pek-og-klikk” varianten i phpMyAdmin. Trykk Sett inn, på den nest øverste toolbar’en, og du vil få opp noe som dette:

Man får gjerne opp flere bokser nedover, slik at man kan legge inn mange data på en gang, men la oss konsentrere oss om en. Ikke fyll inn noe i Id, da denne fyller seg inn av seg selv (siden vi satte på Auto Increment). Fyll inn et tilfeldig brukernavn (men ikke lenger enn 20 bokstaver), en epost (men ikke lenger enn 30 bokstaver) og kjønn (kun én bokstav; M eller F for Male eller Female). Trykk så “gjør”. Hvis du nå trykker på tabellen “user” i venstre marg av phpMyAdmin, vil du få opp brukeren du la til.

Legg igjen merke til at SQL-koden ligger nest-øverst.

Igjen, så legger jeg ved hvordan SQL-koden for det vi nettopp gjorde ser ut.