Ejecutar archivos PHP en Visual Studio Code con XAMPP: una guía paso a paso

Visual Studio Code (VS Code) es una herramienta bastante útil para los desarrolladores que buscan un editor de código gratuito pero liviano, mientras que XAMPP en Windows se usa para proporcionar la popular pila AMP diseñada para ejecutarse en sistemas basados en Linux para crear entornos de servidor web. XAMPP incluye Apache, MySQL, PHP y PHPMyAdmin junto con Mercury, Filezilla y Tomcat. No es para uso en producción, sino que los desarrolladores lo utilizan para crear y probar aplicaciones basadas en PHP sin problemas.

Aquí en este tutorial, aprendemos cómo podemos usar elVisual Studio Code para ejecutar y probar nuestros archivos PHP usando el servidor web XAMPP en sistemas Windows 11 o 10.

Cómo ejecutar un archivo PHP en código de Visual Studio con xampp

1. Instale el código de Visual Studio

Como usamos VScode para crear los archivos PHP en este tutorial, primero ábrelo en tu PC. Aquellos que aún no tienen el código de Visual Studio en su escritorio o servidor de Windows pueden visitar elsitio web oficialpara obtener el instalador. Los usuarios de Windows también pueden usar Command Terminal y Winget para instalar VSCode.

2. Instale la extensión PHP para Visual Studio Code

Una vez que haya abierto VScode, instale la extensión PHP. Para eso, haga clic en el ícono de Extensión, que se encuentra en la barra de Actividad del lado izquierdo, o use el método abreviado de teclado:Ctrl+Mayús+X.Allí, busque PHP en el cuadro de búsqueda y luego seleccione cualquier extensión popular, por ejemplo, aquí vamos a PHP de DEVSENSE. Haga clic en el "instalar”Botón para obtenerlo.

La extensión nos ayudará a escribir de manera eficiente el código PHP y depurarlo si hay algún error.

3. Instale XAMPP

XAMPP es un software gratuito pero bastante útil para usuarios de Windows que desean entornos de servidor web Apache, MySQL y PHP en su PC para probar aplicaciones web. Entonces, para ejecutar o probar archivos PHP creados en Visual Code Studio, instale XAMPP. Si ya lo tiene, puede continuar; de lo contrario, visite elSitio web oficial de XAMPP para obtener la configuración.

Después de abrir el panel de control de XAMPP, inicie el servidor web APACHE porque lo necesitamos para ver los archivos PHP en el navegador.

4. Cree una carpeta de proyecto

Ahora, usemos Visual Code Studio y creemos nuestra carpeta de proyecto dentro de los htdocs de XAMPP. Para abrir VScode, haga clic en "Archivo"Menú y seleccione el"Abrir carpeta" opciónousa el atajo de tecladoCtrl+K.

Navegar aC:/Xampp/htdocsy haga clic en “Seleccionar carpeta" botón.

Ahora, haga clic en elcarpetaicono y asigne algún nombre a la carpeta de su proyecto.

5. Cree un archivo PHP:

Después de crear la carpeta Proyecto, selecciónela y haga clic en elicono de archivopara crear un archivo PHP con el nombre que desee junto con el“.php”extensión.Por ejemplo, aquí estamos creando un archivo “miprimerphp.php" archivo.

Escriba su código PHP o cópielo y péguelo en el archivo. Guarde el archivo –Ctrl+S.

El código que hemos utilizado está aquí, por si lo necesitas:

 <!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. Ejecute el archivo PHP

Ahora estamos listos con nuestro archivo PHP creado en Visual Code Studio. Para ejecutarlo y probarlo, abra el navegador web de su sistema y navegue hastahttps://localhost/carpeta-de-proyecto/tu-nombre-de-archivo.php.Por ejemplo, nuestro nombre de archivo PHP es "miprimerphp.php“, de ahí que la URL para acceder será así:

https://localhost/myproject/myfirstphp.php

Deberías ver el resultado de tu código PHP mostrado en el navegador.

Depuración de PHP (opcional)

Visual Studio Code también admite la depuración de código PHP; establezca puntos de interrupción en su código PHP haciendo clic en el canal al lado de los números de línea. O presioneF5o vaya al “Correr"Menú y seleccione"Iniciar la depuración.” Puede utilizar la consola de depuración para inspeccionar variables y revisar su código PHP.

Otros artículos: