Размещено на http://www.allbest.ru/

РЕФЕРАТ

Пояснювальна записка до курсової роботи: 57 с, 22 рис., 2 додатків, 12 джерел.

Об'єкт розробки - програмна система WEB-галереї (Node.js + Express).

Мета розробки - створення системи управління контенту «WEB Галерея».

Метод проектування - платформа Node.js, також використовуються каркас Express, мова програмування JavaScript, а також система база даних MongoDB, так драйвер для взаємодій з нею Mongoose.

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

NODE.JS, EXPRESS, MONGODB, ГАЛЕРЕЯ, AJAX, HTTP, ШАБЛОНІЗАТОР, JAVASCRIPT, JQUERY, MONGOOSE, EJS, ІНТЕРФЕЙС,

ВСТУП

Метою роботи є вироблення умінь і навичок проектування структури бази даних, призначеної для функціонування системи WEB Галерей. Для досягнення цієї мети в роботі виконується серверна платформа Node.JS, та каркас для ней Express».

Система управління контентом «CMS» призначена для створення користувачів та категорій для користувачів, зберігання зображень.

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

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

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

Розділ третій присвячений опису інтерфейсу додатку.

1. АНАЛІЗ ПРОБЛЕМНОЇ ОБЛАСТІ І ПОСТАНОВКА ЗАДАЧІ

1.1 вибір технології для створення системи управління контентом

Цей розділ присвячений для створення системи управління контентом.

Слід уважно продумати питання про створення веб-додатки на основі платформи Node.JS + Express.

1.2 Переваги веб-додатки на основі Node.JS

Платформа Node.Js має наступні переваги:

- є однією з най продуктивніших платформ, для створення веб-додатків;

- використовую асинхронну модель що дає змогу швидше обробляти запити;

- добре розширювана платформа;

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

1.3 Переваги веб-додатки на основі використання шаблонизатору

Платформа на основі шаблонизатору веб-форм має наступні переваги:

- зменшую кількість необхідних веб-сторінок за рахунок динамічного створення на основі шаблону;

- легкість генерація сторінок, з необхідним вмістом;

- інтеграція шаблонізатору за каркасом Express;

- легкість додавання нових сторінок, та повторне їх використання;

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

1.4 Можливості платформи Node.JS

Node.js призначений для відокремленого виконання високопродуктивних мережних застосунків на мові JavaScript. Функції платформи не обмежені створенням серверних скриптів для веб, платформа може використовуватися і для створення звичайних клієнтських і серверних мережевих програм. Для забезпечення виконання JavaScript-коду використовується розроблений компанією Google рушій V8 .

Для забезпечення обробки великої кількості паралельних запитів Node.js задіює асинхронну модель запуску коду, засновану на обробці подій в неблокуючому режимі і визначенні callback-обробників. В якості способів мультиплексування з'єднань підтримується epoll, kqueue, /dev/poll і select. Для мультиплексування з'єднань використовується бібліотека libev, для створення пулу нитей(thread pool) задіяна бібліотека libeio, для виконання DNS-запитів у неблокуючому режимі інтегрований c-ares. Всі системні виклики, що викликають блокування, виконуються всередині пула нитей і потім, як і обробники сигналів, передають результат своєї роботи назад через неіменовані канали (pipe).

За своєю суттю Node.js схожий на фреймворки Perl, AnyEvent, Ruby, Event Machine i Python Twisted, але цикл обробки подій (event loop) у Node.js прихований від розробника і нагадує обробку подій у, веб-застосунку, що працює в браузері. При написанні програм для Node.js необхідно враховувати специфіку подієво-орієнтованого програмування, наприклад, замість виконання

1.5 Опис використовуваної технології і її система

1.5.1 Опис framework Express який використовується для створення каркасу додатку

Головні можливості:

- помічники переправлення (redirect helpers);

- динамічні помічники представлень;

- опції представлень рівня додатки;

- взаємодія з контентом;

- монтування додатків;

- орієнтованість на високу продуктивність;

- рендеринг шаблонів і підтримка фрагмент них шаблонів (view partials);

- конфігурації, швидко перемикаються під різні завдання (development, production, і т.д.);

- збережені у сесії спливаючі повідомлення (flash messages);

- зроблено на основі Connect;

- скрипти express для швидкої генерації каркаса додатка;

- високе покриття тестами.

Express підтримує довільні оточення (environments), як наприклад, production і development. Розробники можуть використовувати метод configure (), щоб додати потрібні для даного оточення функції. Коли configure () викликається без імені оточення, він буде спрацьовувати в будь-якому оточенні перш ніж спрацює будь configure, в якому оточення задано.

1.5.2 Опис бази даних MongoDB

MongoDB -- документо-орієнтована система керування базами даних (СКБД) з відкритим вихідним кодом, яка не потребує опису схеми таблиць. MongoDB займає нішу між швидкими і масштабованими системами, що оперують даними у форматі ключ/значення, і реляційними СКБД, функціональними і зручними у формуванні запитів.

Код MongoDB написаний на мові C++ і поширюється в рамках ліцензії AGPLv3.

MongoDB підтримує зберігання документів в JSON-подібному форматі, має досить гнучку мову для формування запитів, може створювати індекси для різних збережених атрибутів, ефективно забезпечує зберігання великих бінарних об'єктів, підтримує журналювання операцій зі зміни і додавання даних в БД, може працювати відповідно до парадигми Map/Reduce, підтримує реплікацію і побудову відмово стійких конфігурацій. У MongoDB є вбудовані засоби із забезпечення шардінга (розподіл набору даних по серверах на основі певного ключа), комбінуючи який реплікацією даних можна побудувати горизонтально масштабований кластер зберігання, в якому відсутня єдина точка відмови (збій будь-якого вузла не позначається на роботі БД), підтримується автоматичне відновлення після збою і перенесення навантаження з вузла, який вийшов з ладу. Розширення кластера або перетворення одного сервера в кластер проводиться без зупинки роботи БД простим додаванням нових машин.

Основні можливості MongoDB:

- документ но-орієнтоване сховище (проста та потужна JSON -подібна схема даних);

- досить гнучка мова для формування запитів;

- динамічні запити;

- повна підтримка індексів;

- профілювання запитів;

- швидкі оновлення «на місці»;

- ефективне зберігання двійкових даних великих обсягів, наприклад, фото та відео

- журналювання операцій, що модифікують дані в БД;

- підтримка відмово стійкості і масштабованості: асинхронна реплікація, набір реплік і шардінг;

- може працювати відповідно до парадигми MapReduce.

1.6 Постановка задачі

У рамках даної курсової роботи необхідно використати методи побудови веб-проекту, використовуючи: веб-платформу Node.Js, Бази даних MongoDB, HTML, CSS .

Можна виділити наступні завдання:

- використати методи та етапи побудови Галереї;

- підібрати теоретичний та ілюстративний матеріал по заданій темі;

- розробити підсистему перевірки засвоєння матеріалу теми;

- використати рекомендації по естетичному оформленню WEB сторінок;

- вивчити і застосувати сучасні засоби розробки WEB сторінок.

2. ОПИС ПРИЙНЯТИХ ПРОЕКТНИХ РІШЕНЬ

2.1 Функціональні вимоги

Функціональні вимоги виявляються під час аналізу предметної області.

Для роботи з автоматизованою системою, необхідно організувати додавання, корегування, видалення, пошук, сортування інформації. Однак, необхідно пам'ятати, що видалення може бути здійснено лише при відсутності зв'язку поточної інформації з іншою.

Система повинна підтримувати можливість одночасної праці користувачів з центральною базою даних. А також автоматично та швидко під час щоденної роботи виконувати розрахунки усіх необхідних значень та надавати інформацію за вимогою користувача.

2.2 Не функціональні вимоги

1 Зручність використання ? інтерфейс користувача повинен бути зрозумілий

і легкий у використані.

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

3 Продуктивність ? система повинна надавати можливість її покращення .

4 Безпека ? система повинна дозволяти користувачам корегувати інформацію лише в межах своєї компетентності шляхом встановлення паролів та логіну.

5 Проектні обмеження:

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

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

- операційну систему Linux або Windows;

- сервер Node.JS;

- сервер баз даних MongoDB.

2.3 Опис компонентів і проектних рішень

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

2.4 Система управління контентом

CMS поділяються на комерційні та вільно поширювані. Комерційні були створені підприємцями для отримання прибутку від продажу та / або технічної підтримки, а вільно поширювані (СР, Open Source) - це, як правило, плоди праці ентузіастів, які стали «загальним» надбанням завдяки відкритому коду і співтовариству професіоналів, які час від часу цей код вдосконалюють. Перевага комерційних CMS в гарантіях - завжди є розробник, до якого можна звернутися або пред'явити претензії. Вільно поширювані системи відрізняються тим, що їх ядро безкоштовно (але не варто забувати про витрати на підтримку).

Виділяють три типи CMS. «Коробкові рішення» - готові платформи, які використовує широке коло веб-розробників. «Студійні» або «індивідуальні» системи ніким, окрім компанії-власника, не використовуються. Software-as-a-Service рішення (SaaS) - це онлайн-конструктори сайтів, такі як UcoZ. Головна відмінність трьох категорій - в ступені залежності замовника сайту від власника системи. Якщо шляху розробника студійної CMS і його клієнта в якийсь момент розійдуться, клієнту, швидше за все, доведеться міняти движок, так як інша компанія не візьметься за підтримку сайту на чужій і незрозумілою системі. У випадку з SaaS залежність від розробника ще вище, тому що мова йде навіть не про покупку ліцензії, а її оренді, зате сайт в конструкторі можна зробити дуже швидко і зовсім невеликими ресурсами. «Коробки» дають власнику сайта незалежність, він може змінити підрядника з обслуговування сайту і тому в переговорах частіше диктує умови. Більшість нових корпоративних сайтів створюється на «коробкових» CMS.

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

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

2.5 Діаграма прецедентів

2.6 Діаграма активності

2.7 Діаграма послідовності дій

3. ОПИС РОБОТИ З СИСТЕМОЮ

За замовчуванням у проекті під час реєстрації створюється:

1. Папка default з зображеннями default1.jpg, default2.jpg, зображення за замовчанням прописані в конфігураційному файлі.

2. Об'єкт користувача який додається до колекції users

3.1 Зміст колекції users

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

1. Username {{String}};

2. HashedPassword {{String}}

3. Salt {{String}};

4. Categories {{Object}};

5. DefaultDirCreated {{Boolean}};

6. _id {{ObjectId}}

Опис полів в колекцій:

1. Username - ім'я користувача.

2. HashedPassword - пароль створений за допомогою криптографічного шифрування з використанням алгоритму sha1 та солі (опис далі).

Secure Hash Algorithm 1 - алгоритм криптографічного хешування. Описаний в RFC 3174. Для вхідного повідомлення довільної довжини (максимум 2 ^ {64} -1 біт, що дорівнює 2 ексабайта) алгоритм генерує 160-бітове хеш-значення, зване також дайджестом повідомлення. Використовується в багатьох криптографічних додатках і протоколах. Також рекомендований як основного для державних установ у США. Принципи, покладені в основу SHA-1, аналогічні тим, які використовувалися Рональдом Рівестом при проектуванні MD4.

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

4. Categories - Об'єкт в якому знаходять посилання на зображення, зображення знаходять в папці за адресою public/uploads/USER_ID/CATEGORY_NAME/img.jpg для кожного користувача створюється окрема папка яка має назву таку саму як значення поля id.

5. DefaultDirCreated - це поле вказую на стан створення персональної директорій користувача, якщо із за збою не було створено директорію то спроба буде повторена при наступній авторизації, і буду повторюватися доки не буду створена директорія.

6. _id - Унікальний ідетинфікатор користувача.



Вигляд даних у обробленому вигляді:

3.2 Колекція sessions

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

1. _id {{String}};

2. sessions {{Object}}'

3. expires {{ISODate}};

Опис полів в колекцій:

1. _id - Унікальний ідетинфікатор користувача ;

2. sessions - Об'єкт за параметрами сесії;

3. expires - дата закінчення сесії;

HTTP - Cookie, «Куки» або «реп'яшки» (англ. Cookie, множини англ Cookies- . Тістечка, печиво) - у комп'ютерній термінології Поняття, яке використовується для описування ІНФОРМАЦІЇ у вигляді Текстову або бінарних даних , отриманий від веб - сайту на веб-сервері , яка зберігається у клієнта, тоб браузера, а потім відправлена на тій же сайт, якщо сайт повторно відвідати .

Таким чином веб-сервер помічає браузер користувача при відвідуванні. Куки створюються за ініціативою скрипкового сценарію на стороні веб-браузера. При Наступний візиті сервер буде знати, що користувач вже тут був. За допомогою куки-технології можна вивчити вподобання відвідувача. Куки є одним із найточніших ЗАСОБІВ визначення унікального користувача. .

Файл «печиво» (Невеликий файл з налаштуваннями профілів) полегшує КОРИСТУВАННЯ веб-сайтом, записуючі дані, необхідні для входу в систему та збору статистики. Користуватись сайтом можна також без файлів «печиво». Більшість інтернет- Користувачів автоматично приймають файли «печиво». Їх можна ввімкнуті в будь-який момент або налаштувати пошуково систему так, щоб вона повідомляла про всі випадка , пов'язані з відправкою файлів цього типу.

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

- у системах з віддаленім доступом - пароль, що породжується сервером при першом підключенні и посилається користувачеві; при подалі підключеннях користувач повинен надавати серверу пароль;

- вистежування стану Сесії;

3.3 Взаємодія клієнта та сервера

Взаємодія клієнта та серверу відбувається за допомогою http та AJAX запитів.

AJAX - запит реалізовані мовою JavaScript, та бібліотекою Jquery.

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

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

- використання DHTML для динамічної зміни змісту сторінки;

- використання XMLHttpRequest для звернення до сервера «на льоту», не перезавантажуючи всю сторінку повністю;

- альтернативний метод -- динамічне завантаження коду JavaScript в тег <SCRIPT> з використанням DOM, що здійснюється із використанням формату JSON);

- динамічне створення дочірніх фреймів.

Використання цих підходів дозволяє створювати набагато зручніші веб-інтерфейси користувача на тих сторінках сайтів, де необхідна активна взаємодія з користувачем. AJAX -- асинхронний, тому користувач може переглядати далі контент сайту, поки сервер все ще обробляє запит. Браузер не перезавантажує web-сторінку і дані посилаються на сервер без візуального підтвердження (крім випадків, коли ми самі захочемо показати процес з'єднання з сервером). Використання AJAX стало найпопулярніше після того, як компанія Google почала активно використовувати його при створенні своїх сайтів, таких як Gmail, Google Maps і Google Suggest. Створення цих сайтів підтвердило ефективність використання даного підходу.

Порівняння класичного підходу та AJAX:

- користувач заходить на веб-сторінку і натискає на який-небудь її елемент;

- браузер надсилає запит серверу;

- у відповідь сервер генерує повністю нову веб-сторінку і відправляє її браузеру і т. д.;

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

Модель AJAX:

- користувач заходить на веб-сторінку і натискає на який-небудь її елемент;

- браузер відправляє відповідний запит на сервер;

- сервер віддає тільки ту частину документа, яка змінилася.

HTTP -- протокол передачі даних, що використовується в комп'ютерних мережах. Назва скорочена від Hyper Text Transfer Protocol, протокол передачі гіпер-текстових документів. HTTP належить до протоколів моделі OSI 7-го прикладного рівня.

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

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

3.4 Взаємодія з інтерфейсом додатку

3.4.1 Авторизація та Реєстрація

Обі дій знаходяться на одній сторінці (Рисунок 3.1, Рисунок 3.2).



Рисунок 3.1 - Форма авторизації.

Рисунок 3.2 - Форма реєстрації.

Перемикання між форма оброблюється скриптом а файлі “jquery.tabs.js”, після натискання на кнопку відправки форми данні відправляються AJAX за допомогою скрипта:

В разі успішної обробки даних користувача відправляє на головну сторінку додатку, а якщо дані не були правильно обаблені виводиться повідомлення з помилкою в залежності від помилки. На Рисунку 3.3 зображено приклад помилки якщо користувача з таким ім'ям не існує. На малюнку 3.4 помилка яка з'являться у разі не вірного введення паролю.



Рисунок 3.3 - Помилка при невдалій спробі авторизації.

Рисунок 3.4 - Помилка при невдалій спробі авторизації.

Якщо у користувача немає аканту в системі то, він може зареєструватися (Рисунок 3.5). Якщо логін зайнятий то користувачу буде показана помилка на Малюнку 3.7, якщо не правильний логін або пароль то помилка на Малюнку 3.6.



Рисунок 3.5 - Форма реєстрації.

управління контент сервер платформа

Рисунок 3.6 - Помилка при невдалій спробі реєстрації.



Рисунок 3.7 - Помилка при невдалій спробі реєстрації.

Рисунок 3.8 - Вдала реєстрація.

У разі успішної реєстрації користувач перенаправляється на головну сторінку (Рисунок 3.9).

У разі успішної авторизації (Рисунок 3.9) користувач перенаправляється на головну сторінку.

Рисунок 3.9 - Вдала авторизація.

3.1.2 Головна сторінка

Доки зображення не завантаженні відображається анімація завантаження, для кожного зображення окремий елемент з анімацією (Рисунок 3.10).

Рисунок 3.10 - Завантаження зображень.

Після завантаження блоки з анімацією замінюються на зображення (Рисунок 3.11)

Рисунок 3.11 - Відображення завантажених зображень.

Виділення зображення відбувається за допомогою кліку по ньому, виділення відміняється за допомогою натискання хрестика (Рисунок 3.12), при повторному кліку (якщо зображення виділено ) зображення відкриваються по центру екрану (Рисунок 3.13).

Рисунок 3.12 - Виділене зображення.

Рисунок 3.13 - Збільшене зображення.

Добавлення нових зображення за допомого натискання елементу меню з ім'ям «+» , який знаходиться у верхньому меню (Рисунок 3.14), по натисканню на кнопку «+» відкривається меню завантаження (Рисунок 3.15). Після додавання зображення з'являться можливість додати ще (Рисунок 3.16).



Рисунок 3.14 - Кнопка для завантаження зображень.

Рисунок 3.15 - Вікно додавання зображення.



Рисунок 3.16 - Форма завантаження ще одного зображення.

Також відображається стан завантаження зображення (Рисунок 3.17).

Рисунок 3.17 - Статус завантаження зображень.

Для видалення зображення треба його виділити а затим натиснути пункт меню з назвою «-» (Рисунок 3.18). Усі виділенні зображення будуть видалені з «Галереї» . Під час видалення відкривається “ Спливаюче вікно ” , з відображення прогресу видалення (Рисунок 3.19)



Рисунок 3.18 - Кнопка для видалення зображень.

Рисунок 3.19 - Прогрес видалення зображень.

Дій з категоріями відбувається за допомогою меню, та вибору одного з 3х варіантів (Рисунок 3.20) : «Додавання категорій », «Редагування категорії», «Видалення категорій».

Після кліку на один з елементів меню відкривається «Спливаюче вікно» в якому відбувається дія з категорією (Рисунок 3.21).

Рисунок 3.20 - Меню для вибору дій з категоріями.

Рисунок 3.21 - Дій з категоріями

Вибір категорій відбуваються за допомогою «випадаючого меню» у верхньому лівому куту, при змінні категорій завантажуються зображення які знаходяться в цій категорій (Рисунок 3.22).

Рисунок 3.22 - Список категорій.

ВИСНОВКИ

Під час виконя курсової роботи була створена «WEB-Галерея», та були здобуті навики :

- роботи з веб-платформою node.js;

- роботи з каркасом express;

- роботи з документо-орієнтована системою керування базами даних MongoDB;

- створення веб-інтерфейсів;

- створення клієнтської частини на Javascript, та бібліотекою Jquery та технологій AJAX;

- роботи з віддаленим веб сервером.

ПЕРЕЛІК ПОСИЛАНЬ

1. http://en.wikipedia.org/wiki/MongoDB

2. http://en.wikipedia.org/wiki/Node.js

3. http://docs.mongodb.org/ecosystem/drivers/node-js/

4. http://mongoosejs.com/

5. http://expressjs.com/api.html

6. http://en.wikipedia.org/wiki/Ajax_(programming)

7. http://api.jquery.com/

8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

9. http://www.w3.org/standards/webdesign/script

10. http://habrahabr.ru

11. Bear Bibeault, Yehuda Katz. “jQuery in Action, Second Edition“

12. Pedro Teixeira. “Professional Node.js: Building Javascript Based Scalable Software”

ДОДАТОК А

Лістинг програмних модулів конфігурації

// [path `/'] app.js - головний файл додатку

var express = require('express'),

http = require('http'),

conf = require('./config'),

path = require('path'),

mongoose = require('./libs/mongoose'),

MongoStore = require('connect-mongo')(express);

var app = express();

// all environments

app.set('port', process.env.PORT || 8000);

app.set('views', __dirname + '/views');

app.set('view engine', 'ejs');

app.use(express.favicon());

app.use(express.logger('dev'));

app.use(express.json());

app.use(express.urlencoded());;

app.use(express.methodOverride());

app.use(express.cookieParser());

app.use(express.session({

secret: conf.get('session:secret'),

cookie: conf.get('session:cookie'),

store: new MongoStore({mongoose_connection: mongoose.connection})

}));

app.use(require('./middleware/loadUser'));

app.use(require('./middleware/defaultDirCreate'));

app.use(app.router);

app.use(express.static(path.join(__dirname, 'public')));

app.use(express.static(path.join(__dirname, 'public/uploads/')));

require('./routes')(app);

// development only

if ('development' == app.get('env')) {

app.use(express.errorHandler());

}

// app.get('/users', user.list);

http.createServer(app).listen( app.get('port'), function(){

console.log('Express server listening on port ' + app.get('port'));

});

//[path `routes/'] index.js - займається обробкою запитів до сервера

var checkAuth = require('../middleware/checkAuth');

module.exports = function (app) {

var login = require('./login');

app.post('/category/:method', checkAuth, require('./category').post);

app.post('/registration', require('./registration').post);

app.post('/login', login.post);

app.get('/login', login.get);

app.get('/', checkAuth, require('./main').get);

app.get('/clear', checkAuth, require('./delete').get, checkAuth);

app.post('/image/:method/:category', require('./images').post);

app.get("/logout", checkAuth, function(req, res, next) {

req.session.destroy();

checkAuth(req, res, next);

});

};

//[path `models/'] user.js - модель користувача яка зберігається в базі даних.

var async = require('async'),

crypto = require('crypto'),

conf = require('../config'),

path = require('path'),

mongoose = require('../libs/mongoose'),

mkdirp = require('mkdirp'),

stringValidation = require('../libs/stringValidation'),

ncp = require('ncp'),

Schema = mongoose.Schema;

var schema = new Schema({

username:{

type: String,

unique: true,

required: true

},

hashedPassword: {

type: String,

required: true

},

categories: {

type: {},

required: true

},

salt:{

type: String,

required: true

},

defaultDirCreated: {

type: Boolean,

required: true

}});

schema.methods.encryptPassword = function (password) {

return crypto.createHmac('sha1', this.salt).update(password).digest('hex');

}

schema.virtual('password')

.set (function(password) {

this._plainPassword = password;

this.salt = Math.random() + '';

this.hashedPassword = this.encryptPassword(password);

})

.get(function() {

return this._plainPassword;

});

schema.methods.checkPassword = function(password) {

return this.encryptPassword(password) === this.hashedPassword;

};

schema.methods._mkDefaultDir = function () {

var dir = path.normalize(__dirname + '/..'),

from = path.join( dir, 'public/uploads/default/'),

to = path.join( dir, 'public/uploads', String(this._id) , 'default'),

user = this;

mkdirp(to, function(err) {

ncp(from, to, function(err) {

if(!err){

user.defaultDirCreated = true;

user.save();}

console.error("createDirError: ", err);

})})};

schema.statics.registration = function(name, password, callback) {

var self = this;

async.waterfall([

function(callback) {

if(!stringValidation (name) ||

!stringValidation (password)){\

return callback( { message: 'Некоректный логин или пароль.', code: 403});

}

callback();},

function(callback) {

self.findOne({username: name}, function(err, user) {

if(user) {

return callback({message: 'Имя уже занятно', code: 403})}

callback();

});

},

function(callback) {

var user = new self({

username: name,

password: password,

categories: {},

defaultDirCreated: false

});

user.categories['default'] = conf.get('categories:default');

user.save(function(err, user) {

if(err) return callback(err);

user._mkDefaultDir(user);

callback(null, user);

});

}], callback);

};

schema.statics.authorize = function(name, password, callback) {

var self = this;

async.waterfall([

function(callback) {

if(!stringValidation (name) || !stringValidation (password)){

return callback({ message: 'Некоректный логин или пароль.', code: 403})}

callback();},

function(callback) {

self.findOne({username: name}, callback);},

function(user, callback) {

if(user) {

if(user.checkPassword(password)) {

callback(null, user);

} else{

callback({message: "Неверный пароль", code: 403});

}

} else {

callback({message: "Пользователь с таким именем не существует", code: 404})}

}] , callback);

};

module.exports.User = mongoose.model("User", schema);

//[path `middleware/'] checkAuth.js - перевірка доступу користувача до затребуваної сторінки

module.exports = function(req, res, next) {

if(req.session && req.session.user && req.user)

return next();

if(req.headers['x-requested-with'] == 'XMLHttpRequest'){

return res.json('Недостаточно прав для операции.');

}res.statusCode = 302;

res.setHeader('Location', '/login');

res.end();

};

// [path `pulic/js'] imageLoader - відповідає за завантаження так показ зображень на кліенті

(function() {

var undef;

function imageLoader (options) {

checkOptions(options, this);

this._options = options;

this._initEvents();

this._templates = [];

this._images = [];

};

function checkOptions (options, loader) {

var loaderTemplate = '<div class="items"><div class="loader-template"><span >Loading...</span><div class="slider"><div class="line"></div> <div class="break dot1"></div><div class="break dot3"></div></div></div></div> ';

if(!options.container)

throw ('"Container" is not found.');

if(!options.loaderTemplate) {

options.loaderTemplate = loaderTemplate;

}

if(options.id && options.images) {

loader.SetImages(options.images, options.id);

}}

imageLoader.prototype.SetImages = function(images, id) {

if(id)

this._id = id;

this.ImageList = images;

this.Categories = Object.keys(images);

return this;

};

imageLoader.prototype._filter = function(images) {

images = images[this._activeCategory];

var imgList = this.ImageList[this._activeCategory],

leng = Math.max(images.length, imgList.length);

for(var i = 0; i < leng; i++) {

if(imgList[i] &&

!~images.indexOf(imgList[i])) {

this._removeImage(imgList[i]);

}

if(images[i] &&

!~imgList.indexOf(images[i])) {

this._createImage(images[i]);}};

return this;

};

imageLoader.prototype.ShowImages = function(category) {

var self = this,

container = self._options.container;

this.setCategory(category);

$(function() {

if(!(container instanceof $))

self._options.container = $(container);

self._showImages();

});

return this;

};

imageLoader.prototype.UpdateList = function(params) {

if(!params.notUpdateImages) {

if(params.isFilterImage &&

params.category == this._activeCategory) {

this._filter(params.images)

.SetImages(params.images);

return;

}

this._clearContainer(this._images, true)

._clearContainer(this._templates)

.SetImages(params.images)

.ShowImages(params.category);

} else {

this.SetImages(params.images);

this.setCategory(params.category);

}

if(!params.notUpdateDropList){

updateDropList(this.Categories, params.options);

}

return this;

};

imageLoader.prototype.getActiveCategory = function() {

return this._activeCategory;

};

imageLoader.prototype.setCategory = function(category) {

category = this.ImageList[category] || 0;

if(category == undef ||

typeof category == 'number') {

this._activeCategory = this.Categories[category || 0];

}

return this;};

imageLoader.prototype.getSelectedImg = function() {

return $(".selected > img");

};

imageLoader.prototype._showImages = function(images) {

images = images || this.ImageList[this._activeCategory];

for (var i = 0; i < images.length; i++) {

if(images[i])

this._createImage(images[i]);}

};

imageLoader.prototype._createImage = function(name) {

var img = $("<img>"),

container = this._options.container;

img.attr('src', this._id + "/" + this._activeCategory + "/" + name);

img._template = $(this._options.loaderTemplate);

container.append(img._template);

img.on("load", function(e) {

var wrapper = $("<div>");

wrapper.attr('href', img.attr('src'));

wrapper.append(img);

wrapper.addClass('items-image close-icon-hide');

img._template.replaceWith(wrapper);

wrapper.append("<span class='close-icon icon'>");

wrapper.on('click', onMouseClick);

});

this._images.push(img);

this._templates.push(img._template);

};

imageLoader.prototype._removeImage = function(name) {

var leng = this._images.length,

src, img;

for(var i = 0; i < leng; i++) {

img = this._images[i];

src = img.attr('src').split('/');

src = src[src.length - 1];

if(src == name){

delete this._images[i];

return img.parent().remove();}}};

imageLoader.prototype._clearContainer = function(arr, rmParent) {

for(var i = 0, leng = arr.length; i < leng; i++) {

if(rmParent) {

arr[i].parent().remove();}

arr[i].remove();

arr = [];

return this;

};

imageLoader.prototype._initEvents = function() {

var self = this;

$('body').on("ChangedCategory", function(e, category) {

self._clearContainer(self._images, true);

self._clearContainer(self._templates);

self._activeCategory = category;

self._showImages();});};

function onMouseClick(e) {

var img = $(e.target);

if(img.hasClass('close-icon')){

unselected(img);

return false;

}

if(img.prop("tagName") != 'IMG')

return false;

if(img.parent().hasClass("close-icon-hide")){

selectImg(img);

return false;

}

$.magnificPopup.open({

items: {

src: img.attr('src')

},

midClick: true,

preloader: true,

closeOnContentClick: true,

type: 'image'

});

return false;

};

function unselected(img) {

wrapper = img.parent();

wrapper.removeClass('img-selected selected');

wrapper.addClass('close-icon-hide');

};

function selectImg(img) {

wrapper = img.parent();

wrapper.addClass('img-selected selected');

wrapper.removeClass('close-icon-hide');

};

function updateDropList(categories, params) {

var select = $("<select id='cd-dropdown' class='cd-select'>"),

leng = categories.length,

html = "";

$("body").unbind('mousedown');

for(var i = 0; i < leng; i++ ) {

html += "<option class='category-list' value='"+ i +"' " ;

html+= (categories[i] == loader.getActiveCategory() ? "selected" : '' ) + " > " + categories[i]; html += " </option>";

}

select.html(html);

$(".main").empty()

.append(select);

$( '#cd-dropdown' ).dropdown(params);};

window.ImageLoader = imageLoader;

}());

//[path `public/js/'] callScript - відповідає за виклик інших скриптів на кліенті

function callScripts(params) {

var self = this;

this.options = params;

//console.log(this)

$(function() {

var keys = Object.keys(self.callMethods),

leng = keys.length;

loader = new ImageLoader(params.loader).ShowImages()

$( '#dl-menu' ).dlmenu(params.dlmenu);

$( '#cd-dropdown' ).dropdown(params.dropdown);

for (var i = 0; i < leng; i++) {

self.callMethods[keys[i]].bind(self)();

};});};

callScripts.prototype.callMethods = {};

callScripts.prototype.callMethods.modalCall = function() {

var popup = $(".white-popup"),

text = $('#title-popup-text'),

form = document.forms["action-category"],

input_first = $(form["category"]),

input_sec = $(form["new_name"]),

texts = [],

data,

isUpdate ,

self = this;

form = $(form);

texts['add'] = "Введите имя новой категории";

texts['remove'] = "Введите имя удаляемой категории";

texts['edit'] = "Введите имя редактируемой категории";

$('.open-popup-link').magnificPopup({

type:'inline',

midClick: true

});

$('.open-popup-link').on('click', function(e) {

data = $(e.target).attr('data-action');

text.css("color", "black");

isUpdate = data != 'remove';

input_first.val(loader.getActiveCategory());

text.text(texts[data]);

if(data.toLowerCase() == 'edit') {

input_sec.css('opacity', '1')

}

else

input_sec.css('opacity', '0')

return false;

});

form.on('submit', function() {

text.html('<img src="../images/loading.gif">');

Requests.category({

form: form,

method: data,

},

function(data) {

text.css("color", data.color);

text.text(data.message);

if(!data.success)

return;

loader.UpdateList({

images: data.categories,

options: self.options.dropdown,

notUpdateImages: isUpdate,

category: loader.getActiveCategory()

});

input_first.val(loader.getActiveCategory())

});

return false;

})

};

callScripts.prototype.callMethods.addImage = function() {

var form = $(document.forms["upload-image"]),

i = 2,

self = this;

form.on('change', function() {

var children = form.children(".load-cont").last();

if(children.children('input').prop("files").length != 1)

return;

children.after(" <div class='load-cont'> <input type='file' name='image"+i+ "'> <span></span></div>");

i++;

});

form.on('submit', function() {return false;})

form.on('submit', function() {

var children = form.find("[type=file]"),

leng = children.length,

src = [],

i = 0,

category = loader.getActiveCategory();

for(var j = 0, file; j < leng; j++) {

file = $(children[j]);

if(file.attr("disabled") ||

file.prop("files").length == 0)

continue;

src.push(file.attr('disabled', ''));};

leng = src.length;

(function add() {

var text = src[i].next();

text.text("Загрузка");

Requests.UploadImage(src[i].prop("files").item("image"),

loader.getActiveCategory(),

function (data, color) {

if(data.success)

text.text("Загруженно");

else

text.text("Файл не Загружен");

text.css('color', color);

if(i < leng - 1) {

i++;

return add();

};

i = 0;

loader.UpdateList({

images: data.categories,

options: self.options.dropdown,

notUpdateDropList: true,

category: category,

isFilterImage: true

});}); }());

return false;

});

$(".add-icon").magnificPopup({

type:'inline',

midClick: true,

});

$(".add-icon").on("mfpClose", function () {

$("[disabled]").parent().remove(); });};

callScripts.prototype.callMethods.removeImage = function() {

var self = this, startProc = false,

progress = $(".progress-bar > span"),

prog_w = progress.parent().width(),

text = $(".remove-text");

$('.remove-icon').magnificPopup({

type:'inline',

midClick: true,

});

$('.remove-icon').on("mfpOpen", function () {

var selected = loader.getSelectedImg(),

i = 0,

category = loader.getActiveCategory();

progress.css("width", "5%");

if(selected.length == 0 || startProc)

return;

startProc = true;

(function remove() {

var src = $(selected[i]).attr("src");

Requests.removeImage(src,

function(data, color) {

progress.css("width", ((i + 1) / selected.length ) * 100 + "%");

text.text("Удалено " + (i + 1) + " из " + selected.length);

if(i < selected.length - 1){

i++;

return remove();

}

startProc = false;

loader.UpdateList({

images: data.categories,

options: self.options.dropdown,

notUpdateDropList: true,

category: category,

isFilterImage: true

});

});

}());

})};

Размещено на Allbest.ru