PHP-bestanden uitvoeren in Visual Studio Code met XAMPP: een stapsgewijze handleiding

Visual Studio Code (VS Code) is een behoorlijk handig hulpmiddel voor ontwikkelaars die op zoek zijn naar een gratis maar lichtgewicht code-editor, terwijl XAMPP op Windows wordt gebruikt om de populaire AMP-stack te bieden die bedoeld is om op Linux-gebaseerde systemen te draaien voor het creëren van webserveromgevingen. XAMPP omvat Apache, MySQL, PHP en PHPMyAdmin, samen met Mercury, Filezilla en Tomcat. Het is niet bedoeld voor productiegebruik, maar ontwikkelaars gebruiken het om naadloos op PHP gebaseerde applicaties te maken en te testen.

Hier in deze tutorial leren we hoe we deVisual Studio Code om onze PHP-bestanden uit te voeren en te testen met behulp van de XAMPP-webserver op Windows 11- of 10-systemen.

Hoe een PHP-bestand uit te voeren in Visual Studio-code met xampp

1. Installeer Visual Studio-code

Omdat we VScode gebruiken om de PHP-bestanden in deze tutorial te maken, moet je deze eerst op je pc openen. Degenen die nog geen Visual Studio-code op hun Windows-desktop of -server hebben, kunnen deofficiële websiteom het installatieprogramma te verkrijgen. Windows-gebruikers kunnen ook de Command Terminal en Winget gebruiken om VSCode te installeren.

2. Installeer de PHP-extensie voor Visual Studio Code

Nadat je de VScode hebt geopend, installeer je de PHP-extensie. Klik daarvoor op het extensiepictogram aan de linkerkant van de activiteitenbalk of gebruik de sneltoets -Ctrl+Shift+X.Zoek daar naar PHP in het zoekvak en selecteer vervolgens een populaire extensie. Hier gaan we bijvoorbeeld voor PHP van DEVSENSE. Klik op de “installeren"-knop om het te krijgen.

De extensie zal ons helpen om de PHP-code efficiënt te schrijven en hetzelfde te debuggen als er een fout optreedt.

3. Installeer XAMPP

XAMPP is gratis maar behoorlijk nuttige software voor Windows-gebruikers die Apache-, MySQL- en PHP-webserveromgevingen op hun pc willen hebben om webapplicaties te testen. Dus om PHP-bestanden uit Visual Code Studio uit te voeren of te testen, installeert u XAMPP. Als je het al hebt, kun je verder gaan, anders ga je naar deofficiële website van XAMPP om de installatie te krijgen.

Na het openen van het XAMPP-configuratiescherm start u de APACHE-webserver omdat we die nodig hebben om de PHP-bestanden in de browser te bekijken.

4. Maak een projectmap

Laten we nu de Visual Code Studio gebruiken en onze projectmap maken in de htdocs van XAMPP. Voor die open VScode klikt u op de “Bestand"-menu en selecteer de "Map openenoptieofgebruik de sneltoetsCtrl+K.

Navigeer naarC:/Xampp/htdocsen klik op de “Selecteer Map" knop.

Klik nu op demappictogram en geef een naam aan uw projectmap.

5. Maak een PHP-bestand:

Nadat u de projectmap hebt gemaakt, selecteert u deze en klikt u op debestandspictogramom een PHP-bestand te maken met welke naam je maar wilt, samen met de“.php”verlenging.Bijvoorbeeld, hier maken we een bestand “mijneerstephp.php" bestand.

Schrijf uw PHP-code of kopieer en plak deze in het bestand. Sla het bestand op –Ctrl+S.

De code die we hebben gebruikt, staat hier, voor het geval je hem nodig hebt:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Example</title>
    <style>
        body {
            background-color: #f4f4f4; /* Set the background color */
            font-family: 'Arial', sans-serif; /* Set the font family */
            color: #333; /* Set the text color */
            margin: 20px; /* Add some margin for better visibility */
        }

        h1 {
            color: #007BFF; /* Set a different color for the heading */
        }
    </style>
</head>
<body>

    <?php
    // PHP code starts here

    // Display a greeting message
    echo "<h1>Hello, PHP!</h1>";

    // Get the current date and time
    $currentDate = date("Y-m-d H:i:s");

    // Display the current date and time
    echo "<p>Current Server Date and Time: $currentDate</p>";

    // PHP code ends here
    ?>

</body>
</html>

6. Voer het PHP-bestand uit

Nu zijn we klaar met ons PHP-bestand gemaakt in Visual Code Studio. Om het uit te voeren en te testen, opent u de webbrowser van uw systeem en navigeert u naarhttps://localhost/project-map/uw-bestandsnaam.php.Onze PHP-bestandsnaam is bijvoorbeeld “mijneerstephp.php“, vandaar dat de URL om er toegang toe te krijgen er als volgt uitziet:

https://localhost/myproject/myfirstphp.php

De uitvoer van uw PHP-code zou in de browser moeten worden weergegeven.

PHP debuggen (optioneel)

Visual Studio Code ondersteunt ook het debuggen van PHP-code; stel breekpunten in uw PHP-code in door in de goot naast de regelnummers te klikken. Ofwel drukF5of ga naar de “Loop"-menu en selecteer "Begin met foutopsporing.” U kunt de Debug Console gebruiken om variabelen te inspecteren en uw PHP-code te doorlopen.

Overige artikelen: