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

Содержание

Введение

1. Технический проект

1.1 Анализ предметной области

1.2 Постановка задачи

1.3 Требования к техническим средствам и программному обеспечению

1.4 Выбор типа сайта

1.5 Проектирование веб-сайта

1.6 Выбор средств реализации

2. Рабочий проект

2.1 Файловая структура сайта

2.2 Разработка сайта

2.3 Работа с сайтом

3. Экономическое обоснование

3.1 Исходные данные для расчета затрат

3.2 Расчет затрат на проектирование сайта

3.3 Расчет затрат производителя на внедрение и общей стоимости сайта

3.4 Расчет прибыли разработчика сайта

3.5 Расчет затрат заказчика, связанных с покупкой, внедрением и использованием сайта и срока окупаемости

Заключение

Список использованных источников

Приложение



Введение

Темой дипломного проекта является "Разработка и создание сайта для магазина "Сантехника".

Сайт - современный и эффективный канал коммуникации с потенциальным потребителем. Только возможности интернет-сайта позволяют в полной мере использовать все способы донесения информационного сообщения до пользователя. Текст, аудио и видео информация могут быть поданы в рамках одного сайта для ознакомления потребителя с ними. Интернет, как средство коммуникации, обладает поистине огромными возможностями, естественно, возникает желание использовать их с максимально возможной отдачей. Необходимо четко представлять: для чего, собственно разрабатывается интернет-сайт, какие задачи он будет решать и какие цели преследовать.

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

Сайт необходим для систематизации и управления потоками информации. Облегчения работы с ней и уверенности в том, что ничто из этой информации не пропадет и не потеряется. Информация, которая публикуется на страницах сайта, способна продавать, привлекать новых клиентов и пользователей. Однако, все это верно только в том случае, если сайт правильно организован, информация написана и подана профессионально, а пользователям удобно ею пользоваться.

Таким образом, исходя из выше сказанного, тема дипломного проекта является актуальной. сайт программный потребитель

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

Для достижения поставленной цели будут рассмотрены и решены следующие вопросы и задачи:

- выбраны оптимальные вид и тип сайта;

- произведен анализ основных методов разработки веб-сайтов;

- выбраны рабочая среда и языки программирования;

- выбран хостинг;

- создана структура сайта;

- реализованы основные функции;

- рассчитана экономическая эффективность использования сайта.

Объектом исследования является магазин сантехники.

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

Данный программный продукт будет предназначен для потенциальных клиентов магазина "Мир сантехники".

Создание качественного веб-сайта длительный и трудоемкий процесс, который включает в себя следующие этапы:

- определение целей разработки сайта, проведение исследований;

- разработка технического задания:

а) определение целевых клиентов сайта, а также общей миссии;

б) определение структуры сайта в виде схемы;

в) определение функциональных элементов каждой страницы сайта;

г) описание дизайна;

д) выбор технологий разработки сайта;

е) определение технических требований к сайту;

- создание дизайн-макета сайта;

- верстка, программирование и внедрение в систему управления контентом (CMS);

- наполнение сайта;

- запуск сайта в интернете;

- тестирование сайта;

- развитие и продвижение сайта.

Основным методом исследования в данном дипломном проекте является изучение и анализ существующих сайтов, а также методов и средств разработки веб-ресурсов. Практическая значимость состоит в том, что проектируемый сайт может быть использован любым предприятием подобного типа.

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



1. Технический проект

1.1 Анализ предметной области

Создание качественного веб-сайта - длительный и трудоемкий процесс.

На первом этапе определяются цели разработки сайта, проводятся необходимые исследования. На данном шаге очень важно понять, зачем и для кого разрабатывается веб-сайт. Без верно поставленных целей и задач невозможно создать необходимый сайт. Это может привести к тому, что в процессе создания сайта, заказчик поймет, что получается не то, что он хотел. Нужно плотно поработать с заказчиком, чтобы понять, что именно он ждет от его будущего сайта. Также важно проведение исследований существующих сайтов аналогичной тематики и составление схемы: какой функционал они предоставляют пользователям, какой дизайн и структуру они имеют.

На втором этапе производится разработка технического задания (ТЗ).

ТЗ может составлять, как правило, как заказчик, так и исполнитель. Но обсуждается и согласовывается ТЗ, безусловно, обеими сторонами, так как какие-то вещи знать не может заказчик, а какие-то исполнитель. Составление правильного ТЗ просто необходимый шаг в этапах создания сайта, если что-то упустить в задании, например, дополнительный модуль, то исполнитель может отказаться от доработки (в рамках данной задачи).

ТЗ должно включать в себя:

- обозначение целевых клиентов сайта, а также описание общей миссии;

- структуру в виде схемы, состоящей из основных разделов, подразделов и примерного количества страниц;

- пожелания к модулям (например, "обратная связь", "мы вам перезвоним", "вопрос-ответ", "фильтры" и тому подобное);

- описание дизайна (общее оформление, можно на примерах других сайтов, основные цвета, логотип, местонахождение различных блоков);

- какие технологии использовать (вид CMS, библиотеки скриптов, будет ли мобильная версия и прочее);

- порядок предоставления, обработки или создания графической и текстовой информации;

- технические требования к сайту.

Третий этап - создание дизайн-макета сайта.

В процессе разработки сайта, при создании дизайна необходимо данный пункт разделить на несколько этапов создания:

- предоставление оговоренного количества различных по концепции макетов главной страницы;

- доработка и согласование выбранного варианта концепции;

