2. Що таке веб-розробка?

У цій главі поговоримо про те, що таке інтернет і як він працює.

Розберемо які технології використовуються при створенні веб-сайту та те, як взаємодіють сервер, що обслуговує веб аплікацію та веб переглядач (або ще як його називають веб браузер), який дає можливість користуватись даною аплікацією.

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

Комунікація Клієнт - Сервер

Отже, що таке інтернет для нас як користувачів?

Це набір різних порталів, до яких ми звикли, користуємось щоденно, шукаємо інформацію, переглядаємо відео, слухаємо музику, комунікуємо з друзями і читаємо новини.

Для того, щоб ми могли користуватись інтернетом нам потрібен браузер - програма, яка дозволяє переглядати та користуватись веб-сайтами.

В наш час маємо кілька популярних браузерів, серед яких є Chrome, Firefox, Internet Edge/Explorer, та Safari. Браузер дозволяє нам взаємодіяти із веб-сайтом, дані якого (всеможливі файли та сторінки) лежать на віддаленому сервері.

Для того, щоб взаємодіяти із сервером існує спеціальний формат адрес під назвою URL (Universal Resource Locator - Універсальний Локатор Ресурсів). Саме ця адреса дозволяє визначити, на якому віддаленому сервері знаходиться потрібна нам сторінка. Крім того, адреса містить шлях до цієї сторінки чи файлу в межах того ж таки віддаленого сервера.

Ось приклад URL адреси сторінки продажу даної книги:

Частина www.vitaliypodoba.com вказує на віддалений сервер, де знаходиться мій блог. А частина адреси “/books/django-for-beginners” вказує, де саме знаходиться сторінка з книгою в межах того віддаленого сервера.

Також адреса може містити додаткові параметри, які йдуть одразу за знаком запитання наприкінці:

Детальніше про формат адрес ми ще погоримо під час подальшої розробки нашого з вами практичного проекту.

Зазвичай по дорозі між веб браузером та віддаленим сервером знаходиться велика кількість інших серверів, що працюють в інтернеті. І кожен наш запит на сервер проходить усі ці віддалені сервера. Саме завдяки їм ми маємо доступ до кінцевого сервера, де знаходиться потрібний нам сайт.

Інформація, якою обмінюються веб переглядач та віддалений сервер зазвичай представлена у форматі HTML. Про нього ми трохи детальніше поговоримо у наступних секціях даної глави. Формат HTML описує вміст сторінки, яку показує веб браузер.

Оскільки ми маємо кілька серверів у ланцюжку, що з’єднує наш веб переглядач із кінцевим віддаленим сервером, усі вони повинні спілкуватись між собою у певному наперед узгодженому стандарті. Ці стандарти комунікації серверів в інтернеті описуються такими словами як:

• TCP/IP - протокол, що пояснює серверам як вони повинні передавати інформацію між собою на низькому рівні;
• HTTP - протокол, який пояснює браузеру як саме робити запит за документом із сервера, а серверу, у свою чергу, пояснює як готувати відповідь браузеру. Його ви мали бачити, як мінімум, у більшості адрес веб-сайтів, адже вони починаються із “https://” стрічки.

Таким чином браузер може робити запит на сервер за певною URL адресою у потрібному форматі згідно HTTP протоколу. Сервер, у свою чергу, обробляє даний запит i готує відповідь також у наперед визначеному форматі (згідно HTTP протоколу).

Оскільки браузер і сервер знають протокол HTTP і знають як спілкуватись між собою, вони можуть обмінюватись документами, а ми, відповідно, бачити результат цього обміну у вигляді веб-сайтів та веб-сторінок.

Відповідно далі постає питання, а як працюють самі сторінки?

HTML - Мова розмітки гіпертекстових документів

Більшість сторінок в інтернеті побудована саме з допомогою мови HTML (HyperText Markup Language - Мова Розмітки Гіпертекстових Документів).

Тобто наші старі добрі посилання, або ще як ми їх просто називаємо “лінки”, і є тою причиною, чому веб сторінки також називаються “Гіпертекстом”. Саме це слово є складовою абревіатури HTML.

Таким чином мова HTML є основою основ усіх веб сайтів, а значить і веб-розробки. З допомогою цієї мови ми можемо описати структуру сторінки, її ієрархію (так, HTML документ є ірархічною структурою вкладених HTML тегів), вставити параграфи тексту та заголовки, списки і таблиці, зображення, відео та звук, реалізувати форми.

Якщо зайти на будь-який сайт і клацнути там правою клавішею мишки на вільному від тексту і зображень місці, отримаємо контекстне меню. У ньому побачимо елемент “View Page Source” або “Перегляд HTML Коду”, або щось подібне (взалежності від вашої встановленої мови та веб переглядача).

Вибравши його вам відкриється нове вікно переглядача із HTML кодом даної сторінки. Приблизно так всередині виглядають більшість веб сторінок в інтернеті:

Якщо у спрощеному варіанті, то структура HTML документу виглядає приблизно отак:

 1 <html>
 2   <head>
 3     <meta charset="UTF-8" />
 4     <title>Приклад HTML Сторінки</title>
 5     <meta name="description" value="Мета опис сторінки" />
 6   </head>
 7   <body>
 8     <h1>Заголовок HTML сторінки</h1>
 9     <p id="paragraph">Приклад параграфа тексту</p>
10     <br />
11     <a class="my-link" href="http://google.com">Посилання</a>
12   </body>
13 </html>

Якщо збережете код вище наведеного прикладу у файл у себе на комп’ютері та відкриєте у себе в браузері, тоді отримаєте щось подібне на оце:

Як бачите основу HTML складають теги. Це елементи огорнуті в кутові дужки.

Якщо глянете на 4-ий рядочок прикладу вище, то побачите тег “title”. Він складається із відкриваючого елементу “<title>”, вмісту “Приклад HTML Сторінки” та закриваючого елементу “</title>”. Є теги, які не мають вмісту, а також є теги, які не мають закриваючого елемента. Приклад можете бачити у вище наведеному коді на 10-му рядочку: тег переводу рядка “<br />”.

Також теги можуть мати властивості, так звані атрибути. 5-ий рядок коду у прикладі вище містить тег “meta” з двома атрибутами “name” (ім’я) та “value” (значення). Кожен із атрибутів має ім’я та значення, що іде одразу після ім’я та знаку “=”. Кожен тег має власний набір атрибутів притаманний саме йому.

Структура документу зазвичай містить такі обов’язкові елементи як

• html: кореневий елемент будь-якого HTML документу;
• head: шапка документу; містить метадані сторінки та під’єднання інших ресурсів до сторінки (такі як javascript та css файли);
• body: тіло документу; містить теги, що є видимою частиною веб-сторінки.

Існує велика кількість HTML тегів, але найбільш поширених, які ми будемо з вами використовувати найчастіше, є лише в межах 20-ти.

Детальніше із синтаксисом мови HTML можете ознайомитись на сторінці вікіпедії. Далі в книзі я буду пояснювати нюанси мови HTML рівно на стільки, на скільки це буде нам необхідно для реалізації нашого проекту.

На завершення даної секції хочу надати вам кілька корисних лінків для майбутнього опрацювання. Зробіть це після книги, щоб розширити кругозір і підвищити свій рівень як спеціаліста:

• Семантичний HTML;
• доступність у вебі;
• мікро-формати.

Таким чином в подальшій своїй практиці ви верстатимете сторінку не лише так, щоб вона виглядала як в оригінальному дизайні, але й правильно з точки зору внутрішнього коду.

CSS - Каскадні таблиці стилів

З часом прості веб-сторінки із одноманітним нецікавим текстом усім набридли, тому почали придумувати та додавати стилі до HTML елементів.

Спочатку це було у вигляді нових атрибутів напряму в HTML теги, а також через табличні стилі для створення потрібного лейауту сторінки.

Згодом винайшли так звані каскадні таблиці стилів - нову мову розмітки для описування стилів HTML тегів - CSS.

Каскадні тому, що вони дозволяють визначати стилі на різних рівнях і унаслідувати їх від вищих в ієрархії елементів.

CSS надав надзвичайні переваги, адже його можна було описувати в окремому файлику, а тоді під’єднувати до документа веб-сторінки. Таким чином змінивши кілька стрічок в CSS файлі можна було одним махом оновити верстку на усьому сайті.

Давайте продовжимо із нашого прикладу із секції HTML:

 1 <html>
 2   <head>
 3     <meta charset="UTF-8" />
 4     <title>Приклад HTML Сторінки</title>
 5     <meta name="description" value="Мета опис сторінки" />
 6   </head>
 7   <body>
 8     <h1>Заголовок HTML сторінки</h1>
 9     <p id="paragraph">Приклад параграфа тексту</p>
10     <br />
11     <a class="my-link" href="http://google.com">Посилання</a>
12   </body>
13 </html>

Спробуємо зробити розмір заголовка трохи меншим, розмір тексту параграфа трохи меншим і курсивом, а посилання зробимо білим кольором на чорному фоні та ще й поставимо його в правому верхньому куті сторінки.

Ось CSS код, який для нас все це зробить:

 1 h1 {
 2   font-size: 16px;
 3 }
 4 p#paragraph {
 5   font-size: 14px;
 6 }
 7 a.my-link {
 8   position: absolute;
 9   top: 10px;
10   right: 20px;
11   display: block;
12   width: 200px;
13   height: 20px;
14   color: #ffffff;
15   background-color: #000000;
16 }

Якщо скопіювати даний кусок CSS коду в окремий файлик і під’єднати його наступним чином у наш HTML документ:

 1 <html>
 2   <head>
 3     <meta charset="UTF-8" />
 4     <title>Приклад HTML Сторінки</title>
 5     <meta name="description" value="Мета опис сторінки" />
 6     <link rel="stylesheet" href="main.css" />
 7   </head>
 8   <body>
 9     <h1>Заголовок HTML сторінки</h1>
10     <p id="paragraph">Приклад параграфа тексту</p>
11     <br />
12     <a class="my-link" href="http://google.com">Посилання</a>
13   </body>
14 </html>

(зауважте на 6-ій стрічці як ми під’єднали наші стилі із файла під назвою main.css з допомогою тегу link) і знову відкрити наш HTML файл у веб переглядачі, тоді отримаєте щось подібне до цього:

Синтаксис мови CSS є доволі простим і складається із блоків правил. Кожен блок правил має:

• селектор - ідентифікує, якому саме елементу на сторінці застосовуються правила даного блоку; у нашому вищенаведеному прикладі ми маємо 3 селектора: 1) h1 (усі теги h1 на сторінці), 2) p#paragraph (тег параграфа з ідентифікатором paragraph), 3) a.my-link (усі посилання на сторінці, що мають клас my-link); назва тегу, клас та ідентифікатор є одними із найпоширенішими елементами селектора, проте їх існує величезна кількість і детальніше можна ознайомитись із списком елементів, які можна використовувати у селекторі в довіднику по CSS;
• властивості - блок правил, які йдуть одразу після селектора і є огорнуті у фігурні дужки; вони описують які саме властивості змінити (напр. положення елементів на сторінці, кольори, розміри, шрифти, декорації, фон та межі, і т.д.) в елементі на сторінці обраного селектором, що передує даному блоку властивостей; властивостей існує величезна кількість і їх усіх можна переглянути знову ж таки в довіднику по CSS; а протягом книги ми будемо розбирати саме ті із них, які пригодяться нам у нашому проекті.

Крім того селектори працюють таким чином, що можуть перебивати один одного дозволяючи писати специфічніші стилі для одних елементів і залишаючи інші елементи незмінними. Це дуже потужна властивість мови CSS, яка дозволяє з легкістю унаслідувати стилі та уникати дубляжу в коді.

Детальніше про конкретні селектори і властивості HTML елементів будемо обговорювати в процесі роботи над проектом.

Мова браузерів - Javascript

Для покращення користувацького досвіду веб-сторінок розумні люди вирішили вбудувати мову програмування у веб браузери.

Після багатьох спроб і різноманітних підходів стандартом у світі веб стала мова Javascript.

На початках вона використовувалась для вузького набору завдань із клієнтської валідації форм та динамізації деяких елементів. Але поява технології AJAX, яка дозволила з допомогою мови Javascript комунікувати із сервером, цілком змінила відношення до мови і тепер ця мова переросла в одну із найпопулярніших та використовується не лише на стороні браузера, а і для програмування серверної сторони веб-аплікацій.

