Диплом "разработка сайта"

Диплом был выполнен по окончанию Бакалавриата, целью диплома являлось разработать сайт для компании, и преподнести что-то новое, в моем случае это стал калькулятор для расчета стоимости работ строительной компании.
Оценка на защите: отлично
Оригинальность текста:97%
В ДАННОЙ РАБОТЕ ЕСТЬ ТОЛЬКО ФАЙЛ С ТЕОРИЕЙ, САМ САЙТ НЕ МОГУ ЗАГРУЗИТЬ СЮДА, ТАК КАК ОБЪЕМ ЗАГРУЖАЕМОГО ФАЙЛА БОЛЕЕ 500 МБ, ПОСЛЕ ПОКУПКИ ТЕОРИИ, В ФАЙЛЕ БУДЕТ МОЯ ПОЧТА(НА СЕРВИСЕ ЗАПРЕЩЕНО УКАЗЫВАТЬ СВОИ ДАННЫЕ)-НАПИШИТЕ И Я ОТПРАВЛЮ ВАМ САМ САЙТ - ПРАКТИЧЕСКУЮ ЧАСТЬ ...

ОГЛАВЛЕНИЕ

ОПРЕДЕЛЕНИЯ, ОБОЗНАЧЕНИЯ И СОКРАЩЕНИЯ 7
ВВЕДЕНИЕ 8
ОБЗОР ЛИТЕРАТУРЫ 11
1. ОБЩАЯ ЧАСТЬ 12
1.1. Понятие «сайт» 12
1.2. Выбор способа разработки 13
1.3. Проектирование содержимого веб – сервиса 16
2. АНАЛИЗ И ВЫБОР ПРОГРАММ ДЛЯ РАЗРАБОТКИ 18
2.1. Adobe Photoshop CS6 19
2.2. Drupal 7 19
2.3. XAMPP 20
2.4. Notepad++ 20
2.5. Технология Media Queries 21
2.6. jQuery 21
3. РАЗРАБОТКА ВЕБ-СЕРВИСА КОМПАНИИ 22
3.1. Анализ аналогичных сервисов 22
3.2. Разработка макета проекта 23
3.3. Верстка шаблона 23
3.4. Работа с CMS Drupal 7 26
3.4.1. Установка дополнительных модулей 28
3.4.2. Создание собственной темы в Drupal 7 29
3.5. Разработка модулей 32
3.5.1. Модуль отзывов 32
3.5.2. Модуль калькулятора 36
3.6. Создание блока для вывода новостей 41
3.7. Создание информационных страниц 43
3.8. Создание страницы с проектами 46
3.9. Экономическая эффективность проекта 53
ЗАКЛЮЧЕНИЕ 55
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 56
ПРИЛОЖЕНИЕ А 58
ПРИЛОЖЕНИЕ Б 6

В настоящее время сеть интернет стала важной и неотъемлемой частью человеческой жизни, большое количество людей каждый день используют интернет как основной источник получения и поиска нужной информации.
Сайт выступает как средство привлечения к продуктам компании, средством коммуникации, а также для привлечения большого числа клиентов. В связи с этим, для большинства крупных компаний и предприятий, разработка сайта является большой необходимостью.
Для любой компании создание сайта дает огромное преимущество, поскольку за небольшой срок приток клиентов увеличится в несколько раз, соответственно увеличится прибыль. Сайт, разработанный профессионалом прост в управлении. Любой человек сможет вносить корректировки или размещать новую информацию. Кроме этого, на собственном сайте можно размещ ать рекламу других компаний и за счет этого получать дополнительную прибыль

Незаменимая и очень популярная технология у большинства веб – разработчиков и верстальщиков, благодаря JQuery можно без труда создавать различные визуальные эффекты. jQuery имеет огромное количество различных плагинов, которые предназначены для создания элементов пользовательских интерфейсов. [13]РАЗРАБОТКА ВЕБ-СЕРВИСА КОМПАНИИКомпанией была поставлена задача создания веб сервиса, с представлением услуг компании, представление готовых проектов, наполнение страниц актуальной информацией о компании, а также возможность оставления отзывов клиентами и калькулятором расчета примерной стоимости будущих проектов клиентов.Анализ аналогичных сервисовДля определения подобных сервисов, был проведен анализ всех существующих аналогов. Проведение такого анализа позволяет определить сильные и слабые стороны таких сервисов, выбрать необходимые разделы и страницы, узнать, какая информация больше всего интересует потенциальных клиентов.Одним из аналогов выбран сервис компании «Генстрой». Сервис, имеет приятный дизайн. Содержит следующие страницы: «О компании», «Услуги», «Проекты», «Цены», «Партнеры», «Отзывы», «Контакты». Каждая страница заполнена актуальной и полезной информацией. Данный сервис представлен на рисунке 1.Рисунок 1 — Сервис компании «Генстрой».Разработка макета проектаДизайн сервиса компании ООО «Земли Поморья» разработан с помощью графического редактора «Adobe Photoshop». В реализации использованы фирменные цвета компании. Логотип предоставлен компанией.В шапке сайта находится меню навигации, под ней в центре располагается слайдер с основными услугами предоставляемыми компанией. Под слайдером слева, находится сайдбар. Наверху сайдбара располагается логотип, под ним контактная информация с содержанием адреса, телефона и кнопками «Поделиться» в социальных сетей. Ниже контактной информации находится блок с последними новостями компании, под ним кнопка калькулятора. Справа находится весь основной контент страниц. Макет сервиса показан на рисунке 2.Рисунок 2 — Макет сервиса.Верстка шаблонаПосле создания макета, следует сверстать рабочий шаблон сервиса. Верстка шаблона, это процесс написания кода для веб страницы. Этот код отвечает за правильное расположение всех элементов сервиса на странице.Для начала требуется создать папку на рабочем столе, где будут лежать все файлы, которые входят в шаблон. Внутри этой папки, создается еще одна, назовем ее images, внутри этой папки будут лежать все картинки, которые будут использованы в шаблоне. После этого создадим файл index.html с кодировкой «UTF-8», это и будет сама страница, внутри этого файла прописывается расположение всех элементов веб-сервиса на странице с помощью различных тэгов, атрибутов и значений. Тэги служат для выполнения браузером определенных задач. Атрибуты изменяют тэг, например выравнивают абзац. Значения присваиваются атрибутам для различных изменений, например для выравнивания текста. Для работы слайдера требуется подключить скрипты JQuery. Код файла index.html: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Название страницы</title>Подключение шрифтов <link href="lato medium" rel="stylesheet" type="text/css" />Подключение файла со стилями <link href="css/styles.css" rel="stylesheet" type="text/css" />Подключение скриптов jQuery <script src="js/jQuery-1.7.1.min.js"></script> <script src="js/jQuery.flexslider-min.js"></script></head>Формирование меню навигации<body> <div class="navcontainer"> <ul class="navlist"> <li id="active" ><a href="#">Главная</a></li> <li> <a href="#">О компании</a></li> <li> <a href="#">Проекты</a></li> <li> <a href="#">Цены</a></li> <li> <a href="#">Отзывы</a></li> <li> <a href="#">Контакты</a></li> </ul></div></div><div class="container"> <header> <br class="clearfloat" /></header><section>Настройка расположения слайдера и добавление необходимых картинок в определенном порядке<div class="slider"> <div class="flexslider"> <ul class="slides"> <li> <img src="images/sliderPic1.jpg"alt=""><div class="sliderImageCaption"> <h4></div></li> <li> <img src="images/sliderPic2.jpg" alt=""><div class="sliderImageCaption"> <h4></div></li> <li> <img src="images/sliderPic3.jpg" alt=""><div class="sliderImageCaption"> <h4></h4></div></li> <li> <img src="images/sliderPic4.jpg" alt=""><div class="sliderImageCaption"> <h4></h4></div></li> </ul> </div></div><div class="mainContent"><div class="post"> <h2>Текст заголовка</h2> <br class="clearfloat" /> <p>Текст контента</p> <h3>Текст заголовка внутри контента</h3> <li> <p> маркированный текст </p></li> <li> <p> маркированный текст </p></li> <li> <p> маркированный текст </p></li> <li> <p> маркированный текст </p></li> <li> <p> маркированный текст </p></li> </ul> </div> </div><div class="sidebar1"> <h1><img src="images/logo.png"></h1></div><div class="sidebar1"> <h3>Контактная информация</h3> <p>Содержание</p><div class="sidebar1Separator"></div> <h3>Текст заголовка в сайдбаре</h3> <ul class="sidebarlist"> <li> <a href="#">Новость 1</a></li> <li> <a href="#">Новость 2</a></li> <li> <a href="#">Новость 3</a></li> <li> <a href="#">Новость 4</a></li> <li> <a href="#">Новость 5</a></li> </ul><div class="sidebar1Separator"></div><div class="sidebar1Separator"></div> <div<a изображение кнопки калькулятора></a></div></div> <br class="clearfloat" /></section></div><footer> <p>Надпись в подвале сайта</p></footer></body>Внешний вид страницы, создается с помощью файла со стилями style.css, в котором содержится код, для каждого элемента, листинг кода находиться в приложении А. В нем, также содержится код для настойки адаптивности сайта с помощью технологии Media Queries.После создания данных файлов и написания для них необходимого кода, страница отлично отображается в браузере, что можно видеть на рисунке 3.Рисунок 3 — Отображение страницы в браузереДля работы слайдера были использованы сторонние скрипты JQuery, которые были доработаны для данного сервиса.Работа с CMS Drupal 7Для начала работы нужно установить на компьютер локальный сервер XAMPP, после его установки следует скачать Drupal 7 с официального сайта, далее следует распаковать архив Drupal в папку htdocs, после этого локальный сайт будет доступен по адресу  http://localhost/drupal.Теперь необходимо создать базу данных, для этого стоит перейти по адресу  http://localhost/phpmyadmin/. После открытия выбрать «Создать новую базу», вписать название базы «drupal», в поле «сравнение», выбрать кодировку «utf8_general_ci» и сохранить новую базу данных. На рисунке 4, показана созданная база данных.Рисунок 4 — созданная база данныхСозданная база данных, при работе на CMS Drupal 7, автоматически вносит все создаваемые данные в таблицу.Теперь можно открыть новый сайт в браузере, для этого, следует перейти по адресу http://localhost/drupal, после открытия страницы, появится окно установки Drupal, рисунок 5.Рисунок 5 — окно установки DrupalВыбираем тип установки «Standard», на следующем шаге Drupal предложит выбрать язык установки, тут есть только один язык, английский, выбираем его и переходим на следующий шаг, тут Drupal проверяет все соответствия требований. Далее, требуется выбрать MySQL, написать название ранее созданной базы данных, поскольку работа ведется на локальном сервере, то укажем администратора со всеми правами. Нажимаем «далее», начнется процесс установки, как только установка будет завершена, появится следующий шаг, тут необходимо дать название сайту, заполнить поле с адресом, на который будут приходить уведомления с сайта, также, следует создать логин и пароль пользователя для управления и администрирования сайтом, ниже нужно указать страну и часовой пояс. В конце, Drupal поздравляет с успешной установкой и предлагает посетить новый сайт, для этого необходимо кликнуть на ссылку «Visit your new site», откроется окно с новым сайтом, которое можно наблюдать на рисунке 6.Рисунок 6 — страница с новым сайтом DrupalНа этом установку Drupal 7 можно считать завершенной.3.4.1. Установка дополнительных модулейСистема Drupal 7 имеет в своем арсенале стандартные модули, которые используются для начальной работы с сайтом. Для достижения поставленных целей и задач, потребуется поставить дополнительные модули.Для установки нового модуля необходимо перейти из административной панели в список модулей, выбрать «установить новый модуль». В поле «адрес» следует скопировать ссылку на файл с расширением .gz, с официального сайта, страницы с необходимым модулем. Нажать кнопку «установить» и новый модуль появиться в списке доступных для работы.Список модулей, которые необходимо установить для работы с проектом:Модуль Сhaos Tools необходим для того чтобы облегчить работу разработчика. Он включает в себя разнообразный набор инструментов, также управляет страницами панелей и различными элементами.Модуль Libraries API является гибкой оберткой для работы с внешними библиотеками, в нем также имеется всевозможный набор вспомогательных функций.Модуль Ctools представляет собой набор средств и инструментов. С помощью модуля Page Manager, входящего в состав модуля Ctools, можно управлять страницами.Модуль Colorbox необходим для создания всплывающих окон на Drupal. Строение модуля очень удобное, интегрируется данный модуль там, где может пригодиться, например, для активации изображений.Модуль Features используется для переноса каких - либо данных между проектами.Модуль Back to top добавляет кнопку, которая появляется при прокрутке страницы вниз, при нажатии на которую, автоматически страница плавно возвращается наверх.Модуль Views один из самых необходимых и популярных модулей, с помощью него выводятся данные в необходимом виде.Модуль Gallery formatter требуется для создания фото, или видео галерей.3.4.2. Создание собственной темы в Drupal 7В состав Drupal 7, входят несколько стандартных тем. Самый простой и удобный способ для создания собственной темы, это написание темы с нуля, для этого, понадобиться сверстанный ранее шаблон. Для того чтобы создать новую тему для сайта, необходимо создать папку с новой темой в папке Drupal. Далее следует перенести файлы сверстанного шаблона в эту папку. Для того чтобы тема появилась в списке тем на сайте, необходимо создать файл zemli.info и написать такую структуру:name = zemlidescription = тема друпал "Земли Поморья"package = Coreversion = VERSIONcore = 7.xПодключение файла со стилями для всех элементовstylesheets[all][] = styles.cssПодключение скриптов jQueryScripts [ ] = jQuery- 1. 7. 1. min. jsScripts [ ] = jQuery. flexslider- min. jsВ данном файле записывается вся информация о шаблоне необходимая для того чтобы Drupal смог выводить нужные элементы. Теперь если зайти на сайт и перейти в список тем, можно увидеть созданную тему.Далее необходимо переименовать файл index.html в page.tpl.php, так как именно этот файл отвечает за каркас страницы, при этом следует поменять изменившийся путь для всех изображений. Для того чтобы меню навигации появилось, следует добавить такой код в page.tpl.php:<div class="navcontainer"> < !-- /#main-menu --> <?php if ($main_menu): ?> <div id="main-menu" class="navigation"> <?php print theme('links__system_main_menu', array( 'links' => $main_menu, 'attributes' => array( 'id' => 'main-menu- links', 'class' => array('links', 'clearfix') ,) , 'heading' => array( 'text' => t('Main menu'), 'level' => 'h2', 'class' => array('element-invisible'),) ,) ) ; ? > </div> <?php endif; ? ></div>После добавление данного кода ссылки в меню станут рабочие. Для работы всех необходимых регионов заменяем остальную часть кода в файле page.tpl.php, на этот код:<div class="mainContent">Вывод региона «Контент»<?php print render($page['content']); ?> </div> <div class="sidebar1"> <h1><img src="sites/all/themes/zemli/images/logo.png"></h1></div> <div class="sidebar1">Вывод региона «Контактная информация»<?php print render($page['poisk']); ?> <div class="sidebar1Separator"></div>Вывод региона «Новости»<?php print render($page['news']); ?> <div class="sidebar1Separator"></div>Вывод региона «Калькулятор»<?php print render($page['calc']); ?> </div> <br class="clearfloat" /> </section></div><footer> <center> <p> Земли Поморья </p> </center></footer>Чтобы Drupal смог распознавать регионы, необходимо записать название каждого региона в файл zemli.info:Regions [navigation] = Меню в шапке сайтаRegions [content] = Контент страницRegions [poisk] = Контактная информацияRegions [news] = новостиregions [calc] = калькуляторЕсли перейти в тему, то все содержимое, для которого были созданы регионы, исчезло, для того чтобы все содержимое снова появилось, необходимо перейти в тему по пути структура - блоки и выбрать «добавить блок», в заголовке пишем <none>, в содержимом блока добавляем html код из верстки и сохраняем блок в необходимом регионе. Для всех оставшихся регионов необходимо сделать то же самое. На рисунке 7 показано, что созданная тема работает.Рисунок 7 — Созданная тема в DrupalРазработка модулейКомпанией «Земли Поморья» были поставлены задачи написания двух модулей для сервиса, первый модуль для отзывов клиентов компании, второй модуль, калькулятор для расчета стоимости строительства и изыскания.3.5.1. Модуль отзывовПосле анализа всех доступных модулей для отзывов был сделан вывод, что все они утяжеляют скорость и работу сайта, было принято решения написать собственный модуль.Прежде всего, необходимо перейти в папку, где содержаться доступные модули и создать там новую папку с названием создаваемого модуля. Внутри данной папки требуется создать два файла, один файл otziv.info, для распознавания нового модуля системой Drupal, другой файл otziv.module, который содержит весь рабочий код модуля.В файле otziv.info, находиться следующий код:name = otzivdescription = Enables profiles for new participantspackage = Customcore = 7.xСтрока 1 указывать название модуля – под этим названием он будет отображаться в списке модулей. Строка 2 содержит описание данного модуля, которое также будет отображаться в списке модулей. В строке 3 задается версия модуля. Последняя строка свидетельствует о том, какую версию Drupal поддерживает модуль.Файл модуля otziv.module, содержит код:Вызов функцииfunction otziv_menu(){$items = array();$items['reports'] = array(Название пункта меню'title' => 'Оставить отзыв',Имя функции вызываемой для отображения страницы'page callback' => 'drupal_get_form',Аргументы для функции'page arguments' => array('otziv_form'),Имя функции, возвращающей булево значение'access callback' => TRUE) ; return $items;} function get_need_check($form, $form_state) { return $form;}function get_date_fields($form, $form_state) { return $form;}function otziv_form($form, &$form_state) { $form=array(); $form['#prefix'] = '<div id="reports">'; $form['#suffix'] = '</div>';Создаем форму с текстовым полем для ввода имени: $form['title']=array( '#type' => 'textfield', '#title' => t('Ваше имя'),Указываем это поле как обязательное для ввода.'#required' => true);Создаем форму с текстовым полем для ввода отзывов:$form ['body']= array( '#type' => 'textarea','#title' => t('Ваш отзыв'),Указываем это поле как обязательное для ввода.'#required' => true);Создаем кнопку submit:$form ['submit'] = array ( '#type' => 'submit', '#value' => t('Оставить отзыв') ,) ;return $form; } function otziv_form_submit ($form, &$form_state) { $title = $form_state ['values'] ['title']; $body = $form_state ['values'] ['body']; If (isset ($form_state ['values'] ['need'])) {$housing=$form_state ['values'] ['need'];}Создаем объект node$node = new stdClass (); Определяем тип создаваемого материала$node-> type = "otziv"; Опубликовано (1) или нет (0)$node-> status = 1;Размещено на главной (1) или нет (0)$node-> promote = 0; Закреплено вверху списков (1) или нет (0)$node-> sticky = 0; Комментарии включены (2) или нет (1)$node-> comment = 1; Название материала$node-> title = $title; Или например 'ru', если включен модуль locale$node->language = LANGUAGE_NONE;UID пользователя$node->uid = 0; // UID пользователя$node->body[LANGUAGE_NONE][]['value'] = $body;Дополнительные свойства nodeПодготовка к сохранениюIf ($node = node_submit($node)) {Сохранение ноды, теперь доступен nid новой ноды $node->nidnode_save($node);} drupal_set_message(t("Ваш отзыв принят!"));}После создания нового модуля, его необходимо включить. Для этого в административной панели сайта следует перейти в модули и поставить галочку «Включено», рядом с модулем отзывов. Теперь необходимо создать новый тип материала «Отзыв». Новый тип материала создается в административной панели, через структуру, далее следует создать новый тип материалов и настроить его для отзывов, добавив необходимые поля для вывода информации. Затем требуется вывести созданный тип материалов в блок. Для этого создается новый тип views далее необходимо выбрать вид вывода «в блок», добавить и настроить необходимые поля. Добавленные поля и настройки показаны на рисунке 8.Рисунок 8 — Добавления и настройка полей для отзывовСоздаем новую страницу, называем ее «Отзывы», синоним страницы сделаем «reports». Созданный блок, необходимо добавить в регион «Контент», в настройках блока, выбрать «показывать на определенных страницах», в текстовом поле написать синоним созданной страницы «reports». На рисунке 9 показано, что созданный блок новостей выведен успешно на страницу «Отзывы», также для проверки работы написаны несколько отзывов.Рисунок 9 — Рабочий модуль отзывов.Теперь, следует настроить модуль отзывов под цветовой стиль сервиса. Меняем стили для кнопки «Оставить отзыв» и добавляем курсор при наведение мышки на кнопку. Добавленный стиль выглядит следующим образом:#edit-submit{ width:200; color: white; text-decoration: none; padding: .8em 1em calc(.8em + 3px); border-radius: 4px; background:rgb(88, 142, 59); cursor:pointer;} Также необходимо поменять цвет имени, того кто оставил отзыв и сделать отступ справа, для того, чтобы текст не был близко друг с другом. Добавляем код:h4 { color:#588e3b; font-size:18px; margin-right: 10px;}На рисунке 10 показаны отзывы после добавления стилей к элементам.Рисунок 10 — отзывы после добавления стилейНа этом работа с модулем отзывов завершена, созданный модуль добавлен и успешно работает.3.5.2.