Разработка веб-сайта международного симпозиума SCAN 2012
Курсовой проект - Компьютеры, программирование
Другие курсовые по предмету Компьютеры, программирование
ение скриптового языка объектно-ориентированного программирования - JavaScript;
Изучение взаимодействия скриптов и плагинов библиотеки jQuery;
нахождение оптимального варианта отображения среди средств, перечисленных выше технологий.
.1.1 Изучение взаимодействия скриптов и плагинов библиотеки jQuery
jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.
Плагин, который я подключил имеет следующие функции:
возможность автоматического переключения картинок(использовал именно эту функцию для реализации слайд-шоу);
переключение картинок при помощи навигации;
пауза;
отображение в слайдах не только картинок, но и различный контент;
отображение номера текущего слайда.
код:
">
">
">
Соответственно для этого кода я применил такие CSS свойства:
gallery .img-holder {: relative;: 314px;: 235px;: 0;: 0;style: none;}
.gallery ul.img-holder li {: absolute;: 0;: 0;index: 0;}
.gallery .img-holder .active {index: 1;}
Для активного элемента я поставил z-index:1, а для остальных z-index:0, это сделано для того чтобы при загрузке сайта лежала первая картинка, а не последняя.
На данный момент прокручивается 31 фото с видами Новосибирска.
Подключение и настройка плагина:
Для работы плагина подключил два скрипта, файл основной библиотеки jQuery (начиная с версии 1.2.*), скрипт jquery.slideShow, а также сделал инициализацию плагина:
$(document).ready(function(){
/* инициализация плагина при загрузки DOM документа */
$(.gallery).slideShow({: div.img-holder li,: 2000,: true,: 5000});
});
$(.gallery).slideShow() - в качестве главного объекта, для слайд-шоу, указывается селектор главного родителя;
slideEl - параметр в который передается селектор слайда;
duration - время fade эффекта (1000 - 1сек);
autoSlideShow - Булево значение, которое включает autoslide;
switchTime - время переключения между слайдами (1000 - 1сек).
2.2Описание структуры базы данных
Для реализации работы сценариев необходимо было сделать хранение данных. В соответствии с технологическим заданием хранение данных предусмотрено посредством СУБД MySQL.
В данном проекте используется база данных Scan, в которой содержится 3 таблицы:
1)Profil(см.Таб. 2.2.1.) - таблица в которой хранится информация об участниках международного симпозиума,а также уникальные идентификационные данные(логин,пароль).
Таблица 2.2.1.
Имя поляТипОписаниеIdint(11)Уникальный номер записиloginchar(100)Логинpasswordchar(255)Парольlastnamechar(50)Фамилияnamechar(50)Имяotchestvochar(50)Отчествоdayint(2)Деньmouthchar(15)Месяцyearint(4)Годsexchar(20)Полemailchar(50)Электронная почтаcountrychar(50)Странаcitychar(50)ГородjoblongtextМесто работыpositionlongtextДолжностьdegreelongtextУченая степеньacademic_ranklongtextУченое званиеphonechar(20)Телефон(с кодом страны)hotelchar(10)Потребность в гостиницеvisachar(10)Потребность в визеattendantlongtextСопровождающее лицо(ФИО)banquetlongtextУчастие в банкетеexcursionslongtextУчастие в экскурсияхarrival_dayint(2)Дата приезда(день)arrival_mouthchar(15)Дата приезда(месяц)departure_dayint(2)Дата отъезда(день)departure_mouthchar(15)Дата отъезда(месяц)
2)Tesis(см.Таб.2.2.2.) - таблица для хранения информации, предоставленной участниками симпозиума.
Таблица 2.2.2.
Имя поляТипОписаниеidint(11)Уникальный номер записиname_tesislongtextНазвание тезисовtext_tesislongtextТекст тезисовfile_tesischar(255)Поле для записи файлов id_userint(11)Поле для записи участников,которые предоставляют тезисы
3)Users(см.Таб.2.2.3.) - таблица в которой хранятся данные об администраторе.
Таблица 2.2.3.
Имя поляТипОписаниеIdint(11)Уникальный номерNickchar(50)ЛогинPasswordchar(100)ПарольLastnamechar(100)ФамилияNamechar(100)ИмяOtchestvochar(100)ОтчествоDayint(2)ДеньMouthchar(50)МесяцYearint(4)ГодSexchar(50)ПолEmailchar(255)Электронная почтаCountrylongtextСтранаcitylongtextГородJoblongtextМесто работы
2.3Схема функционирования
Схема функционирования веб-сайта заключается в следующем. У нас имеется html-файл index.html, который является основным файлом отображения веб-страницы. К этому файлу подключены библиотеки jquery.slideShow.js и jquery-1.3.1.pack.js, файлы стилей css(css3).
Ниже приведена графическая блок-схема функционирования (см. рис. 2.3.1.).
Рис. 2.3.1.
2.4Модульная архитектура проекта
Ниже представлен список, используемых мною модулей, необходимых для решения поставленной задачи:
1.index.html - основной файл, содержащий в себе весь контекст сайта;
2.style.css - файл, содержащий стили оформления;
3.slide.css - файл, содержащий стили оформления слайд-шоу;
4.menu.css - файл, содержащий стили оформления главного меню на сайте;
.regform.html - файл,содержащий форму для регистрации участников симпозиума;
.connect.php - файл для подключния к базе данных и некоторых функций для веб-сайта;
.participants.php - файл,который отображает всех участников данного сайта;
.edituser.php - файл для редактирования информации об участниках и администраторе;
.vxod.html - файл,содержащий форму для входа пользователей,а также администратора;
10.j