Ось приклад мови Javascript:

 1 window.onload = function(){
 2     var mylink = document.getElementsByClassName('my-link')[0],
 3         paragraph = document.getElementById('paragraph');
 4     mylink.onclick = function() {
 5         if (paragraph.style.visibility == '') {
 6             paragraph.style.visibility = 'hidden';
 7         } else {
 8             paragraph.style.visibility = '';
 9         };
10         return false;
11     };
12 };

У ньому ми, одразу після завантаження сторінки, чіпляємо подію кліку мишки на наш лінк з попереднього прикладу із HTML документом із класом my-link. Після приєднання даного скрипта до нашої HTML сторінки параграф із текстом буде то ховатись, то показуватись.

Щоб самим потестувати даний код збережіть вище наведений кусок Javascript коду в окремий файл і під’єднайте його до нашої HTML сторінки наступним чином:

 1 <html>
 2   <head>
 3     <meta charset="UTF-8" />
 4     <title>Приклад HTML Сторінки</title>
 5     <meta name="description" value="Мета опис сторінки" />
 6     <link rel="stylesheet" href="main.css" />
 7     <script type="text/javascript" src="main.js"></script>
 8   </head>
 9   <body>
10     <h1>Заголовок HTML сторінки</h1>
11     <p id="paragraph">Приклад параграфа тексту</p>
12     <br />
13     <a class="my-link" href="http://google.com">Посилання</a>
14   </body>
15 </html>

На 7-ій стрічці HTML документу бачимо тег script, який посилається на файл main.js. Браузер, знайшовши даний тег, спробує піти на сервер за скриптом main.js, отримати його та запустити код, що у ньому знаходиться.

Спробуйте тепер, після підключення нашого Javascript коду, відкрити HTML документ і поклікати по посиланню. Якщо зробили все правильно, параграф тексту повинен ховатись та показуватись почергово при кожному кліку.

Незважаючи на схожість назв, мови Java та JavaScript є двома різними мовами, що мають відмінну семантику, хоча й мають схожі риси в стандартних бібліотеках та правилах іменування. Синтаксис обох мов отриманний “в спадок” від мови С, але семантика та дизайн JavaScript є результатом впливу мов Self та Scheme.

Детальніше про мову Javascript можете почитати на сторінці вікіпедії. Протягом книги ми з вами будемо працювати із додатковими бібліотеками, що значно полегшить нашу роботу на стороні браузера.

Специфіка фронтенду

Усі вище перечислені технології (HTML, CSS, Javascript) складають основу так званої фронтенд (front-end, ще називають її клієнтською) веб-розробки. Іншими словами - це та частина веб-аплікації, яка безпосередньо взаємодіє із користувачем у веб-браузері.

Кожна із цих мов має затверджений стандарт і є, відповідно, реалізованою на стороні веб переглядача.

Але вже так історично склалось, що веб-браузерів на даний момент маємо далеко не один, і що ще більше погіршує ситуацію - кожен із них по різному і в різній мірі підтримує ці стандарти.

На даний момент найпопулярнішими веб-переглядачами є:

• Chrome,
• Firefox,
• Internet Edge,
• Safari десктопний та мобільний,
• мобільний Android Browser.

Таким чином те, що ви запрограмуєте на стороні клієнта і заставите чудово працювати у веб-браузері Chrome, може не зовсім коректно виглядати чи працювати у веб переглядачі Internet Edge.

І чим багатша на функціонал клієнтська сторона вашого веб-сайту, тим більша ймовірність, що вам прийдеться більше часу затратити на підпасовку вашої програми під решту веб-переглядачів.

Лише з практикою та досвідом приходить вміння швидко вирішувати проблеми із різними версіями операційних систем та веб-переглядачів.

В той же час вже давно почали придумувати і реалізовувати масу різноманітних бібліотек та фреймворків, таких собі “надбудов” над основними мовами, які абстрагують вас від більшості відмінностей між платформами, операційними системами та різними веб-браузерами. І на даний час уже існує велика кількість бібліотек з допомогою, яких ваш HTML, CSS та Javascript код буде працювати в більшості випадків з першого разу для усіх браузерів.

