Подготовка рабочего места, настройка ПО

“

В этом уроке мы познакомимся с базовыми программами, которые нужны веб-разработчику. Начинаем!

Глоссарий

Для успешного освоения материала рекомендуем вам изучить следующие понятия:

Видеолекция

Конспект

Главный инструмент разработчика

Главное, без чего нельзя обойтись, это редакторы кода и среды разработки, ведь именно в них мы будем писать код.

Отличия редактора кода от среды разработки

Обзор сред разработки и текстовых редакторов

Давайте посмотрим, какие среды разработки и текстовые редакторы сейчас существуют.

PhpStorm
Среда разработки от компании JetBrains. Имеет большой функционал и поддерживает все языки, на которых мы будем писать.

WebStorm
Эта среда разработки от компании JetBrains больше ориентирована на клиентскую разработку и не поддерживает язык PHP. Удобна при разработке SPA, особенно если вы используете фреймворки.

Важно

Среды разработки от компании JetBrains платные, но у них существует пробный период, а также лицензии для студентов и преподавателей, так что если вы относитесь к этим категориям, то обратитесь в свое учебное заведение для получения лицензии

VisualStudio Code
Текстовый редактор от компании Microsoft. Позиционируется как «легкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.
Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, автодополнение и средства для рефакторинга. Имеет широкие возможности для кастомизации.

Sublime Text
Один из старых редакторов. Он тоже имеет набор плагинов, которые можно поставить.

Atom
Бесплатный текстовый редактор от компании GitHub, которую в 2018 году купила Microsoft.

Brackets
Cвободный текстовый редактор для веб-разработчиков. Некоторые разработчики его используют, поэтому о нем нужно знать, а использовать тот или иной редактор — это ваше личное решение.

В этом курсе мы будем использовать VisualStudio Code.

Зачем нужен веб-сервер

Давайте создадим два файла: index. html и index. php со следующим содержимым:

index.html
<h1>Hello world!</h1>

index.php
<?php

echo "Hello world!";

Теперь откроем их в браузере.

Файл в формате html отображается корректно. Мы видим заголовок первого уровня, который написали, а вот php-файл выводит код.

Дело в том, что браузер может отображать только HTML-код, а php-код должен исполняться веб-сервером и отдаваться браузеру в виде HTML.

Обзор веб-серверов

Наиболее распространенным веб-сервером является Apache, но кроме него есть много и других, таких как Nginx или IIS от Microsoft.

В реальности для серверной разработки одного веб-сервера будет недостаточно, потому что еще нужна база данных, панель для удобной работы с базой данных и многое другое.

Можно поставить все это по отдельности, а можно пользоваться готовыми сборками, которые упрощают работу.

На выбор у нас две такие сборки — OpenServer и XAMPP.

OpenServer имеет много разных модулей, программ и утилит для веб-разработки и весит, соответственно, много.

XAMPP имеет минимально необходимый набор и весит гораздо меньше.

Мы будем использовать OpenServer.

Важно

Скачайте его заранее, так как это не быстрый процесс

Установка веб-сервера

1. Запустите скачанный файл.

2. Выберите папку назначения — куда распакуется OpenServer. Рекомендую выбрать корень диска С.

3. Необходимо запустить OpenServer из той папки, куда вы его распаковали.

4. При первом запуске OpenServer предложит установить Microsoft Visual C++ Runtime and Patches. Если ранее вы уже устанавливали этот пакет, то пункт можно пропустить. Если не уверены, то лучше установите.

5. После запуска должна появиться иконка в виде красного флажка в трее.

6. Нажмите на нее правой кнопкой мыши и выберете Запустить.

7. Дождитесь, пока иконка с флажком станет зеленой, это будет означать, что сервер успешно запущен.

Работа с веб-сервером

1. В папке Domains создаем папку Test.

2. Перемещаем ранее созданные 2 файла в эту папку.

3. Перезапускаем браузер

Теперь в браузере можно обратиться по имени нашего домена, а именно test/

