Розробка сайту із частковим функціонуванням за обраним дизайном. Використання мови гіпертекстової розмітки та каскадних таблиць стилів. Програмування функціональної частини, верстка сторінок з допомогою JavaScript та JQuery. Система управління базами.
Аннотация к работе
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ Житомирський державний технологічний університет Факультет інформаційно-компютерних технологійТому й було поставлене завдання попрактикуватися у використанні цих засобів веб-розробки.Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта (такому, що виконується на пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки. Мова JAVASCRIPT також використовується для програмування на стороні серверу (подібно до таких мов програмування, як Java і C#), розробки ігор, стаціонарних та мобільних додатків, сценаріїв в прикладному ПЗ (наприклад, в програмах зі складу Adobe Creative Suite), всередині PDF-документів тощо. Крім того, JAVASCRIPT має ряд властивостей, притаманних функціональним мовам, - функції як обєкти першого класу, обєкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість. JAVASCRIPT має С-подібний синтаксис, але в порівнянні з мовою Сі має такі корінні відмінності: · обєкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів; JAVASCRIPT містить декілька вбудованих обєктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, REGEXP.У PSD макеті, який я вибрав, має велику кількість елементів. Видно розмежування між верхньою частиною (хедером), центральною частиною (контент) та нижньою частиною (футером). Кожен блок містить ще по декілька блоків з елементами. Вагомим недоліком макету є відсутність відображення певних дій (наведення курсора на елементи, натискання на кнопки та посилання).Сайт поміщений у один блок, який розміщений по центру й фіксовано, відносно сторін браузера (Рис. Хедер починається з форми з трьома текстовими полями( пошукова система, поля введення логіна та пароля), кнопкою "входу" за своїм обліковим записом та посиланням "Регистрация", яке відкриває сторінку з формою реєстрації. Ліва частина має меню "Категории" з посиланнями, блок "Акція" з відображенням товару та ціни на нього, блок "Наши данные", який містить контактну інформацію. Другим блоком є "Каталог", який містить три посилання у правій частині заголовку, й повторювані блоки з зображенням та назвою товару, посиланням у вигляді кнопки "Купить", ціною, посиланням на відгуки "Отзывы" й кнопкою-посиланням like. Далі блок "Варианты оплаты" з посиланням на різні банкові фірми, які можуть використовуватися для оплати.Виокремлення елементів дизайну з PSD-макетуНа даному етапі я провів аналіз дизайну макету та оцінив складність виконання завдання. З самого верху була присутня частина (довгий чорний блок) з посиланнями на автора макету. Фон, вочевидь, фіксований блакитний блок зі смугою більш темного кольору знизу й градієнтом, який займає приблизно 40% від розміру екрану. Весь контент розміщений на білому блоці із заокругленими кутами, який розміщений по центру відносно сторін екрану й має певні відступи від них. Деякі блоки у заголовках мають однаковий дизайн.Оскільки макет має велику кількість однотонно зафарбованих блоків, то зручним було вирізання зображень декількох пікселів (так звані "слайси"), які потім можна "розтягувати" завдяки властивостям background-repeat у CSS.Далі я створив основний div-блок box якому задав наступні параметри: width: 1000px; Після цього створив блок header, у який помістив форму із текстовими полями, кнопкою та посиланням. Створив блок #left-menu та задав йому наступне форматування: float: left; Містить у собі 4 блока .price4 з картинкою, написами та кнопкою, для якої задано нестандартне форматування з використанням властивостей CSS3: display: inline-block; Другий блок це .center-content, який містить у собі: блок заголовок, форматування якому ми задавали раніше (але в цьому випадку довелося дещо змінити, бо він відрізняється розміром і наявністю посилань у кінці заголовку) та повторювані блоки .article, які містять надпис, картинку, посилання у вигляді кнопки, ціну, посилання на форум, та посилання Like.Ця сторінка містить ті ж самі блоки, що й головна сторінка.Змінилася лише центральна частина.При реєстрації на сторінці registration.html форма відправляє усі дані на reg2.php, де вони будуть оброблені, перевірені, та, у випадку, якщо вони коректні, занесені до бази даних Bd, яка підключається у файлі db.php. Якщо реєстрація вдалася, користувач буде пере направлений до сторінки regged.php й буде повідомлений про успішну реєстрацію (рис. Дані, введені у цій форм, будуть відсилатися на login.php, де будуть перевірені на коректність та наявність у базі даних зареєстрованих користувачів. У випадку, якщо все коректно, користувач буде перенаправлений до сторінки logged.php і буде повідомлений про успішну авторизацію (рис. Дані зберігаються у базі даних Bd у таблиці users (рис.На даному етапі усі сторінки ph