Эта статья была создана в сотрудничестве с KTree . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Эта статья объясняет, что такое веб-разработка, исследуя, как она началась и как она развивалась. Это не точная хроника эволюции сети, но она больше фокусируется на потребностях этой эволюции, чтобы мы могли понять технологию.
Все началось с информации. Людям всегда нужно было находить способы делиться информацией с другими. Как вы знаете, до появления интернета информация распространялась через письма, газеты, радио и телевидение. У каждого были свои недостатки, которые позволяли выходить на передний план информационной сети Интернета.
1. Что такое Интернет?
Что делать, если вы можете публиковать информацию в таком месте, куда может пойти и прочитать эту информацию кто угодно? Это именно то, что делает Интернет. Вы храните информацию на веб-сервере, и люди могут читать эту информацию с помощью клиентов (браузеров). Эта архитектура называется «архитектура сервер-клиент».
Почему HTTP?
Первоначально вся эта информация хранилась в виде текста — поэтому протокол передачи гипертекста имен застрял, хотя теперь по этому протоколу обмениваются текст, мультимедиа и файлы.
2. Как информация хранится, извлекается и сохраняется?
Самый простой и долговременный способ хранения информации в Интернете — это HTML-файлы. Чтобы лучше понять, давайте рассмотрим простой пример публикации компанией своей информации о ценах, чтобы ее продавцы могли скачать и просмотреть список, который состоит из продуктов с ценой и датой вступления в силу. Это было сохранено в виде HTML-файла на сервере, который можно просмотреть с помощью веб-браузера. Браузер запрашивает файл у сервера, а сервер подает его и закрывает соединение.
HTML — это стандартный язык разметки, используемый для создания веб-страниц. Другими словами, это простой текстовый файл с тегами, которые помогают браузеру понять, как отображать информацию.
<!DOCTYPE html>
<html>
<body>
<h2>Price List</h2>
<hr>
<table>
<tr>
<td>Product Name</td>
<td>Sku</td>
<td>Price</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>60.USD Per Hr</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>60.USD Per Hr</td>
</tr>
</table>
<hr>
</body>
</html>
CSS
Каскадные таблицы стилей (CSS) — это язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки. Базовое форматирование и стилизация могут быть выполнены с помощью HTML, но для этого лучше использовать CSS.
Веб-приложение содержит много страниц, динамических или статических. Если мы используем теги HTML для стилизации информации, мы должны повторять эту информацию на каждой странице. Предположим, мы хотим изменить цвет фона — мы должны отредактировать HTML для каждой страницы, которая является частью сайта.
Вместо этого мы можем использовать CSS для хранения наших определений стилей в одном месте и ссылаться на каждую страницу HTML в этом месте. Изменяя файл CSS, мы можем изменить цвет фона на каждой странице, которая ищет определения стилей в таблице стилей.
Конечно, CSS делает больше, чем просто устанавливает цвет фона: он позволяет нам устанавливать цвета для всех видов элементов, шрифтов, макетов страниц и многого другого.
Мы разработали наш предыдущий пример с использованием CSS. Допустим, мы используем таблицы на разных страницах, но используем одни и те же стили CSS. Мы можем переместить всю эту информацию о стиле в свой собственный файл.
<!DOCTYPE html>
<html>
<head>
<!–– for simplicity we have kept the CSS in inline in the HTML - you can keep the css in any file with a .css extension and include it using <link rel="stylesheet" href="styles.css"> -->
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Price List</h2>
<table>
<tr>
<td>Product Name</td>
<td>Sku</td>
<td>Price</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234564</td>
<td>60.USD Per Hr</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234565</td>
<td>40.USD Per Hr</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>50.USD Per Hr</td>
</tr>
</table>
</body>
</html>
JavaScript
JavaScript является третьим столпом Интернета, наряду с HTML и CSS, и обычно используется для создания интерактивных веб-страниц. Чтобы понять JavaScript (JS), нам нужно знать, что такое DOM.
Объектная модель документа (DOM) — это независимый от языка интерфейс прикладного программирования, который превращает документ HTML в древовидную структуру. Узлы каждого документа организованы в этой древовидной структуре, называемой деревом DOM, а самый верхний узел называется «Объект документа».
Образец дерева DOM (Источник: Wikimedia Commons)
Когда HTML-страница отображается в браузере, браузер загружает HTML-код в локальную память и создает дерево DOM для отображения страницы на экране.
Используя JS, мы можем управлять деревом DOM несколькими способами:
- JS может изменять дерево DOM, добавляя, изменяя и удаляя все элементы и атрибуты HTML на странице.
- JS может изменить все стили CSS на странице.
- JS может реагировать на все существующие события на странице.
- JS может создавать новые события на странице, а затем реагировать на все эти события.
В нашем примере JavaScript мы продолжим работу с нашим примером прайс-листа, добавив еще один столбец — Специальная цена — который по умолчанию скрыт. Мы покажем это, как только пользователь нажмет на него. В технических терминах мы используем событие click, прикрепленное к веб-элементу (тег привязки), и изменяем существующий текст веб-элемента, другими словами, манипулируя DOM. Для этого мы должны использовать принятый браузером язык сценариев, который всегда является JavaScript.
<!DOCTYPE html>
<html>
<head>
<!–– for simplicity we have kept the CSS in inline in the HTML - you can keep the css in any file with a .css extension and include it using <link rel="stylesheet" href="styles.css"> -->
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#specialprice {
}
</style>
</head>
<body>
<h2>Price List</h2>
<table>
<tr>
<td>Product Name</td>
<td>Sku</td>
<td>Price</td>
<td>Special Price</td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234564</td>
<td>60.USD Per Hr</td>
<td id="specialprice"> <a href="" onclick="return false;"> Click Here </a> </td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234565</td>
<td>40.USD Per Hr</td>
<td id="specialprice2"> <a href="" onclick="return false;"> Click Here </a> </td>
</tr>
<tr>
<td>KTree Web Service</td>
<td>1234566</td>
<td>50.USD Per Hr</td>
<td id="specialprice3"> <a href="" onclick="return false;"> Click Here </a> </td>
</tr>
</table>
<script>
document.getElementById("specialprice").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("specialprice").innerHTML = "20% Off";
}
</script>
</body>
</html>
формы
До сих пор мы обсуждали только получение данных с сервера. Формы — это другая сторона HTML, которая позволяет нам отправлять информацию на сервер. Мы можем использовать формы для обновления существующей информации или добавления новой информации. Наиболее часто используемые методы в формах HTML — это GETPOST
<!DOCTYPE html>
<html>
<body>
<form action="createproduct.php" method="post">
First name:<br>
<input type="text" name="Product Name" value="KTree Service">
<br>
Last name:<br>
<input type="text" name="SKU" value="234555">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "createproduct.php".</p>
</body>
</html>
Взгляните на код выше — у нас есть два поля ввода, где пользователь может ввести данные и нажать кнопку отправки. После нажатия кнопки отправки браузер отправляет значения данных этих двух полей ввода вместе с другой информацией в скрипт PHP createproduct.php
В нашем примере это PHP, но это может быть JSP, Python или любой серверный скрипт. Сценарий на стороне сервера может прочитать значения, отправленные браузером через POST, а затем обработать их или сохранить в файле или базе данных. В двух словах, это то, как данные передаются на сервер и затем в конечном итоге сохраняются в файле или базе данных.
Примечание. Допустим, мы хотим добавить проверки перед отправкой — например, продукт должен содержать не менее 5 символов или поле SKU должно быть не пустым. Мы можем использовать JavaScript для этих проверок. Нам нужно отреагировать на событие Submit Click и проверить, есть ли у веб-элементов нужные нам данные. Если чего-то не хватает, мы можем отобразить сообщение об ошибке и прекратить отправку данных на сервер.
Базы данных
Как только информация начинает расти, получение нужной информации из файлов может стать настоящей болью, не говоря уже о мучительно медленной. Например, давайте возьмем тот же ценовой файл, предположим, что у компании тысячи продуктов, и мы хотим знать информацию о последнем продукте в списке — это означает, что нам нужно прочитать все продукты, пока мы не найдем тот, который нам нужен , Это не оптимальный способ получения информации, поэтому для решения этой проблемы были созданы базы данных.
В базе данных (БД) мы храним данные в таблицах (структурированный набор данных), и поэтому мы можем легко выполнять поиск, сортировку и другие операции.
Серверные языки сценариев и фреймворки
Нам нужны языки программирования:
- Для сохранения и чтения из базы данных или файла
-
GET - Чтобы прочитать информацию
POST
Типичные языки программирования, такие как C и Java, могут писать и читать из баз данных, но их нельзя напрямую запускать на веб-сервере. Это породило скриптовые языки на стороне сервера.
Серверные языки сценариев выполняют всю обычную обработку, могут взаимодействовать с базами данных и могут запускаться непосредственно на веб-сервере. Популярные серверные скриптовые языки — это PHP, Perl, JSP, Ruby on Rails и так далее.
Разработчики начали использовать эти языки, и вскоре они поняли, что пишут один и тот же шаблонный код для всех проектов, что привело к разработке сред, облегчающих и ускоряющих разработку веб-приложений.
Некоторые известные рамки:
- PHP : Zend, YII, Symfony, CakePHP, Laravel
- Продукты PHP также используются в качестве фреймворков : Drupal, Joomla, SugarCRM, WordPress
- Java : J2EE, Hibernate, Struts, Spring
- JavaScript : Node.js
Архитектура и сессии MVC
Архитектура MVC помогает нам разделить код на несколько файлов и позволяет разделить бизнес-логику и логику представления, чтобы их было легче модифицировать на более поздних этапах.
На примере платформы для ведения блогов мы вновь рассмотрим все темы, которые мы обсуждали до сих пор, и посмотрим, как мы можем кодировать с использованием архитектуры MVC.
Платформа блога управляет динамическим контентом и может содержать несколько модулей, таких как:
- пользователей
- Сообщения в блоге
- Теги
- категории
Прежде чем обсуждать другие функции, давайте разберемся с базовым дизайном базы данных для таблицы блогов. Важными полями будут:
tbl_blog_post
| Я БЫ | заглавие | содержание | Создано | Имя | Фамилия | Создано на |
|---|---|---|---|---|---|---|
| 1 | Привет Мир 1 | Привет Мир 1 | Пользователь А | пользователь | 10 января 2016 | |
| 2 | Hello World 2 | Hello World 2 | Пользователь Б | пользователь | В | 10 июня 2016 |
Как видите, мы храним дублированную информацию о пользователях, такую как «Имя» и «Фамилия». Если у нас есть 10 000 сообщений в блоге, мы будем хранить всю дублированную информацию о пользователях во всех 10 000 записей в блоге. Там может быть больше информации о пользователе для хранения, например, его назначение, время последнего входа в систему и т. Д.
Альтернатива, как вы могли догадаться, заключается в том, чтобы хранить информацию о пользователе в другой таблице и связывать ее здесь с идентификатором «Связанные», как показано ниже.
tbl_user
| Я БЫ | имя пользователя | Имя | фамилия | Создано на |
|---|---|---|---|---|
| 101 | Пользователь А | пользователь | 10 января 2016 | |
| 102 | Пользователь Б | пользователь | В | 10 июня 2016 |
tbl_blog_post
| Я БЫ | заглавие | содержание | Создано | Создано на |
|---|---|---|---|---|
| 1 | Привет Мир 1 | Привет Мир 1 | 101 | 10 января 2016 |
| 2 | Hello World 2 | Hello World 2 | 102 | 10 июня 2016 |
Такое разделение данных на несколько таблиц является одним из многих принципов нормализации данных.
Следующая важная часть позволяет пользователю создавать данные в этих таблицах через форму HTML. Пожалуйста, помните, что мы делаем этот анализ, чтобы понять концепции — это ни в коем случае не полный учебник по программированию.
Создать новую запись в блоге авторизованным пользователем
Для этого нам понадобится HTML-форма с двумя полями ввода (Заголовок, Контент), с помощью которых пользователь может создать запись в блоге.
После того, как пользователь вводит информацию и нажимает кнопку «Создать сообщение», эти значения формы отправляются на веб-сервер с помощью POST Значения POST могут быть прочитаны с использованием любого языка сценариев на стороне сервера. Серверный скрипт (PHP, Ruby on Rails, Python и т. Д.) Считывает значение из FORM и передает его в базу данных.
Сценарий также может выполнять обработку, которая может варьироваться от получения даты и времени сервера или до некоторого поля вычисления, основанного на значениях, полученных из другой таблицы или веб-службы.
Еще один момент, на который следует обратить внимание: сценарий также может выполнять проверки, также известные как проверки на стороне сервера, для проверки правильности данных. Если данные действительны, то в tbl_blog_post сохраняются только данные FORM, или он отправляет сообщение обратно клиенту для ввода недостающей информации, и процесс продолжается.
В нашей таблице tbl_blog_post , наряду с заголовком и содержимым, у нас также есть поле с именем creation_by . Как мы получаем значение для этого поля?
Логин пользователя
Как правило, большинство веб-приложений имеют функцию входа в систему. Всякий раз, когда пользователь успешно проходит аутентификацию, пользовательская информация сохраняется в сеансах, так что эта информация может быть повторно использована позднее.
Что такое сессия?
Протокол HTTP является протоколом без сохранения состояния, что означает, что любой запрос клиента, выполненный с помощью GETPOST Если клиент (браузер) делает два запроса, веб-сервер не знает или не заботится, оба ли они получены от одного и того же пользователя. Это также означает, что, например, если вы вошли в приложение электронной коммерции и добавляете товары в корзину, сервер не знает, что вы оба являетесь одним и тем же пользователем.
Чтобы преодолеть это отсутствие состояния, клиенты должны отправлять дополнительную информацию в каждом запросе, чтобы сохранить информацию сеанса в течение нескольких запросов. Эта дополнительная информация хранится на стороне клиента в файлах cookie, а на стороне сервера — в сеансах.
Сеанс — это переменная массива, которая хранит информацию для использования на нескольких страницах. Сессии идентифицируются уникальным идентификатором с именем, которое зависит от языков программирования — в PHP это называется «PHP Session ID». один и тот же идентификатор сеанса должен быть сохранен в виде куки в клиентском браузере для связи.
Показать отдельные сообщения в блоге
Следующим пунктом для нас является отображение отдельных сообщений в блоге. Нам необходимо прочитать данные из базы данных на основе запрошенного идентификатора записи блога, а затем отобразить содержимое полей «Заголовок» и «Содержимое».
Псевдокод высокого уровня для отображения одного сообщения в блоге:
- Прочитайте данные из базы данных для идентификатора поста в блоге.
- Вставьте данные в шаблон HTML вместе с CSS и JS
Весь приведенный выше код может быть записан в одном файле. Так было в первые дни, но братство разработчиков осознало, что это не оптимально. Для добавления какой-либо новой функции необходимо было изменить весь код, а работать в среде с несколькими разработчиками было не так просто.
Это заставило веб-разработчиков принять архитектуру MVC, которая по существу разделяет код на три компонента, перечисленные ниже.
- Модель : Модель — это доменная / бизнес-логика, независимая от пользовательского интерфейса. В нашем примере код для получения отдельных сообщений из базы данных можно сохранить здесь.
- Представление : Представление может быть любым выводимым представлением информации. Наш HTML-код для отображения сообщения можно сохранить здесь, поэтому данные поступают из модели, но HTML-код находится в представлении.
- Контроллер : третья часть, контроллер — это то, что вызывается, если мы нажимаем на ссылку просмотра сообщения. Он получает данные из модели и, используя эти данные, отображает представление.
Давайте рассмотрим типичный URL в приложении MVC, чтобы лучше понять его.
http://www.abc.com/blogpost/id/1
Здесь blogpost id Если мы введем это в браузер, запрос перейдет к действию ‘View’ контроллера ‘BlogPost’, и здесь он вызывает модель для получения содержимого идентификатора блога post ‘1’ в качестве объекта Model. Этот объект передается в «Вид» для его визуализации.
Ajax и одностраничные приложения (SPA)
Если вы родились в прошлом тысячелетии, вы, возможно, помните, что в 90-х и 00-х годах Hotmail и Yahoo! были очень популярными провайдерами электронной почты. Если вы нажмете на папку «Входящие» или одно письмо в папке «Входящие», вся страница будет обновлена. Примерно в 2004 году в Gmail появилась одна важная функция — Ajax. При использовании Ajax вся страница не обновлялась — были только те части, которые нужно было изменить. Поэтому, если вы получили новое письмо, вместо того, чтобы обновлять всю страницу, вы просто увидели новое письмо сверху. Это дало пользователям возможность работать как на рабочем столе и стало очень популярным способом создания приложений.
Что такое Аякс?
Термин Ajax стал представлять широкую группу веб-технологий, которые могут быть реализованы в приложении, которое взаимодействует с сервером в фоновом режиме, не влияя на текущее состояние страницы.
С помощью Ajax вы отправляете запрос GET Вывод добавляется или добавляется к текущей веб-странице.
На не-Ajax-сайтах каждое действие пользователя требовало загрузки полной полной страницы с сервера. Этот процесс был неэффективным и создал плохой пользовательский опыт. Весь контент страницы исчез, а затем снова появился.
Ajax — это один из методов, которые мы можем использовать для создания одностраничных приложений (SPA). Как следует из названия, все приложение находится на одной странице, и весь контент загружается динамически. Фреймворки JavaScript, такие как Angular, React и Backbone.js, можно использовать для создания SPA.
Веб-серверы и браузеры
Браузеры — это переводчики Интернета. Браузеры запрашивают данные с веб-серверов, а веб-серверы обрабатывают этот запрос и отправляют ответ браузеру в формате HTML (включая CSS, JS, изображения и т. Д.), Который затем отображается.
Мы можем сделать запрос веб-сервера, используя любой из этих трех важных методов:
-
GET -
HEADGET -
POST
Например, когда вы вводите google.com в свой браузер, в фоновом режиме браузер отправляет эту команду на сервер google.com.
GET: http://google.com
Веб-сервер Google обработает свой основной / индексный файл и отправит ответ клиенту. Обычно он отправляет содержимое HTML и CSS-файлы вместе с любыми другими медиа-файлами.