WEB-ТЕХНОЛОГІЇ

МЕТОДИЧНІ ВКАЗІВКИ

до лабораторної роботи № 12

з дисципліни “Алгоритмізація та програмування, частина 2”

для студентів спеціальності 122 «Комп’ютерні науки та інформаційні технології»

Затверджено

на засіданні кафедри інформаційних систем та мереж

Протокол №__ від _____.2017 р.

Львів-2017

WEB-технології: Методичні вказівки до лабораторної роботи № 12 / Укл.: В.А. Висоцька, Л.В. Чирун. – Львів: Видавництво Національного університету ”Львівська політехніка”, 2016. – 80 с.

Укладачі

                                      Висоцька В.А., канд. техн. наук, доц.

                                      Чирун Л.В., канд. техн. наук, доц.

Відповідальний за випуск Литвин В.В., доктор техн. наук., проф.

Рецензенти     Верес О.М., канд. техн. наук, доц.

                          Берко А.Ю., доктор техн. наук., проф.

Мета роботи: ознайомитись з принципами побудови експериментального середовища для вивчення WEB-технологій, одержання навичок інсталяції Ubuntu -популярного дистрибутива Linux та пакету Denwer під операційну систему Windows, дослідження основних можливостей модуля phpMyAdmin для адміністрування бази даних MySQL.

Ознайомлення з основними поняттями хостингу, одержання навичок у FTP-доступі до WEB-ресурсів на сервері, дослідження можливостей основнихінструментальних засобів FTP-доступу в операційних системах Windows і Linux. Ознайомлення з основами синтаксису РНР, одержання навичок у створюванні простих форм за допомогою РНР-редактора, дослідження операторів математичних операцій та введення даних у WEB-форму. Набуття навичок у використанні конструкцій розгалуження та циклічних дій мови РНР. Набуття навичок створення простих серверних скриптів та аналізу баз даних і таблиць.

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

Ознайомлення з сучасними фреймворками та шаблоном проектування WEB-сайтів MVC (Модель-Вид-Контроллер), одержання навичок у розробці типових WEB-форм за допомогою фреймворку Codeignaiter.

1.       Теоретичні відомості

1.1.      Створення лабораторного середовища шляхом інсталяції операційної системи Linux або на основі оболонки Denwer та модуля phpMyAdmin.

Linux (повна назва GNU/Linux) - загальна назва UNIX-подібних операційних систем на основі однойменного ядра та зібраних для нього бібліотек і системних програм, розроблених у рамках проекту GNU.

До операційної системи GNU/Linux також часто відносять програми, що доповнюють цю операційну систему, а також прикладні програми, які фактично перетворюють її на повноцінне багатофункціональне операційне середовище.

На відміну від більшості інших операційних систем, GNU/Linux не має єдиної «офіційної» комплектації. Замість цього GNU/Linux постачається у великій кількості так званих дистрибутивів, в яких програми GNU з'єднуються з ядром

Linux та іншими програмами. Найбільш відомими дистрибутивами GNU/Linux вважаються Slackware, Debian GNU/Linux, Red Hat, Fedora, Mandriva, SuSE, Gentoo, Ubuntu.

Більшість користувачів для встановлення GNU/Linux застосовують саме дистрибутиви. Це викликано тим, що дистрибутив не є простим набором програм, а є рядом рішень для різних задач користувачів, об'єднаних єдиними системами установки, управління та обновлення пакетів, налагодження та підтримки.

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

Зручним інструментом для відлагодження WEB-додатків зарекомендував себе пакет "Джентльменський набір web-розробника" ("Д.н.w.p", читається як "Денвер") - набір дистрибутивів (Apache, PHP, MySQL, Perl тощо) й програмна оболонка. Денвер використовується web-розробниками для створення сайтів на "домашній" (локальній) windows-машині без необхідності виходу в Інтернет. Головна особливість Денвера - зручність при віддаленій роботі відразу над декількома незалежними проектами та можливість розміщення на Flash-накопичувачі.

До складу базового пакета Денвер входять:

