Диплом (1218689), страница 4
Текст из файла (страница 4)
И работа в личномкабинете.Структура расположения файлов нового проекта определяется количествомиспользуемых технологий, а так количеством независимых частей сайта.Так как в данном проекте структура корневой папки файлов содержат 5 подпапок для хранения CSS, JavaScript, отдельных PHP файлов, а так же папка дляхранения логотипов, изображений и иконок проекта (рисунок 16).26Рисунок 16 – Структура файлов нового проектаТак же каждая папка имеет свои папки предназначенные для структуризации файлов (таблица 1).Таблица 1– Назначение папокНазвание папкиНазначение папкиCSSрасположение CSS файловJsРасположение JavaScript файловJs/AjaxРасположен Ajax сценариевPHPРасположение PHP сценариевMediaРасположение все изображений, и документов файлов.Media/FileРасположен, докупентов, аудио-файлов и прочихMedia/logoРасположен логотипов проектаMedia/IconРасположение иконок проектаСтруктура данного проекта не является обязательной, но для удобства разработки и пользования сайтом данная база является очень удобной.273.1 Проектирование базы данныхЧто бы понять структуру сайта и разработать качественный дизайн и функционал необходимо понять какие данные будут храниться в базе данных и чтобудет из них выведено на экран.База данных – это представленная в объективной форме совокупность самостоятельных материалов, систематизированных таким образом, чтобы эти материалы могли быть найдены и обработаны с помощью вычислительной машины.Все данные в базе данных хранится в таблицах.
Таблицы имеют столбцы истоки, образуя поля хоронящие данные .[24]Так же каждое поле имеет свой тип данных, числовые, строковые, бинарные, тип для хранения даты и прочие типы данных, что позволяет стабилизировать и уменьшить объемы памяти занимаемыми для хранения информации в базах данных. Это хорошо заметно когда база данных содержит десятки таблиц, акаждая таблица миллионы полей.Для начало необходимо выписать и все данные проекта которые будут храни в базе данных (таблица 2).Таблица 2 – Данные проекта№Наименования данныхИдентификаторТип данных1Заголовок новостиTitle_newsChar2НовостьPost_newsText3Дата публикации новостиDate_newsDate4Кто добавил новостьUser_newsInt5Номер новостиId_newsInt6Фамилия Имя ОтчествоFIO_userChar7Идентификатор пользователяID_userId8Должность пользователяPositionId9Login пользователяLoginChar10Электронная почта пользователяEmailChar2811Пароль пользователяPwdChar12Информация О пользователиInfo_usertext№Наименования данныхИдентификаторТип данных13Номер файлаId_fileInt14Название файлаfile_nameChar15Описание файлаfile_titleChar16Дата файлаfile_dateDare17Кто добавил файлid_userInt18Номер мероприятияId_mInt19Название мероприятияTitleChar20Информация мероприятияInfoText21Дата проведения мероприятияDateDate22Кто был на мероприятииuset_mInt33Кто создал мероприятияUser_id_eventIntПосле чего необходимо проанализировать данные и с группировать их впервоначальные таблицы.
В ходе выполнения этих действий получилось четыреосновных таблиц : таблица с информацией о пользователи – User, таблица содержащая новости – New, таблица Event – информация о мероприятиях и таблица с данными о файлах File.Следующим шагом является нормализация базы данных, то есть приведенияее к нормальной форме.Нормальная форма – свойство отношения в реляционной модели данных,характеризующее его с точки зрения избыточности, потенциально приводящейк логически ошибочным результатам выборки или изменения данных. Нормальная форма определяется как совокупность требований, которым должно удовлетворять отношение [25].Процесс преобразования отношений базы данных к виду, отвечающему нормальным формам, называется нормализацией. Нормализация предназначена для29приведения структуры базы даннх к виду, обеспечивающему минимальную логическую избыточность, и не имеет целью уменьшение или увеличение производительности работы или же уменьшение или увеличение физического объёмабазы данных.Существуют много нормальных форм: первая нормальная фора, вторая нормальная форм, третья нормальная форма, нормальная форма Бойса-Кода и другие.
Но для приведения базы данных в рабочее состояние достаточно привестиее к третей нормальной форме. Первая нормальная форма – это когда переменная отношения когда в любом допустимом значении отношения каждый егокортеж содержит только одно значение для каждого из атрибутов.Вторая нормальная форма – это когда переменная отношения находится впервой нормальной форме и каждый не ключевой атрибут неприводимо (функционально полно) зависит от её потенциального ключа.Третья нормальная форма представляет – это когда переменная отношениянаходится во второй нормальной форме, и отсутствуют транзитивные функциональные зависимости не ключевых атрибутов от ключевых.Приведя базу данных к третей нормальной форме мы получили 6 связанныхтаблиц (рисунок 17).30Рисунок 17 – Связь таблиц базы данных в третей нормальной формеНа основе полученных данных можно определить будущий дизайн блоковдля вывода информации из базы данных.
А так же функционал для добавленияновых записей в таблицы .После того как были спроектированы таблицы в графическом виде их необходимо создать в самой среде MySql. Для этого надо написать Sql код запростодля создания каждой таблицы. Для этого существует Sql запрос create table имятаблицы, где нужно перечислить имя поля и тип данных.Код для таблицы news содержит пять полей:CREATE TABLE `News` (`id` int NOT NULL,`title` char(200) NOT NULL,`post` TEXT NOT NULL,`date` DATE NOT NULL,`user_news` int NOT NULL,PRIMARY KEY (`id`));Код для таблицы User содержит четыре поля и связан с таблицей user_info:CREATE TABLE `user` (`id` int NOT NULL,`login` char(200) NOT NULL,`pwd` char(200) NOT NULL,`email` char(200) NOT NULL,PRIMARY KEY (`id`));Таблица user_info:31CREATE TABLE `user_info` (`id` int NOT NULL,`Fname` char(100) NOT NULL,`Lname` char(100) NOT NULL,`Tname` char(100) NOT NULL,`Info` TEXT NOT NULL,`position` char(200) NOT NULL);Для связи таблиц необходимо определить первичные и внешние ключи, после чего необходимо командой alter table связать эти ключи:ALTER TABLE `user_info` ADD CONSTRAINT `user_info_fk0` FOREIGN KEY(`id`) REFERENCES `user`(`id`);Тоже самое необходимо проделать и для других таблиц тем самым получитьготовую для использования базу данных.3.2 Создания клиентской части web-сайтаВесь web-сайт данного проекта разделен на две части информационнуючасть для посетителей и личный кабинет где есть весь функционал для работыадминистрации и модерации вебсайта.
Поэтому у данного проекта есть два дизайна сайта .Для создания клиентской части сайта используются языки разметки Html5,таблицы каскадных стилей CSS3 и сценарный язык JavaScript.Изначально нужно определиться с дизайном сайта, цветовой гаммой, шрифтами и количеством выводимой информации, а так же с типом верстки сайта.Существует два типа верстки, табличная и блочная верстка. В данной вкр былареализована блочная верстка, как самая продвинутая технология, чем табличная.32Суть блочной верстки заключается в определение объектов как блоков имеющих свою высоту ширину и место нахождения относительно других объектовна экране. Так в HTML5 существуют специальные теги определяющие каркассайта, такие теги как <header>, <footer>,<nav>, <section>, <aside> и другие.
Ноизначально данные теги не определены как блочные и это нужно указать в CSSфайле хоронящий информацию о всем дизайне страницы(css_index.css):footer, nav, header, section, aside { display: block}Для данного проекта, основными цветами, были выбраны Зеленый, Синийи белые цвета. Так как они характеризуют флаг Хабаровского края.
Основнымишрифтами был выбран Times New Roman и Trebuchet MS.После чего весь дизайн разбивается на три части, шапка web-страницы, телоweb-страницы и подвал. Для облечения разработки весь одинаковый дизайн иэлементы встречающиеся и в других web-страницах выноситься в отдельныйфайл и подключается на страницу с помощью PHP вставки:<? php include('имя файла.php') ?>Так же необходимо определить навигацию по сайту, она поможет нам быстро перемешаться по разным страницам всего проекта для информационннойчасти web-сайта меню имеет шесть ссылок на разные ресурсы web-сайта (рисунок 18).Рисунок 18 – Шапка сайта с менюТак же одинаковым элементом для всех web-страниц данного проекта является подвал, где храниться некоторая информация о самом сайте, разработчиках и счетчики посещения.33Вся иная информация выводимая в теле документа является для каждойстраницы уникальной и не дизайн их меняется.
Так для главной страницы webсайта характерен вывод множества различной информации, такой как анонс новостей, мероприятий и элементов других станиц. Дизайн тела главной страницы был разделен на 3 блока, левый блок для вывода новостей и два правых бокас членами палаты и анонса мероприятий (рисунок 19).Рисунок 19 – Дизайн тела главной страницыКаждый бок страницы прописывается в CSS файле так данный код описывает блок новостей:.b_news{background: #F5F5F5;font-size: 100%;font-weight: bold;margin: 20px 0px 0 0;width:45vw;position: relative;float: left;opacity: 0.7;box-shadow: 0 0 10px rgba(51,102,0,0.7);padding-left: 1.5vw;border-radius: 5px 5px;}34.b_news:hover{opacity: 1;}Дизайн остальных страниц информационной части схож с основным дизайном главной страницы, за исключение наличие лишь одного блока размещенымпо центру страницы (рисунок 19).Рисунок 19 – Дизайн тела остальных веб страницТак же на данных web-страницах существуют скрытые элементы, так принажатии на ссылку Вход.
Открывается модальное окно с формой входа на сайт(рисунок 20).35Рисунок 20 – Модальное окно с формой входаМодальное окно реализовано с помощью JavaScript и библиотеки JqueryПри нажатии на крестик или подложку страницы данное окно закрывается этопроисодит с помощью замены видимости модального окна :$(document).ready(function() {$('a#go').click( function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#modal_form').css('display', 'block') /.animate({opacity: 1, top: '50%'}, 200);}); });$('#modal_close, #overlay').click( function(){$('#modal_form').animate({opacity: 0, top: '45%'}, 200,function(){36$(this).css('display', 'none'); /$('#overlay').fadeOut(400); /});}); });Так же при входе или выходе скрипты отправляемые на сервер работают через AJAX технологию.
Тем самым позволяя не перезагружать страницу. [28]Весь дизайн информационной части web-сайта является структурированными легким в работе пользователя (рисунок 21).Рисунок 21 – Внешний вид всегодизайна web-страницыДизайн личного кабинета web-сайта, в первую очередь предназначен длядля обеспечения максимального увеличения информации о пользователи ифункционала сайта. Так для дизайна личного кабинета были выбраны основными цветами серый, черный и белый, а шрифтами Times New Roman.Шапка личного кабинета имеет четыре основные ссылки предназначенныедля вызова форм добавления информации в базу данных (рисунок 22).37Рисунок 22 – Дизайна шапки web-страницы личного кабинетаБлоки тела web-страницы разделено на две части, левую содержащую информацию о пользователе, информацию о мероприятиях на которые позванпользователь.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
