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

Автор: | 25.07.2019
Нет комментариев

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) — это и есть программно-аппаратная часть сервера.

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

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

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

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

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

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

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 способа подключения скриптов:

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

Обычно 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 и др.). Задача локальных серверов  — обеспечить удобство разработки сайтов на локальном ПК (без  Web-хостинга).

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

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

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

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

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

  1. Windows — операционная система, для работы в которой предназначен данный локальный сервер
  2. Apache — web-сервер, который «поднимается» при запуске программы Open Server
  3. MySQL — очень популярная система управления базами данных, которая является обязательным условием для работы многих CMS, в том числе таких популярных, как Joomla и WordPress
  4. 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

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).  Следующим шагом, вам нужно установить 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-шаблона осуществляется через окно консоли.

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

 

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

 

 

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

 

 

Раздел: Web