Tags: Web HTML CSS JS Open Server Front-end Back-end PHP MySQL WordPress
Введение
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, обязательно должен знать, что перед созданием своего сайта нужно выбрать хороший хостинг и купить доменное имя. Обычно он подключен к сети Интернет и может быть доступен через доменное имя. Например, сайт, с которым вы сейчас работаете, имеет доменное имя 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 и 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>
body {background-color: blue;} h1 {color:red; padding: 60px;}
Описание и установка локального сервера Open Server
Для имитации веб-сервера на ПК были созданы локальные сервера (OpenServer, Denver и др.). Задача локальных серверов — обеспечить удобство разработки сайтов на локальном ПК (без Web-хостинга).
В отличие от языков фронтенда (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 — очень популярная система управления базами данных, которая является обязательным условием для работы многих CMS, в том числе таких популярных, как Joomla и WordPress
- PHP — интерпретатор серверного языка программирования, на котором написано большинство CMS и создано множество веб-приложений
Для начало скачаем дистрибутив Open Server. Загружаем с официального сайта Open Server подходящую для Вас версию. Продукт поставляется в 3 версиях: Basic, Premium, Ultimate. Обычно рекомендуют устанавливать второй пакет — Premium. Так как в первом, вам может не хватить функционала, а третий отличается лишь дополнительные программами, которые есть практически у всех вебмастеров на компах (см. Программы для создания сайтов: обзор популярных продуктов).
После того, как скачали нужный вам архив, выполняете click правой кнопкой мыши по скаченному файлу (open_server_5_3_0_ premium.exe). В выпадающем меню выбираете «Запустить от имени администратора».
Указываете на запрос корень диска C. После установки в папке С:\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
Если язык программирования может принять 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»:
Описание кода см. в статье Как передать переменную PHP в HTML и обратно?.
MySQL
MySQL — система управления базами данных. MySQL использует SQL (язык структурированных запросов) для доступа к данным в базе данных и их обработки.
См. пример в статье Open Server, создание домена, базы данных и простого приложения на php
WordPress разработка
Чтобы сэкономить время можно отдать предпочтение шаблонам, созданным на основе CMS (Content Management System — система управления содержимым). CMS — это информационная система или компьютерная программа для обеспечения и организации совместного процесса создания, редактирования и управления контентом. Наиболее популярные CMS — WordPress, Drupal, Joomla.
Итак, у Вас на компьютере установлен и настроен локальный сервер Open Server (если еще нет, тогда см. Описание и установка локального сервера Open Server). Следующим шагом, вам нужно установить WordPress на сервер (см. Установка WordPress на локальный сервер OpenServer).
Первый запуск сайта сайта (в примере оставил название wordpress) с шаблоном (темой) по умолчанию приводится на рисунке:
Далее входите в админку сайта. Для этого к имени сайта, запущенного через WEB-браузер, добавляете соответствующую приставку: wordpress/wp-admin/. В админке выбираете тему для вашего будущего сайта (см. Бесплатные темы для WordPress) и приступаете к ее модификации в соответствии со своей целью и предоставляемыми для этого возможностями. Я остановил свой выбор на WordPress-теме Iconic-One (читаемый Вами сейчас сайт разработан на основе этой темы):
Плюсом работы с шаблонами на основе SMS есть то, что вам не придётся вкладывать много сил и труда в бэкенд и фронтенд. Однако минусом является отсутствие возможности тонкой настройки и полного управления дизайном и программным кодом.
Если вы выбрали CMS, это не значит, что основы WEB вам не нужны. Базовые знания HTML, CSS, JavaScript, PHP и MySQL здесь необходимы. CMS предоставляет возможности работать с сайтом как в диалоговом режиме, так и непосредственно с программным кодом.
Когда Ваш сайт будет в определенной степени готов Вы можете перенести его на хостинг для обозрения в сети (я выбрал для своего сайта hosting Ukraine). На хостинге также есть возможность выбрать доменное имя (домен моего сайта api-2d3d-cad.com). Дальнейшую доработку сайта теперь можно будет осуществлять через сервер хостинга (вместо локального сервера). Редактирование Wordpress-шаблона осуществляется через окно консоли.
Разработку сайта можно сразу же начинать на сервере хостинга. Здесь Вам предоставляются практически те же возможности для редактирования сайта, что и на локальном сервере.
Полезные ссылки:
- WordPress. Гід для новачків
- 17 Killer Websites for Web Developers
- Building a Website with C++
- Video Chat App via Python OpenCV
- Что такое Веб-сервер
- Roadmap to becoming a Web developer
- Пошаговое руководство: Как научиться веб-программированию
- Основы веб. Блог Артёма Ивашкевича
- Блог Игоря Квентора
- Основы Web-программирования
- Что нужно знать, чтобы стать фронтенд-разработчиком в 2018
- Обзор редакторов кода
- Программы для создания сайтов: обзор популярных продуктов
- Уроки HTML
- Уроки вёрстки
- Что такое локальный сервер
- Выбор и установка локального сервера
- Установка Open Server
- Как начать работу с Open Server
- Как передать переменную PHP в HTML и обратно?
- Open Server, создание домена, базы данных и простого приложения на php
- Работа с MySQL в OpenServer: ключевые особенности
- OpenServer — современный локальный сервер и пример его использования для установки WordPress на компьютер
- Установка WordPress на OpenServer
- Установка WordPress на локальный сервер (на примере OpenServer)
- Вставить код JavaScript на страницу WordPress
Автор: Николай Свирневский