Kunskapsdokument - Webbserver

En webbserver används för att visa dynamiska hemsidor. En dynamisk hemsida bygger på ett script som kan hämta information från exempelvis en databas, processa detta data till html-kod som sedan visas upp hemsidan.

Lokal miljö

De allra flesta utvecklar hemsidor på den lokala datorn och då är det skönt att kunna utveckla även dynamiska sidor på den lokala datorn. För att detta skall vara möjligt så behöver du installera en webbserver.

En webbserver består av flera olika delar, en databasserver, en applikation som tar hand om kommunikationen mellan de olika delarna inom webbservern och sedan den delen som gör om den dynamiska sidans kod till html-kod. Denna delen är olika beroende på vilket scriptspråk som används.

I denna kurs rekommenderar jag att vi använder paketet XAMPP för Windows då jag tycker den är enklast att komma igång med på en Windowsdator. För Windows finns också möjligheten att använda WAMP-server men jag tycker att den blivis svårare att komma igång med.
XAMPP fungerar på alla operativsystem men kör du Mac OS som operativsystem så skulle jag rekomendera MAMP (det finns också en MAMP för Windows som fungerar bra).

Om namnen på de färdiga paketen ser konstiga ut så byggs de upp på följande sätt;

• Först operativsystemets namn, Windows (w), mac OS (m), Linux (l), X står för att paketet är anpassat för alla operativsystem, även om det är olika installationsfiler för varje operativsystem.
• Sedan kommer själva webbservern som tar hand om alla kommunikation och där står A för Apache.
• Sedan namnges databasen som installeras med paketet, där är det M som gäller och det står för MySQL och/eller MariaDB. MariaDB är en variant av MySQL som har utvecklats parallellt sedan några år tillbaka.
• Slutligen så anges namnet på det programmeringsspråk/tolk som ingår i paketet. P står för PHP och i XAMPP så står det andra P:et för Perl vilket då gör att det är möjligt att även använda detta programmeringsspråk.

Om du inte vill installera ett paket så går det att installera varje del för sig, detta kräver dock att du måste anpassa dessa tre i förhållande till varandra och detta kan ibland vara lite trixigt. Det är helt enkelt inte värt det om du inte är en väldigt avancerad användare.

Min rekommendation är att köra MAMP ifall du utvecklar i macOS och XAMPP ifall du utvecklar i Windowsmiljö.

Installation av XAMPP för Windows

Innan du installerar XAMPP så se till att du har installerat och konfigurerat synkroniseringen med Google Drive på rätt sätt.

Vi börjar med att ladda ner senaste versionen av XAMPP för det operativsystem vi använder. Gå till https://www.apachefriends.org/index.html och ladda ner filen.

När filen är nedladdad är det bara att starta igång installationen. Jag visar inte upp alla bilder under installationen utan endast de där du behöver göra val som spelar roll. Först kan du få en varning om att XAMPP inte bör installeras i Programmappen men det kommer vi ändå inte att göra. Klicka ok för att komma vidare.

När du kommer till denna rutan så får du välja vad som skall installeras. I XAMPP finns det några tillägg som inte finns till alla de andra webbserverpaketen och jag väljer att inte installera de saker som jag vet att vi inte behöver under kursen.

Se till att XAMPP installeras i en egen mapp direkt under C:\.

Sedan skall det installationen rulla på och förhoppningsvis blir det inte några problem.

När du sedan väljer att starta XAMPP så får du troligtvis upp en ruta med en Säkerhetsvarning.

Apache är vår webbserver och den är förberedd för att ta emot anrop från andra datorer/nätverk. Rent praktiskt kan du nu sätta upp en egen webbserver som kopplas till internet med allt vad det innebär i möjligheter och risker. Eftersom du i denna kursen endast kommer använda webbservern som en lokal sådan så behöver du inte ändra något utan välj det förvalda alternativet och klicka på tillåt åtkomst.

När allt är klart så kommer du till XAMPP's panel. Det är därifrån du styr Apache och MySQL.

Det är här du startar och stoppar de servrar som du vill ha igång.

Konfiguration

Dags att konfigurera XAMPP så att vi får den att fungera enligt våra behov.

Om du vill kika att XAMPP fungerar så kan du starta Apache och sedan skriva in http://localhost/ i en webbläsare så kommer du skickas till webbserververns startsida. Det är bl.a. den vi skall ändra så att vi kommer till vår egen webroot.

Börja med att skapa en mapp som du döper till web_root, eller något liknande, och som gärna ligger på ett ställe som säkerhetskopieras. På bilden ser du hur jag har lagt denna under Google Drive.

Klicka sedan på config för Apache och välja att redigera filen httpd.conf. Öppna den gärna i din ordinarie kodeditor, det går att ställa in vilket program som skall öppna filen genom att klicka på Config i högerspalten, däremot kan det vara trixigt att hitta sökvägen till din IDE.

När filen är öppen så skall du leta efter två kodrader som ligger på rad 252 och 253 (i min installation i just denna versionen, det kan ändras).
OBS: I denna fil måste du vara väldigt noggrann, blir det fel i denna filen så kommer inte webbservern starta upp med rätt inställningar eller inte starta upp alls. Vill du kommentera bort en kodrad (den som fungerar) så använd hash-tag i början av raden.

Det som står i filen är följande:

DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">

Detta skalla bytas mot adressen till din webroot. Hos mig blev det så här.

DocumentRoot "G:/Min enhet/web_root"
<Directory "G:/Min enhet/web_root">

