Несмотря на общепринятое мнение, центральное место в процессе дизайна и разработки веб-сайтов не всегда занимает фаза написания кода. В первую очередь приходящие на ум технологии, такие как HTML, CSS и JavaScript, и в самом деле создают образ Сети, к которому мы привыкли и определяют способы нашего взаимодействия с информацией.
Что обычно остается вне поля зрения, но в то же время является едва ли не самой важной частью процесса разработки, так это стадии предварительного сбора информации, тщательного планирования, а также поддержки уже после запуска сайта. В этой статье мы поговорим о том, как может выглядеть типичный процесс разработки веб-сайта.
Можно выделить разное количество этапов, из которых состоит процесс разработки. Обычно это число от пяти до восьми, но в каждом случае общая картина остается примерно одинаковой. Давайте остановимся на среднем значении. Итак, семь основных этапов разработки: 1) Сбор информации, 2) Планирование, 3) Дизайн, 4) Создание контента, 5) Разработка, 6) Тестирование, обзор и запуск 7) Поддержка.
Создание сайта на html. Часть 1
График разработки
Когда вы приступаете к планированию процесса разработки веб-сайта, две главные проблемы, с которыми вы сталкиваетесь, это время и стоимость разработки. Эти два значения во многом зависят от размера и сложности проекта. Для того, чтобы представлять в общих чертах, как будет протекать работа над проектом, вы можете создать график процесса разработки, который будет содержать основные задачи проекта, а также этапы, из которых он состоит. Это позволит удобно следить за общей картиной и всегда быть уверенным в том, что поставленные задачи будут решены точно в срок. Для данной цели мы предпочитаем использовать GanttPRO , удобную диаграмму Гантта для управления проектами и задачами онлайн:
Как начать программировать на PHP
Народная мудрость гласит: что написано на PHP, то не вырубишь топором. Именно поэтому язык остаётся одним из самых популярных в веб-разработке.
Иллюстрация: Оля Ежак для Skillbox Media
Виталий Чесноков
Выпускник факультета автоматизации и информатики МГГУ, исполнительный директор компании QSOFT.
Сегодня мы познакомимся с простым, но имеющим огромные возможности языком программирования — PHP. Узнаем, чем он привлекателен, на какую зарплату могут рассчитывать начинающие PHP-разработчики и как развиваться в веб-разработке. Для начинающих — на примерах покажем, как с нуля создать простой скрипт.
Урок 1. Полный цикл создания сайтов | Курс Веб разработчик | Академия верстки
Содержание
- Что пишут на языке программирования PHP
- Почему PHP востребован и популярен в веб-разработке
- Сколько зарабатывают начинающие и опытные разработчики
- Что нужно знать и как новичку развиваться в профессии
- Какие книги почитать для самостоятельного изучения PHP
- Как написать простой скрипт и сайт
Что пишут на PHP
Язык программирования PHP применяют преимущественно в разработке сайтов и веб-приложений, а именно в бэкенде.
Все сайты, которые мы видим в интернете, состоят из двух частей: фронтенда и бэкенда. То, что видит пользователь, — анимация, слайдеры, выпадающие меню и прочее, — это фронтенд. Дизайнеры рисуют макет сайта, а разработчики превращают его в код на HTML, CSS и JavaScript.
На уровне бэкенда создаётся сама платформа, которая связывает сайт с внутренними серверными системами, обрабатывает пользовательские запросы, общается с базой данных и передаёт результаты во фронтенд. Именно для создания бэкенда и используется язык PHP.
Подробнее о разнице между этими двумя направлениями мы рассказали в статье «Frontend или backend — на примере создания сайтов». Она будет полезна тем, кто ещё не решил, с чего всё-таки начать учиться — с PHP, HTML, CSS или JavaScript.
Почему PHP продолжает быть востребованным и актуальным
Языку PHP уже более 20 лет. Он был разработан датчанином Расмусом Лердорфом в 1994 году как надстройка, которая показывала количество посещений его персональной странички. Тогда он назвал её просто — Personal Home Page.
Язык непрерывно эволюционирует. В 2004 году вышел PHP 5, который добился большой популярности у веб-разработчиков благодаря хорошей реализации ООП . В декабре 2015 года вышла седьмая версия, которая позволила создавать более быстрые программы. PHP 8 появился в ноябре 2020 года, а на 24 ноября 2022 года намечен выход версии 8.2.
Подробнее об основных свойствах и версиях языка программирования читайте в статье «Язык программирования PHP: от истоков до современности».
По данным W3Techs, доля веб-сайтов с бэкендом на PHP составляет около 80%. В первую очередь это связано с тем, что на нём написаны популярные CMS WordPress и Drupal. Кроме того, на PHP написаны «Фейсбук»*, «ВКонтакте», поисковая система Yahoo, «Википедия», немалая часть сервисов Google и отечественная CMS «1С-Битрикс».
PHP часто учат с нуля, так как у него очень низкий порог входа. Уже через месяц обучения вы будете писать небольшие сайты. А в дальнейшем, развив свои навыки, сможете работать над высоконагруженными системами для крупных компаний.
Несмотря на то что PHP уже десять лет пророчат скорую смерть, он остаётся самым востребованным языком программирования. Доля вакансий, в которых требуется знание PHP, составляет 24,6%. Примерно столько же занимает Java с 24,1%. А третий по популярности С# значительно отстаёт — 9,8%.
Рейтинг популярности языков программирования составлен на основе вакансий с русскоязычных карьерных сервисов. Скорее всего, в ближайшие пять лет соотношение не изменится.
Если вы не знаете, как с нуля самостоятельно выучить язык программирования, статья «Обучение PHP: советы и рекомендации для новичка» разложит всё по полочкам и поможет совершить как можно меньше ошибок.
Уровни зарплат в вакансиях PHP‑разработчиков
Согласно HeadHunter, зарплатный максимум PHP-программиста в России составляет 10 тысяч долларов. Если разделить зарплаты по уровням профессионального развития программиста, то цифры такие:
- Junior Developer — от 40 тысяч рублей в месяц.Только входит в профессию, умеет работать с легаси-кодом и писать простые скрипты, имеет коммерческий опыт программирования порядка 2–3 месяцев.
- Middle Developer — от 100 тысяч рублей в месяц.Может самостоятельно справиться с 90% поставленных задач и имеет опыт программирования от шести месяцев до года.
- Senior Developer — от 150 тысяч рублей в месяц.Может решить любую задачу на PHP, спроектировать решение, архитектуру, подобрать код и обучить junior- или middle-программиста выполнять эти задачи.
В 2022 году зарплаты PHP-разработчиков в России выросли сильнее, чем зарплаты программистов на всех других языках. Джунам чаще стали предлагать от 60 тысяч рублей в месяц, а сеньорам — от 400 тысяч.
Какими скиллами должен обладать веб‑разработчик
Рассмотрим технологии, которые должен освоить начинающий бэкенд-разработчик.
- HTML и CSS — языки разметки страницы. Чаще всех их используют фронтенд-разработчики, но вам нужно знать и понимать основы, так как придётся работать с готовой разметкой.
- JavaScript — код, выполняемый на стороне клиента (браузера). Он задаёт механику работы страницы. Необходимо уметь читать его и понимать, для чего нужен тот или иной его кусок.
- PHP — ядро сайта, скриптовый язык, работающий на уровне сервера и взаимодействующий с серверными структурами, на которых строится веб-проект.
- SQL — язык структурированных запросов, применяемый для управления базами данных, например, в СУБД MySQL.
- Linux — да, именно Linux. Windows не предназначена для использования в качестве операционной системы для сервера, хотя PHP может работать как в Windows, так и в Linux. В рамках обучения не обязательно использовать именно Linux, но важно знать, что в реальных проектах серверы обычно работают под этой операционной системой.
О том, как PHP-программисту развиваться в профессии, что нужно знать, уметь и как избежать ошибок, рассказал Олег Шабашов — разработчик в компании Searchanise.
Книги по PHP
Вот самые популярные и проверенные временем книги, в которых излагаются основы языка, работы с разметкой, принципы взаимодействия бэкенда и фронтенда и наиболее важные концепции веб-программирования:
- «PHP 7. В подлиннике», Дмитрий Котеров, Игорь Симдянов.
- «Изучаем PHP 7. Руководство по созданию интерактивных сайтов», Дэвид Скляр.
- «Создаём динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5», Робин Никсон.
- «PHP. Объекты, шаблоны и методики программирования», Мэтт Зандстра.
- «Разработка веб-приложений с помощью PHP и MySQL», Люк Веллинг, Лора Томсон.
Чтобы освоить профессию, недостаточно знать язык программирования — нужно научиться мыслить как программист и постоянно расширять кругозор. В этом вам помогут 16 лучших книг для программиста.
Создаём с нуля простой скрипт на PHP
Напишем небольшой сайт для поиска информации о количестве продуктов на складе. Мы не будем подробно вникать в синтаксис языка и в назначение операторов, наша задача — увидеть, как PHP взаимодействует с HTML. Но сначала установим компилятор и сервер, который будет обрабатывать запросы пользователей.
Устанавливаем PHP
Ниже приведены инструкции для операционных систем Windows, Linux и macOS.
На Windows
Скачать PHP на Windows можно с официального сайта, предварительно выбрав подходящую версию языка и операционную систему. Мы установим PHP 8.1 для 64-битной системы, для других версий процедура будет такой же.
Выбираем нужную версию PHP и вариант VS16×64 Thread Safe:
Теперь нужно распаковать архив в любое место на жёстком диске и запомнить путь до этой папки. Мы распакуем в папку C:Program Filesphp-8.1.0:
Дальше нужно указать системе, что мы установили PHP. Нажимаем правой кнопкой на «Этот компьютер» → «Свойства» → «Дополнительные параметры системы» → «Переменные среды»:
Выберите сверху и снизу Path → нажмите «Изменить». У вас откроется окно, в котором нужно нажать «Создать» в меню справа, а затем задать путь к папке PHP (в нашем случае это C:Program Filesphp-8.1.0). Затем нажмите «ОК»:
PHP установлен. Чтобы это проверить, открываем командную строку и пишем там команду php -v:
А чтобы запустить PHP-код, нужно создать текстовый файл с расширением .php и написать там какой-нибудь код. Например, такой:
Теперь заходим в папку с этим файлом, нажимаем правую кнопку мыши и выбираем пункт «Открыть окно PowerShell здесь».
В открывшемся окне пишем команду php test.php — в консоли должна вывестись наша строка:
На Linux
Перед установкой обновите систему, чтобы во время установки не возникло ошибок:
Открываем терминал: меню приложений → папка «Прочие» → «Терминал». Далее вводим команду:
Затем вставьте их снова в терминал, и установка brew будет окончена.
Наконец, устанавливаем сам PHP с помощью команды brew install php:
Чтобы проверить корректность установки, введите в терминале команду php -v:
В консоли должна вывестись версия языка, который вы только что установили.
Пишем скрипт
Писать код будем в текстовом редакторе Sublime Text 3, его можно скачать бесплатно на официальном сайте. Создадим папку Server в любом месте на жёстком диске и добавим в неё три файла: index.html, handler.php и styles.css.
Код нашей главной страницы index.html будет иметь следующий вид:
Напишем код для скрипта handler.php.
Здесь вводим в консоли команду php -S 127.0.0.1:8000:
Сервер запустился. Теперь открываем браузер и переходим на сайт: http://127.0.0.1:8000/. Готово — вы видите ваш сайт.
Введём в поле значение «Фрукты» и нажмём кнопку «Поиск».
Откроется главная страница index.html. Веб-сервер перебросил нас на выполнение скрипта handler.php, который, в свою очередь, отобразил на экране таблицу фруктов. Обратите внимание на адресную строку:
После вопросительного знака указывается имя параметра, в данном случае это название поля searchText, и через знак = указывается его введённое значение. Таких пар «имя = значение» может быть несколько, они должны отделяться друг от друга знаком https://skillbox.ru/media/code/kak_nachat_programmirovat_na_php/» target=»_blank»]skillbox.ru[/mask_link]
Пишем встраиваемый виджет на нативном javascript и php
Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода — и у тебя уже развернулся блок с комментариями. Еще 2 строчки — и доступна аналитика от гугла или яндекса.
Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.
Зачем нужны виджеты?
Здесь все просто: допустим, у нас есть какой-то неимоверно крутой сервис. Он настолько крут, что мы хотим поделиться нашими возможностями со всем миром (а может, и продать их). Но здесь всплывают несколько моментов. Во-первых, мы не готовы предоставлять открыто наши исходники. Во-вторых, нужна максимально простая схема встраивания нашего функционала в сторонние сайты.
В-третьих, мы хотим, чтобы наши пользователи были уверены, что использование нашего сервиса ничем не навредит их сайту.
Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему «родителю». То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер — дело исключительно Вашего вкуса и фантазии.
В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды. Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением. Хочется создать простенький виджет своими руками, чтобы понять, как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей. Заодно попутно освежим знания в нативном javascript и php.