- создание макетов внутренних страниц (категории, товара/услуги, контактов, если планировалась мобильная версия, то каждый макет должен быть переделан и под мобильную версию);

- доработка и согласование каждой из типовых страниц.

На макете может отсутствовать наполнение: как текстовая информация, так и фотографии, которые должен предоставить заказчик в процессе работы по созданию сайта. Его временно можно заполнить демо- текстом и картинками. Но все элементы дизайна должны быть прорисованы.

Четвертый этап - верстка, программирование и внедрение в CMS.

На данном шаге происходят чисто техническая работа, качество которой зависит от профессиональных навыков верстальщика и программиста:

- универсальность вёрстки на CMS - возможность без лишних сложностей внедрять дополнительные модули;

- "красивый" код - здесь применяется простое правило: чем код будет меньше и грамотнее, тем сайт загрузится быстрее;

- валидность (корректность) - верное использование функционала CMS при внедрении дизайна, структуры и модулей позволит без труда разобраться с системой стороннему специалисту;

- кроссбраузерная верстка - адекватное отображение сайта во всех возможных браузерах (Internet Explorer, Chrome, Firefox, Opera).

В результате данных этапов получается полностью рабочий сайт, но без какого-либо наполнения.

На пятом этапе производится наполнение сайта.

Без текста и фотографий сайт имеет достаточно условную ценность. Заказчик предоставляет информацию и заполняет сайт текстом и картинками, либо это делает исполнитель (в зависимости от договоренностей). Как правило, если это делает заказчик, ему предоставляется инструкция по работе с CMS.

Все материалы лучше всего отдать на редактирование профессиональному копирайтеру, т.к. этот текст будут читать клиенты, и он будет формировать репутацию заказчика в интернете.

Шестой этап - запуск сайта в интернете.

Исполнитель переносит проект на хостинг, заказчик предоставляет или покупает доменное имя (адрес сайта) и сайт успешно стартует в сети. Если в ТЗ были оговорены какие-либо предварительные работы по SЕО, например, добавления сайта в вебмастера Яндекс и Google, создание HTML-карты сайта, установка метрики и аналитики, то исполнитель их проводит.

Седьмой этап - тестирование сайта.

Выбирается несколько человек, например, подчиненные заказчика, и они проверяют работу сайта с различных устройств: работу модулей, правильные ли ссылки стоят на страницах, все ли картинки грузятся и прочее. Данный этап длится, как правило, от недели до месяца.

И последний этап - развитие и продвижение сайта.

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

- создавать новые материалы, акции, новости;

- заниматься продвижением ресурса;

- спрашивать посетителей, все ли их устраивает, везде ли удобно;

- давать различные виды рекламы.

1.2 Постановка задачи

Целью дипломного проекта является разработка и создание сайта для предоставления информации об ассортименте и услугах магазина по продаже сантехники.

Разрабатываемый ресурс должен соответствовать следующим требованиям:

- удобство в работе - грамотная навигация облегчит работу с сайтом и будет привлекать к нему посетителей. Фон, размер и цвет шрифта, заголовки, общее расположение материалов, - всё должно быть выдержано в едином стиле, соответствовать друг другу, в противном случае будет нарушена целостность восприятия;

- уникальность материалов, представленных на сайте;

- отсутствие загруженности ненужной информацией и различными эффектами, отсутствие сторонней рекламной информации;

- отсутствие пустых страниц и неактивных гипертекстовых ссылок;

- грамотность представленного на сайте материала;

- информативность главной страницы сайта - именно на этой странице должна быть расположена основная информация, чтобы посетитель заинтересовался и посетил остальные страницы сайта;

- отсутствие ненормативной лексики, экстремистской информации, а также другой, нарушающей требования законодательства РФ;

- систематичность обновления информации.

Сайт должен обеспечивать:

- отображение контактной информации;

- отображение информации о группе продаваемых товаров;

- возможность задать вопрос сотрудникам магазина.

Выходными данными будут:

- контактная информация о магазине (адрес, телефон);

- виды предлагаемых товаров и услуги.

Входными данными для веб-сайта будут:

- личные данные пользователя (ФИО, E-mail адрес, номер телефона);

- вопрос или отзыв пользователя о сайте или предоставляемых услугах.

Веб-сайт будет состоять из связанных HTML-страниц, на которых будет располагаться вся необходимая пользователю информация.

Способ решения поставленных задач зависит от выбора среды разработки и средств программирования.

1.3 Требования к техническим средствам и программному обеспечению

Для обеспечения корректной работы разрабатываемого веб-сайта на компьютере должна быть установлена одна из следующих операционных систем: Windows XP, Windows Vista, Windows 7, Windows 8 или Windows 10.

Компьютер должен удовлетворять следующим характеристикам:

- CPU 1.6 ГГц;

- 512 Mb RAM;

- видеокарта 256 Mb;

- разрешение экрана не менее 800х 600 точек;

- 50Mb свободного места на жестком диске;

- стандартная клавиатура 101/102 клавиши;

- манипулятор типа "Мышь".

Для разработки веб-сайта на компьютере должны быть установлены следующие программы:

- браузер (Google Chrome, Yandex, Microsoft Edge или любой другой);

- Adobe Photoshop CS6;

- Adobe Illustrator CC 2017;

- Sublime Text 3.

Также для правильной работы скриптов программного продукта необходимо активное интернет-соединение и разрешение использования сокетов в браузерах.

1.4 Выбор типа сайта

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

Рассмотрим типы сайтов, которые можно использовать для достижения поставленной цели:

