Ejercicios (puesta en marcha) - Visual Studio Code - Enunciados

Estos ejercicios permiten comprobar que se ha configurado correctamente Visual Studio Code.

Para facilitar la realización de los ejercicios, se proporcionan unas plantillas de los ejercicios Visual Studio Code (Puesta en marcha).

VS Code 1 - Ejecutar programas

  1. Descargue y descomprima las plantillas.
  2. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-1.php.
  3. Ejecute el programa vscode-1.php con los atajos de teclado Ctrl+Alt+l Ctrl+Alt+f y Ctrl+Alt+l Ctrl+Alt+c y compruebe que la página se muestra tanto en Firefox como en Chrome, respectivamente.

    Si no se abre el navegador correspondiente, compruebe que está seleccionado el perfil recomendado y que el perfil está configurado correctamente, como se explica en la lección Perfil recomendado de de Visual Studio Code.

  4. Compruebe que la dirección de la página es http://localhost/iaw/php/ejercicios/puesta-en-marcha/vscode-1.php.

    Si la dirección no contiene el alias /iaw/php, revise la tarea creada en Visual Studio Code, como se explica en la lección Configuración de Visual Studio Code.

  5. El resultado en el navegador debe ser este:
    Enlace a ejemplo

    Si la página no se muestra por un error del servidor, compruebe que ha creado el alias /iaw/php en el archivo de configuración de Apache httpd.conf y reinicie el servidor, como se explica en la lección Configuración de Apache y PHP.

VS Code 2 - Formatear programas

  1. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-2.php.: 
    <?
/*
Programa de prueba de PHP CS Fixer
*/
$a     =        25    ;
$b =    $a     +      $a*2 ;
  2. Formatee con PHP CS Fixer el programa vscode-2.php con el atajo de teclado Alt+Mayús+f.
  3. Compruebe que el programa se formatea correctamente: 
    <?php
// Programa de prueba de PHP CS Fixer
$a = 25;
$b = $a + $a * 2;

    Si el programa no se formatea correctamente, compruebe que está seleccionado el perfil recomendado y que el perfil está configurado correctamente, como se explica en la lección Perfil recomendado de de Visual Studio Code.

    Si está utilizando Windows y el nombre de usuario contiene espacios en blanco, actualmente (septiembre de 2024) la extensión PHP CS Fixer no funciona correctamente. Una posible solución es utilizar una versión anterior de la extensión que sí funciona correctamente, como se comenta en la lección Perfil recomendado de de Visual Studio Code.

  4. No es necesario ejecutar el programa, ya que no proporciona ninguna salida.

VS Code 3 - Configuración de PHP (error_reporting)

  1. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-3.php.: 
    <?php
function test($a = [], $b) {}
  2. Ejecute el programa.
  3. Compruebe que se muestra el siguiente error:
    Deprecated: Optional parameter $a declared before required parameter $b is implicitly treated as a required parameter in vscode-3.php on line 2

    Si no se muestra el error, revise la directiva error_reporting en php.ini, como se explica en la lección Configuración de Apache y PHP.

VS Code 4 - Configuración de PHP (output_buffering)

  1. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-4-1.php.
  2. Ejecute el programa.
  3. Haga clic en el enlace.
  4. Compruebe que se muestra la página vscode-4-2.php, incluyendo el siguiente aviso:
    Warning: Cannot modify header information - headers already sent by (output started at vscode-4-2.php:1) in vscode-4-2.php on line 2

    Esta es la página 2.

    Si ve esta página es que tiene la configuración recomendada para desarrollo recomendada en estos apuntes.

    Debe ver un aviso Warning al principio de esta página.

    Si en su lugar se muestra la página vscode-4-3.php, revise la directiva output_buffering en php.ini, como se explica en la lección Configuración de Apache y PHP.

VS Code 5 - Probar mclibre.org Snippets

Atajo Ctrl+Alt+v Ctrl+Alt+l

  1. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-5-1.php.
  2. Copie el texto html siguiente: 
    <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Página HTML válida</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="estilo.css" title="Color">
</head>

<body>
  <p>Esta página es una página HTML válida.</p>
</body>
</html>
  3. Pegue en el interior del fragmento PHP el texto, utilizando el atajo Ctrl+Alt+v Ctrl+Alt+l
  4. Compruebe que el código html se ha pegado dentro de instrucciones print, línea a línea.
  5. Ejecute el programa.
  6. Compruebe que se muestra la página correctamente.

Atajo Ctrl+Alt+v Ctrl+Alt+b

  1. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-5-2.php.
  2. Copie el texto html siguiente: 
    <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Página HTML válida</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="estilo.css" title="Color">
</head>

<body>
  <p>Esta página es una página HTML válida.</p>
</body>
</html>
  3. Pegue en el interior del fragmento PHP el texto, utilizando el atajo Ctrl+Alt+v Ctrl+Alt+b
  4. Compruebe que el código html se ha pegado dentro de una única instrucción print.
  5. Ejecute el programa.
  6. Compruebe que se muestra la página correctamente.

Atajo Ctrl+Alt+v Ctrl+Alt+q

  1. Abra en Visual Studio Code el programa /ejercicios/pm-vscode/vscode-5-3.php.
  2. Copie el texto html siguiente: 
    <head>
  <meta charset="utf-8">
  <title>Página HTML válida</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="estilo.css" title="Color">
</head>
  3. Pegue en la posición adecuada el texto, utilizando el atajo Ctrl+Alt+v Ctrl+Alt+q
  4. Compruebe que el código html se ha pegado añadiendo caracteres de escape (\) a las comillas.
  5. Ejecute el programa.
  6. Compruebe que se muestra la página correctamente.