Механізм створення динамічних Web-сторінок

КУРСОВА РОБОТА по дисципліні:

" Програмування та підтримка Web-застосувань"

3-й семестр на тему:

" Механізм створення динамічних Web-сторінок «

Анотація

В курсовій роботі був розроблений web-сайт «Творча майстерня SakhNYAsha design studio». Цей web-сайт може зацікавити багатьох, адже пропонує широкий вибір хенд-мейд виробів із полімерної глини.

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

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

Зміст

• Вступ
• 1. Опис предметної області
• 2. Реалізація поставленого завдання
• 2.1 Структура клієнтської частини
• 2.2 Вибір елементів HTML4 і HTML5 для представлення контенту
• 2.2.1 Структурування інформаційного наповнення сайту
• 2.2.2 Стилізація
• 2.2.3 Використання форм
• 2.2.4 Введення елементів HTML5 та CSS3
• 2.2.5 Використання svg-графіки
• 2.3 Забезпечення взаємодії серверної частини web-додатків з клієнтською частиною
• 2.3.1 Програмування скриптів на стороні клієнта засобами JavaScript
• 2.3.2 Серверна частина web-додатку
• 2.3.2.1 Використання PHP та бібліотек jQuery і Ajax
• Висновки
• Посилання та література
• Додатки

Вступ

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

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

Отримати уявлення про те, як виглядає код HTML можна якщо відкрити в браузері будь-яку web-сторінку і переглянути код HTML. При цьому можна побачити, як створена та чи інша сторінка — це стане в нагоді при розробці HTML документів. Однак не варто захоплюватися тільки цією стороною навчання HTML, щоб створювані документи не були погіршеним варіантом чужих сторінок.

PHP (англ. PHP: Hypertext Preprocessor — PHP: гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools — скриптова мова програмування, була створена для генерації HTML — сторінок на стороні web-сервера.

PHP — мова, яка може бути вбудована безпосередньо в HTML-код сторінок, які, в свою чергу коректно будуть оброблені PHP-інтерпретатором. Механізм РНР просто починає виконувати код після першої екрануючої послідовності ( ).

JavaScript — назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипного програмування.

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

AJAX (Asynchronous JavaScript And XML) — підхід до побудови користувацьких інтерфейсів web-додатків, за яких web-сторінка, не перезавантажуючись, у фоновому режимі надсилає запити на сервер і сама звідти довантажує потрібні користувачу дані. AJAX — один з компонентів концепції DHTML.

сайт інформація стилізація елемент

1. Опис предметної області

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

Тому тема курсової робити присвячена екологічно чистим продуктам, а точніше — Творчій майстерні «SakhNYAsha design studio», яка виготовляє прикраси з полімерної глини — екологічно чистого матеріалу. Загалом, вироби з такого матеріалу є досить міцними, легкими, довго носяться і виглядають ефектно, незважаючи на їх невисоку собівартість. До того ж такі вироби є досить популярними і поширеними у всьому світі, адже полімерна глина у широкому продажі з’явилася у 1964р. і досі не втрачає своєї популярності. Вироби з полімерної глини дуже популярні у дівчат-підлітків, досить часто такі вироби обирають як подарунки, як предмети інтер'єру та декору, як весільні букети і т.п. Тому займатись таким ділом прибутково вигідно.

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

2. Реалізація поставленого завдання

2.1 Структура клієнтської частини

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

Сайт складається з головної сторінки та меню яке має посилання на інші сторінки: «Головна», «Новини», «Майстер-класи», «Каталог виробів», «Контакти», «Блог майстра» (Рисунок 1).

Рисунок 1. Структурна схема сайту

" Головна" - стартова сторінка, на які розміщені посилання на інші розділи та присутні посилання на сторінки «ВКонтакте», посилання на ресурс «Вікіпедія» та вхід для адміністратора сайту (Рисунок 2).

Сторінка новин містить в собі такі новини: надходження тих чи інших виробів, оновлення асортименту, найближчі виставки та майстер-класи, посилання зовнішні ресурси (на сайти виставок та ін.).

Сторінка «Блог майстра» має таку ж структуру що і сторінка «Новини» (Рисунок 3).

Рисунок 2. Макет головної сторінки

Рисунок 3. Макет сторінки новин

Сторінка «Каталог виробів» містить в собі посилання на такі підрозділи (категорії): Сережки, Кулони і буси, Персні, Брошки, Браслети, Різне. Кожен підрозділ представлений тематичним набором ілюстрацій. Таку ж саму структуру має і сторінка «Майстер-класи» (в ролі підрозділів — назви майстер-класів) (Рисунок 4, Рисунок 5).

Рисунок 4. Макет сторінки

Рисунок 5. Макет сторінки

" Каталог виробів" «Майстер класи»

Сторінка «Контакти» містить посилання на зовнішні ресурси (пошту майстра) (Рисунок 6).

Рисунок 6. Макет сторінки «Контакти»

2.2 Вибір елементів HTML4 і HTML5 для представлення контенту

2.2.1 Структурування інформаційного наповнення сайту

В мові розмітки HTML був визначений стиль заголовків і розміщений на сторінках сайту. Використовувались теги

,

,, які були необхідні для редагування тексту.

Визначені гіпертекстові посилання між сторінками.

Текстове наповнення головної сторінки складається із звернення до відвідувачів сайту, опису матеріалів, рубрики «Новинки», «Акції» та контактів (в кінці сторінки).

Сторінка новин містить в собі такі новини: надходження тих чи інших виробів, оновлення асортименту, найближчі виставки та майстер-класи та ін.

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

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

Сторінка «Блог майстра» представляє собою online-щоденник майстра, тобто інформаційне наповнення залежить від майстра.

Текстове наповнення сторінки контактів — це посилання на групу ВК та e-mail майстра.

2.2.2 Стилізація

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

На основі банерів було реалізовано карти-зображення (верхній банер — посилання на головну сторінку сайту, нижній банер — посилання на групу ВК та пошту).

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

Сторінки «Новини», «Майстер-класи» та «Блог майстра», «Каталог виробів» містять окремі блоки (таблиці) з інформацією, посиланнями та зображеннями.

Сторінки контактів повністю реалізована за допомогою однієї таблиці, в комірках якої розміщені інші елементи (таблиці, зображення, текст і т.д.)

2.2.3 Використання форм

В даній курсовій роботі використовувалися форми. Це потрібно для того, щоб можна було зайти на сайт, зареєструватися на сайті, залишити коментар або ж зв’язатися з майстром.

На сторінці «Контакти» було реалізовано форму «Зв'яжіться зі мною», яка включає такі поля: «Прізвище», «Ім'я», «E-mail», «Пароль», «Рік народження», Стать, поле вводу повідомлення та кнопок «Відправити», «Відмінити» .

Поля «Прізвище», «Ім'я», «E-mail», «Пароль», «Рік народження» є обов’язковими для заповнення. Якщо хоча б одне з полів не заповнене, то браузером видається повідомлення про обов’язковість цього поля. Поле «Рік народження» дає змогу вибрати дату свого народження за допомогою спеціальних кнопок. Значення цього поля від 1910 до 2013 року. При вводі неправильних даних браузер видає відповідне повідомлення.

2.2.4 Введення елементів HTML5 та CSS3

В даній роботі використовувалися такі теги як