- сайт-визитка - обычно состоит из нескольких страниц и имеет уникальный, но простой и функциональный дизайн. Он идеально подходит для компаний, которые хотят разместить информацию о себе и своих услугах в интернете. Основные разделы сайта:

- "О компании", "Продукция или услуги", "Контактная информация", "Прайс-листы". Он может использоваться предприятиями, организациями и частными лицами;

- корпоративный информационный веб-сайт - необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом, может быть оснащён функциями обмена информацией между удалёнными филиалами. Он позитивно влияет на репутацию и имидж компании. Его дизайн должен соответствовать фирменному стилю компании. Такой сайт чаще всего включает административную часть для создания и изменения контента, позволяющую менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию. Здесь используется минимум графики, основной упор идет на текст. Корпоративный веб-сайт идеально подходит для обеспечения имиджевого присутствия в сети интернет: служит для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах. Он обычно содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения. Нередко корпоративные сайты сочетают информацию о компании с каталогом продукции. Здесь используется эксклюзивный оригинальный дизайн, выгодно представляющий компанию, использование нестандартных идей и решений в оформлении, процентное соотношение текст/графика равно 50/50;

- интернет-магазин - интерактивный веб-сайт, рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа. При этом администратор магазина обязан организовать доставку товара и проконтролировать расчеты с покупателем за поставку.

- информационный сайт - достаточно большой виртуальный массив информации, включающий в себя множество различных тематических разделов меньшего размера, либо некоторое количество самостоятельных проектов. Он является для клиента основным источником информации, напоминает энциклопедию или специализированный журнал;

- контент-проект - это сайт, как правило, некоммерческой направленности, который представляет собой собрание текстов, статей и прочих материалов. Его основная задача - привлечение посетителей по определенной тематике. В дальнейшем, этот трафик обычно перенаправляется на коммерческие сайты и, по сути, контент-проект используется, как рекламная площадка. Может быть выполнен в виде интернет-библиотеки, энциклопедии или справочника. Каждая отдельная страничка такого сайта дает, как правило, незначительный трафик, однако общий трафик такого сайта может быть очень внушительным. Контент-проект, при условии размещения на нем подходящей по тематике рекламы, дает самый качественный и тематический трафик на коммерческие сайты партнеров (а значит и конвертацию посетителей в покупателей), так как эта тема, с очень высокой долей вероятности, будет интересна большинству посетителей, пришедших с сайта контент-проекта;

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

По природе содержимого, сайты классифицируются на:

- статические - всё содержимое заранее подготавливается. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере;

- динамические - содержимое генерируется специальными скриптами (программами) на основе других данных из любого источника.

Статические сайты сделаны по классической технологии HTML. Такие веб-страницы написаны полностью на языке разметки HTML. Статическими они называются потому, что контент (содержание сайта) всегда будет неизменным. Плюсом такого вида разработки является его простота и нетребовательность к аппаратным ресурсам. Основным минусом является отсутствие интерактивности. Кроме того, в таких сайтах сложнее изменить информацию и дизайн страниц. Они не удовлетворяют современным требованиям к сайтам и сейчас практически не используются.

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

Современные сайты, как правило, включают в себя некоторые свойства и качества из смежных категорий, что увеличивает возможности ресурса, придает ему динамичность, а также эффектность дизайна [11].

Исходя из представленной классификации, в рамках данного дипломного проекта будет разрабатываться статичный сайт-визитка.

1.5 Проектирование веб-сайта

Главной задачей сайта будет усиления эффективности рекламы и увеличение количества клиентов магазина "Мир сантехники".

Проектировать сайт необходимо для того чтобы иметь представление о желаемом итоге работы. На этапах проектирования легче всего выявить и проработать многие моменты. Если ошибки выявятся, то это позволит снизить затраты времени на их исправление в процессе работы. Благодаря проектированию можно улучшить работу над интернет-ресурсом.

Проектирование и разработка сайта включают в себя следующие этапы:

- проектирование структуры сайта - расположения контента, разделов и элементов навигации;

- разработка веб-дизайна - создание графических элементов макета сайта, стилей и элементов навигации;

- разработка модулей, базы данных и других элементов;

- разработка взаимодействия модулей и базы данных;

- тестирование и размещение сайта в сети интернет.

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

Выполнив анализ задач сайта, были определены основные разделы и элементы сайта. Сайт будет представлять многостраничный сайт-визитку. Особенностью данной структурной схемы является то, что основное содержание сайта располагается на одной странице, а дополнительный контент вынесен на другие страницы. Логическая структура сайта представлена на рисунке 1.



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

Рисунок 1 - Внутренняя структура веб-сайта

На странице "Главная" будет размещена основная информация о магазине.

На странице "Услуги" будет написана информация об услугах и товарах, предлагаемых магазином.

На странице "Контакты" будет отображаться основная информация для связи с менеджерами магазина.

Макет сайта должен разбиваться на контент-зоны (элементы отображения информации на страницах сайта). При этом каждая контент-зона выполняет свою роль.

Структура страницы должна состоять из элементов, которые должны обязательно присутствовать на всех страницах сайта - это меню навигации, название сайта, заголовок статьи или страницы, контактная информация.

На рисунке 2 представлен проектируемый макет сайта компании.

Меню
Шапка
Контент зона
Подвал

Рисунок 2 - Проектируемый макет сайта

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

Контент-зона будет предназначена для вывода основной информации сайта, информация из этого блока на прямую зависит от страницы на которой находится пользователь.

В подвале сайта будет размещена контактная информация для прямой связи с менеджером.

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

