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 databas, 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 MAMP vilket innehåller alla de tre delarna ovan och är anpassat för Mac. WAMP gör samma sak för Windows och LAMP för Linux. XAMPP har olika versioner för olika operativsystem. Det extra P't står för Perl som är ett annat programmeringsspråk som kan användas för att skapa dynamiska script.
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.

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

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

Installation av MAMP för macOS

Ladda ner installationsfilen för MAMP från www.mamp.info. Det finns en gratisversion som vi använder i denna kursen. Installera sedan applikationen.

Användning

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

Bild

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.

Bild

På bilden ser du att både Apache Server (webbservern) och MySQL Server (databasservern) är igång. Dessa kan du stoppa genom att klicka på Stop Servers. Cloud är en inbyggd molnlösning som kostar pengar att koppla upp sig på och det gör vi inte i denna kurs.

Konfiguration av MAMP

För att göra ytterligare inställningar behöver vi öppna MAMP -> Preferences....

Bild

Då öppnas ett nytt fönster med sex 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.
  • PHP, här brukar det finnas två olika PHP-versioner att välja mellan och dessa är de två installerade PHP-versionerna med högsta versionsnummer. Troligtvis finns det fler än två PHP-versioner installerade med MAMP och det kan 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.
  • Web 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 sedan starta om servern. 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å väljer du att öppna "Open Webstart Page" och kommer då till MAMP's startsida, där väljer du att titta på phpInfo under TOOLS.

Bild

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.

Bild

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.

XAMPP i Windowsmiljö (klicka om du vill se)

Guide skapad hösten 2018

Dessa installationsanvisningar gjordes hösten 2018, det kanske inte ser exakt likadant ut längre men de olika stegen skall fungera på samma sätt och inställningarna bör hittas på anvisat ställe. Om verkligheten skiljer sig mycket från denna guide så hoppas jag att ni hjälper mig att uppdatera den.

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. 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.

Bild

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.

Bild

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

Bild

Bitnami har lite enklare installationspaket för olika produkter som liknar den snabbinstallationen som vi gjorde av WordPress hos Binero. Om du vill installera WordPress på din lokala webbserver, vilket jag rekommenderar om du vill leka fritt med en applikation som inte är publik, så tycker jag att du skall göra en normal installation för att lära dig hur den fungerar.

Vi kryssar ur rutan och väljer Next>.

Bild

Installationen är klar.

Bild

Apache är vår webbserver och den är förberedd för att ta emot trafik från nätet. 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. Här behöver du göra en inställning så att brandväggen vet hur den skall hantera apache och eventuella anrop utifrån.

Bild

Allt funkar.

Bild

Välj det språk du vill.

Bild

När allt är klart så kommer du till XAMPP's panel. Det är därifrån du styr Apache och MySQL (jag lyckades också få med mig FileZilla i min första installation, det är FileZilla Server och inte klienten)

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.

Bild

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.

Bild

Klicka sedan på config för Apache och välja att redigera filen httpd.conf. Öppna den gärna i din ordinarie kodeditor, jag tror att det går att ställa in vilket program som skall öppna filen genom att klicka på Config i högerspalten.

När filen är öppen så skall du leta efter två kodrader som ligger på rad 251 och 253.
OBS: I denna fil måste du vara väldigt nogrann, 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:

httpd.conf (orginal)

251: DocumentRoot "C:/xampp/htdocs"
    252:
    253: <Directory "C:/xampp/htdocs">

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

httpd.conf (efter ändring)

251: DocumentRoot "G:/Min enhet/web_root"
    252:
    253: <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.

Bild

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 exakt var den ligger hittar du genom att söka efter Loaded Configuration File i phpinfo()-filen. 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.