Розробка інформаційного web-ресурсу громадської організації 'Файне місто' на основі технології PHP MYSQL
1. Аналіз технічного завдання
Завданням дипломного проекту є розробка
інформаційного web-ресурсу громадської організації "Файне місто" на
основі технології PHP MYSQL. Код htcehce буде на мові php з використанням HTML
розмітки, CSS-стилів та p використанням СУБД MYSQL. Розробка дизайну
здійснюватиметься за допомогою Adobe Photoshop CS4, Paint, NET та матеріалів із
мережі Інтернет. Інформаційний web-ресурс складатиметься з головної сторінки,
про організацію, проекти, заявки на вступ в організацію, контакти, пошук на
сайті, реєстрації та сторінки адміністрування.
Створений web-ресурс буде інформувати про цілі,
пріоритети, програмні напрямки, конкурси та підтримані проекти організації.
Сайт буде інтегрованим із соціальними мережами та містити зручні засоби зворотного
зв’язку з аудиторією, стимулювати отримання відгуків від неї. А наявність бази
даних дасть можливість не лише швидко та легко оновлювати інформацію на сайті
(новин, проектів), а й надійніше зберігати та використовувати інформацію.
.1 Найменування та область застосування
Тернопільська Міська Молодіжна Громадська
Організація "Файне місто" (скорочено ТММГО "Файне місто") є
однією із найактивніших організацій у тернопільській області, у своїй
діяльності обирають напрямки дотичні до інтересів сучасної молоді. Одним із
головних принципів є не залишатись осторонь від будь-яких процесів, що
відбуваються у рідному місті.
У наші дні, дні прогресивного розвитку
комп’ютерної техніки, усі сучасні організації розуміють необхідність
використання комп’ютерів та оргтехніки. В наш час мережеві технології досить
розвинені, то має сенс використовувати мережу та Інтернет. Адже у такий спосіб
комунікації організації зростають у багато разів.
Також варто відмітити, що коли організації
потрібно розповсюдити інформацію про свою діяльність web-ресурс - це найбільш
гарне та правильне рішення. Представництво в глобальній мережі набуло
невід’ємної атрибутики сучасного і успішного ведення справ, оскільки з кожним
днем все більше людей першочергово звертаються до Інтернету у пошуках
якіснішого та вигіднішого способу задоволення власних культурних, соціальних та
матеріальних потреб.
Саме на офіційному веб-сайті організації
потенційний контрагент матиме змогу дізнатися про специфіку її діяльності, і
все це - всього за кілька хвилин. web сайт місто
соціальний
В сучасних умовах господарювання веб-сайт став
не тільки правилом хорошого тону, а й необхідним засобом для підвищення
конкурентних переваг в будь-якому секторі діяльності. На сьогоднішній день
практично кожна організація має власний веб-сайт. В умовах використання
сучасних інформаційних технологій - це необхідний чинник існування, що дозволяє
розширити поле рекламної діяльності і привернути тим самим більшу кількість
громадян до своєї діяльності.
Завданням дипломного проектування є розробка
інформаційного web-ресурсу громадської організації "Файне місто".
Даний web-ресурс буде написаний на мові PHP з використанням HTML розмітки, CSS
стилів та системою керування базами даних MYSQL. Інформаційний web-ресурсу має
забезпечувати реалізацію наступних задач:
- Швидке і ефективне розповсюдження
інформації про себе і свою діяльність.
- Надання користувачам інформації та
інших матеріалів, завдяки яким у користувачів має сформуватися правильне
уявлення про діяльність і можливості організації.
Швидка інформаційна та сервісна
підтримка за допомогою зворотного зв'язку, надання користувачам можливості
задавати питання і отримувати відповіді.
Формування бази поширених питань,
створення сторінки - "питання", щоб уникнути багаторазових відповідей
на одні й ті ж питання.
Метою розробки інформаційного web-ресурсу є
створення ефективного та зручного у користуванні ресурсу зовнішньої комунікації
та презентації доробку організації для громадянського суспільства України та
усіх зацікавлених.
Сайт повинен інформувати про цілі, пріоритети,
програмні напрямки, конкурси та підтримані проекти організації. Сайт має бути
інтегрованим із соціальними мережами та містити зручні засоби зворотного
зв’язку з аудиторією, стимулювати отримання відгуків від неї.
Сайт має бути достовірним, авторизованим
джерелом інформації про організацію як для партнерів організації, які постійно
відвідуватимуть цей веб-ресурс (громадських організацій, працівників органів
влади, журналістів), так і усіх зацікавлених громадян, які із діяльністю
організації стикатимуться вперше.
При розробці інформаційного сайту слід розуміти,
що він повинен бути наповнений актуальною інформацією і часто оновлюватися.
Також ресурс повинен мати привабливий дизайн і професійну графіку.
.2 Призначення розробки
Інформаційний web-ресурс призначений для
представлення громадської організації "Файне місто" в мережі
Інтернет, а також з метою впровадження ефективного та зручного у користуванні
ресурсу зовнішньої комунікації та презентації доробку організації для громадянського
суспільства України та усіх зацікавлених.
1.3 Стадії та етапи розробки
. Розробка дипломного проекту
відбуватиметься ступенево. Перш за все створюється макет майбутнього
web-ресурсу: вигляд, фон, кольорова палітра, оптимальний шрифт, його розмір.
Розробляється структура посібника.
. Створення веб-проекту, структури папок
та файлів, налаштування додаткових ресурсів.
. Створення структури сторінок та
взаємозв’язків між ними.
. Написання HTML коду MasterPage та
інтерфейсу решти сторінок.
. Написання програмного коду MasterPage,
сторінки реєстрації, входу в систему.
. Налаштування доступу до бази даних SQL
Server.
. Написання програмного коду решти
сторінок.
. Збір сайту, розробка титульної сторінки
та (за бажанням) розміщення його в Інтернеті. Весь графічний, анімаційний,
звуковий та програмний матеріал компілюється в готовий продукт: мультимедійний
ресурс web-ресурсу.
. Тестування та відладка. Готовий
web-ресурсу тестується на наявність помилок веб-програмування, орфографічних
помилок і невідповідності технічному завданню.
.4 Порядок та контролю прийому
Порядок здачі-прийому готового web-ресурсу
повинен проводитися приймальною комісією, до складу якої мають входити
представники замовника та виконавця, протягом трьох робочих днів після
завершення робіт. Результати роботи комісії повинні оформлятися актом,
підписаним членами комісії та затвердженим замовником. При чому, чим ретельніше
обумовлені всі питання на етапі узгодження технічного завдання на створення
web-ресурс або його дизайн, тим менша ймовірність того, що при здачі готового
сайту у замовника можуть виникнути які-небудь питання.
Як відомо, вдосконаленню немає меж. Робота над
web-ресурс може тривати нескінченно довго. Будь-який веб-продукт можна постійно
вдосконалювати, і в цьому немає нічого незвичайного.
При прийманні готового сайту замовники повинні
найперше звернути увагу на такі параметри:
- обсяг текстової інформації в
друкованих знаках з пробілами, кількість;
- обсяг робіт зі створення
електронного посібника або зміни його дизайну, які визначаються відповідними
договорами;
- внесення змін до договору
здійснюється відповідно до законодавства.
Щоб максимально виключити можливість
невідповідності готового сайту естетичним очікуванням замовника, останній
зобов'язаний завчасно надати в розпорядження веб-дизайнера контент сайту (текст
сайту, таблиці сайту і графіку сайту).
При цьому слід враховувати наступне: перед
здачею проекту замовникові, виконується його повне тестування, що включає
тестування роботи web-ресурсу в різних браузерах, тестування посилань
(перевірка на "биті посилання"), тестування сайту під навантаженням
та інші перевірки.
.5 Аналіз вимог до web-ресурсу
В дизайні буде передбачено наявність окремих
стилів для певних типів інформації (наприклад, для контактної інформації новин
та публікацій). Дизайн сайту - дуже важливий елемент впливу на
Інтернет-аудиторію. При створенні і розробці веб-дизайну, буде звернено увагу
на комфортне і зручне сприйняття інформаційного змісту сайту. Текст не повинен
зливатися з фоном сторінки, інакше він буде не читабельним. А це негативним
чином позначиться на популярності веб-ресурсу. Також великі тексти, для
забезпечення зручного читання, буде розділено на глави і підзаголовки.
Веб-дизайн (від англ. web design) - візуальне
оформлення веб-сторінок. Він відіграє таку ж роль для сайту, як поліграфічний
дизайн і верстка для паперового видання. У широкому розумінні
"веб-дизайном" називають веб-розробку, тобто створення сайту взагалі,
проектування структури, навігації, а іноді і системи управління сайтом.
Основним завданням дизайну є:
• Ергономіка -
легкість у використанні об'єкту дизайну
• Інтерфейс
користувача - психологічні особливості оператора, працюючого з об'єктом дизайну
• Останні
тенденції - застосування нових технологій в дизайні для спрощення його інших
завдань.
Функції, які виконує дизайн веб-ресурсу:
- Залучення
увага відвідувачів сайту за допомогою кольорових рішень, шрифтового оформлення,
графічних елементів, анімації;
- Створення
унікального зовнішнього вигляду, який відрізняє компанію від конкурентів;
- Дає
можливість ефективно розмістити вичерпне інформаційне наповнення, яке буде
доступним і читабельним.
Інформаційний web-ресурсу повинен забезпечувати
коректне відображення даних в різних браузерах. Щоб сайт однаково виглядав в
популярних браузерах (Internet Explorer, FireFox, Opera, Chrome та інших),
причому самих різних версій, про це слід подбати від початку роботи над
проектом. По-перше, необхідно визначитися, які браузери будуть залучені. Слід
вивчити статистику відвідувань сайтів (наприклад, зі схожою тематикою), в якій
зазначено відомості, якими браузерами користувалися його відвідувачі. Таку
можливість надає наприклад, сервіс Google Analytics. Після визначення
популярних за статистикою браузерів їх варто встановити на свій комп’ютер. Різні
браузери хоч і дотримуються загальних правил та стандартів, але іноді в них
застосовуються різні алгоритми обробки HTML-кодів чи правил CSS. Тому, не
завжди один і той же елемент виглядає однаково в різних браузерах.
Список наступних браузерів, в яких web-ресурс
має відображатись коректно:
· Internet Explorer (версія 6 та вище);
· Opera (версія 9 та вище);
· Mozilla Firefox (версія 3.0 та вище)
· Safari.
· Google Chrome
Первинна розробка та верстка контенту
інформаційного web-ресурсу повинна здійснюватися силами Виконавця при
безпосередній участі Замовника. Замовник надає всі необхідні Виконавцю текстові
та графічні матеріали, а також коментарі, що стосуються їх змісту, об’єму,
оформлення та розміщення. У тексті не повинно бути орфографічних помилок, друкарських
недоречностей, використання різних елементів в межах одного тексту (наприклад,
різних термінів для одного і того ж поняття), це може заплутати читача. Текст
необхідно оптимізувати під пошукові системи - додати (органічно вписати)
достатньо багато ключових слів і виразів.
Веб-зображення на сайті створити нескладно, але
до їх розміщення та оптимізації варто підходити грамотно, щоб б отримати з
графіки на сайті максимальну вигоду. Зображення привертають увагу і можуть
збити з пантелику. Використання графіки на сайті має свої мінуси і відповідно
плюси. Графічні зображення, які є частиною змісту сторінки сайту, можуть
вимагати детальнішого опису, який виходить за рамки можливостей альтернативного
тексту. Бажано надавати текстового опису інформації зображення з використанням
посилань на сторінки або підписів до малюнків.
Система управління контентом web-ресурсу повинна
забезпечити адміністратору інформаційного web-ресурсу можливість виконання
наступних дій:
· додавання и видалення текстів
(статей);
· редагування текстів (статей);
· додавання и видалення новин;
· редагування новин;
· управління відображенням новин;
· редагування мета-даних разділів
(службова інформація для покращення індексації web-ресурсу пошуковими
системами).
Зміни дизайну та структури web-ресурсу, а також
доробка існуючого та створення нового функціоналу повинна відбуватись у
відповідності з окремими договорами на вказані види робіт.
На проекті повинна бути зручна навігація і
побудова інформації, повинні бути виділені категорії і бути присутнім пошук для
зручності користувачів, так як обсяги інформації великі.
· всі імена фалів повинні складатися з
маленьких літер латинського алфавіту та (або) цифр, без пропусків. Дозволяється
використання знаків підкреслювання;
· файли графічних зображень повинні
мати роздільну здатність не більше, ніж 2048 на 1536 пікселів (більший розмір
тільки у виключних випадках) для повноформатних зображень; та не більше ніж 640
на 480 пікселів для ескізів на сайті. Допустимі формати файлів - JPG, PNG, GIF,
використання формату BMP не дозволяється;
Для проекту на момент написання web-ресурсу
сервіс Liveinternet видавав таку статистику ( показані рядки, що мають частку в
статистці більше 5 відсотків):
366 × 768 - 23.7 %
1280
× 1024 - 15.1% 1024 × 768
- 14.7 %
1280
× 800 - 9.5% 1920 ×
1080 - 8.4 % 640 × 480 - 6.2 %
1600
× 1200 - 5.9 %
Як видно зі статистики, переважна більшість
користувачів використовує монітори з дозволом шириною від 1280 пікселів і вище.
Проте, якщо звернути увагу на рядок де відсоток становить: 14,7% має дозвіл
1024 пікселів. Це в середньому кожен шостий/сьомий користувач - досить великий
відсоток, який має сенс враховувати. Виходячи з цього, що ширина сайту не
повинна перевищувати 1024 пікселів, інакше кожному шостому відвідувачеві буде незручно
користуватися web-ресурсом. Однак 1024 пікселя - це дозвіл монітора, а фактично
площа сторінки в браузері менша, так як частина екрану з'їдає смуга прокрутки
(скролл) - це близько 24 пікселів. Отже, наша сторінка повинна відкриватися не
більше, ніж на 1000 пікселів. Таким чином, найбільш оптимальною шириною є 1000
px.
2. Аналітичний огляд існуючих рішень
ресурси створюються з використання
гіпертекстових технологій та технологій мультимедіа. Наведемо стислу
характеристику цих технологій.
Стандартна узагальнена мова розмітки SGML -
нащадок розробленої в 1960 році в IBM мови GML (від англ. Generalized Markup
Language).
Спочатку SGML була розроблена для можливості
спільного використання документів, що мають читатися машинами, у великих
урядових та аерокосмічних проектах. Також вона широко використовується в
печатній та видавничій сферах, але складність документа ускладнила його широке
розповсюдження для повсякденного використання.надає множину варіантів
синтаксичної розмітки для використання різними прикладними програмами. Змінюючи
декларацію SGML можна навіть відмовитись від використання кутових дужок, хоча,
цей синтаксис вважається стандартним.
В 1980 році фізик Тім Бернерс-Лі, який був
підрядником у ЦЕРНі, запропонував і розробив прототип ENQUIRE, систему для
вчених та дослідників ЦЕРНу для використання документів та обміну даними. В
кінці 1990 року Бернерс-Лі узагальнив та написав програмне забезпечення HTML
для браузерів та серверів.
Першою публічною згадкою про HTML був документ
"HTML Tags" вперше викладений в Інтернеті Бернерсом-Лі наприкінці
1991 року. В ньому описувалось 20 елементів включаючи початковий, відносно
просте оформлення. За винятком гіперпосилання будова HTML була дуже схожа з
SGML. Тринадцять з тих елементів до сих пір використовуються в HTML 4.- це мова
розмітки, яку браузери використовують для відображення та опису тексту,
зображень та даних іншого типу. Базова характеристика роботи з HTML описана в
самому браузері, але також може бути змінена чи розширена за допомогою CSS -
каскадних таблиць стилів.
Документи HTML складаються повністю з елементів
HTML, що зазвичай складаються з трьох елементів: відкриваючого та закриваючого
тега, атрибутів всередині відкриваючого тега а також текстової чи графічної
інформації між відкриваючим та закриваючим тегом, нерідко інших елементів HTML.
Елементом HTML вважається все, що знаходиться всередині тега, включаючи сам
тег. Кожен тег поміщується в трикутні дужки.підтримує декілька типів даних,
наприклад: сценарії та стилі, а також безліч типів даних для атрибутів
елементів, таких як: унікальний номер, ім’я, посилання, цифри, мови, кольори,
кодування дата та час та ін.
Розширювана мова розмітки гіпертексту XHTML -
мова розмітки, що має таку саму виразну силу як і HTML але відповідає
синтаксичним правилам XML.
XHTML 1.0 є "реформулюванням
трьох типів документів стандарту HTML 4 засобами XML 1.0". W3C також
продовжує підтримку Рекомендації HTML 4.01 та активну роботу над специфікаціями
стандартів HTML 5 <#"870093.files/image001.jpg">
Рис. 4.1
Сторінка першого ряду може містити:
- Головна , яка
складається з горизонтального меню та останніх новин. Такі сторінки мають
фреймову структуру і для зручності користування розбиті на дрібні підтеми.
- Про організацію -
тут знаходиться вся інформація про діяльність громадської організації.
- Відділи - містить
інформацію про структуру організації, її відділи та опис кожного з відділів чим
він займається.
- Заявки на вступ, в
даному розділі знаходиться інформація та умови подання заявки на всеп в
організацію, а також форма подачі заявки.
- Контакти в цьому
пункті меню знаходиться всі контакти організації за якими можна зв’язатися з
потрібним відділом чи головою організації а також дізнатись місце знаходження
організації.
Структурну схему сторінки
web-ресурсу можна побачити на рисунку 4.2.
Рис. 4.2
Структура сторінки складатиметься з
наступних блоків:
- Шапка сайту, в якій
буде знаходитись логотип організації та слоган;
- Горизонтальне меню
складається з пунктів меню;
- Контент, це основна
область сторінки в якій буде відображатись різна інформація, така як: новини,
події, форма реєстрації адміністратора і т.д.
- Пошук на сайті буде
полегшувати пошук потрібної інформації на сайті результати будуть виводитись в
блок контент;
- Партнери, в цьому
блоці буде відображено логотипи партнерів громадської організації;
- Реклама, тут будуть
розміщені банери;
- Футер, в цій
частині сторінки буде розміщено посилання на соціальні мережі та копірайт.
Всі сторінки створюваного сайту
повинні бути виконані в єдиному стилі , хіба що компонування текстової області
у головної сторінки може бути трохи більш складною , ніж у внутрішніх сторінок
.
Моє головне завдання полягає в тому
, щоб продумати дизайн початкової сторінки і сторінок рівня , який дозволяє
зв'язати воєдино всі сторінки сайту і з максимальною ефективністю
використовувати можливості Internet.
На даному етапі структура
веб-проекту складається з декількох папок: images - містить всі графічні
елементи сайту; css - де зберігаються файли дизайну та інтерфейсу посібника;
html файли - в файлах з таким розширенням знаходяться всі коди які відповідають
за структуру та наповненя сторінок.
Потрібно створити всі ключові
сторінки сайту, які відрізняються одна від одної структурою html-коду. Всі
ключові сторінки які є html файлами потрібно пере форматувати в tpl-файли.
Оскільки HTML - документи
записуються в ASCII -форматі , то для її створення може бути використаний
будь-який текстовий редактор. Зазвичай HTML - документ - це файл з розширенням
html або htm, в якому текст
розмічений HTML - тегами (англ. tag
- спеціальні вбудовані вказівки ). Засобами HTML задаються синтаксис і
розміщення тегів, відповідно до яких, браузер
відображає вміст Веб -документа.
Текст самих тегів Веб -браузером не
відображається. Браузер, який читає
HTML - документ, відображає його у вікні, використовуючи структуру HTML -тегів.
У кожному HTML - документі повинні бути присутніми три головні частини:
- Оголошення HTML;
- Голова документу;
- Тіло документа;
- Оголошення HTML;
<HTML> І </ HTML>. Пара
цих тегів повідомляє програмі перегляду (браузеру) що між ними укладено
документ у форматі HTML, причому першим тегом в документі повинен бути тег
<HTML> (на самому початку документа), а останнім - </ HTML> ( в
самому кінці документа).
В голові документа знаходиться
заголовок сторінки та мета дані такі як ключові слова, опис документу а також
підключення css-стилів, скриптів і т.д.
<head>
<title>Головна</title>
<meta
http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta
name="description" content="Опис"/>
<meta name="keywords"
content="Ключові слова"/>
<link rel="stylesheet"
href="css/main.css" type="text/css"/>
</head>
Даний уривок коду редагується і
зберігається в файл з розширенням tpl з таким змістом:
<head>
<title>%title%</title>
<meta
http-equiv="Content-type" content="text/html;
charset=utf-8"/>
<meta
name="description" content="%meta_desc%"/>
<meta name="keywords"
content="%meta_key%"/>
<link rel="stylesheet"
href="%address%" type="text/css"/>
</head>
Суть цього методу полягає в тому, що
в html коді заміняється всі дані які можуть змінюватись на сторінках на
спеціальні ключі.
В результаті в нас получилися такі
файли:
article.tpl
- articles.tpl
banner.tpl
form_auth.tpl
items.tpl
main.tpl
main_article.tpl
menu_item.tpl
message.tpl
number_page.tpl
pagination.tpl
reg.tpl
search_no.tpl
search_result.tpl
section.tpl
text_message.tpl
user_artitle.tpl
Коли на сервер надходить запит зі
сторони клієнта, тоді система управління генерує потрібну структуру сторінки з
даних файлів.
Але в tpl-файлах знаходиться тільки
html код, і ключі які підміняються на потрібну інформацію.
Головним файлом в даній структурі є
main.tpl в якому знаходиться обов’язків код будь якої сторінки, і має такий
вигляд.
<!DOCTYPE html>
<html>
<head>
<title>%title%</title>
<meta
http-equiv="Content-type" content="text/html;
charset=utf-8"/>
<meta
name="description" content="%meta_desc%"/>
<meta name="keywords"
content="%meta_key%"/>
<link rel="stylesheet"
href="%address%css/main.css" type="text/css"/>
</head>
<body>
<div id="heder">
<img
src="image/shapka.jpg">
</div>
<hr />
<div
id="heder_menu">
<div id="menu_h">
<ul>%menu%</ul>
</div>
<div id="serch">
<form name="serch"
action="%address%" method="get">
<table>
<tr>
<td><input
type="text" name="serch"></td>
<td><input
type="submit" name="submit"
value="пошук"></td>
<input type="hidden"
name="view" value="search">
</tr>
</table>
</form>
</div>
<div>
</div>
<div>
<hr />
<div id="content">
<div id="left">
<h3>Меню</h3>
<ul>%menu%</ul>
</div>
<div id="right">
<h3>Реклама</h3>
%banners%
</div>
<div id="center">
<div>
%top%
%middle%
</div>
%pagination%
</div>
</div>
<div>
<hr />
<div id="footer">
<p>Всі права
захищені</p>
</div>
</body>
</html>
Інтерфейс інформаційного web-ресурсу
побудований наступним чином:
- головна;
- відділи;
- про організацію;
- контакти;
Будова всіх сторінок є схожою,
відрізняється лише вміст. Всі сторінки сайту складаються з декількох частин:
- шапка сайту;
- горизонтальне меню;
- Основна частина;
- Правий сайт бар;
- Футер(підвал).
А зараз більш детально розглянемо
кожну з частин. Шапка сайту (див. рис. 4.1.3) завжди незмінна і містить назву
web-ресурсу, логотип та слоган громадської організації. Горизонтальне меню
(див. рис. 4.1.4) містить пункти головного меню розділів.
Рис. 4.1.3 Шапка сайту
Рис. 4.1.4 Горизонтальне меню.
В основній частині розташований
вміст того чи іншого розділу: чи то список новин, проектів, подій чи просто
контактна інформація чи інша інформація.
Дані сторінки всі мають схожу
структуру, відрізняється лише наповнення. Зразок сторінки з лекцією показано на
рис. 4.1.5.
Рис. 4.1.5 Основна частина
В нижній частині знаходиться футер
(підвал) сайту в якому знаходиться посилання на соціальні мережі і карта з
позначенням місця знаходження громадської організації показано на рис. 4.1.6.
Рис. 4.1.6
.2 Розробка структури бази даних
Сайт зроблений таким чином, що всі
сторінки зберігаються в базі. Що в свою чергу полегшує додавання нових пунктів меню,
сторінок, статей и т.д. Вибір потрібної сторінки з бази здійснюється шляхом
обробки переданих значень.
Рис. 4.2.1 Таблиці бази даних
База даних містить 6 таблиць (рис
3.1.), які використовуються в проекті. Таблиці my_articles, my_banners,
my_menu, my_registration, my_sections, my_user відповідають за зберігання всіх
даних web-ресурсу. Враховуючи пріоритетність зміни, додавання, видалення статей
було прийнято рішення зберігати всі тексти в базі даних. Що дозволило нам
створити динамічний сайт.
Далі розібрані окремі таблиці бази
даних докладно.
Рис. 4.2.2 Структура таблиці
my_articles.
У даній таблиці знаходяться всі
новини, події, проекти інформаційного web-ресурсу які виводяться на основну
частину.
Рис. 4.2.3 Структура таблиці
my_banners (для зберігання коду банерів на сайті)
Рис. 4.2.4 Структура таблиці my_menu
(містить меню сайту)
Рис. 4.2.5 Структура таблиці my
_registration (містить подані користувачами заявки на вступ в громадську
організацію)
Рис. 4.2.6 Структура таблиці
my_sections (зберігає інформацію про відділи громадської організації)
Рис. 4.2.7 Структура таблиці
my_user(дані адміністраторів сайту )
Меню навігації генерується
автоматично використовуючи базу даних. З бази даних отримуємо пункти менню, які
зберігається в полі tiitle таблиці my_menu (рис 1.4). У свою чергу браузер вже
отримує готовий html код, до якого застосовує клас CSS.
У результаті виходить динамічне
горизонтальне меню навігації. Додана сторінка першого рівня, автоматично
відображається в меню навігації .
Що дає можливість не змінювати
програмний код і уникати зайвих витрат, пов'язаних з викликом програміста для
додавання матеріалу на сайт.
4.3
Розробка структури web-ресурсу
У даному дипломному проекті
використовуються такі методи передачі даних:
. Метод GET. При використанні цього
методи дані передаються через рядок адреси. До URL-адреси додається знак
"?", після якого перераховуються параметри та їх значення. Наприклад:
://fainemisto.te.ua
/index.php?page_id=1
В даному прикладі скрипту index.php
передається параметр з ім’ям "page_id", значення якого рівне
"1". Для того, щоб зчитати передане значення використовується
асоціативний масив $_GET. Наприклад: $_GET[‘page_id’].
При передачі кількох параметрів за
допомогою GET-метода, вони розділяються за допомогою символа "&".
Наприклад:
<#"870093.files/image014.jpg">
Рис. 1.9 Структура веб-сервера та
веб-сайту
В якості веб-сервера використано
пакет Denwer, тому цим і обумовлена наступна структура веб-сервера:
denwer - папка містить
скрипти для запуску, перезапуску та зупинки роботи веб-сервера.
home - тут розміщуються
папки віртуальних хостів;
tmp - зберігає тимчасові
файли;
usr - у цій папці розміщуються
файли веб-сервера Apache, мови програмування PHP, сервера баз даних MySQL і
т.п.
База даних MySQL зберігається на
сервері у папці::\usr\local\mysql5\data\mybase
Всі скрипти сайту розміщуються у
папці Z:\home\faynemisto.te.ua\www.
Веб-сайт має таку структуру:
css - у папці зберігаються
каскадні таблиці стилів для нашого web-ресурсу.
data - містить графічні
файли, архіви, текстові документи, які неможливо розмістити у базі даних;
fonts - містить шрифти які
потрібні для правильного відображення тексту на сторінках ;
image - містить в собі всі
необхідні графічні матеріали, які потрібні для формування дизайну сайту.
tpl - папка яка містить в
собі файли з розширенням .tpl з яких система формує готову сторінку .
lib - у даній папці
знаходяться всі модулі, які встановлюють з’єднання з базою даних і керують
вмістом баз даних також формують всі сторінки сайту;
index.php - головний файл
сайту.
Скрипти та класи, які реалізують
ядро портальної системи.
.php
<?php_internal_encoding("UTF-8");_once
"lib/database_class.php";_once
"lib/frontpagecontent_class.php";_once
"lib/sectioncontent_class.php";_once
"lib/articlecontent_class.php";_once
"lib/regcontent_class.php";_once
"lib/messagecontent_class.php";
$db = new DataBase();
$content = new
FrontPageContent($db);;"section":
$content = new
SectionContent($db);;"articles":
$content = new
ArticlesContent($db);;"reg":
$content = new
RegContent($db);;"message":
$content = new
MessageContent($db);;: exit;
}$content->getContent();
?>_class.php
<?php_once
"config_class.php";_once
"checkvalid_class.php";DataBase{$config;$mysqli;$valid;function
__construct(){
$this->config = new Config();
$this->valid = new CheckValid();
$this->mysqli = new
mysqli($this->config->host, $this->config->user,
$this->config->password, $this->config->db);
$this->mysqli->query("SET
NAMES 'utf-8'");
}function
query($query){$this->mysqli->query($query);
}function select ($table_name,
$fields, $where="", $order="", $up=true,
$limit=""){($i =0; $i < count($fields);
$i++){((strpos($fields[$i], "(") === false) && ($fields[$i]
!= "*")) $fields[$i] = "`".$fields[$i]."`";
}
$fields = implode(",",
$fields);
$table_name =
$this->config->db_prefix.$table_name;(!$order) $order = "ORDER BY
`id`";{($order != "RAND() ") {
$order = "ORDER BY
`$order`";(!$up) $order .= " DESC";
}$order = "ORDER BY
$order";
}($limit) $limit = "LIMIT
$limit";($where) $query = "SELECT $fields FROM $table_name WHERE
$where $order $limit";$query ="SELECT $fields FROM $table_name $order
$limit";
$result_set=
$this->query($query);(!$result_set) return false;
$i = 0;($row =
$result_set->fetch_assoc()){
$data[$i] = $row;
$i++;
}
$result_set->close();$data;
}function insert($table_name,
$new_values){
$table_name =
$this->config->db_prefix.$table_name;
$query = "INSERT INTO
$table_name(";($new_values as $field => $value) $query
.="`".$field."`,";
$query =substr($query, 0, -1);
$query .=")
VALUES(";($new_values as $value) $query.=
"'".addslashes($value)."',";
$query = substr($query, 0, -1);
$query .=")";$this->query($query);
}function updata($table_name,
$upd_fields, $where){
$table_name =
$this->config->db_prefix.$table_name;
$query ="UPDATA $table_name
SET";($upd_fields as $field => $value) $query .= "`$field` =
'".addslashes($value)."',";
$query= substr($query, 0,
-1);($where) {
$query .= "WHERE
$where";$this->query($query);
}return false;
}function delete($table_name,
$where="") {
$table_name =
$this->config->db_prefix.$table_name;($where) {
$query = "DELETE FROM
$table_name WHERE $where";$this->query($query);
}return false;
}function deleteAll($table_name) {
$table_name =
$this->config->db_prefix.$table_name;
$query = "TRUNCATE TABLE
`$table_name`";$this->queet($query);
}function getField($table_name,
$field_out, $field_in, $value_in) {
$data = $this->select($table_name,
array($field_out), "`$field_in` =
'".addslashes($value_in)."'");(count($data) != 1)return
false;$data[0][$field_out];
}function getFieldOnID($table_name,
$id, $field_out) {(!$this->existsID($table_name, $id)) return
false;$this->getField($table_name, $field_out, "id", $id);
}function getAll($table_name,
$order, $up) {$this->select($table_name, array("*"), "",
$order, $up);
}function getAllOnField($table_name,
$field, $value, $order, $up) {$this->select($table_name,
array("*"), "`$field` ='".addslashes($value)."'",
$order, $up);
}function getLastID($table_name) {
$data =
$this->select($table_name, array("MAX(`id`)"));$data[0]
["MAX(`id`)"];
}function deleteOnID($table_name,
$id) {(!$this->existsID($table_name, $id)) return false;$this->delete($table_name,
"`id` = '$id'");
}function setField($table_name,
$field, $value, $field_in, $value_in) {(!$this->existsID($table_name, $id))
return false;$this->updata($table_name, array($field => $value),
"`$field_in` ='".addslashes($value_in)."'");
}function setFieldOnID($table_name,
$id, $field, $value) {(!$this->existsID($table_name, $id)) return
false;$this->setField($table_name, $field, $value, "id", $id);
}function
getElementOnID($table_name, $id){(!$this->existsID($table_name, $id)) return
false;
$arr = $this->select($table_name,
array("*"), "`id` = '$id'");$arr[0];
}function
getRandomElements($table_name, $count) {$this->select($table_name,
array("*"), "", "RAND()", true, $count);
}function getCount($table_name) {
$data =
$this->select($table_name,
array("COUNT(`id`)"));$data[0]["COUNT(`id`)"];
}function isExists($table_name,
$field, $value) {
$data =
$this->select($table_name, array("id"), "`$field`
='".addslashes($value)."'");(count($data) === 0) return
false;true;
}function existsID($table_name, $id)
{(!$this->valid->validID($id)) return false;
$data =
$this->select($table_name, array("id"),
"`id`='".addslashes($id)."'");(count($data) === 0) return
false;true;
}function __destruct()
{($this->mysqli) $this->mysqli->close();
}
}
?>
_class.php
$this->config = new Config();
$this->articles = new
Articles($db);
$this->section = new
Section($db);
$this->user = new User($db);
$this->menu = new Menu($db);
$this->banner = new Banner($db);
$this->message = new Message();
$this->data =
$this->secureData($_GET);
}function getContent() {
$sr["title"] =
$this->getTitle();
$sr["meta_desc"] =
$this->getDescription();
$sr["meta_key"] =
$this->getKeyWords();
$sr["menu"] =
$this->getMenu();
$sr["auth_user"] =
$this->getAuthUser();
$sr["banners"] =
$this->getBanners();
$sr["top"] =
$this->getTop();
$sr["middle"] =
$this->getMiddle();
$sr["pagination"] =
$this->getBottom();$this->getReplaceTemplate($sr, "main");
}protected function getTitle();protected
function getDescription();protected function getKeyWords();protected function
getMiddle();function getMenu() {
$menu =
$this->menu->getAll();($i = 0; $i < count($menu); $i++) {
$sr["title"] =
$menu[$i]["title"];
$sr["link"] =
$menu[$i]["link"];
$text
.=$this->getReplaceTemplate($sr, "menu_item");
}$text;
}function getAuthUser() {
$sr["message"] =
"";$this->getReplaceTemplate($sr, "form_auth");
}function getBanners() {
$banners =
$this->banner->getAll();($i = 0; $i < count($banners); $i++) {
$sr["code"] =
$banners[$i]["code"];
$text .=
$this->getReplaceTemplate($sr, "banner");
}$text;
}function getTop() {"";
}function getBottom() {"";
}function secureData($data) {($data
as $key => $value) {(is_array($value))
$this->secureData($value);$data[$key] = htmlspecialchars($value);
}$data;
}function getBlogArticles($articles,
$page) {
$start = ($page - 1) *
$this->config->count_blog;
$end = (count($articles) > $start
+ $this->config->count_blog)? $start + $this->config->count_blog:
count($articles);($i = $start; $i < $end; $i++) {
$sr["title"] =
$articles[$i]["title"];
$sr["intro"] =
$articles[$i]["intro_text"];
$sr["date"] =
$this->formatDate($articles[$i]["date"]);
$sr["link_article"] =
$this->config->address."?view=articles&id=".$articles[$i]["id"];
$text
.=$this->getReplaceTemplate($sr, "articles");
}$text;
}function formatDate($time)
{date("Y-m-d H:i:s", $time);
}function getMessage() {
$message =
$_SESSION["message"];($_SESSION["message"]);
$sr["message"] =
$this->message->getText($message);$this->getReplaceTemplate($sr,
"message_string");
}function getPagination($count,
$count_on_page, $link) {
$count_page = ceil($count /
$count_on_page);
$sr["number"] = 1;
$sr["link"] = $link;
$page =
$this->getReplaceTemplate($sr, "number_page");
$sym = (strpos($link, "?")
!==false)? "&": "?";($i = 2; $i <= $count_page;
$i++) {
$sr["number"] = $i;
$sr["link"] =
$link.$sym."page=$i";
$page .=
$this->getReplaceTemplate($sr, "number_page");
}
$els["page"] =
$page;$this->getReplaceTemplate($els, "pagination");
}function getTemplate($name) {
$text =
file_get_contents($this->config->dir_tmpl.$name.".tpl");str_replace("%address%",
$this->config->address, $text);
}function getReplaceTemplate($sr,
$template) {$this->getReplaceContent($sr, $this->getTemplate($template));
}function getReplaceContent($sr,
$content) {
$search = array();
$replace = array();
$i = 0;($sr as $key => $value) {
$search[$i] = "%$key%";
$replace[$i] = $value;
$i++;
}str_replace($search, $replace,
$content);
}
?>_class.php
<?php_once
"config_class.php";CheckValid {$config;function __construct(){
$this->config = new Config();
}function
validID($id){(!$this->isIntNumber($id)) return false;($id <= 0) return
false;true;
}function
validLogin($login){($this->isContainQuotes($login)) return
false;(preg_match("/^\d*/", $login)) return
false;$this->validString($login, $this->config->min_length,
$this->config->max_length);
}function
validHase($hase){(!$this->validString($hase, 32, 32)) return
false;(!$this->isOnlyLettersAndDigits($hase)) return false;true;
}function
validTimeStamp($time){$this->isNegativeInteger($time);
}function isIntNumber($number){(
!is_int($number) && !is_string($number)) return
false;(!preg_match("/^-?(([1-9][0-9]*|0))$/", $number)) return
false;true;
}function isNegativeInteger($number){(!$this->isIntNumber
($number)) return false;true;
}function
isOnlyLettersAndDigits($string) {(!is_int ($string) &&
(!is_string($string))) return false;(!preg_match("/[a-zа-я0-9]*/i",
$string)) return false;true;
}function validString($string,
$min_length, $max_length){(!is_string($string)) return false;(strlen($string)
< $min_length) return false;(strlen($string) > $min_length) return
false;true;
}function isContainQuotes($string) {
$array = array("\"",
"'", """, "'");($array as $key
=>$value) {(strpos($string, $value) !== false) return true;
}false;
}
}
?>_class.php
<?php_once
"config_class.php";_once "checkvalid_class.php";_once
"database_class.php";class GlobalClass
{$db;$table_name;$config;$valid;function __construct($table_name, $db) {
$this->db = $db;
$this->table_name = $table_name;
$this->config = new Config();
$this->valid = new CheckValid();
}function add($new_values)
{$this->db->insert($this->table_name, $new_values);
}function edit($id, $upd_fields)
{$this->db->updataOnID($this->table_name, $id, $upd_fields);
}function delete($id)
{$this->db->deleteOnID($this->table_name, $id);
}function deleteAll()
{$this->db->deleteAll($this->table_name);
}function getField($field_out,
$field_in, $value_in) {$this->db->getField($this->table_name,
$field_out, $field_in, $value_in);
}function getFieldOnID($id, $field)
{$this->db->getFieldOnID($this->table_name, $id, $field);
}function setFieldOnID($id, $field,
$value) {$this->db->setFieldOnID($this->table_name, $id, $field,
$value);
}function get($id)
{$this->db->getElementOnID($this->table_name, $id);
}function getAll($order
="", $up = true) {$this->db->getAll($this->table_name,
$order, $up);
}function getAllOnField($field,
$value, $order = "", $up = true) {$this->db->getAllOnField($this->table_name,
$field, $value, $order, $up);
}function getRandomElement($count)
{$this->db->getRandomElements($this->table_name, $count);
}function getLastID()
{$this->db->getLastID($this->table_name);
}function getCount() {$this->db->getCount($this->table_name);
}function isExists($field, $value)
{$this->db->isExists($this->table_name, $field, $value);
}
}
?>_class.php
<?phpConfig {$sitename =
"Test.local";$address = "http://fainemisto.te.ua/";$secret
="vanya1991";$host ="localhost";$db
="mybase";$db_prefix ="my_";$user
="root";$password ="";$admname ="Auksters
Ivan";$admemail = "auksters2@gmail.com";$min_login =
3;$max_login = 255;$dir_text = "lib/text/";$dir_tmpl =
"tpl/";$count_blog = 3;
}
?>_class.php
<?php_once "modules_class.php";FrontPageContent
extends Modules {$articles;$page;function __construct($db) {::__construct($db);
$this->articles =
$this->articles->getAllSortDate();
$this->page =
(isset($this->data["page"]))? $this->data["page"]: 1;
}function getTitle()
{($this->page > 1) return "Довідник PHP -
Сторінка".$this->page;return "Довідник PHP";
}function getDescription()
{"Довідник PHP.";
}function getKeyWords()
{"Довідник PHP, Довідник PHP функцій";
}function getTop()
{$this->getTemplate("main_article");
}function getMiddle()
{$this->getBlogArticles($this->articles, $this->page);
}function getBottom()
{$this->getPagination(count($this->articles),
$this->config->count_blog, $this->config->address);
}
}
?>