У проекті даної книги ми використовуватимемо два таких додаткових інструменти:

• jQuery: Javascript бібліотека, яка дозволяє швидко реалізовувати багату на функціонал сторінку;
• Twitter Bootstrap: HTML/CSS/Javascript фреймворк, який дасть нам доступ до наперед визначених популярних на веб-сторінках віджетів; як от навігація, закладки, форми, кнопки, випадайки, лейаут сторінки і т.д.

jQuery - покращений Javascript

Якщо ми хочемо, щоб наш Javascript код працював одразу у більшості популярних веб-переглядачах, тоді нам прийдеться писати багато умовних операторів у нашому коді. А все тому, що існує багато відмінностей в реалізації Javascript мови у різних веб-браузерах. Наприклад, різні назви одних і тих же функцій, відмінності в роботі з подіями та об’єктами на сторінці.

Щоб уникнути додаткових витрат часу і не винаходити велосипед з нуля, ми будемо користуватись однією із популярних Javascript бібліотек - jQuery.

Вона не лише дозволить нам з легкістю забути про різні версії браузерів, але й дасть величезну кількість додаткових функцій, що збережуть нам масу часу.

Ось лише порівняйте, як виглядатиме наш Javascript код із попереднього прикладу (де ми заставляли параграф тексту зникати на сторінці при кліку на посилання):

 1 $(function(){
 2   $('.my-link').click(function(){
 3     var paragraph = $('#paragraph');
 4     if (paragraph.is(':hidden')) {
 5       paragraph.show();
 6     } else {
 7       paragraph.hide();
 8     }
 9     return false;
10   });
11 });

Так, рядочків коду зменшилось лише на один, проте їхня довжина значно коротша і, знаючи англійську, можна легко зрозуміти, що відбувається у кожному з них.

В реальних проектах роль подібних бібліотек просто неоціненна!

Twitter Bootstrap

В нашому практичному проекті ми будемо створювати багато форм, елементів навігації, кнопок, полів і тому подібних елементів. В більшості випадків такі елементи є схожі між собою на різних веб-сайтах.

Саме тому на даний момент існує багато фреймворків, які дозволяють швидко будувати найчастіше використовувані елементи на веб-сторінках без проведення великої кількості часу на їхній вигляд та функціонал.

Дана книга зосереджена на веб-фреймворку Django та серверній розробці в першу чергу.

В той час як ми з вами оглянемо повний цикл веб-розробки протягом практичного проекту, фронтенд розробка (зокрема верстка) не є основим акцентом даної книги. І саме тому ми скористаємось супер-популярним фреймворком Twitter Bootstrap для створення більшості графічного інтерфейсу, який працюватиме в усіх популярних веб-переглядачах.

Таким чином, використовуючи певні правила при написанні HTML тегів та атрибутів ми одразу матимемо готові веб елементи на наших сторінках. Це збереже нам час при верстці сторінок.

Підключивши Twitter Bootstrap скрипти і стилі наступний доволі простий приклад HTML сторінки:

 1 <html>
 2   <head>
 3     <meta charset="UTF-8" />
 4     <title>Приклад HTML Twitter Bootstrap Сторінки</title>
 5     <meta name="description" value="Мета опис сторінки" />
 6     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootst\
 7 rap/3.2.0/css/bootstrap.min.css">
 8     <script type="text/javascript" src="http://ajax.googleapis.com/ajax\
 9 /libs/jquery/2.1.1/jquery.min.js"></script>
