Введение
Front-end и Back-end. Что это?
Front-end разработка. HTML, CSS и JS
Редакторы кода
Описание и установка локального сервера Open Server
Back-end разработка. PHP, MySQL
WordPress разработка
Полезные ссылки

Введение

WEB (англ. web — паутина) — система доступа к связанным между собой документам на различных компьютерах, подключённых к Интернету.

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

С точки зрения программиста сайт — это набор файлов, каждый из которых отвечает за конкретную функцию. Файлы обычно хранятся в выделенной области некоего WEB-сервера. Технически, вы можете разместить все эти файлы на своем компьютере, но гораздо удобнее хранить их на выделенном WEB-сервере, предоставляемого через хостинг.

Хостинг (англ. hosting) — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно находящейся в сети. Компании, которые предоставляют хостинг, называются хостинг-провайдерами или хостерами. Задача этих компаний — сделать так, чтобы ваш сайт был круглосуточно доступен для пользователей. В неё входит аренда места на сервере и его мощностей. На хостинге хранят файлы с сайтом, следят за обеспечением его работоспособности.

Через панель управления клиент (администратор сайта) по сети загружает и удаляет файлы, меняет внешний вид сайта.

Понятие WEB-сервер может относиться как к железу, так и к программному обеспечению (ПО).

С точки зрения железа WEB-сервер — это компьютер, который хранит ресурсы сайта (HTML документы, CSS стили, JavaScript файлы и другое) и доставляет их на устройство конечного пользователя (веб-браузер). Чтобы пользователь интернета мог получить доступ к содержимому сайта, у него должен быть адрес. Им выступает доменное имя. Разработчик, изучающий основы web, обязательно должен знать, что перед созданием своего сайта нужно выбрать хороший хостинг и купить доменное имя. Обычно он подключен к сети Интернет и может быть доступен через доменное имя. Например, сайт, с которым вы сейчас работаете, имеет доменное имя https://api-2d3d-cad.com/.

С точки зрения ПО, WEB-сервер включает в себя некоторые вещи, которые контролируют доступ Веб-пользователей к размещенным на сервере файлам, это минимум HTTP сервера. HTTP сервер — это часть ПО, которая понимает URL’ы (веб-адреса) и HTTP.

HTTP (hypertext transfer protocol). Протокол представляет собой набор правил для связи между двумя компьютерами. Простыми словами, когда браузеру нужен файл, размещенный на веб-сервере, браузер запрашивает его через HTTP. Когда запрос достигает нужного веб-сервера (железо), сервер передает запрашиваемый документ браузеру, также через HTTP.

Сайты бывают статические и динамические. В случае статического сайта, каждая ссылка представлена физическим файлом с вшитым в него контентом. В динамических сайтах однотипные страницы генерируются из одного места с подстановкой разных данных. При создании сайта обычно делают специальный административный интерфейс, через который можно модифицировать эти данные.

Чтобы опубликовать веб-сайт, нужен статический, либо динамический веб-сервер.

Статический веб-сервер состоит из компьютера (железо) с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещенные на нем файлы в браузер не изменяя их.

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

Front-end и Back-end. Что это

Два слова для понимания работы веб-сайтов – фронтенд и бэкенд. Часто они рассматриваются (и преподаются) раздельно — как два направления, но оба важны и тесно связанны друг с другом в большинстве проектов. Фронтенд (англ. front-end) — клиентская сторона пользовательского интерфейса к программно-аппаратной части сервиса. Бэкенд (англ. back-end) — это и есть программно-аппаратная часть сервера.

Говоря по-простому, фронтенд — это код, который выполняется браузером, а бэкенд – код, выполняемый сервером.

Главная роль фронтенда заключается в следующем:

Запрашивать информацию (данные, файлы и т.д.) бэкенда.
Отображать или визуализировать эту информацию.
Перехватывать действия пользователя (клики, наведения курсора, ввод с клавиатуры, голосовые команды и т.д.).
Отвечать на действия пользователя.

Серверная часть обычно состоит из трех частей: сервер, приложение и база данных. Основные задачи Бэкенда:

Принимать запросы фронтенда и отвечать на них.
Хранить и обрабатывать данные («начинку» сайта),
Формировать из данных информацию для фронтенда.

Если клиент бронирует рейс или покупает концертные билеты, он обычно открывает веб-сайт и взаимодействует с веб-интерфейсом. После ввода необходимой информации приложение сохраняет ее в базе данных, созданной на сервере. Данные обрабатываются и возвращаются в виде билета, который клиент может распечатать.

