Дипломная (вкр): Розробка інформаційного веб-сайту з використанням мови програмування PHP

Все готово. Тепер залишилося оновити конфігурацію bind командою

reload

І перевірити роботу сервера:

domain.com 127.0.0.1

Якщо все працює вірно, то відповідь сервера буде виглядати:

: 127.0.0.1: 127.0.0.1 # 53authoritative answer :: domain.com: 192.168.1.1

На цьому налаштування DNS серверу завершена.

1.4.10 Встановлення серверу електронної пошти sendmail

Поштовий сервер, сервер електронної пошти - в системі пересилки електронної пошти так зазвичай називають агент пересилання повідомлень (англ. mail transfer agent, MTA). Це комп'ютерна програма, яка передає повідомлення від одного комп'ютера до іншого. Зазвичай поштовий сервер працює "за лаштунками", а користувачі мають справу з іншою програмою - клієнтом електронної пошти (англ. mail user agent, MUA).

Наприклад, в поширених конфігураціях клієнтом пошти користувача є Outlook Express, повноцінна версія Microsoft Outlook, або Mozilla Thunderbird. Коли користувач набрав повідомлення і посилає його одержувачу, поштовий клієнт взаємодіє з поштовим сервером, використовуючи протокол SMTP. Поштовий сервер відправника взаємодіє з поштовим сервером одержувача (безпосередньо або через проміжний сервер - релей). На поштовому сервері одержувача повідомлення потрапляє в поштову скриньку, звідки за допомогою агента доставки повідомлень (англ. mail delivery agent, MDA) доставляється клієнту одержувача. Часто останні два агенти суміщені в одній програмі (наприклад, sendmail), хоча є спеціалізовані MDA, які в тому числі займаються фільтрацією спаму. Для фінальної доставки отриманих повідомлень використовується не SMTP, а інший протокол - часто POP3або IMAP - який також підтримується більшістю поштових серверів. Хоча у найпростішій реалізації MTA досить покласти отримані повідомлення в особисту теку користувача уфайловій системі центрального сервера ("поштова скринька").

Часто поштовий сервер включає програмне забезпечення для організації розсилок електронної пошти.

Sendmail - один з найстаріших агентів передачі пошти <#"870102.files/image061.jpg">

Рисунок 1.61 - Встановлення сервера електронної пошти

Потім ввожу команду

sendmailconfig

після цього вводяться зміни в наступні файли

/etc/mail.sendmail.conf

/etc/cron.d/sendmail

/etc/mail/sendmail.mc

1.4.11 Встановлення FTP серверу

Протокол <#"870102.files/image062.jpg">

Рисунок 1.62 - Встановлення ftp

Якщо FTP-сервер не використовуватиметься постійно відповісти на питання, що з'явилося, про спосіб запуску, необхідно: "самостійно".

. Відкриваю файл /etc/shells командою:

nano/etc/shells

. Додаю в нього рядок

/bin/false

. Створюю в /home каталозі папку FTP-shared командою:

mkdir /home/FTP-shared

. Створюю користувача з ім'ям userftp командою

userftp - p pass - d /home/FTP - shared - s /bin/false

де "pass" - пароль.

. В папці FTP-shared створюю дві вкладені папки:

mkdir /home/FTP-shared/publicmkdir /home/FTP-shared/upload

. Присвоюю потрібні права створеним текам командами

chmod 755 /home/FTP-sharedchmod 755 /home/FTP-shared/publicchmod 777 /home/FTP-shared/upload

8. Переіменовую наявний конфігураційний файл proftpd.conf і створюю новий:

mv /etc/proftpd/proftpd.conf

/etc/proftpd/proftpd.conf.oldnano/etc/proftpd/proftpd.conf

. Якщо треба зробити анонімний доступ, слід закоментувати обидві секції для donet і розкоментувати секцію для аноніма.

. Cервер вже запущений, але з параметрами за замовчуванням. Його необхідно перезапустити:

/etc/init.d/proftpd restart

. Для перевірки синтаксису створеного конфіг-файлу можна виконати:

proftpd - td5

. Щоб взнати, хто підключений до фтп-серверу в даний момент використовується команда ftptop (клавіша t міняє відображення, q - вихід) можна також використати команду ftpwho

. Фтп-сервер з двома папками, одна з них (public) доступна тільки для читання, інша (upload) - для запису.

1.5 Створення інформаційного веб-сайту