10     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/boo\
11 tstrap.min.js"></script>
12   </head>
13   <body>
14 
15     <div class="container">
16 
17       <!-- Навігаційна панель -->
18       <div class="navbar navbar-default" role="navigation">
19         <div class="container-fluid">
20           <div class="navbar-header">
21             
22             <!-- Цей елемент стане у пригоді для малих екранів -->
23             <button type="button" class="navbar-toggle collapsed"
24                     data-toggle="collapse" data-target=".navbar-collaps\
25 e">
26               <span class="sr-only">Toggle navigation</span>
27               <span class="icon-bar"></span>
28               <span class="icon-bar"></span>
29               <span class="icon-bar"></span>
30             </button>
31             <!-- Лого -->
32             <a class="navbar-brand" href="#">Демо Сторінка</a>
33           </div>
34           
35           <div class="navbar-collapse collapse">
36 
37             <!-- Головна навігація -->
38             <ul class="nav navbar-nav">
39               <li class="active"><a href="#">Головна</a></li>
40               <li><a href="#">Новини</a></li>
41               <li><a href="#">Події</a></li>
42               <li class="dropdown">
43                 <a href="#" class="dropdown-toggle"
44                    data-toggle="dropdown">Більше
45                    <span class="caret"></span></a>
46                 <ul class="dropdown-menu" role="menu">
47                   <li><a href="#">Кабінет</a></li>
48                   <li class="divider"></li>
49                   <li><a href="#">Рахунок</a></li>
50                 </ul>
51               </li>
52             </ul>
53 
54             <!-- Користувацькі лінки -->
55             <ul class="nav navbar-nav navbar-right">
56               <li class="active"><a href="#">Глава1</a></li>
57               <li><a href="#">Глава2</a></li>
58               <li><a href="#">Глава3</a></li>
59             </ul>
60 
61           </div>
62         </div>
63       </div>
64 
65       <!-- Main component for a primary marketing message or call to ac\
66 tion -->
67       <div class="jumbotron">
68         <h1>Демо Сторінка</h1>
69         <p>Цей приклад - це швидка вправа для демонстрації можливостей \
70 фреймворка Twitter Bootstrap. Він включає так званий "чутливий" (respon\
71 sive) дизайн, тому адаптований під ваш конкретний пристрій та розмір ек\
72 рану.</p>
73           <a class="btn btn-lg btn-primary" href="#" role="button">
74             Далі &raquo;</a>
75         </p>
76       </div>
77 
78     </div>
79 
80   </body>
81 </html>

набуде ось якого вигляду у вашому веб-браузері:

Також спробуйте зменшити ширину вікна вашого веб-переглядача і побачите як класно верстка сторінки адаптується під нього.

Таким чином із допомогою Twitter Bootstrap ми з легкістю отримали:

• навігаційну панель із лого, основною навігацією та випадайкою, а також другорядною навігацією;
• тіло сторінки із гарно застиленим текстом та кнопкою “Далі”.

І при цьому ми лише написали HTML код із потрібними тегами та класами. Крім того, ця сторінка гарно виглядає і на вузьких екранах.

Лише уявіть скільки часу нам потрібно було б, щоб зверстати її з нуля, додати динаміки, заставити виглядати добре у різних браузерах та вужчих екранах.

Саме тому ми використовуватимемо даний фреймворк.

На сайті бібліотеки можна детальніше ознайомитись із усіма доступними віджетами та функціоналом.

Бекенд

До цього моменту ми розглянули ту кухню, яка готує нам картинку у веб-переглядачі: HTML, CSS, Javascript та деякі надбудови над ними.

Але, звісно, часи, коли HTML код писали вручну в статичних файлах і клали їх на сервері у папочки давно минули. В даний час більшість сучасних веб-сайтів генерується на льоту з допомогою мов програмування, веб-фреймворків та систем менеджменту вмісту (CMS - Content Management System).

Саме тому наші з вами знання, як веб-девелоперів, не обмежуються мовами, що використовуються в браузері при верстці HTML сторінки.

Однаково важливими є усі ті технології, що дають нам можливість мати динамічні веб-сайти із багатим функціоналом, а також обробляти та зберігати дані від користувача:

• база даних: уже із назви зрозуміло, що цей інструмент дозволяє зберігати та отримувати дані для веб-аплікації; використовувати ми будемо реляційну базу даних PostgreSQL;
• серверна мова програмування: мова, якою ми отримуватимемо і оброблятимемо запити від користувачів, працюватимемо із базою даних та генеруватимемо HTML код для наших веб-сторінок; у нашому випадку це, звісно, буде мова програмування Python.

Бекенд (з англ. “back-end”) ще називають серверною стороною. Тобто та частина веб-сайту, яка відповідає за обслуговування запитів користувача та генерацію коду для веб-сторінки.

Мова програмування Python

Більше, ніж половина нашого з вами часу буде присвячена написанню коду саме на мові Python.

З допомогою Python ми:

