Configure el entorno de desarrollo para aprender HTML, CSS, PHP en Windows.

(el artículo se publica en linkedin.com (Alexander Panov) )

Los programadores principiantes siempre hacen la pregunta, ¿dónde comenzar a aprender sobre la creación de sitios web? La búsqueda en Internet ofrece mucha información variada, pero desafortunadamente solo confunde más a los desarrolladores novatos. Con más de 5 años de experiencia docente, he visto muchas veces cómo los estudiantes, haciendo pausas en los juegos de computadora y decidiendo convertirse en desarrolladores web, intentaron personalizar los entornos de desarrollo. Comenzaron a ordenar los programas para el diseño. Tomaron Sublime Text, Notepad ++, Visual Studio Code, NetBeans o PHPStorm. Intentamos instalar en nuestra computadora local plataformas WAMP (significa Windows, Apache, MySQL y PHP), como Denver, Xampp, Open Server y muchas otras. Pero dado que no hay un conocimiento sistemático en la cabeza de un desarrollador novato, no hay experiencia de personalización, era raro que algunos de ellos establecieran un entorno de desarrollo conveniente, y quien lo obtuvo, entendió que se volvió más difícil jugar , ya que muchos programas adicionales, suavidad en el juego.

Este artículo nació debido a la explicación durante muchos años a cada estudiante de cómo hacer todo de manera correcta y conveniente.

Una vez más, quiero decir que estableceremos un entorno de trabajo en el sistema de Windows para estudiar la creación de sitios en HTML, CSS y sus enlaces a PHP. Llamaremos a esta computadora funcionando, para que los desarrolladores web principiantes se acostumbren a la idea de que su computadora es su fuente de ingresos.

Comenzar

Creo que desde que decidió convertirse en desarrollador web, lo primero que debe hacer es instalar Git en su computadora. Git es un sistema de control de versiones distribuido. Créame que este sistema lo salvará muchas veces, especialmente cuando se dé cuenta de que algo salió mal. Gracias Git, puedes controlar claramente cuándo sucedió esto y Git te dará la oportunidad de volver a la versión anterior del archivo editado. Es conveniente, ¿verdad?