Backend разработка не ограничивается только самим сайтом. Сайт — это всего лишь вершина айсберга. Любой более-менее серьезный проект «под капотом» хранит множество подсистем (говорят, «сервисы» или «микросервисы»).

Если бы сайт был растением, то бэкэнд-разработка была бы корневой системой. Это компонент, который обеспечивает энергию (в данном случае пищу и воду), которая питает растение и позволяет ему расти.

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

как правило, они не используют одни и те же языки программирования (исключение составляет JavaScript, который можно использовать на стороне сервера и клиента);
выполняются в разных средах операционной системы.

Сегодня происходит стирание границ между фронтенд и бэкенд. Сложность связки фронтенд-бэкенд все возрастает. Разработчик может выбирать, в зависимости от типа приложения, возложить ли основную ответственность на фронтенд или бэкенд. Каждый вариант имеет свои достоинства и недостатки. Сервер более привычен и стабилен, но требует постоянного подключения к интернету. Некоторые пользователи имеют новейшие браузеры, и для них удобнее клиентно-ориентированное приложение, которое делает всю основную работу в пользовательском интерфейсе.

Front-end разработка. HTML, CSS и JS

HTML
CSS
JS

Отсутствие сложного в установке софта является одной из причин, благодаря которым фронтенд-программирование более доступно для новичка. Языки фронтенда (HTML, CSS и JavaScript) «живут» в браузере, так что для них не требуется какая-то дополнительная установка. Все, что заботит браузер — это то, чтобы ему были посланы корректно составленные файлы HTML, CSS и Javascript. В открытой браузером странице HTML отвечает за то, что в ней содержится, CSS за то, как она выглядит, а JS — за взаимодействие пользователя с контентом.

HTML

Создайте в редакторе «Блокнот» (Notebook) файл с расширением html (hello.html) и следующим кодом:

<html> 
 <body> 
  <h1>Hello, World</h1>
 </body> 
</html>

Код можно запустить через click на файле hello.html. При этом в браузере отобразится страница:

Код странички можно просматривать непосредственно в браузере открыв новую вкладку в браузере через контекстное меню (кнопка «Просмотр кода страницы»)

HTML — язык разметки, HTML-теги указывают браузеру, какая информация и где должна быть расположена на WEB страничке.

Тег <html> </ html> указывает интернет-браузеру, что этот файл является началом и концом документа HTML-файла.
Между тегами <body> </ body> отображается контент WEB странички
Тег <h1> определяет наиболее важный заголовок первого уровня, тег <h2> — заголовок второго уровня и т.д.

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей). Их назначение состоит в том, чтобы создать интернет-странице красивое оформление. CSS указывает браузеру свойства тегов. Например, мы хотим сделать фон голубым, текст красным и сдвинуть текст немного влево.

Подключение CSS-стилей к страницам может осуществляться различными способами. Можно определять стиль прямо в html-файле с помощью тэга <style>:

<html>
  <head>
    <style>
      body {background-color: blue;}
      h1 {color:red; padding: 60px;} 
    </style>
  </head>
     <body>
    <h1> Hello, world </h1>
     </body>
</html>

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

Создайте в «Блокнот» (Notebook) файл style.css и запишите в нем следующие строки:

body {background-color: blue;}
h1 {color:red; padding: 60px;}

Внесите изменения файл hello.html:

<html> 
     <head> 
         <link rel="stylesheet" href="style.css">       
     </head> 
     <body> 
      <h1> Hello, world </h1>
     </body> 
 </html>

JS

JavaScript – это скриптовый язык программирования, код которого, выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.

Изменим код в файле hello.html:

<html>
 <body>
  <p>Before the script...</p>
   <script>
    alert( 'Hello, world!');
   </script>
  <p>...After the script.</p>
 </body>
</html>

Получим взаимодействие со страничкой. Сначала запускается окошко с сообщением «Hello, world!»

После нажатия на кнопку OK на странице отобразятся сообщения:

Когда браузер читает HTML-страничку, и видит <script>, он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

Можно выделить 3 способа подключения скриптов:

подключение в любом месте (рассмотрен выше);
вынос скриптов в заголовок HEAD;
внешние скрипты.

Обычно javascript стараются отделить от собственно документа. Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

<html> 
     <head> 
         <script type="text/javascript"> 
             function hello () { 
                alert( 'Hello, world!');
             } 
          </script> 
     </head> 
     <body> 
  <input type="button" onclick="hello()" value="HELLO"/> 
     </body> 
 </html>

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Запускаем приложение:

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

