Розділ 2. Розробка програмного продукту

2.1 Керівництво програміста

При розробці і тестуванні сайту-візитівки були виявлені та висунуті наступні вимоги:

• для повної роботи сайту відділення програмування необхідний браузер, який підтримував би крім мови HTML також PHP, СSS, JavaScript. Для зручного перегляду і швидкого завантаження web-сторінки рекомендована швидкість Інтернету не менше 1 МБіт в секунду;

• частина сайту спеціально створена для адміністратора, тому вона захищена паролем.

Web-браузери не мають чітко визначених стандартів при відображенні HTML-сторінок, тому виникає необхідність тестувати роботу web-додатків у різних середовищах.

Для уникнення таких ускладнень при перегляді сторінок сайту-візитівки відділення програмування Державного вищого навчального закладу «Чернівецький політехнічний коледж» рекомендується використовувати браузери Google Chrome, Opera, Mozilla Firefox, Safari, в яких була протестована робота web-ресурсу.

Для перегляду сайту на ПК в тестовому режимі, було встановлено локальний сервер сімейства Apache (Denwer, Xampp).

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

Для навігації на web-сторінці використовується меню, яке реалізоване за допомогою списків.

<ul class="menu">

<li><a href="index.php">Головна</a></li>

<li><a href="#">Про нас</a>

<ul>

<li><a href="heute.php">Новини</a></li>

<li><a href="history.php">Історія</a></li>

<li><a href="teachers.php">Викладачі</a></li

</ul></li><li><a href="#">Студенту</a><ul>

<li><a href="advertisement.php">Оголошення</a></li>

<li><a href="schedule.php">Розклад занять</a></li>

<li><a href="replacement.php">Заміни</a></li>

<li><a href="session.php">Графік сессії</a></li>

<li><a href="met.php">Метод. забезпечення</a></li>

</ul></li><li><a href="gallery.php">Галерея</a></li>

<li><a href="contacts.php">Контакти</a></li>

Для виводу інформації з бази даних на сайт використовується наступні запити:

• Для реалізації вибірки даних з таблиці використовувалась функція з перевіркою SELECT

$result = mysql_query("SELECT id, cat, zag, text, date FROM news");

Для виводу даних з таблиці виконується цикл do while() у комбінації з функцією printf():

do