Для решения поставленных задач необходимы следующие программные модули:

- доставка письма пользователя на почту;

- отображение контактной информации.

1.6 Выбор средств реализации

Данный веб-сайт может быть реализован с помощью HTML, XML, XSLT, CSS, JS, PHP, Python и многих других средств.

PHP - скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. На данный момент выпущена версия PHP 7.0.1. Он поддерживается практически всеми представителями хостинга и входит в "стандартный" набор для создания сайтов (LAMP - Linux, Apache, MySQL, PHP).

Благодаря своей простоте, скорости выполнения, богатой функциональности, распространению исходных кодов на основе лицензии PHP, этот язык является чуть ли не самым популярным в области технологий создания сайтов. Он отличается наличием ядра и подключаемых модулей, "расширений": для работы с базами данных, сокетами, динамической графикой, криптографическими библиотеками, документами формата PDF. Есть возможность разработать, а также подключить дополнительное расширение.

Существуют три основных области, где используется PHP:

– создание скриптов для выполнения на стороне сервера;

– создание скриптов для выполнения в командной строке;

– создание приложений GUI, выполняющихся на стороне клиента.

Возможности PHP очень обширны. Главным образом, PHP применяется при написании скриптов, работающих на стороне сервера и способен выполнять всё то, что выполняет любая другая программа CGI, например, обрабатывать данные форм, генерировать динамические страницы, отсылать и принимать cookies и так далее. Помимо этого, PHP:

– доступен для большинства операционных систем, включая Linux, многие модификации Unix (такие, как HP-UX, Solaris и OpenBSD), Microsoft Windows, Mac OS X, RISC OS и многие другие;

– включает поддержку большей части веб-серверов (для большинства серверов PHP поставляется в качестве модуля, для других, поддерживающих стандарт CGI, PHP может функционировать в качестве процессора CGI);

– поддерживает обширный круг баз данных, в том числе SQLite и MySQL;

– поддерживает DBX для работы на абстрактном уровне и ODBC, т.е. можно работать с любой базой данных, поддерживающей эти стандарты;

– поддерживает "общение" с другими сервисами с использованием различных протоколов: LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (на платформах Windows), а также многих других;

– поддерживает стандарт обмена сложными структурами данных WDDX;

– поддерживает использование объектов Java;

– дает возможность работать с изображениями, файлами PDF, роликами Flash, способен выдавать любые текстовые данные (XHTML, другие XML-файлы), автоматически генерировать и сохранять их в файловой системе сервера;

– поддерживает многие другие расширения: функции поисковой машины mnoGoSearch, IRC Gateway, для работы со сжатыми файлами (gzip, bz2), календарных вычислений, перевода и другие [2].

JavaScript - прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основными его чертами являются слабая и динамическая типизация, автоматическое управление памятью и прототипное программирование.

Возможности JavaScript зависят от окружения, в котором он запущен. В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

- создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и тому подобное;

- реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия клавиш клавиатуры и тому подобное;

- посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX");

- получать и устанавливать cookie, запрашивать данные, выводить сообщения и многое другое.

Полная интеграция с HTML/CSS, поддержка всеми распространёнными браузерами и включение в них по умолчанию, а также простота создания типичных функций при разработке сайтов делают JavaScript самым распространённым средством создания браузерных интерфейсов [5].

Язык HTML (от английского Hyper Text Markup Language - язык разметки гипертекста) предназначен для формирования и оформления страниц текста, которые будут просматриваться с помощью специальных программ-браузеров.

Этот язык разметки является базовым в области технологий создания сайтов, так как относительно легок в освоении. Но чрезмерная простота является и его недостатком. HTML прекрасно отвечал требованиям раннего периода развития технологий создания сайтов, но с дальнейшим его развитием возникли существенные проблемы. Например, существовали проблемы при работе с графикой, аудио- и видеоинформацией в браузере. На данный момент в стандарте HTML5 устранены данные недостатки.

HTML предоставляет следующие возможности:

- издавать сетевые документы с заголовками, текстом, таблицами, списками, фотографиями;

- получать информацию из сети интернет через ссылки гипертекста при нажатии кнопки;

- создавать формы для посылки запросов на удаленные компьютеры, чтобы производить поиск информации, осуществлять бронирование, заказывать товары и тому подобное;

- включать видео и аудио клипы, а также другие программные приложения непосредственно в веб-документы.

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

MySQL - многопользовательский, многопоточный сервер базы данных SQL. Имеет хорошую скорость и гибкость, что делает его предпочтительным при использовании для хранения изображений и файлов на веб-серверах. MySQL соответствует спецификации ANSI 92 SQL.

Его преимущества:

- поддержка нескольких параллельных запросов (многопоточность);

- поддержка различных типов таблиц: InnoDB, MyISAM, NDB (MySQLCluster), Memory, Merge, Archive, CSV;

- использование хранимых процедур, триггеров и представлений;

- оптимизация связей с присоединением многих данных за один проход;

- гибкая система паролей и режимов доступа;

- MySQLConnectors (ODBC, JDBC.NET и другие) позволяет создавать приложения на нескольких языках;

- данные хранятся в формате ISO8859_1;

- интерфейс с языками C/С++, Perl, Delphi, Эйфель, Java, Лисп, PHP, Python, Ruby, Smalltalk, Компонентный Паскаль и Tcl, библиотеками для языков платформы.NET;

- MySQLWorkbench позволяет визуально разрабатывать SQL-запросы и администрировать базу данных;

- поддержка ключевых полей, а также специальных полей в операторе CREATE;