Para instalar, descargue e instale Git para Windows ( https://gitforwindows.org/ ), dejando todas las rutas y configuraciones predeterminadas. Después de la instalación, reinicie la computadora.

Ahora puede usar Git desde la línea de comandos o PowerShell.

Me adhiero a la regla de que solo necesita instalar Git e IDE en su computadora de trabajo, que significa "entorno de desarrollo integrado". Todo lo demás debería funcionar en la versión del servidor. No puedes ponerte en una variedad de WAMP. Destaco que estoy hablando de ensamblajes WAMP. Explicaré mi punto de vista. Los ensamblajes WAMP son convenientes y buenos, pero solo cuando entiendes claramente qué y por qué estás haciendo en el servidor y el sitio. Principiantes simplemente por su experiencia hasta que esto no pueda. Sí, leyendo en muchos foros donde los desarrolladores web, incluidos los Desarrolladores Full Stack, dan consejos a los principiantes, a menudo tuve que leer que los ensamblajes WAMP son muy convenientes. Pero para obtener ese consejo, puede distinguir inmediatamente a un profesional de alguien que acaba de dar sus primeros pasos hacia el desarrollo web. Un profesional nunca aconsejará a un principiante que aprenda el desarrollo web para ponerse un ensamblaje WAMP.

Y el punto es este. El entorno en WAMP-assembly es bastante diferente del entorno real, que es el alojamiento web, en el que se ubicará su sitio terminado. El entorno de alojamiento web suele ser un sistema basado en sistemas similares a UNIX (Linux, CentOS, etc.), con menos frecuencia es el servidor web IIS, y cuando utilizamos ensamblajes WAMP obtenemos un entorno de Windows que no tiene nada que ver con lo real El medio ambiente no. En mi práctica, fui testigo cuando las asambleas de WAMP interferían con las personas.

Por ejemplo, un desarrollador web novato llegó a nuestro equipo desarrollando sitios en una computadora hogareña con un ensamblaje WAMP. Tenía una tarea simple: hacer una página a partir de un diseño listo y hacer un formulario de comentarios de trabajo sobre ella. En unos días, trae una solución preparada. Lo vertimos en el servidor de prueba, que es una copia exacta del servidor de producción y vemos que el formulario no funciona y algunas imágenes no se muestran. Sí, los desarrolladores experimentados entienden de inmediato cuál es el problema, pero el principiante no entiende esto y tiene pánico. Inmediatamente dice: "No entiendo, todo está funcionando en mi casa".

Le pido que verifique dónde carga las imágenes la página, y también verifica el script php para obtener rutas absolutas. Cuando lo arregla, todo funciona. Pero esta es una forma simple de retroalimentación, y si este es un sitio de tienda en línea, ¿páginas en 400?

U otro ejemplo.

Tuve que lidiar de alguna manera con la implementación del sitio, que la compañía ordenó de forma independiente: el desarrollador. El desarrollador creó un sitio web a medida para una empresa. Cuando este desarrollador demostró un pedido listo para el cliente en su computadora portátil en funcionamiento, todo funcionó bien, pero cuando este sitio se trasladó al proveedor de alojamiento, el sitio no funcionó y algunas páginas simplemente no aparecieron. Los desarrolladores experimentados también entienden cuál es el problema, pero los principiantes aún no lo han dado, debido a la falta de experiencia necesaria. Aquí resultó que Windows no tiene el soporte de .htaccess, habiendo prescrito las directivas necesarias para la operación de CMS, todo funcionó. ¿Pero era solo un sitio de tarjetas de presentación, pero si era una tienda en línea con administrador, secciones cerradas, etc.? Para evitar todo esto, recomiendo que todos sus estudiantes usen, si no un entorno de producción 100% completo, al menos muy cerca de él, y este ensamblaje WAMP no se puede proporcionar.

Tengo dos entornos favoritos en los que trabajo, es NetBeans y PHPStorm. Lo que más te guste depende de ti. Te recomiendo que pongas ambos e intentes trabajar en ellos. NetBeans es gratis, PHPStorm cuesta $ 89 para un desarrollador individual, pero hay una prueba de 30 días para que pueda verlo en el trabajo.

Te contaré acerca de la configuración usando la IDE PHPStorm como ejemplo. Lo instalamos en nuestra computadora IDE PHPStorm en funcionamiento, descargándolo del sitio oficial ( https://www.jetbrains.com ). No hay nada complicado, es solo un programa de ventana, dejando todas las rutas predeterminadas. Han instalado

Como dije, todo debería desarrollarse en un entorno o en un alojamiento web idéntico o muy cerca de él. Para hacer esto, necesitamos instalar VirtualBox en nuestra computadora descargándolo del sitio oficial ( https://www.virtualbox.org ). Aquí, también, no hay nada complicado, configurar y reiniciar la computadora.

Entonces hay dos formas de desarrollo

La primera forma es crear una máquina virtual dentro de VirtualBox de forma manual, instalar Linux Server en ella, subir Apache, MySQL y PHP en el servidor. Además, para depurarnos allí, será necesario instalar Xdebug para depurar PHP, habiendo entendido simultáneamente las dependencias dentro de la máquina virtual y también considerar las dependencias con nuestra carpeta de trabajo en la máquina host. Cuando adquieres experiencia, no es tan difícil de hacer como parece, pero para aquellos que solo están dando sus primeros pasos hacia el desarrollo de la WEB, estas no son complicaciones necesarias.

Por lo tanto, hay un segundo camino de desarrollo. Instale en su computadora Vagrant, descargándolo del sitio oficial ( http://www.vagrantup.com/downloads.html ). Vagrant es una aplicación que te ayuda a administrar máquinas virtuales. Instalado? Si recibe un error sobre la incompatibilidad de la versión de PowerShell, actualice el Marco de administración ( https://www.microsoft.com/en-US/download/details.aspx?id=50395 ). Instalado? Excelente

Luego descargamos el archivo con la configuración vagabunda, que preparé sobre la base de "Ubuntu Server 16.04" y que propongo usar para mis alumnos. Creamos una carpeta de trabajo, en la que crearemos nuestro sitio. Por ejemplo, esta será la carpeta "webdev" en la unidad "C" . Como hacerlo Para aquellos que ya instalaron Git, abra la unidad "C" en el explorador y haga clic derecho y seleccione "Git Bash Here" .

A.

Se abrirá una consola en la que ingrese el comando: git clone https://github.com/abyss-soft/webdev y haga clic en "enter".

Después de eso, tenía nuestra carpeta de trabajo terminada en el disco con este árbol de archivos:

Quiero llamar su atención sobre el hecho de que la carpeta con nuestro sitio, que desarrollaremos, se encuentra en esta ruta: C: \ webdev \ www \ webdev.local

En el futuro, podrá reemplazar todos los archivos de esta carpeta con archivos en su sitio y obtener un entorno de desarrollo listo para su sitio.

También le recomiendo que se registre en https://github.com y haga el "Tenedor" de mi repositorio " https://github.com/abyss-soft/webdev ", para que lo guarde usted mismo y siempre permanecerá contigo

Para aquellos que no quieren instalarse Git, aquí están los enlaces directos:

1. Enlace directo: https://github.com/abyss-soft/webdev/archive/master.zip
2. Referencia a Github: https://github.com/abyss-soft/webdev
3. Referencia a Vagrant Box: https://app.vagrantup.com/alex-panov/boxes/webdev

A continuación, ejecute el intérprete de línea de comando. Para hacer esto, presione Win + R (presione y mantenga presionado el botón con el logotipo de Windows a la izquierda y derecha del espacio después del alto) y no presione para presionar R) e ingrese el comando "cmd" (sin las comillas) . En la ventana abierta, vamos a nuestra carpeta creada ingresando el comando "cd c: \ webdev" .

Vaya a la carpeta, ingrese el comando vagabundo . La consola no se cierra. Cuando trabajemos y necesitemos apagar el servidor virtual, ingresaremos el comando de detención vagabunda .

El primer lanzamiento puede llevar mucho tiempo: la imagen se descargará, en los inicios posteriores, este paso no será, la imagen se aferrará al caché. A continuación, se iniciará la máquina virtual.

En la máquina virtual en sí, tenemos el archivo PHP.ini ubicado en /etc/php/7.0/apache2/php.ini y con dicha configuración:

---------- Trabajo: -------

[xdebug]

zend_extension = "/ usr / lib / php / 20151012 / xdebug.so"

xdebug.remote_autostart = on

xdebug.remote_enable = on

xdebug.remote_connect_back = on

xdebug.remote_port = 9000

xdebug.remote_host = 192.168.33.31

xdebug.idekey = PHP_IDE_CONFIG

Donde xdebug.remote_host = 192.168.33.31 es la dirección de la computadora host en la que se inicia PHPStorm.

Después de esperar a que se cargue, escribiremos la siguiente línea en el archivo de hosts (es C: \ Windows \ System32 \ drivers \ etc):
192.168.33.33 webdev.local

A continuación, inicie su navegador favorito y vaya al enlace webdev.local

Si todo salió como se esperaba, veremos una página con el texto "PHP calculando:" , que indica que nuestro sitio de prueba está cargado en nuestra máquina virtual en el servidor y está listo para funcionar.

A continuación, debemos conectarnos al intérprete PHP remoto de PHPStorm.

Para hacer esto, ejecute PHPStorm y cree un nuevo proyecto:

El programa nos dice que ya hay archivos en esta carpeta y nos preguntará si queremos crear un proyecto en esta carpeta:

Haga clic en "Sí"

Luego haga clic en el menú "Archivo" -> "Configuración ..":

y vaya a la sección Idiomas y marcos y en esta sección seleccione el elemento "PHP" . En esta sección, debe asignar un intérprete para el IDE en el elemento CLI Interpreter haciendo clic en el botón [...]

En la ventana abierta, haga clic en el "+" verde, configure cualquier nombre, por ejemplo, "Remote PHP 7" y seleccione el elemento Remoto ...

En la ventana que aparece, seleccione Vagabundo y especifique la ruta al archivo "C: \ webdev"

Y haga clic en "Aceptar".

Aparece una ventana como esta donde puede ver la versión de PHP y la versión del depurador:

A continuación, en la sección PHP, seleccione Servidores (PHP -> Servidores) . Haga clic en el "+" verde e ingrese cualquier nombre, por ejemplo "webdev.local" y el nombre del host: "webdev.local". El número de puerto se deja "80" y el depurador especifica "XDebug". Asegúrese de incluir la casilla de verificación Usar asignaciones de ruta ... para indicar las rutas de correspondencia:

Para una depuración más cómoda, o mejor dicho, para que el depurador no aparezca en la primera línea de ningún archivo PHP, debe deshabilitar esta función aquí:

Vaya a PHPStorm, seleccione "Editar configuraciones ..." en el menú "Ejecutar"

En el formulario abierto, haga clic en el "+" verde y seleccione "Tipo de aplicación Aplicación web PHP" . Ingrese un nombre, por ejemplo, "Aplicación web", en el campo del servidor, seleccione el nombre del servidor que acabamos de crear, la URL de inicio y también puede seleccionar el navegador en el que se abrirá la sesión de xdebug.

Importante!

La depuración solo funciona cuando PHPStorm está en modo de escucha. Para hacer esto, haga clic en "Comenzar a escuchar las conexiones de depuración de PHP" en la esquina derecha:

También necesitamos instalar una extensión adicional en el navegador. Para hacer esto, visite la página oficial de JetBrains con Extensiones de depuración del navegador ( https://confluence.jetbrains.com/display/PhpStorm/Browser+Debugging+Extensions ) y descargue la extensión deseada para su navegador.

Después de instalar nuestra extensión en el navegador, abramos su configuración y especifiquemos la idekey que ya especificamos en la configuración: PHP_IDE_CONFIG

En PHPStorm, active el oyente (en la esquina derecha de Comenzar a escuchar conexiones de depuración PHP ) y haga clic en Ejecutar aplicación web . Se inicia la depuración a nivel PHPStorm.

A continuación, activamos la extensión de depuración. Para hacer esto, vaya a nuestro sitio web http: //webdev.local y luego haga clic en el ícono de error (que ya está en el navegador) y seleccione el elemento Depurar en "Google Chrome"

O en "Mozilla Firefox":

Después de eso, el icono se volverá verde.

Después de esta configuración, puede establecer puntos de interrupción de forma segura y depurar sus sitios PHP. Después de instalar el punto de interrupción en PHPStorm, necesitamos actualizar la página en el navegador, y ver que se ha bloqueado en el modo de arranque, y en el PHPStorm, los puntos de interrupción funcionaron.

Por ejemplo, ponga un punto de interrupción en la línea:

$ x = 2;

Y haga clic en "Ejecutar aplicación web":

Como puede ver, nuestro depurador se detuvo en nuestro punto de interrupción y nos muestra las variables:

Si presionamos la tecla "F8" , veremos que el depurador se mueve paso a paso, mostrando todas nuestras variables:

De esta manera, hemos instalado y configurado nuestro entorno de trabajo, en el que podemos trabajar completamente.