<html> 
     <head> 
         <script src="script.js"></script>
     </head> 
     <body> 
  <input type="button" onclick="hello()" value="HELLO"/> 
     </body> 
 </html>

При этом создайте файл script.js с кодом:

function hello () { 
                alert( 'Hello, world!');
             }

Редакторы кода

Блокнот» (Notebook) — это простейший редактор кода. Кроме него существует множество способов писать код для веб-приложений: от текстовых редакторов до облачных сред разработки (см. Обзор редакторов кода).

Например, для обучения HTML, CSS и JS удобно пользоваться online редактором CodePen. При его запуске в WEB-браузере открываются 3 окна для ввода кода на языках HTML, CSS и JS, а внизу размещается окно для отображения результата.

Чтобы получить результат, как на рисунке, в HTML окно введите код:

<html> 
  <body> 
   <input type="button" onclick="hello()" value="HELLO"/> 
  </body> 
 </html>

В JS окно введите код:

function hello () { 
    alert( 'Hello, world!');
 }

После введения кода в окне для отображения результата появится кнопка «HELLO». При нажатии на эту кнопку появляется сообщение «Hello, world!»

Следующий результат получен с использованием окна CSS:

Чтобы получить такой результат, в HTML окно введите код:

<html> 
   <body> 
     <h1> Hello, world </h1>
  </body> 
 </html>

В CSS окно введите код:

body {background-color: blue;}
h1 {color:red; padding: 60px;}

Описание и установка локального сервера Open Server

Для имитации веб-сервера на ПК были созданы локальные сервера (OpenServer, Denver и др.). Задача локальных серверов — обеспечить удобство разработки сайтов на локальном ПК (без веб-хостинга).

В отличие от языков фронтенда (HTML,CSS и JS), которые непосредственно понимает браузер, для бэкенд-разработки на языках PHP, Python, Java, Ruby и др. необходима поддержка веб-сервера (ПО). При этом совсем необязательно сразу же покупать домен и хостинг. Можно отладку сайта производить на собственном компьютере, установив на нем локальный сервер. А на веб-хостинг вы закачиваете только итоговую, финальную версию файлов сайта.

Даже если вы не работает с PHP-кодом, а делаете статичный HTML-сайт, есть разница между обычным просмотром HTML-файлов в браузере и их просмотром «через локальный сервер». Последний вариант не только более реалистичен визуально в браузера, но и корректнее обрабатывает HTML/CSS код (потому что код именно обрабатывается сервером, а не открывается для просмотра), подгружает все скрипты с сервера без ошибок и накладок.

При помощи локального сервера на вашем домашнем компьютере создается мини-хостинг, на котором будут успешно функционировать все серверные движки, скрипты, CMS (WP, Joomla и другие). При этом вам даже не нужно будет подключаться к интернету — у вас будет свой мини-интернет с одним или несколькими сайтами.

Open Server — это портативный программный комплекс, главным предназначением которого есть разработка, тестирование и отладка практически любых веб-приложений, а также для предоставления веб-сервисов в локальных сетях.

Open Server представляет из себя так называемый WAMP комплекс, суть которого можно понять из расшифровки этой аббревиатуры:

Windows — операционная система, для работы в которой предназначен данный локальный сервер
Apache — web-сервер, который «поднимается» при запуске программы Open Server
MySQL — очень популярная система управления базами данных, которая является обязательным условием для работы многих движков сайтов, в том числе таких популярный, как Joomla и WordPress
PHP — интерпретатор серверного языка программирования, на котором написано большинство CMS и создано множество других веб-приложений

Для начало скачаем дистрибутив Open Server. Загружаем с официального сайта Open Server подходящую для Вас версию. Продукт поставляется в 3 версиях: Basic, Premium, Ultimate. Обычно рекомендуют устанавливать второй пакет — Premium. Так как в первом, вам может не хватить функционала, а третий отличается лишь дополнительные программами, которые есть практически у всех вебмастеров на компах (см. Программы для создания сайтов: обзор популярных продуктов). Поскольку, я не вебмастер, то решил установить 3-й пакет (Ultimate).

После того, как скачали нужный вам архив, создайте отдельную папку С:\OSPanel. Выполняете click правой кнопкой мыши по скаченному файлу (open_server_5_3_0_ultimate.exe). В выпадающем меню выбираете «Запустить от имени администратора». Указываете на запрос папку С:\OSPanel. После установки в папке С:\OSPanel находите файл Open Server x64.exe. Запускаете его от имени администратора.