По умолчанию веб-сервер будет пытаться открыть файл с именем Index, а если у нас несколько таких файлов с разными расширениями, то предпочтение будет отдано php-файлу.

И сейчас вместо php-кода мы видим результат выполнения этого кода. Когда мы обратились к php-файлу, наш веб-сервер выполнил его и отдал браузеру результат в виде обычного html-документа.

HTML-файл также работает, просто для доступа к нему нужно явно указать в адресной строке, какой файл мы хотим посмотреть.

Настройка окружения

Отличия редактора кода от среды разработки

1. Открыть командную строку.

2. Проверить версию PHP командой php -v

Как видите, php не является командой, потому что, когда мы обращаемся к команде php, командная строка пытается найти php либо в той папке, в которой мы находимся, либо в переменных окружения. Ни там, ни там команды php нет.

Консоль OpenServer

В OpenServer встроена своя собственная консоль, которая уже знает все необходимые пути.

Важно

Консоль можно найти, нажав правой кнопкой мыши по иконке в трее и выбрав Консоль из раздела Дополнительно

Откройте ее и попробуйте выполнить ту же самую команду.

В этой консоли команда php доступна, но не всегда удобно использовать консоль OpenServer, например потому, что ее долго открывать или потому, что в средах разработки есть своя собственная консоль.

Добавление PHP в окружение

Чтобы использовать команду php в любой консоли, требуется добавить путь до программы PHP в переменную окружения PATH, но для начала нужно найти путь до самой программы PHP.

В OpenServer она лежит по пути: C:\OpenServer\modules\php\PHP₇.3

Важно

Вместо 7.3 может быть любая другая версия, которую вы хотите использовать

Далее нужно сделать следующее:

1. Открыть Этот компьютер

2. ПКМ -> Свойства

3. Дополнительные параметры системы

4. Переменные среды

5. Выбрать переменную Path и нажать Изменить

6. Нажать Создать и вставить путь до php.

7. Во всех открытых окнах нажать кнопку ОК

После этого все консоли будут видеть команду php, но перед этим все открытые консоли нужно перезапустить.

DevTools

Веб-разработчики не ограничиваются одной средой разработки. Второй, очень мощный, инструмент уже встроен в браузер и называется Developer tools, или Инструменты разработчика. Его можно открыть, нажав F12, или через меню браузера.

Важно

Сразу рекомендую расположить эту панель справа, так как иногда по умолчанию она может быть снизу, и это не очень удобно

Панель вкладок начинается с двух иконок:

1. Позволяет выбрать какой-то элемент на странице

2. Включает режим эмуляции смартфона.

Дальше идут вкладки. Рассмотрим некоторые из них.

Elements
На этой вкладке мы можем видеть весь DOM, можем перемещаться по HTML-элементам, редактировать их и даже удалять. Перемещаясь по элементам, мы можем просматривать и изменять их стили. Все наши действия будут виртуальными и не приведут к сохранению в файле.

Console
Консоль служит для отладки, сюда выводятся все ошибки, которые произошли в коде, а также предупреждения и простые сообщения об отладке. Здесь же можно писать и исполнять JavaScript код.

Sources
Здесь отображается структура проекта, и мы можем видеть какие файлы подключены. Эта вкладка используется в основном для отладки.

Network
На этой вкладке отображаются все запросы, которые выполняет наша страница: изображения, стили, скрипты, а также запросы на сервер.

Application
Не самая часто используемая вкладка, но может помочь с просмотром такой информации как куки, сессии приложений, локальное хранилище и т.д.

Программы для работы с графикой

Помимо инструментов для разработки иногда приходится пользоваться программами для работы с графикой. Обычно это Photoshop и Illustrator от компании Adobe, но можно использовать и другие бесплатные аналоги.

Photoshop и Illustrator — редакторы, которые работают с разной графикой. Photoshop — с растровой, а Illustrator — с векторной.

Отличие растровой и векторной графики