• організуємо структуру веб-адрес аплікації;
• налаштуємо проект;
• реалізуємо збереження та отримання даних із бази;
• запрограмуємо усі функціональні сторінки нашого веб-сайту;
• і ще багато іншого.

Ця мова є кросплатформеною та широкого призначення (звичайно ми її використовуватимемо суто для веб-розробки).

Мова Python є динамічною інтерпритованою мовою з простим синтаксисом, що дає можливість програмісту надзвичайно швидко створювати програми та фокусуватись на вирішенні кінцевих проблем.

Ось приклад Python коду з реального Django проекту, який підтверджує, що дана мова є дійсно простою, лаконічною та зрозумілою:

 1 # stat_payments
 2 class StatsPayments(TemplateView):
 3     template_name = 'aikido_school/payments.html'
 4 
 5     def get_context_data(self,**kwargs):
 6         context = super(StatsPayments, self).get_context_data(**kwargs)
 7 
 8         filter = None
 9         groups = Group.objects.all()
10 		
11         object_list = groups.annotate(
12 		    sum=Sum('student__fee__price'),
13             count=Count('student__fee__price'))
14 		
15         form = StatsPaymentsForm(self.request.GET)
16 
17         context['object_list'] = object_list
18         context['one_column'] = True
19         context['form'] = form
20 		
21         return context

Якщо ви взялись за дану книгу, то це означає, що у вас уже є мінімальна база з мови програмування Python. Якщо ж ні, тоді зверніться до Вступу та перегляньте наданий там список матеріалів з необхідним мінімумом інформації.

Синтаксис мови, ООП та інші базові концепції мови ми не будемо розбирати в процесі проекту, а звертатимемо увагу лише на найважливіші аспекти веб-програмування, Django і комунікацію між сервером та веб-переглядачем.

База даних PostgreSQL

Для зберігання даних нашої аплікації ми скористаємось базою PostgreSQL. Це одна із найпоширеніших баз даних, яку ми можемо безкоштовно використовувати у наших цілях.

Ця база даних дасть нам можливість:

• зберігати дані;
• робити пошук серед даних;
• та, звісно, отримувати дані у потрібному форматі.

Веб-фреймворк Django дасть нам усі необхідні інструменти для роботи з даними таким чином, що нам практично не доведеться мати справу напряму із SQL запитами. Більшість завдань із даними ми зможемо реалізувати не відходячи від мови Python.

Тому в книзі ми лише поверхнево оглянемо мову запитів реліційної бази даних - SQL. Короткий огляд найбільш необхідних інструментів та команд при роботі з базою PostgreSQL можете додатково знайти у конспекті-шпаргалці, що йде разом із даним посібником.

Веб-фреймворк Django

Згодом, коли використання мови програмування для генерації HTML сторінок уже стало буденною річчю, програмісти не зупинились і продовжили удосконалювати процес створення веб-сайтів.

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

Адже для чого придумувати колесо, якщо можна використати попередній код перед цим зробивши його універсальнішим?

Веб-фреймворк - це набір інструментів, бібліотек, аплікацій, заготовок, що забезпечують стандартний та найбільш затребуваний набір функціоналу для переважної більшості веб-аплікацій та сайтів.

Одним із найпоширеніших веб-фреймворків на мові Python є Django.

Він дозволяє із блискавичною швидкістю створювати прототипи веб-сайтів і надає необхідний мінімум функціоналу:

• моделі: місток між Python класами та базою даних, який робить усю складну роботу щодо збереження та пошуку даних для вас;
• шаблони: генерація HTML коду без використання Python мови, натомість із мінімальними вкрапленнями логіки з допомогою динамічних Django тегів напряму у HTML код; це дає нам можливість мати так званий MVC підхід та розділяти логіку від даних та представлення;
• диспетчер URL: інструмент, з допомогою якого можемо легко будувати ієрархію URL адрес нашого веб-сайту;
• адміністративна частина: іде разом із Django та дозволяє керувати даними веб-сайту та його налаштуваннями без додаткової розробки;

