Vejledning 7. PHP og MySQL i Visual Studio Code

Indholdsfortegnelse

Generelt om notatet her

PHP og MySQL er server-side. De kræver begge servere for at fungere. Notatet her forklarer dig:

Hvordan du installerer XAMPP, så du kan compile (= tolke og afvikle) PHP og MySQL lokalt på din computer
Hvordan du tilpasser Visual Studio Code, så du får hjælp til at skrive PHP
Hvordan arbejdsgangen er, når du arbejder med PHP og MySQL

VIGTIGT: Skulle du få ballade med ellers meget pålidelige XAMPP, så brug linket her: https://medium.com/@MisterKevin_js/setting-up-a-php-development-environment-using-visual-studio-code-and-xampp-on-windows-66b6bcf1e566

1. Installation af nødvendige servere med XAMPP

XAMPP er en gratis programpakke til Mac og PC. Den installerer en Apache-server og MySQL databasen på din computer, så du kan afvikle PHP og MySQL lokalt.

XAMPP kan også installere WordPress med få klik.Hent XAMPP fra https://www.apachefriends.org/download.html. Hent den version, der passer til din computer.

Når du har hentet den, så installer den på vanlig vis. Installer XAMPP med Apache, MySQL, PHP og phpMyAdmin.

Hvis du bliver spurgt om at installere Bignami, så lad være. Mindre du ved, hvordan den bruges. Derfor lad være med at vinge til her:

Når installationen er færdig, så start både Apache og MySQL databasen. Nedenfor er vinduet vist, hvor de er startet. De knapper, hvor du skal trykke på Start, laver vinduet om til Stop, når Apache hhv. MySQL er startet.

Tjek først om Apache serveren (som kan afvikle PHP) funger ved at skrive localhost i URL’en. Hvis den kører, så ser din browser sådan ud. Lidt kedeligt, men det virker!

Så skal du tjekke, at phpMyAdmin, dvs. databasen kører. Skriv følgende i din URL: http://localhost/phpmyadmin/ Hvis det kører, så ser det sådan ud:

Tillykke: Du kan nu bruge både PHP og MySQL databasen lokalt.

2. Extensions i Visual Studio Code

Visual Studio Code understøtter som udgangspunkt ikke PHP kode. Men den er forberedt til PHP. Det, du skal, er at aktivere nogle såkaldte “Extensions”. Åben Visual Studio Code og find Extensions. Gå op i toppen og find ENABLED, RECOMMENDED OG DISABLED extensions.

Hvis du åbner RECOMMENDED, så er der en masse PHP extensions, som du skal installere. Du installerer ved at klikke på den grønne knap med Install. Jeg har installeret føgende:

PHP Debug
PHP Intelephense
PHP IntelliSense

3. Tilpasning af VS-Code

VS-Code er fra Microsoft verdenen. Det er ikke skabt med henblik på at arbejde i PHP, men programmet (inklusive alle dens forgængere) har haft så stor succes, at det er udviklet alligevel.

Du skal nok have hjælp af din underviser til det her. Overordnet set følger jeg vejledningen her: Vi følger guiden på https://medium.com/@MisterKevin_js/setting-up-a-php-development-environment-using-visual-studio-code-and-xampp-on-windows-66b6bcf1e566. Den bruger Xampp som base for at skrive kode i VS-Code. Man kan sige, at du bruger VS-Code inden i Xampps opsætning.

I VS-Corde klik dig ind i Settings under File > Preferences > Settings hvis du skal rette i J-son filen

Gå ind under Extensions

Find PHP og åben settings.json filen

Settings.json er her. Linje 2 og 10 peger mod xampp. Husk \\
BEMÆRK: Den er sat til xampp2020, normalt skal den bare pege på xampp. Men det afhænger selvfølgelig af installationen

Her er koderne, så du kan kopiere til linje 2 og line 10:

{
    LINJE 2
    "php.executablePath": "C:\\xampp\\php\\php.exe",
    "window.zoomLevel": 0,
   

     LINJE 10
    "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
}

4. Arbejdsgangen med XAMPP og Visual Studio Code

XAMPP virker kun på et bestemt område på din computer. Det er derfor ikke ligegyldigt, hvor du gemmer dine PHP filer. Alle PHP filer skal ligge inde i mappen Xampp undermappe htdocs.

Du skal ligeledes have XAMPP til at køre. Klik på dit Xampp ikon, som ser sådan ud.

Tjek Xampp’s administrationsvindue. Både Apache og MySQL skal køre som vist på figuren.. Apache er serveren til PHP:

Trin 1. Opret en .php fil og gem den det rigtige sted

Inden du går i gang. Du behøves ikke at bruge Visual Studio Code til kodningen. Du kan sagtens kode det i en notesblok eller lignende. Det, som er fordelen ved Visual Studio Code, er at du får enormt meget hjælp undervejs.

Så start med at lave en sitemappe inde i htdocs. Jeg har lavet en, der hedder Test. Så laver du en ny fil i Visual Studio Code og gemmer den i mappen.

VIGTIGT: Filen SKAL have “efternavnet” .php. Lige som .html filer.

Trin 2. Indsæt/rediger koden

Når din PHP fil er parat, så kan du indsætte koden. Når du indsætter PHP kode, så skal der komme farve på koden, hvis du har gjort det rigtigt. Visual Studio Code er ekstremt hjælpsom.

Bemærk prikken oppe hjørnet. Den viser, at der er ændringer, og at du skal gemme dokumentet før test.

Trin 3. Se koden i en browser

Når du har gemt, så skal du teste i browseren. Det gør du ved at åbne en browser og bruge adressen: localhost/min-mappe/min-fil.php. I det her tilfælde localhost/Test/test.php. Kønt er det ikke, men det virker

VIGTIGT. DU ER NU FÆRDIG MED PHP – DELEN. RESTEN GEMMER VI TIL NÅR VI SKAL ARBEJDE MED DATABASER.

4. Virker MySQL serveren

DU SKAL FØRST I GANG MED MySQL, NÅR VI SKAL ARBEJDE MED DATABASER.

Tjek at XAMPP kører. Dvs. at både Apache og MySQL serveren skal være startet.

Du skal ligeledes have XAMPP til at køre. Klik på dit XAMPPikon og tjek sådan her. Både Apache og MySQL skal køre.

Så skal du åbne linket her i en browser: https://localhost/phpmyadmin. Så ser du administrationsmodulet for MySQL serveren:

Inde i administrationsmodulet kan du lave alt, hvad du har brug for. Inklusive at oprette nye databaser med tabeller, indsætte data, importere data … alt :-).

5. Skab forbindelse mellem VS-Code og MySQL serveren

Vi bruger guiden her, som bruger Xamp som base for VS-Code. Lige som vi gør for PHP.

https://medium.com/@MisterKevin_js/setting-up-a-php-development-environment-using-visual-studio-code-and-xampp-on-windows-66b6bcf1e566, men her er den ikke nødvendig

Start med at installere SQLTools i VS-Code. Når du har gjort det, får du et ekstra ikon i VS-Code som ligner en tønde. Jeg har tegnet det lidt op, så du nemmere ser, hvad jeg mener.