Курсовая работа (т): Технічне створення Web-додатків за допомогою Ajax

Технічне створення Web-додатків за допомогою Ajax

Зміст

Список умовних позначень та скорочень

Вступ

. Розробка інтерактивного інтерфейсу web-додатків засобами бібліотеки Codeigniter та технології Ajax

.1 Загальнi вiдомостi про Ajax

.2 Переваги технології Ajax

.3 Недоліки технології Ajax

.4 Взаємодія у Web за допомогою Ajax

.5 Суть Ajax-підходу

.6 Інтернет-проекти на основі AJAX-технології

. Загальна інформація про програмні бібліотеки підтримки розробки Web - додатків

.1 Каркас додатків CodeIgniter

.2 Асинхронний обмін даними засобами Ajax

. Ініціалізація проекту та обробка запиту засобами Codeigniter

.1 Ініціалізація обробки запиту засобами CodeIgniter

.2 Приклад застосування CodeIgniter для задачі аутентифікації користувача

.3 Приклад використання бібліотеки CodeIgniter для обміну даними засобами Ajax

. Економічна частина

. Частина з охорони праці

Висновки

Список використаних джерел

Список умовних позначень та скорочень

- Asynchronous JavaScript And XML (Асинхронний JavaScript і XML)- Всесвітня павутина- Extensible Markup Language (Розширювана мова розмітки)- HyperText Markup Language (Мова розмітки гіпертексту)- JavaScript Object Notation (Об'єктний запис JavaScript)- Comma-Separated Values- HyperText Transfer Protocol (Протокол передачі гіпертексту)- Document Object Model (Об'єктна модель документа)- Dynamic HyperText Markup Language- Hypertext Preprocessor (Гіпертекстовий препроцесор)

JAVA - Об'єктно-орієнтована <#"786525.files/image001.gif">

Рисунок 2.1 Схема виконання програми Codeigniter

Комплект файлів Codeigniter об’єднується в групи ієрархічно поєднаних каталогів в залежності від функціонального призначення. Головним каталогом додатку є Application. Ядро системи відповідно розташоване у System (рисунок 2.2).

Рисунок 2.2 - Файлова структура проекту Codeigniter

Файл іndex.php Модуль маршрутизації Модуль кешування Модуль безпеки вхідних даних Подання додатку Контро- лер додатку Моделі додатку Бібліотеки Допом. функції Розширення HTTP-запит HTTP-відповідь (рисунок 2.1) Схема виконання програми CodeIgniter

Файлова структура проекту CodeIgniter

Комплект файлів CodeIgniter об‘єднується в групи ієрархічно поєднаних каталогів в залежності від функціонального призначення. Головним каталогом додатку є Application. Ядро системи відповідно розташоване у System (рисунок 2.2).

Конфігураційні файли проекту Контролери проекту Моделі проекту Подання проекту Файли Web-додатку Налаштування з’єднань з БД Налаштування маршрутизації URL Загальні параметри конфігурації Власні бібліотеки розробника Файли перекладу текстових фрагментів Файли ядра CodeIgniter.

З рисунока 2.2 видно, що різноманітні налаштування проекту групуються в окремі файли php, зокрема, налаштування бази даних зберігаються у database.php, маршрутизація URL - у routes.php тощо. Це дозволяє змінювати різноманітні лаштунки безпосередньо в процесі функціонування Web-додатку, не змінюючи склад файлової системи та не запускаючи додаткових командних файлів, що часто буває критичним при використанні орендованого дискового простору на сервері для Web-проектів. Крім того, на рисуноку 2.2 напівжирним шрифтом виділено блоки проекту, які реалізовує безпосередньо програміст. Найголовнішими з них є:

-        контролери (controllers), які є точками входу при виконанні обробки відповідного запиту;

-        моделі (models), які уніфікують доступ до зовнішніх даних (баз даних, файлів, мережних служб тощо);

-        подання (views), які зберігають шаблони Web-сторінок, відокремлюючи дизайн від інформаційного вмісту HTML-документу.

Контролери

Вибір контролера, якому передається управління при обробці запиту користувача, визначається URL-адресою запиту. Типова структура URL-адреси має наступний вигляд (рисунок 2.3):

Рисунок 2.3. Формат URL-адреси, що застосовується в CodeIgniter

адреса має фіксований формат, як показано на рисуноку 2.3. Першим параметром є назва контролера проекту, якому передається управління, далі метод у класі контролера, і остання частина - параметри, які отримає метод контролера.

Приклади:

-        #"786525.files/image005.gif">

Рисунок 3.1 - Результат обробки стартової сторінки проекту-зразка