• користувачі: якщо ваша веб-аплікація потребує користувачів, тоді нічого додаткового практично не доведеться розробляти; Django дає весь функціонал, що дозволить вам мати дані користувачів, форми логування, реєстрації та усі налаштування з безпеки, ролі та дозволи для користувачів;
• форми: додаткові Python класи для роботи із веб-формами; вони економлять масу часу при розробці стандартних форм;
• розробницькі інтерфейси (Development APIs): найпоширенішим є REST; з Django можна легко навчити вашу веб-аплікацію “говорити” у форматі REST, який часто буває корисним для мобільних додатків та при розробці односторінкових динамічних веб-сайтів (SPA - Single Page Applications);
• як і у будь-якому іншому веб-фреймворку такі речі як деплоймент на кінцевий сервер, документація, автоматичні тести, атомарна розробка (модульність), розробницькі інструменти, є добре продумані у фреймворку Django; вони допоможуть вам швидко завершувати ваші веб-проекти.

Крім того, що можна користуватись усіма вбудованими функціями фреймворку, також існує маса бібліотек та аплікацій.

Ну і ще один не менш важливий аргумент на боці Django - це OpenSouce фреймворк. Його код можна вільно використовувати, читати та змінювати.

Репозиторій коду Git

Ця секція немає напряму відношення до веб-розробки. Репозиторій коду - це швидше потреба для кожного проекту з програмним кодом. Особливо, якщо над ним працює більше, ніж одна людина.

Репозиторій коду - це місце збереження вихідного коду та інших матеріалів програмного продукту, яке забезпечує правильний формат зберігання та:

• одночасну роботу двох і більше людей над проектом;
• історію змін в коді;
• одночасну роботу над кількома різними релізами та функціоналом незалежно один від одного;
• резервну копію коду.

Наш проект ми будемо зберігати в репозиторії коду Git.

Протягом останніх років він набув неабиякої популярності як мінімум в OpenSource спільнотах та проектах. А публічний сервіс для зберігання проектів в репозиторіях Git - github.com став передовим для OpenSource проектів.

Під час роботи над проектом ми регулярно зберігатимемо зміни в репозиторії притримуючись кращих практих. Тому по завершенню книги ви не лише володітимете азами Django фреймворку та веб-розробки, але й непогано працюватимете із репозиторієм.

Для загального ознайомлення із принципом роботи репозиторію коду рекомендую ознайомитись із статею про Git на моєму блозі: Що таке репозиторій коду або ЛікБез по Git.

Також із даною книгою йде конспект-шпаргалка щодо використання репозиторію Git.

Домашнє завдання

Отже, в даній главі ми коротко пройшлись по основних аспектах веб-розробки.

Оглянули принцип комунікації сервер-клієнт, протокол HTTP, фронтенд розробку (HTML, CSS, Javascript, jQuery, Twitter Bootstrap), серверну сторону (Python, PostgreSQL, Django) та репозиторій коду Git.

Протягом роботи над нашим проектом у даній книзі ми будемо детальніше розбирати потрібні нам аспекти кожної із цих технологій. Але якщо ви поки лише початківець у веб-розробці, тоді перед переходом до наступної глави рекомендую детальніше ознайомитись із ними. Це дасть вам можливість краще засвоїти матеріал книги.

Отже, на домашнє завдання виділіть кілька годин i:

• знайдіть та пройдіть невеличкий онлайн туторіал або курс по мові HTML на зручній для вас мові; в інтернеті є маса доступних матеріалів як на англійській так і на українській та російській мовах;
• те ж саме із CSS; достатньо навіть вище згаданих посилань на статті у вікіпедії;
• ознайомтесь із мовою Javascript;
• також із мовою запитів реляційних баз даних: SQL;
• перечитайте та поекспериментуйте із Лікбезом з Git репозиторію;
• і загалом, усі наведені посилання на зовнішні ресурси у даній главі є важливими для подальшого ознайомлення.

Python не згадав, адже це само собою розуміється. Без нього нікуди…

Усю теорію, що набудете в результаті виконання даного домашнього завдання ми з вами успішно застосуємо на практиці в подальших главах. Також не забувайте одразу експериментувати із прикладами при проходженні та засвоєнні теоретичних матеріалів.

У наступній главі ми дамо визначення нашому практичному проекту, сформулюємо основні завдання та специфікації, а також перелічимо усі ті навички, що отримаємо в результаті імплементації даного проекту.