- поддержка чисел длинной от 1 до 4 байт (int, float, double, fixed), строк переменной длины и меток времени;

- наличие утилиты проверки и ремонта таблицы (isamchk);

- быстрая система памяти, основанная на потоках;

- использование псевдонимов таблиц, а также отдельных колонок в таблице;

- доступен более чем на 20 платформах и операционных системах, включая Linux, Unix, Mac и Windows.

Основные достоинства MySQL - скорость доступа к данным, устойчивость к сбоям и взломам, а также легкость в использовании [2].

Для создания физической модели базы данных также можно использовать файловую базу данных SQLite 3, так как она:

- очень надежна - при выпуске версии проходит через ряд серьёзнейших автоматических тестов (проводится приблизительно 2 миллиона тестов);

- имеет очень высокую производительность за счет того, что движок базы и интерфейс к ней реализованы как единое целое;

- хранит данные в файле;

- поставляется в комплекте при установке Django, так сказать "из коробки".

В настоящее время увеличивается доля использования систем управления контентом (CMS) для быстрого создания сайтов. Они устанавливаются на хостинге сайта. При помощи современных CMS создать сайт самостоятельно можно даже новичку.

Основными достоинствами CMS являются:

- формирование страниц сайтов из текстов, шаблонов дизайна, графики, таблиц, хранящихся в базе данных;

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

Популярными системами управления контентом в настоящее время являются WordPress и Joomla!

WordPress написана на PHP c использование СУБД MySQL, применяется для создания блогов, новостных сайтов, интернет-магазинов.

Joomla! написана на PHP и JavaScript c использование СУБД MySQL, возможности очень широкие - от создания небольшого сайта до крупного корпоративного проекта.

Для написания сайта будут использоваться следующие языки и технологии: HTML, CSS, JavaScript, PHP.



2. Рабочий проект

2.1 Файловая структура сайта

Файловая структура сайта состоит из папок, HTML, CSS, JavaScript и PHP файлов, расположенных в корневой папке хостинга (рисунок 3).

Рисунок 3 - Файловая структура сайта

В папке "CSS" расположены файлы с расширением.css, служащие для оформления сайта.

В папке "JS" расположены файлы с расширением.js, хранящие в себе скрипты, используемые на сайте.

В папке "img" расположены файлы с расширениями.jpg, .png, .gif, используемые для создания графического дизайна сайта.

В папке "vendor" расположены несколько папок. Каждая из них содержит в себе готовые скрипты и библиотеки, скачанные с сети интернет. В папке "bootstrap" расположены файлы фреймворка bootstrap, предназначенные для облегчения верстки сайта.

В папке "jQuery" находятся файлы библиотеки jQuery, предназначенные для упрощения обращения к DOM элементам страницы. В папке "jquery-easing" расположены функции jQuery, предназначенные для создания плавной прокрутки страниц сайта.

Файл "index.html" хранит структуру главной страницы.

Файл "contact.html" хранит структуру и данные для отображения контактной информации о магазине.

Файл "service.html" хранит структуру и информацию о товарах и услугах, предоставляемых магазином.

2.2 Разработка сайта

Сначала была создана файловая структура сайта. Для этого были созданы папки "css", "js" и "img". В папке "css" был создан файл стилей main.css. В папке "js" был создан файл main.js. В папку "img" были загружены обработанные в программе Adobe Photoshop картинки, в дальнейшем использовавшиеся для создания дизайна страниц сайта.

Для упрощения работы с версткой сайта, было решено скачать фреймворк bootstrap. Файлы фреймворка было решено разместить в отдельной папке, для этого в корневой папке сайта была создана папка "vendor", в нее было решено загружать все файлы, скачанные из интернета.

После создания папок и дополнительных файлов, был создан файл index.html. Первым делом, была создана структура главной страницы. Данная структура предусматривает разделение страницы на пять блоков:

- "Шапка" страницы;

- блок с баннером;

- блок с информацией о магазине и его преимуществах;

- блок с услугами магазина;

- блок отмены заявки на обратную связь;

- блок с контактной информацией для связи с менеджером магазина;

- "Подвал" страницы.

Блок с идентификатором "header" (рисунок 4), предназначен для создания структуры "шапки" сайта.



Рисунок 4 - Код структуры шапки сайта

Блок с классом "masthead" (рисунок 5) содержит в себе структуру баннера главной страницы.

Рисунок 5 - Код структуры баннера на главной странице

Блок с идентификатором "about" (рисунок 6) предназначен для создания структуры блоков "О нас" и "Наши преимущества".

Блок с идентификатором "projects" (рисунок 7) предназначен для хранения структуры блока с предлагаемыми услугами магазина.



Рисунок 6 - Код структуры блоков "О нас" и "Наши преимущества"

Рисунок 7 - Код структуры блока "Услуги"

Блок с идентификатором "signup" (рисунок 8) предназначен для хранения структуры блока для отправки запроса на обратную связь. Для того, чтобы письмо было отправлено, был создан файл mail.php, его код представлен увидеть в приложении А.



Рисунок 8 - Код структуры блока "Обратная связь"

Блок с классом "contact-section" (рисунок 9) предназначен для хранения структуры блока вывода информации о способах связи с компанией.

Рисунок 9 - Код структуры блока "Контакты"

Блок с идентификатором "footer" (рисунок 10) содержит структуру "подвала" сайта.

Рисунок 10 - Код структуры подвала сайта

После создания структуры сайта было произведено наполнение страницы контентом.