• Apache 2 з підтримкою SSL і mod_rewrite;
• PHP 5: файли для виконання, модуль для веб-сервера Apache, дистрибутивний і адаптований конфігураційний файл, бібліотека GD, модулі підтримки MySQL і sqLite;
• MySQL 5 з підтримкою InnoDB, трансакцій і кириличних кодувань (windows-1251);
• phpMyAdmin - панель керування базою даних MySQL, а також скрипт, який спрощує додавання нового користувача MySQL;
• Загальнокласове налагодження sendmail (/usr/sbin/sendmail), яке не відправляє листа, а записує його у директорію /tmp/!sendmail;
• Система автоматичного пошуку віртуальних хостів і відновлення системного файлу hosts, а також конфігурації Apache. Завдяки їй додавання нового віртуального хоста (або домена третього рівня) полягає в простому створенні каталогу в /home (див. за аналогією з уже існуючими хостами) і перезапуск комплексу. Всі зміни вносяться в конфігураційні та системні файли автоматично, але ви можете керувати цим процесом за допомогою механізму шаблонів хостів (див. /usr/local/apache/conf/httpd.conf за детальними роз'ясненнями).

Домашня сторінка інструментарію Денвер знаходиться за адресою http://www.denwer.ru/, де і можна завантажити на власний комп'ютер останню версію базового пакету та пакети розширень (http://rus.denwer.net/), отримати необхідну довідкову інформацію. Після інсталяції дистрибутиву створюється віртуальний диск (як правило Z:\), зміст якого повністю відповідає папці D:\WebSerwers.

Апробація базової WEB-технології PHP-MySQL здійснюється в оболонці Денвер шляхом запуску файлів з РНР-сценаріями (*.РНР) на WEB-сервері Apache в умовах підтримки баз даних діючим MySQL-сервером. При цьому робоча  область  WEB-серверу  Apache  -  Z:\home\localhost\www\  або D:\WebSerwers\home\localhost\www\, а робоча папка для баз даних MySQL - Z:\usr\local\mysql5\data\ або D:\WebSerwers\usr\local\mysql5\data\. Перегляд потрібних файлів *.РНР здійснюється у будь-якому встановленому на комп'ютері браузері за адресою http://localhost/> або http://127.0.0.1/.

1.2.      Хостинг та FTP-доступ - основні поняття, можливості, інструменти.

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

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

Види хостингу: Повнофункціональний хостинг.

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

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

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

Колокація (Collocation) - надання місця в дата-центрі провайдера для обладнання клієнта (зазвичай шляхом монтажу в стійці) та підключення його до Інтернету.

Обмежений або хостинг певних програм (послуг):

• Веб хостинг;
• E-mail хостинг;
• DNS хостинг;
• Ігровий хостинг;
• Wiki farm.

У Додатку наведено перелік основних безкоштовних хостингів та послуг, які вони надають.

Протокол передачі файлів (англ. File Transfer Protocol, FTP) — дає можливість абоненту обмінюватися двійковими і текстовими файлами з будь-яким комп'ютером мережі, що підтримує протокол FTP. Установивши зв'язок з віддаленим комп'ютером, користувач може скопіювати файл з віддаленого комп'ютера на свій, або скопіювати файл з свого комп'ютера на віддалений.

Переваги ГТР-клієнта. Навіть якщо в адмінці передбачена завантаження необмеженої кількості файлів одноразово, існує встановлене сервером обмеження обсягу даних, переданих формою (зазвичай до 8 мегабайт) і обмеження на розмір кожного файлу, що завантажується по НТТР-протоколу (зазвичай до 2 мегабайт). Отже, звичайно користувач не може завантажити файли розміром більше 2 мегабайт, а сумарний розмір файлів з урахуванням кодування не повинен перевищувати 8 мегабайт. А на основі використання FTP-клієнта користувач може одним клацанням миші відправити на сервер повністю підготовлений сайт, який може мати і 10 тисяч файлів (наприклад, CMS Joomla), а не тисячократно повторювати завантаження файлів по НТТР-протоколу.

1.3.      Основні конструкції мови сценаріїв (скриптів) РНР

Скриптова мова (мова сценаріїв) програмування РНР, як правило, використовується суто для програмування додатків, пов'язаних з Інтернетом. РНР-сценарії вбудовуються у код HTML-сторінки, інтерпретуються і виконуються на сервері. Розглянемо приклад: браузер звертається до WEB-сервера (наприклад, my_server) із запитом файлу example.php з таким кодом (наприклад, http://my_server/example.php):

<html>

<head>

<title> example</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

Приклад простої PHP-сторінки <br>

Ці стрічки не інтерпретується, як код РНР <br> <br>

<?php

echo "Привіт, Я РНР-сценарій!";

?>

<?

echo("<р>Це теж РНР-сценарій!<р>");

?>

<?

echo("<р>Матеріал лабораторної роботи з дисципліни WEB-технології, підготував Р.В. Анщук <р>");

?>

</body>

</html>

Розширення файлу (*.php) для сервера є ознакою, що цей файл - скрипт і його треба виконати як програму за допомогою інтерпретатора РНР-коду. Виконавши за допомогою інтерпретатора цей РНР-скрипт, сервер одержить результат і надішле нашому браузеру таку WEB-сторінку:

Приклад простої РНР-сторінки

Ці стрічки не інтерпретується, як код РНР

Привіт, Я РНР-сценарій!

Це теж РНР-сценарій!

Матеріал лабораторної роботи з дисципліни WEB-технології, підготував Р.В.

Анщук

Розглянемо процес виконання php-сценарію при зверненні браузера до сервера. Отже, спочатку браузер запрошує у сервера сторінку з розширенням *.php. Одержавши такий запит, WEB-сервер виконує цей файл через інтерпретатор РНР і далі генерує результат у вигляді html-коду (згенерованої WEB-сторінки), який і надсилає у відповідь WEB-браузеру. Для того, щоб включити в файл команди РНР, необхідно використовувати спеціальні теги. В залежності від розширення файлу, їх розрізняють 4 види (вони еквівалентні і можна використовувати будь-які):

Інструкція обробки XML:

<?php

?>

Інструкція обробки SGML:

<?

?>

Інструкція обробки сценаріїв HTML:

<script language = "php">

</script>

Інструкція в стилі ASP:

<%

%>

У подальшому ми дотримуватимемося стилю XML або SGML.

Команда echo в РНР застосовується для виведення фактично всього, що зустрічається на web-сторінках (текст, розмітку HTML, числа). Значення її дії має бути зрозуміле з вищенаведеного прикладу.

Крапка з комою

Необхідно пам'ятати, що в кінці кожного рядку команди РНР-коду слід розмістити крапку з комою. Наприклад:

echo ("Тут крапка з комою ставиться після другої

фізичної стрічки, вказуючи на завершення команди. \п");

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

• двокрапка (:),
• відкриваючі ({) та закриваючі (}) фігурні дужки,
• відкриваючі (<?) та закриваючі (?>) теги РНР.

Коментарі

Коментар - це фрагмент програмного коду, який не виконується і призначений лише для поточних пояснень і приміток. РНР надає декілька методів для вставки коментарів. Перший спосіб пов'язаний з використанням подвійного слешу (//). Після цієї позначки РНР-інтерпретатор ігнорує все, що буде розташоване до кінця рядка.

Аналогічно можна користуватись і символом (#) - типовим способом коментування у скриптових мовах UNIX.

Для випадків, коли потрібно закоментувати одразу багато рядків вельми зручним стає в нагоді стиль мови програмування С (/*...*/).

<php

echo("<p>Hello</p>"); // коментар

echo("<p>Hello</p>"); # і це також коментар

$а = "Hello, world";

echo strstr($a,"H");

// цю функцію ми розглянемо пізніше

/*

і це теж коментарі

*/

?>

Слід пам'ятати про те, що стилі коментарів РНР діють тільки усередині обмежувачів РНР. Якщо РНР зустріне ці символи коментарів поза обмежувачами, то вони, як і будь-який текст, з'являться в на html-сторінці. Наприклад:

<php

echo("<p>Hello</p>"); // правильно написаний коментар

?>

// а ось цей коментар буде відтворено браузером.

До речі, існує ще один коментар - HTML. Він не має безпосереднього відношення до РНР, але може бути корисним в HTML-сторінці. Відмітимо, що за своєю природою він є багаторядковим:

<~ Це - коментар HTML. Його можна побачити лише у вихідному коді

HTML, але не у вікні WEB-браузера ~>

Змінні

У РНР змінні починаються зі знаку долара ($). За цим знаком може слідувати будь-яка кількість буквено-цифрових символів і символів підкреслення. Слід також пам'ятати, що у мові РНР назви змінних чутливі до Регістру.

При оголошенні змінних в РНР не вимагається явно вказувати тип змінної. При цьому одна і та ж змінна може впродовж програми набувати різних типів.

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

<?php

$string§="Математичний приклад";

$а=2;

$b=3;

$num= $a+$b;

echo "$string <br> Сума дорівнює $num";

?>

Оператори

Робота з формами

Як відомо, HTML-форми використовуються для віддаленого введення інформації за допомогою WEB-браузера. В залежності від обставин, форми можуть мати різну кількість йолів різного тину. РНР чудово взаємодіє з цими об'єктами і дозволяє конструювати потужні і зручні користувацькі інтерфейси. Більш того, власне синтаксис РНР дозволяє легко зчитувати дані з полів форми.

Але спочатку зазначимо, що будь-яка форма повинна вміщувати такі дескриптори й атрибути:

<FORM NAME = «НАЗВА ФОРМИ»

ACTION = «ШЛЯХ ДО ПРОГРАМИ, ЩО ОБРОБЛЯЄ ДАНІ»

METHOD = «МЕТОД ПЕРЕДАЧІ ДАНИХ»>

ПОЛЯ ДЛЯ ВВЕДЕННЯ ІНФОРМАЦІЇ ....

</FORM>

В атрибуті ACTION будемо задавати назву файлу з сценарієм (*.php), який має обробляти дані з HTML-форми.

Кожне поле введення інформації має атрибут NAME (наприклад, <INPUT TYPE="text" NAME="first" SIZE="4" MAXLEGHT="4">), значення якого передається до програми, що має обробляти дані.

Для передачі даних із полів форми до програми використовується два методи: GET і POST. Під час використання методу GET після натискання кнопки на формі «Надіслати» значення полів автоматично приєднується до URL, вказаного в атрибуті ACTION: http://site.domain/action.php?Haзв1 =знач1 & .. .назв2=знач2

У випадку використання методу POST значення цих полів передаються в заголовку запиту до сервера, тобто непрозоро (непомітно) для користувача.

1.4.      Оператори умовного переходу та циклів у РНР.

До операторів умовного переходу відносять: оператор (if...else) і перемикач (switch). Синтаксис умовного оператора у РНР такий:

if (condition) statement_l else statement_2

Умова condition може бути будь-яким виразом. Якщо вона є істиною, то виконується оператор statement_l. Інакше виконується оператор statement_2. Допускається скорочена форма запису умовного оператора, в якій відсутні оператор else і оператор statement 2. У свою чергу, оператори statement_Г\ statement_2 можуть бути умовними, що дозволяє організовувати ланцюжки перевірок будь-якої глибини вкладеності. І в цих ланцюжках кожний умовний оператор може бути як повним, так і скороченим. Синтаксис мови РНР припускає, що при вкладених умовних операторах кожне else відповідає найближчому if. У зв'язку з цим можливі помилки неоднозначного зіставлення if та else. Простим правильним рішенням цієї задачі є застосування фігурних дужок, тобто нам потрібно фігурними дужками обмежити область дії внутрішнього умовного оператора, зробивши його неповним. Тим самим зовнішній оператор перетворюється на повний умовний, наприклад:

<?

$х = 1;

$У= 1;

if($x=l)

{

if($y==l)echo("x=l andy=l");

}

else echo("x!=r');

?>

Додаткові умови можливо перевірити за допомогою оператора elseif. Оператор if може включати скільки завгодно блоків elseif, але else в кожному if може бути тільки один. Як правило, в конструкціях if...elseif...else оператор else визначає, що потрібно робити, якщо ніякі інші умови не виконуються.

Розглянемо приклад - магазин надає знижки при замовленні великої кількості автопокришок. Схема знижок виглядає таким чином:

• Придбання менше 10 автопокришок - без знижки;
• Придбання 10-49 автопокришок - знижка 5%;
• Придбання 50-99 автопокришок - знижка 10%;
• Придбання 100 і більше автопокришок - знижка 15%.

Можна створити код для обчислення знижок з використанням умов і операторів if і elseif. Для об'єднання двох умов в одне застосовується операція і (&&). Значення змінної Stireqty вводиться за допомогою html-форми (розробити таку самостійно).

<?php

$7="<b>Знижка дорівнює</b>";

$n="<b>Без знижки </b>";

If ( Stireqty >=10 && Stireqty <= 49 ) {

Sdiscount = 5;

echo "$z $discount<br>

elseif ( stireqty >=50 && Stireqty <= 99 ) {

Sdiscount =10;

echo "Sz Sdiscount<br>

elseif( Stireqty >= 100 ) {

Sdiscount =15;

echo "Sz Sdiscount<br> "; }

else

echo "Sn";

?>

Зверніть увагу на те, що можна застосовувати як elseif, так і else if – обидва варіанти правильні.

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

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

РНР надає також можливість альтернативного синтаксису умовного оператора - без фігурних дужок - із застосуванням оператора endif. Наприклад :

if(вираз): блок_виконання endif;

Має сенс, якщо умова, записана в круглих дужках оператора if, виявилася істиною, виконуватиметься ваш код, від двокрапки «:» до команди endif. Використання такого синтаксису корисне при вбудовуванні php в html-код.

<?php

$names = array("Іван",''Петр",''Семен");

if ($name8[0]="Іван"):

?>

Привіт, Ваня!

<?php endif ?>

У наступному прикладі скрипт аналізує зміст змінної $HDD. Якщо в ній буде стрічка «Maxtor», то буде генеруватись WEB-сторінка з таблицею і заголовком «Maxtor». У протилежному випадку - це буде таблиця із заголовком «Seagate». Наявність оператора endif в цьому випадку обов'язкова, оскільки фігурна дужка, що позначає кінець блоку if, відсутня:

<?

if($HDD = «Maxtor»):

?>

<table>

<caption> Maxtor </caption>

</table>

<?

elseif($HDD = «Seagate»):

?>

<table>

<caption> Seagate </caption>

</table>

<?

endif;

?>

(Для ознайомлення з повним текстом статті необхідно залогінитись)