В трее (в статусной строке Windows экрана — в правом нижнем углу) появляется красный флажок:

Флажок может быть также найден через раскрытие панели кнопок крайней левой пиктограммой в трее:

Выполняете Click на флажке, откроется панель Open Server, на ней выбираете кнопку Запустить:

После этого флажок внизу становится зеленым и Вы можете запустить сайты, установленные на локальном сервере:

Для того, чтобы установить сайт (или шаблон сайта) на локальный сервер Open Server, вам просто нужно в папку domains распакованного дистрибутива Open Server перенести папку с файлами сайта (в папке domains сейчас 2 занесенных сайта):

После установки Open Server в папке «domains» была только папка «localhost» — сайт для тестирования установки сервера .

Запускаем через панель Open Server сайт «localhost»:

Выбираем теперь для запуска сайт-шаблон Center-Stage (скачан отсюда):

Обратите внимание, что имя домена на локальном сервере определяется именем папки (localhost или center-stage), куда помещены файлы сайта. Желательно с именем домена сайта определиться еще до передачи сайта на хостинг. В противном случае, могут могут быть нестыковки между ссылками на внутренние страницы сайта, если они указаны полным именем.

Back-end разработка. PHP, MySQL

PHP
MySQL

Если язык программирования может принять HTTP запрос и сформировать HTML файл, то, в принципе, вы можете использовать такой язык на сервере. Наиболее популярные серверные языки — это PHP, MySQL, Python, Java, Ruby и др. Они делают практически одно и тоже, просто используют разный синтаксис.

PHP

PHP это серверный язык программирования. Сервер преобразует и обрабатывает PHP-код (или результат его выполнения) в вид, понятный браузеру. Чтобы начать работать с кодом, создадим в папке domains папку с именем hello, а в ней — 2 файла:

index.php

<?php
    $hello = 'Привет, мир!';
    require_once('index.html');
 ?>

index.html

<html>
   <head>
   </head>
        <body>
            <div>Переменная из php:
                    <span><?php echo $hello; ?></span>
           </div>
       </body>
 </html>

Если сервер запущен, нажмите кнопку «Остановить», затем опять запустите его. На панели Open Server в подменю «Мои сайты» должна появиться кнопка «hello»:

Запускаем сайт «hello»:

Описание кода см. в статье «Как передать переменную PHP в HTML и обратно?«.

MySQL

MySQL — система управления базами данных. MySQL использует SQL (язык структурированных запросов) для доступа к данным в базе данных и их обработки.

См. пример в статье Open Server, создание домена, базы данных и простого приложения на php

WordPress разработка

Чтобы сэкономить время можно отдать предпочтение шаблонам, созданным на основе CMS (Content Management System — система управления содержимым). CMS — это информационная система или компьютерная программа для обеспечения и организации совместного процесса создания, редактирования и управления контентом. Наиболее популярные CMS — WordPress, Drupal, Joomla.

Итак, у Вас на компьютере установлен и настроен локальный сервер Open Server (если еще нет, тогда см. Описание и установка локального сервера Open Server). Следующим шагом, вам нужно выбрать шаблон, созданный на основе SMS для вашего будущего сайта и приступать к его модификации в соответствии со своей целью и предоставляемыми для этого возможностями. Я остановил свой выбор WordPress-шаблоне Iconic-One (Читаемый Вами сейчас сайт разработан на основе этого шаблона):

Плюсом работы с шаблонами на основе SMS есть то, что вам не придётся вкладывать много сил и труда в бэкенд и фронтенд. Однако минусом является отсутствие возможности тонкой настройки и полного управления дизайном и программным кодом.

Если вы выбрали CMS, это не значит, что основы WEB вам не нужны. Базовые знания HTML, CSS, JavaScript, PHP и MySQL здесь необходимы. CMS предоставляет возможности работать с сайтом как в диалоговом режиме, так и непосредственно с программным кодом.

Редактирование Wordpress-шаблона осуществляется через окно консоли. Его можно вызвать в браузере, добавив к имени домена wp/admin/:

Когда Ваш сайт будет в определенной степени готов Вы можете перенести его на хостинг для обозрения в сети (я выбрал для своего сайта hosting Ukraine). На хостинге также есть возможность выбрать доменное имя (домен моего сайта api-2d3d-cad.com). Дальнейшую доработку сайта теперь можно будет осуществлять через сервер хостинга (вместо локального сервера).

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

Полезные ссылки:

Автор: Николай Свирневский

Быстрый старт в WEB программирование (Quickstart in WEB programming)