Далее была создана страница с услугами компании. Для этого в корневой папке сайта был создан файл "service.html". В нем была прописана структура, состоящая из следующих блоков:

- "Шапка";

- блок с услугами магазина;

- "Подвал".

Несмотря на то, что в структуре странице имеются блоки, аналогичные блокам на главной странице, они наполнялись разным контентом.

Затем была создана страница с контактами. Для этого был создан файл "contact.html", содержащий в себе структуру, состоящую из следующих блоков:

- "Шапка";

- "Контакты";

- "Обратная связь";

- "Карта";

- "Подвал".

Блоки "Шапка", "Контакты" и "Подвал" имеют аналогичную структуру с блоками на главной странице. Блок "Карта" содержит в себе структуру для вывода карты с меткой (рисунок 11). Метка указывает на местонахождения магазина на карте. Сама карта была создана с помощью сервиса Google Maps.

Рисунок 11 - Код структуры для вывода карты



2.3 Работа с сайтом

Как только пользователь перейдет на сайт, он попадет на главную страницу, состоящую из блоков:

- "Шапка";

- "Баннер";

- "О нас";

- "Наши преимущества";

- "Мы предлагаем";

- "Обратная связь";

- "Контакты";

- "Подвал".

"Шапка" сайта (рисунок 12) состоит из двух элементов. Слева размещено название магазина, кликнув на которое, пользователь будет перенаправлен на главную страницу сайта. Справа располагается блок навигации, состоящий из следующих пунктов:

- "Главная";

- "Услуги";

- "Контакты".

Рисунок 12 - Шапка сайта

По нажатию на любой пункт из меню навигации пользователь будет перенаправлен на выбранную страницу.

Блок "Баннер" (рисунок 13) представляет собой картинку, на которой размещено название магазина, призыв к действию и кнопка, нажав на которую пользователь будет направлен к блоку "О нас".



Рисунок 13 - Баннер

Блок "О нас" (рисунок 14) содержит краткую информацию о том, что получит клиент, если обратится в компанию. В случае, если пользователь нажмет на выделенное цветом слово, он будет перенаправлен к блоку "Обратная связь".

Рисунок 14 - Блок "О нас"

Блок "Наши преимущества" (рисунок 15) состоит из блока, залитого темно-серым цветом, на котором размещены шесть карточек, содержащие основные группы товаров, которые можно купить в магазине компании.



Рисунок 15 - Блок "Наши преимущества"

Блок "Мы предлагаем" (рисунок 16) состоит из трех блоков и заголовка. Первый блок размещен в самом верху, сразу после заголовка, второй блок находится сразу под ним и имеет немного другую структуру. Третий блок идентичен второму, но его структура выводит контент в обратном порядке. Если во втором блоке, порядок "Картинка - Текст", то в третьем блоке "Текст - Картинка".

Рисунок 16 - Блок "Мы предлагаем"

Блок "Обратная связь" (рисунок 17) состоит из поля для ввода номера мобильного телефона и кнопки "Написать". Как только пользователь введет номер и нажмет на кнопку, отобразится надпись об успешной отправке письма. Само письмо придёт на почту менеджеру.

Рисунок 17 - Блок "Обратная связь"

Блок "Контакты" (рисунок 18) состоит из трех карточек, расположенных на тёмно-сером фоне. Каждая из карточек отображает информацию для способов связи с организацией.

Рисунок 18 - Блок "Контакты"

Блок "Подвал" (рисунок 19) содержит в себе значок копирайта, год создания и название сайта.

Рисунок 19 - Блок "Подвал"

Используя меню навигации, пользователь может перейти на страницу "Контакты". Данная страница содержит основную информацию о компании и состоит из следующих блоков:

- "Шапка";

- "Контакты";

- "Обратная связь";

- "Карта";

- "Подвал".

Блок "Шапка", "Подвал", "Контакты" и "Обратная связь" идентичны по своей структуре и содержимому с блоками, расположенными на главной странице. Блок "Карта" (рисунок 20) состоит из одного элемента, карты с меткой, созданной в Google Maps и в дальнейшем встроенной на сайт.

Рисунок 20 - Блок "Карты"

Используя меню навигации, пользователь может перейти на страницу "Мы предлагаем". Данная страница содержит основную информацию о том, что может предложить компания и состоит из следующих блоков:

- "Шапка";

- "Мы предлагаем";

- "Подвал".

Все блоки идентичны блокам с главной страницы. Разница лишь в количестве повторений блока "Мы предлагаем". На данной странице их больше и отличаются они содержимым.



3. Экономическое обоснование

3.1 Исходные данные для расчета затрат

В дипломном проекте разработан сайт для магазина "Сантехника".

Общая стоимость владения представляет собой совокупность затрат, осуществляемых на следующих стадиях жизненного цикла сайта: разработка технологического проекта, его внедрение, эксплуатация и сопровождение.

При проектировании используется трудовой потенциал сотрудников, а также персональные компьютеры (ПК), оргтехника и специальное программное обеспечение (ПО) для проектирования системы.

Сведем в таблицу 1 трудоемкость работы исполнителей.

Таблица 1 - Трудоемкость работы исполнителей

Должность	Оклад, руб./день	Трудоемкость, дней
Веб-дизайнер	130	5
Верстальщик	130	5
Программист	170	7
Руководитель проекта	150	5