{

printf("<div class='short-news'><p class='full'><a href='news-full.php?id=%s'>%s</a></p>

<p>%s</p>

<div class='pod'><p>Опубліковано:<a href='#'>%s</a></p><a class='button'href='#'>Детальніше</a></div></div>", $myrow["id"],$myrow["zag"],$myrow["text"],$myrow["date"]);

}

while($myrow = mysql_fetch_array($result));

2.2 Керівництво користувача

Головна сторінка сайту зображена на рисунку 2.1. На цій сторінці відображається основна інформація про відділення програмування. Щоб отримати доступ до даних, яка приховані від незареєстрованих користувачів необхідно перейти на сторінку admin.php і авторизуватись (див. рисунок 2.2)

Рисунок 2.1 ­ Головна сторінка

Рисунок 2.2 ­ Форма авторизації

Рисунок 2.3 ­ Сторінка реєстрації

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

Рисунок 2.4 ­ Сторінка «Новини»

Рисунок 2.5 ­ Міні-чат

За допомогою головного меню (посилання на інші сторінки) можна здійснювати перехід на інші сторінки сайту (див. рисунок 2.6).

Рисунок 2.6 ­ Головне меню

Сторінка «Викладачу» (див. рисунок 2.7) ­ це посилання, яке дає можливість переходу на web-ресурс «Google Диск», де можна скачати необхідні документи для роботи викладача.

Рисунок 2.7 ­ Web-ресурс «Google Диск Вчителю»

На сторінці «Студенту» (див. рисунок 2.8) розташовані посилання на web-ресурс «Google Диск», де можна скачати необхідну літературу (див. рисунок 2.9) та програмне забезпечення (див. рисунок 2.10).

Рисунок 2.8 ­ Сторінка «Студенту»

Рисунок 2.9 ­ Web-ресурс «Google Диск Література»

Рисунок 2.10 ­ Web-ресурс «Google Диск Програми»

Сторінка «Абітурієнту» надає можливість переглянути необхідну інформацію (див. рисунок 2.11).

Рисунок 2.11 ­ Сторінка «Абітурієнту»

Сторінка «Галерея» складається з трьох фотоальбомів (див. рисунок 2.12): «Спартакіада 2011» (див. рисунок 2.13), «День міста 2011» (див. рисунок 2.14) та «Випускники» (див. рисунок 2.15). При натисканні на один з фотоальбомів відображається всі фотографії, що він містить..

Рисунок 2.12 ­ Сторінка «Галерея»

Рисунок 2.13 ­ Фотоальбом «Спартакіаді 2011»

Рисунок 2.14 ­ Фотоальбом «День міста 2011»

Рисунок 2.15 ­ Фотоальбом «Випускники»

Щоб переглянути фотографії достатньо натиснути на одну з них як відкривається вікно для перегляду (див. рисунок 2.16).

Рисунок 2.16 ­ Вікно для перегляду фотографій

Сторінка «Контакти» (див. рисунок 2.17) надає можливість надіслати повідомлення адміністратору сайту або звернутися за адресою, яка вказана на сайті.

Рисунок 2.17 ­ Сторінка «Контакти»

При натисканні на посиланні в головному меню «Вихід» користувач повертається на головну сторінку (див. рисунок 2.18).

Рисунок 2.17 ­ Посилання «Вихід»

Для адміністрування сайту необхідно на головній сторінці в поля форми авторизації ввести login та пароль (див. рисунок 2.18), який дозволить ввійти в адміністраторську частину (див. рисунок 2.19).

Рисунок 2.18 ­ Вхід в адміністраторську частину

Рисунок 2.19 ­ Адміністраторська частина

Для редагування інформації створено спеціальне меню, яке дозволить додавати, редагувати та видаляти як текстову та графічну інформацію (див. рисунок 2.20).

Рисунок 2.20 ­ Меню адміністратора

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

Рисунок 2.21 ­ Добавлення новин

Рисунок 2.22 ­ Повідомлення про помилку

Для редагування новин потрібно натиснути на «Редагувати Новини», після чого здійснюється перехід на сторінку для редагування новин (див. рисунок 2.23). Щоб відредагувати новини, потрібно вибрати одну із списку новин, який з’являється на сторінці, при натисканні на її заголовку відкривається форма для редагування (див. рисунок 2.24), де можна виправити текстову інформацію, після чого натиснути кнопку «Зберегти». При успішному збереженні з’являється повідомлення (див. рисунок 2.25).

Рисунок 2.23 ­ Редагування новин

Рисунок 2.24 ­ Форма для редагування новин

Рисунок 2.25 ­ Повідомлення про успішне збереження інформації

Для видалення інформації потрібно натиснути на «Видалити Новини», після чого здійснюється перехід на сторінку для видалення новин (див. рисунок 2.26). Щоб видалити новини, потрібно вибрати одну із списку, який з’являється на сторінці та натиснути на кнопку «Видалити».

Рисунок 2.26 ­ Видалення новин

Для добавлення фотоальбому потрібно натиснути на «Додати Фото» після чого відкривається форма для добавлення альбому (див. рисунок 2.27). При натисканні на кнопку «Додати» при умові вірно заповнених полів з’являється вікно з повідомленням (див. рисунок 2.28) і здійснюється перехід на сторінку для добавлення фотографій, які будуть зберігатись у вказаному фотоальбомі (див. рисунок 2.29).

Рисунок 2.27 ­ Додати альбом

Рисунок 2.28 ­ Повідомлення про успішне добавлення альбому

Рисунок 2.29 ­ Добавлення фотографій

Для видалення фотоальбомів потрібно натиснути на «Видалити Фото» після чого з’являється список фотоальбомів (див. рисунок 2.30), з яких потрібно вказати назву альбому та натиснути на кнопку «Видалити», після чого з’являється повідомлення (див. рисунок 2.31).

Рисунок 2.30 ­Видалення альбому

Рисунок 2.31 ­ Повідомлення про успішне видалення альбому

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

Рисунок 2.32 ­ «Вихід»