Starta sedan Apache, eller starta om den om den redan varit påslagen. För att en konfigurationsändring skall slå igenom så behöver en server startas om då konfigurationsfilen läses in när servern startas.

När du startat om kan du återigen skriva in http://localhost/ i en webbläsare och förhoppningsvis kommer det se ut som på bilden nedan. Eventuellt kan du redan ha dokument i den mappen, då kommer dessa att listas. Finns det någon fil som heter index eller default med någon av filändelserna htm, html, php så kommer innehållet i filen att visas.

Felhantering

Det går att ställa in om felmeddelande skall visas när sådana uppstår i php-koden. Jag har i mina installationer för XAMPP sett att detta är förinställt men om sidan blir helt vit och inga felmeddelanden visas så behöver du söka upp den konfigurationsfil som laddas när XAMPP startas. Filen heter php.ini och du når den ifrån XAMPP's kontrollpanel via Config-knappen för Apache. I den filen söker du efter display_errors och den bör ha värdet Off. Sätt denna till On och starta sedan om Apache ifrån XAMPP's kontrollpanel.

MAMP för macOS (klicka om du vill se)

Installation av MAMP för macOS

Sedan version 6.5 av MAMP så görs den i två olika versioner beroende på vilken processor du har i din dator, intel eller m1. Välj den versionen som passar bäst till din dator.

Ladda ner installationsfilen för MAMP från www.mamp.info. I nedladdningsfilen så finns både MAMP och MAMP PRO och vid installationen så finns bägge varianterna tillgängliga. Vi skall använda grundversionen av MAMP.

Användning

När du startar MAMP, som ligger bland övriga program, så kommer servrarna att starta och en webbsida att öppnas.

Lägg märke till den url som visas i fönstret. Den är http://localhost:8888/ och är den adress som gör att du anropar webbserverns webb_root (den startmapp där webbservern utgår ifrån när den läser webbsidor). Du når också denna sida ifall du klickar på MY WEBSITE.

Dessutom öppnas själva kontrollpanelen för MAMP.

Konfiguration av MAMP

Vi behöver göra vissa ändringar i MAMP för att det skall fungera på bästa sätt.

Direkt i kontrollpanelen så ser du fyra saker;

• Name, som är det namnet som webbservern har.
• Document root, som är den plats där alla dina webbfiler ligger på hårddisken. Den skall vi ändra om en stund.
• Web server, Apache är den webbservern som vi skall använda oss av, Nginx är ett annat alternativ.
• PHP version, här anger du vilken version du vill använda. Oftast vill du använda den senaste versionen men ibland kan det finnas tillfälle då du behöver testa en viss applikation/funktion ihop med en specifik version. I denna kursen kommer vi inte ha några sådana problem så välj den senaste tillgängliga versionen.

För att göra ytterligare inställningar behöver du klicka på knappen Preferences, som också går att nå via MAMP -> Preferences....

Då öppnas ett nytt fönster med fyra flikar. Dessa flikar är;

• General, här kan du ställa in vad som skall hända när MAMP startas eller stängs av. Hos mig är alla rutor ikryssade.
• Ports, här kan du ändra portarna som webbservern skall använda sig av. Vissa portar har olika betydelser och många portar används av andra applikationer. Att ändra här riskerar att MAMP eller andra applikationer påverkas i onödan, ändra alltså bara här om det har uppstått några problem med krockar som behöver lösas. Portuppsättningen 8888(Apache)/8889(MySQL) är en av två vanliga kombinationer. Den andra är 80(Apache)/3306(MySQL) så här finns en knapp för att ändra detta vid behov. Standard för MAMP är 8888/8889.
• Server, här skall du ange var du vill lägga din web_root/Document Root. Troligtvis har den angivits till ../Program/MAMP/htdocs vilket innebär att den ligger inne i MAMP's mappstruktur men att den inte säkerhetskopieras med Google Drive. Skapa en mapp inom Drive, döp den till något lämpligt (web_root, www_root, eller liknande) och välj sedan denna mappen som Document Root. Mitt tips är att sedan flytta alla filer/mappar/projekt från webbutveckling här så kommer du åt alla dina projekt genom din egen webbserver. Då ligger allt på samma ställe och blir enklare att hitta.
  MySQL, innehåller bara info om aktiv version av databasen.
• Cloud, innehåller bara info som är intressant ifall du väljer att köpa till möjligheten att synka MAMP med molnet.

Nu kan du trycka på OK och då kommer servern automatiskt att startas om ifall du har gjort några ändringar. När Apache/MySQL är igång igen så kan du i en webbläsare gå till http://localhost:8888/ och om du nu har lagt några filer/mappar/projekt i din web_root så kommer du se dessa här.

Visa felmeddelande

MAMP's grundinställning är att inte visa error i webbläsaren när någon kod är felskriven. Det är osmidigt när vi utvecklar att inte se vad som går fel, därför skall vi ändra detta.

Från MAMP's kontrollpanel så klickar du på knappen "WebStart" och kommer då till MAMP's startsida, där väljer du att titta på phpInfo under TOOLS.

Leta efter "Loaded configuration file" och öppna denna i en kodeditor. Sök efter display_errors och välj den som inte har ett semikolon i början av raden (semikolon ; används i denna ini-fil för att kommentera bort instruktioner) och ändra sedan Off till On. I min fil så hittade jag denna instruktion på rad 472.

Spara nu filen (stäng den för säkerhets skull, den är väldigt känslig för felaktigheter) och starta sedan om servrarna. När detta är gjort så kan dina eventuella fel skrivas ut i webbläsaren.