Алгоритм обробки полягає у наступному. Web-сервер, отримавши запит, передає його на виконання файлу index.php, який знаходиться безпосередньо в htdocs. Оскільки в URL не міститься жодного уточнення після index.php, то застосовуються налаштування за умовчанням, вказані в конфігураційному файлі routes.php:

$route['default_controller'] = 'welcome';

Завдяки цьому, управління передається у контролер Welcome з файлу application/controllers/welcome.php (за домовленістю назва файлу і класу має співпадати, але назва класу записується з великої літери). Код файлу welcome.php представлено:

Рисунок 3.2. Код файлу-контролера welcome.php

Основу файлу welcome.php складає клас Welcome, успадкований від CI_Controller - базового класу для всіх контролерів проекту. Суттєвим методом в ньому є index(), оскільки саме цей метод викликається за замовчуванням у випадку, коли URL не містить додаткових елементів, крім …/index.php. В цьому методі записано код:  $this->load->view('welcome_message');

-        який означає, що необхідно передати управління компоненту подання (view) з назвою файла welcome_message.php з метою генерації сторінки HTML. Як правило, файли подання містять код HTML з найпростішими вставками мовою PHP: операторами та функціями виведення (echo, print тощо), а також циклів (for, foreach та іншими). Це обумовлено власне метою подання - об‘єднання статичного коду HTML та динамічних даних, отриманих в результаті взаємодії програми з базою даних, файлами тощо.

.2 Приклад застосування CodeIgniter для задачі аутентифікації користувача

Розглянемо приклад аутентифікації користувача з використанням його ім‘я та паролю, які зберігаються у базі даних. Узагальнений алгоритм розробки даної програми полягає у наступному.

. Підготовка бази даних: створення таблиці, занесення даних, налаштування конфігурації проекту.

. Реалізація контролеру проекту з функціями виведення форми уведення даних про користувача та виведення результату аутентифікації.

. Створення моделі з функцією перевірки імені/паролю користувача.

. Створення подання сторінки форми уведення даних про користувача та сторінки результату аутентифікації.

Підготовка бази даних

Підготовка структур бази даних складається зі створення бази даних (команда create database userdb), вибору бази даних (команда use userdb), створення таблиці users із полями id, uname та upwd), а також внесення рядка даних у таблицю (команда insert into). Приклад виконання наведених команд зображено на рисунку 3.3.

Рисунок 3.3. Протокол команд підготовки бази даних

Реалізація контролера проекту

Як відзначалось вище, контролер виконує функцію управління ходом обробки запиту від користувача. В прикладі необхідно реалізувати два метода класу контролера: виведення форми уведення ім‘я користувача та його паролю, а також вікна результату аутентифікації. Програмний код контролера показано на рисунку 3.4. Клас контролера містить два відповідних методи: index() та login_result(). Перший метод викликає подання login для виведення форми. Другий метод більш складний: відбувається завантаження об‘єкта взаємодії з базою даних та об‘єкта моделі usermodel. Після цього викликається у об‘єкті моделі метод login, який порівнює передані у якості параметрів дані про користувача з вмістом бази даних. Якщо порівняння виконано успішно, формується масив $data для передачі у подання та викликається обробка подання afterloginOK. Інакше - у масив $data записується поточний час і ім‘я користувача.

Рисунок 3.4. Програмний код контролера User

Створення моделі проекту

Моделі традиційно відповідають за взаємодію із базою даних, тому відповідний клас прикладу містить функцію порівняння даних про користувача із вмістом бази даних. Слід зауважити, що CodeIgniter виконує під‘єднання автоматично під час завантаження об‘єкта database, тому код класу моделі містить лише команди доступу до таблиць бази даних (див. рисунку 3.5).

Рисунок 3.5. Реалізація класу моделі проекту

Зазначимо, що оскільки CodeIgniter є об‘єктно-орієнтованою бібліотекою, то результати, що повертаються з бази даних, мають вигляд об‘єктів класу запиту (у прикладі: $row->cnt), де члени класу відповідають полям, визначеним у запиті select.

Проект містить 3 форми: уведення даних про користувача, успішної та неуспішної аутентифікації користувача. Код відповідних файлів містить HTML-шаблон та фрагменту PHP. Вміст відповідних файлів наведено на

Рисунок 3.6. HTML-шаблон та візуальна форма сторінки уведення даних про користувача

Рисунок 3.7. HTML-шаблон та візуальна форма сторінки успішної аутентифікації (файл afterloginOK.php)

На рисунку 3.7 міститься фрагмент мовою PHP <?=$uname?>, яка вказує, що необхідно вставити значення змінної $uname, яка була передана з контролера ($data[„uname‟]).

Рисунок 3.8. HTML-шаблон та візуальна форма сторінки неуспішної аутентифікації (файл afterloginBAD.php)