В сферу деятельности руководителя проекта входит исследование предметной области, разработка предпроектных решений, технического задания, проектных решений, анализ экономической эффективности, исследование безопасных условий при работе проектируемой системы, контроль технологического процесса на всех этапах, а также размещение сайта и разработка руководства пользователя. Веб-дизайнер занимается созданием дизайн-макета в программе AdobePhotoshop, а затем преобразованием его в PSD-формат. Верстальщик занимается версткой сайта с помощью HTML5, CSS3 и JavaScript исходя из макета, созданного веб-дизайнером. Программист занимается разработкой функционала сайта.

При внедрении системы учитываются трудозатраты сотрудников, осуществляющих работы (кодирование, тестирование, отладку), а также затраты на оборудование, комплектующие, материалы и специальное ПО, позволяющее физически реализовать и обеспечить качество системы. Они показаны в таблицах 2 и 3.

Таблица 2 - Затраты на оборудование и ПО

Наименование затрат	Цена, руб./ед.	Количество, шт.	Сумма, руб.
Стоимость базового ПО
Windows 10	3000	1	3000
Sublime Text 3	0	1	0
Adobe Photoshop CS6	0	1	0
Google Chrome	0	1	0
Opera	0	1	0
Итого:			3000
Стоимость базового оборудования
Ноутбук 1920x1080, IPS, Intel Celeron N3350, 2 х 1.1 ГГц, RAM 3 ГБ, SSD 120 ГБ, 32 ГБ, Intel HD 500, клавиатура + мышь	16000	1	16000
МФУ струйное HP DeskJet 2630 All-in-One	3000	1	3000
Итого:			19000

Таблица 3 - Затраты на работы по разработке сайта

Наименование работ	Время, дней	Оклад, руб./день	Сумма, руб.
Разработка технического задания	2	150	300
Разработка дизайна	5	130	650
Верстка дизайна	5	130	650
Кодирование	7	170	1190
Тестирование	2	150	300
Создание руководства пользователя	1	150	150
Итого:	22		3240

Определим затраты:

- дополнительная заработная плата (ЗПдоп, 10% от основной заработной платы за месяц) - 324 руб.;

- премия (ЗПпр, 20% от основной заработной платы за месяц) - 648 руб.;

- отчисления в фонды социального страхования (Осн, 30% от основной заработной платы за месяц) - 972 руб.;

- амортизационные отчисления за месяц (Ам, 15% от первоначальной стоимости оборудования) - 2850/12 = 237,5 руб.;

- затраты на техническое обслуживание за месяц (Зто, 7% от первоначальной стоимости оборудования) - 1330/12 = 110,83 руб.;

- затраты на расходные материалы за месяц (Зм, 2% от первоначальной стоимости оборудования) - 380/12 = 31,66 руб.;

- накладные расходы за месяц (Знр, 60% от первоначальной стоимости оборудования) - 11400/12 = 950 руб.;

- расходы на хранение и обновление ПО за месяц (Зпо, 20% от первоначальной стоимости базового ПО) - 600/12 = 50 руб.

- мощность, потребляемая вычислительной техникой:

а) компьютер - 0,37 кВт/ч.;

б) принтер - 0,1 кВт/ч.;

- действительный фонд времени работы оборудования (ФД) - 176 ч.;

- цена 1 кВт электроэнергии (Цэ) - 3,4 руб.

3.2 Расчет затрат на проектирование сайта

Затраты на проектирование и реализацию будут определяться выплатами заработной платы исполнителям работ с отчислениями на социальные нужды, а также стоимостью работы используемого оборудования (ПК, на котором производится проектирование системы и программирование ее управляющей программы).

Проектирование системы и реализация программы ведутся с использованием ПК, поэтому затраты можно определить по формуле (1):

ЗПроект = ЗПосн + ЗПдоп + ЗПпр + Осн + Зпо + tоб Ч Смч, (1)

где ЗПосн - основная заработная плата исполнителей работ, руб.;

ЗПдоп - дополнительная заработная плата исполнителей работ, руб.;

ЗПпр - премия, руб.;

Осн - отчисления на социальные нужды, руб.;

Зпо - расходы на хранение и обновление ПО за месяц, руб.;

tоб - время работы используемого для проектирования компьютерного оборудования, ч.;

Смч - стоимость машино-часа работы используемого оборудования, руб./ч.

Зпроект = 3240 + 324 + 648 + 972 + 50 + 159 * 33,11 = 10498,49 руб.

Стоимость машино-часа работы оборудования (Смч) определяется по формуле (2):

, (2)

где ЗП - затраты на заработную плату обслуживающего персонала, руб.;

Ам - амортизационные отчисления за месяц, руб.;

Зто - затраты на техническое обслуживание за месяц, руб.;

Зм - затраты на расходные материалы за месяц, руб.;

Зэ - затраты на электроэнергию за месяц, руб.;

Знр - накладные расходы за месяц, руб.;

Фд - действительный фонд времени работы оборудования, ч.

Смч = (4212 + 237,5 + 31,66 + 110,83 + 286,98 + 950) / 176 = 33,11 руб.

Заработная плата исполнителей за весь срок определяется по формуле (3):

ЗП = ЗПосн + ЗПдоп+ЗПпр, (3)

ЗП = 3240 + 324 + 648 = 4212 руб.

Затраты за месяц на электроэнергию используемого оборудования определяются по формуле (4):

, (4)

где N - мощность оборудования, кВт;

Цэ - цена электроэнергии, руб./кВт.;

Кс - коэффициент, учитывающий потери в сети, Кс = 0,98.

Зэ = (0,47*176*3,4) / 0,98 = 286,98 руб.

Далее определяется время работы используемого оборудования (tоб).