Сайт або веб-сайт (від англ. <#"870102.files/image063.jpg">

Рисунок 1.63 - Вигляд сайту, написаного на HTML

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

1.5.3.2 Створення веб-сторінки за допомогою CSS

Каскадні таблиці стилів (англ. <#"870102.files/image064.jpg">

Рисунок 1.64 - Вигляд сайту з використанням CSS

В результаті було створено і підключено дві каскадні таблиці стилів.

1.5.3.3 Створення веб-сторінки за допомогою javascript

JavaScript - назва реалізації стандарту <#"870102.files/image065.jpg">

Рисунок 1.65 - Вигляд сайту з використанням скрапів

В результаті було створено і підключено два javascript - скріпти.

.5.3.4 Створення та вставка графічних об’єктів

Тепер треба в сторінку сайту вставити зображення, які би доповнили дизайн сайту.

Перш ніж приступати до створення зображення варто знати, що зображення є векторними та растровими.

Ве́кторна гра́фіка (також геометричне моделювання або об'єктно-орієнтована графіка) - створення зображення <#"870102.files/image066.gif">

Рисунок 1.66 - Вигляд зображення favicon

Підключається favicon-зображення спеціальним тегом, який розміщується між тегами <head> і </head>:

<link rel="shortcut icon" href=" favicon.png" type= "image/png">

Обновляю сторінку і дивлюся на закладку у браузері. Біля назви сайту появився синьо-жовтий прапор України.

Тепер малюю логототип компанії.

Наперед вирішено, що логотип буде у формі блок-схеми і міститиме назву компанії, яка написана англійською мовою "POLITECH".

Для цього запускаю графічний редактор GIMР. Створюю нове зображення і зберігаю з назвою polytech-logo та задаю розширення PNG.

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

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

Результат роботи буде мати вигляд.

Рисунок 1.67 - Логотип

Тепер необхідно розмістити логотип у папці з зображеннями та приєднати його до сторінки сайту.

Логотип поміщується у папку images.

На сайті логотип розміщується у шапці сайту.

Код матиме вигляд:

<div>

<a href="#"870102.files/image068.gif">

Рисунок 1.68 - Зображення back to top

Отримане зображення переміщую в папку сайту у папку images.

Тепер необхідно вставити картинку в сторінку сайту. Робиться це тегом картинки, який поміщений у тег посилання. Код матиме вигляд:

<div style="position: fixed; bottom: 40px; right: 80px;">

<a href="template.php#top" title="Піднятися до верху">

<img src="images/back-to-top.png" alt="back-to-top">

</a>

</div>

Даний блок знаходиться у самому низу сайту після div-блоку footer.

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

1.5.3.5 Створення веб-сторінки за допомогою PHP

PHP (англ. <#"870102.files/image069.jpg">

Рисунок 1.69 - Результат роботи книги гостей

1.5.4 Створення шаблону

Шаблон сайту - сукупність оформлених і верстаючих в HTML <#"870102.files/image070.jpg">

Рисунок 1.70 - Вигляд головної сторінки

1.5.6 Створення сторінок сайту і їх наповнення

Тепер створюю інші сторінки сайту.

Запускаю файл template і зберігаємо його з іменем about.php у кореневій папці сайту. Тут буде інформація про компанію.

Тепер ввожу дані в робочу область.

Код має вигляд:

<center><h1>Про нас:</h1></center><hr>

<h2>Історія нашої компанії:</h2>

<h4>Створення:</h4>

<p>Наша компанія була створена у 1991 у місті Тернополі.</p>

<h4>Перший успіх:</h4>

<p>Перший успіх до компанії прийшов, коли ми вийшли на Європейський ринок у 2006 році.</p>

<hr>

Рисунок 1.71 - Вигляд сторінки з інформацією про компанію

Запускаю файл template і зберігаємо його з іменем services.php у кореневій папці сайту. Тут буде інформація про послуги компанії.

Тепер ввожу дані в робочу область.

Код має вигляд:

<div>

<center><h1>Ми надаємо послуги:</h1></center><hr>

<h2>Наша компанія надає ряд послуг:</h2>

<p>Послуга #1 - <i>Створення web-сайту.</i></p>

<p>Створення веб-сайтів різної складності.</p>

<br>

<p>Послуга #2 - <i>Адміністрування існуючого сайту</i></p>

<p>Супровід, наповнення, виявлення критичних помилок коду</p>

<br>

<p>Послуга #3 - <i>Розкручування сайту</i></p>

<p>Ріст сайту у рейтингах та у видачі результатів пошуковців</p>

<hr>

</div>

Рисунок 1.72 - Вигляд сторінки з послугами

Запускаю файл template і зберігаємо його з іменем contact.php у кореневій папці сайту. Тут буде інформація про контакти для зв’язків з компанією.

Тепер ввожу дані в робочу область.

Код має вигляд:

<center><h1>Наші контакти:</h1></center><hr>

<h2>Наша компанія розташовується за адресою:</h2>

<pre>

м. Тернопіль

вул. Руська 53

ЗАТ Політех

</pre>

Наший сайт - <a href="#"870102.files/image073.jpg">

Рисунок 1.73 - Вигляд сторінки з контактами

Запускаю файл template і зберігаємо його з іменем help.php у кореневій папці сайту. Тут будь найпопулярніші питання і відповіді.

Тепер ввожу дані в робочу область.

Код має вигляд:

<center><h1>Питання - Відповіді:</h1></center><hr>

<h2>Часті питання та відповіді:</h2>

<p><b>1. У Вас є тестовий період?</b></p>

<p><i>Так. 14 днів.</i></p>

<p><b>2. Які Ваші гарантії?</b></p>

<p><i>Наша компанія є учасником і переможцем багатьох ІТ-конкурсів, що підкреслює професіоналізм наших програмістів. Окрім цього, якщо ми не виконаємо поставлене завдання, то повернемо Вам гроші.</i></p>

<p><b>3. У Вас є інтернет-магазин?</b></p>

<p><i>Ні.</i></p>

<hr>

Рисунок 1.74 - Вигляд сторінки з питаннями і відповідями

Запускаю файл template і зберігаємо його з іменем guestbook.php у кореневій папці сайту. Тут буде розміщуватися книга відвідувачів.

Тепер ввожу дані в робочу область.

Код має вигляд:

<center><h1>Книга відвідувачів</h1></center><hr>

<h2>Тут ви можете залишити відгук про роботу нашої компанії:</h2>

<div style="width: 100%; margin: 0 auto;">

<form action="addMessage.php" method="post">

Ваше ім'я:<br>

<input type="text" name="guestName" placeholder="Ваше ім'я" style="width: 100%;"><br><br>

Текст Вашого повідомлення в книзі відвідувачів:<br>

<textarea name="messageText" placeholder="Текст повідомлення" style="width: 100%; height: 100px;">

</textarea><br><br>

<input type="submit" value="Залишити повідомлення в книзі відвідувачів!" style="width: 100%;">

</form><hr><br>

<?php

// подключення до бази даних

$connect = new mysqli('localhost', 'root', '', 'guestbook');

// отримуємо список всіх повідомлень

$result = $connect->query("select * from guestbook");

// вираховуємо кількість отриманих записів

$countMessage = $result->num_rows;

// якщо кількість записів в базі даних більше, то її виводимо($countMessage > 0)

{

// переглядаємо весь масив отриманих даних($i = 0; $i < $countMessage; $i++)

{'<div style="border: 1px solid green;">';

// витягаю дані

$message = $result->fetch_object();

// виводжу дані у потрібному виді"<b>".$message->guestbook_user_name.": </b><br>";$message->guestbook_message_text."<br>";"Дата: ".$message->guestbook_data."<br>";'</div><br>';

}

}

?>

</div><hr>

Рисунок 1.75 - Вигляд книги відвідувачів

На цьому створення сторінок сайту завершене.

.6 Створення сайту на основі системи управління вмістом

Також можна скористатися не власними сторінками, а спеціальними "двигунами" - системами керування вмісту.

Систе́ма керува́ння вмі́стом (СКВ; англ. <#"870102.files/image076.jpg">

Рисунок 1.76 - Завантаження CMS WordPress

2. Після завантаження архіву його необхідно розпакувати.

Рисунок 1.77 - Розпаковування архіву

. Файл-конфігурації

Рисунок 1.78 - Початок встановлення WordPress’у

. Початок встановлення WordPress’у.

Перед початком потрібно ввести необхідну інформацію в базу даних. Де потрібно знати наступні речі.

·      ім'я бази даних;

·              ім'я користувача бази даних;

·              пароль до бази даних;

·              адреса сервера бази даних;

·              префікс таблиць (якщо ви хочете запустити більш ніж один WordPress на одній базі).

Рисунок 1.79 - Установлювач CMS

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

Рисунок 1.80 -Створення таблиці в phpmyadmin

. На цій сторінці необхідно ввести свої дані, які я вводив в phpmyadmin.

Тепер необхідно ввести:

·        ім'я бази даних (ім'я бази даних, до якої треба встановити WP);

·              ім'я користувача (MySQL логін);

·              пароль (пароль до MySQL);

·              хост бази даних (це поле потрібно заповнити коли localhost спрацьовує);

·              префікс для таблиць (якщо є необхідність одночасно мати кілька інсталяцій WordPress’у в одній базі даних).

Рисунок 1.81 - Введення даних

. Перевірка введених даних. Це повідомлення вказує, що усі дані введено коректно і можна продовжити і розпочати встановлення CMS WordPress.

Рисунок 1.82 - Перевірка введених даних

. Далі необхідно ввести дані про сайт. Такі як:

·    заголовок сайту;

·              логін;

·              пароль;

·              перевірка паролю;

·              електронний адрес пошти;

·              приватність.

Рисунок 1.83 - Введення даних про сайт

9. На цьому встановлення закінчено.

Рисунок 1.84 - Закінчення встановлення

Тепер можна ввійти на свій новостворений сайт, або в адмін-панель.

На головній сторінці міститься:

Ліве меню, яке має:

·    Заголовок сайту;

·              Останні публікації;

·              Останні коментарі;

·              Архіви;

·              Категорії.

А також є робоча область, на якій розміщуються блоги. За замовчуванням система створює один тестовий блок з назвою Привіт світ.