Аналогічно файлу afterloginOK.php на рисунку 3.8 проілюстровано HTML-шаблон із фрагментами PHP виведення змінних з іменем користувача та поточного часу, значення яких встановлено у контролері додатку.

.3 Приклад використання бібліотеки CodeIgniter для обміну даними засобами Ajax

Серед застосувань бібліотеки CodeIgniter найбільш поширеним є динамічне завантаження інформації у елементи сторінки HTML. Як приклад розглянемо задачу виведення підказки в залежності від набраного користувачем тексту в поле форми (рисунок 3.9). Для реалізації даної задачі необхідно створити три файли і розмістити їх на сервері:

. HTML-сторінка (hint.html).

. Програма мовою Javascript із використанням CodeIgniter (hint.js).

. Текстовий файл, який містить можливі підказки (hint.txt).

Рисунок 3.9. Результат роботи асинхронного завантаження даних у HTML-сторінку

сторінка містить код, який задає структуру документа (рисунок 3.10):

Рисунок 3.10. HTML-код сторінки

З рисунка 3.10 видно, що для виконання задачі включено підтримку бібліотеки CodeIgniter, а також зовнішній файл hint.js, який здійснює операції уведення-виведення. Крім того, задаються мінімально необхідні налаштування стилів (тег <style>), а також власне форма HTML із елементом city - текстовим полем та контейнером div з id=”hint” для виведення підказки.

Код програмного файлу hint.js наведено на рисунку 3.11. Особливостями роботи даної програми є використання засобів CodeIgniter для завантаження списку даних (назв міст) з сервера в асинхронному режимі (.get()).

Рисунок 3.11. Код програми мовою Javascript

Функція.ready() виконується в момент завантаження сторінки, функція cl() викликається, коли необхідно приховати та очистити підказку (наприклад, при виборі зі списку), а функція show_hint() виконується при натисканні користувачем клавіші клавіатури. Крім того, використовуються засоби пошуку елементів HTML із використанням синтаксису мови CSS, зокрема #hint>div означає «знайти усі елементи div всередині елемента з id=hint.

Для прикладу файл hint.txt, який містить підказки має наступний вигляд (риcунок 3.12):

Рисунок 3.12. Вміст файлу hint.txt, який містить можливі підказки

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

4. Економічна частина

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

Додаткові витрати на співробітника іноді можуть перевищувати його заробітну плату.

Розрахунок:

.         Розрахунок заробітної плати

Оклад системного адміністратора - 2602,6 грн.

Прибутковий податок (12%) - 312,31 грн.

Пенсійний фонд (1%) - 26,03 грн.

ЗП до видачі на руки - 2264,27 грн.

Зарплата за 14 робочих днів складає: 1320,90 грн.

.         Розрахунок амортизації

Амортизбція (погашення, сплата боргів) - теж що і амортизаційні відрахування <http://uk.wikipedia.org/wiki/%D0%90%D0%BC%D0%BE%D1%80%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D1%96%D0%B9%D0%BD%D1%96_%D0%B2%D1%96%D0%B4%D1%80%D0%B0%D1%85%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F> - процес поступового перенесення вартості основних фондів <http://uk.wikipedia.org/wiki/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%96_%D1%84%D0%BE%D0%BD%D0%B4%D0%B8> на продукт, що виготовляється з їх допомогою. Для заміщення зношеної частини основних засобів виробництва підприємства роблять амортизаційні відрахування, тобто відрахування певних грошових сум відповідно до розмірів фізичного <http://uk.wikipedia.org/wiki/%D0%A4%D1%96%D0%B7%D0%B8%D1%87%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%BE%D1%81> і морального зносу <http://uk.wikipedia.org/wiki/%D0%9C%D0%BE%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%BE%D1%81> засобів виробництва. Амортизаційні відрахування використовуються для повного відтворювання зношених основних фондів (на реновацію <http://uk.wikipedia.org/wiki/%D0%A0%D0%B5%D0%BD%D0%BE%D0%B2%D0%B0%D1%86%D1%96%D1%8F>).

До витрат на устаткування віднесемо:

-        Комп’ютер: 6100 грн.

-        Стіл: 450 грн.

-        Стілець: 235 грн.

-        Принтер: 640 грн.

Амортизацію розраховуємо за 3 групою, тобто відсоток повернення складає 25%.

С = 7425 грн. (Витрати на обладнання).

А = 7425 * 0,25 = 1856,25 грн. (Амортизація за рік роботи)

Так як робота над проектом тривала 14 робочих днів, маємо розрахувати відповідно і амортизацію:

Маємо умову:

1856,25 - 251(робочі дні)

х - 1

Тобто за один робочий день амортизація складає - 7,39 грн.

А(14 днів) = 14 * 7,39 = 103,53 грн.

.         Витрати на сировину

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

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