Руководитель проекта выполняет анализ требований к программному продукту и проектирование с использованием компьютера в течение тридцати пяти часов. Программист занимается написанием программных модулей системы, программированием и отладкой изготовленной системы с использованием компьютера в течение сорока девяти часов. Веб-дизайнер и веб-программист занимаются разработкой структуры и дизайна сайта в течение семидесяти часов. Результаты проектирования распечатываются на принтере. В среднем время работы принтера составляет пять часов, за которые производится распечатка пилотного и итогового проекта. Тогда время работы оборудования составит сто пятьдесят девять часов.

Исходя из рассчитанных значений, вычисляются суммарные затраты на проектирование системы по формуле (1).

3.3 Расчет затрат производителя на внедрение и общей стоимости сайта

В расчет затрат на внедрение должны входить затраты на транспортировку, установку, отладку и тестирование спроектированной системы.

Затраты на внедрение будут определяться по формуле (5):

Звнедр = Зтр + Змонт, (5)

где Зтр - затраты на транспортировку, руб.;

Змонт - затраты на установку, отладку и тестирование, или инсталляцию системы, руб.

Затраты на транспортировку равны нулю, так как не нужно непосредственно доставлять готовый продукт заказчику.

Затраты на инсталляцию определяются по формуле (6):

Змонт = Здом + Зхос, (6)

где Здом - затраты на выбор домена, руб.;

Зхос - затраты на размещение сайта на хостинге, руб.

Так как хостинг дает доменное имя и позволяет размещать сайт бесплатно, то затраты на инсталляцию тоже равны нулю.

Таким образом, затраты на внедрение системы равны нулю.

Годовые текущие эксплуатационные затраты будут состоять только из затрат на хранение и обновление ПО, так как другие эксплуатационные расходы остаются прежними. Поэтому эксплуатационные расходы будут определяться по формуле (7):

, (7)

где Нпо - годовая норма расходов на хранение и обновление ПО, 20 %;

Спо - первоначальная стоимость используемого ПО, руб.

Зэкс = 3000 * 0,2 = 600 руб.

Суммарные затраты будут составлять общую стоимость спроектированного сайта без учета рентабельности. Полную стоимость можно определить по формуле (8):

С = Зпроект + Звнедр + Зэкс, (8)

С = 10498,49 + 0 + 600 = 11098,49 руб.

3.4 Расчет прибыли разработчика сайта

Размер прибыли определяется по формуле (9):

, (9)

где С - общая стоимость системы, руб.;

Р - уровень рентабельности проекта, 25 %.

Пр = 11098,49 * 0,25 = 2774,62 руб.

Цена реализации проекта определяется по формуле (10):

Цр = С + Пр + НДС, (10)

где НДС - налог на добавленную стоимость, 18 %.

НДС рассчитывается по формуле (11):

, (11)

где Пр - прибыль, получаемая разработчиком, руб.

НДС = (11098,49 + 2774,62)*0,18 = 2497,15 руб.

Цр = 11098,49 + 2774,62 + 2497,15 = 16370,26 руб.



3.5 Расчет затрат заказчика, связанных с покупкой, внедрением и использованием сайта и срока окупаемости

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

Капитальные затраты покупателя на приобретение и внедрение системы (К) определяются по формуле (12):

К = Цр + Ккрм + Ктех + Кпр, (12)

где Ккрм - капитальные вложения на создание новых рабочих мест или расширение обязанностей уже существующего сотрудника, руб.;

Ктех - капитальные вложения на техническое оснащение рабочего места пользователя, руб.;

Кпр - прочие капитальные вложения, связанные с внедрением, руб.

Обслуживание сайта будет осуществлять менеджер магазина. За расширение обязанностей его заработная плата не изменится, следовательно, Ккрм равно нулю.

Так как был выбран вариант расширения обязанностей старого сотрудника, то Ктех тоже равно нулю.

Прочими капитальными вложениями (Кпр), связанными с внедрением, будут оплата хостинга и домена. Так как хостинг и домен используются бесплатные, то Кпр также равна нулю.

Таким образом, капитальные затраты покупателя на приобретение и внедрение системы составят:

K = 16370,26 + 0 + 0 + 0 = 16370,26 руб.

Срок окупаемости затрат на приобретение и внедрение проекта рассчитывается по формуле (13):

Токуп = (13)

где В - годовая выгода от внедрения системы, руб.

Годовая выгода от внедрения сайта будет состоять в увеличении прибыли от роста количества клиентов. Предполагается, что внедрение сайта приведет к увеличению месячного объема оказываемых услуг в среднем на 10 заказов. Средняя стоимость заказа равна 5000 руб., следовательно, прибыль от каждого заказа будет равна 2500 рублей. Найдем годовую выгоду от внедрения сайта.

В = 2500*10*12 = 300000 руб.

Далее по формуле (13) вычисляется срок окупаемости затрат на приобретение и внедрение проекта:

Токуп = 20 дней.

Выше были проведены экономические расчеты, связанные с проектированием, построением и продажей со стороны разработчика, и приобретением и эксплуатацией со стороны организации-покупателя сайта для магазина сантехники.

В результате расчетов были получены следующие экономические показатели:

- затраты на создание сайта равны 10498,49 руб.;

- цена реализации проекта составляет 16370,26 руб.;

- разработчиком получена и распределена прибыль от реализации проекта, составляющая 2774,62 руб.;

- заказчик понесет капитальные затраты на покупку и внедрение системы, равные 16370,26 руб.;

- заказчиком достигается годовая выгода от приобретения системы, равная 300000 руб.;

- срок окупаемости сайта равен 20 дней.

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

...