Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта консалтинговой компании в сфере информационных технологий «Top IT»

Содержание:

Введение

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

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

Объектом исследования данной курсовой работы является консалтинговая компания в сфере информационных технологий «Top IT». Предмет исследования – разработка Web-приложения для консалтинговой компании в сфере информационных технологий «Top IT».

Для наиболее продуктивной работы сайта, решено сделать интерфейс Web-приложения максимально простым и интуитивно понятным. Однако с другой стороны сайт не стал менее информативен и удобен. Главной целью Web-сайта является привлечение новых потенциальных клиентов, так же сайт позволит снизить нагрузку на работников компании «Top IT», задачей которых было проведение консультаций по телефону. Всё это положительно отразится на финансовом обороте компании.

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

Этапы создания сайта

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

Подготовка. На этом этапе решаются все организационные вопросы, такие как бюджет проекта и временные рамки для разработки программного продукта;
Проектирование. Результатом этого этапа становится техническое задание с понятной и однозначной для обеих сторон иллюстрацией ответов на такие вопросы как: «что делаем?» (описание продукта и его функционала), «как делаем?» (архитектура), «как узнать, что цель достигнута?» (критерии оценки);
Создание программного продукта. Этот этап можно разбить на несколько этапов, таких как:
- Создание дизайна;
- Программирование. Сюда входит непосредственно написание рабочего, полностью функционирующего программного кода;
- Тестирование;
- Написание документации.
Поддержка заказчика:
- Внедрение продукта в инфраструктуру компании заказчика;
- Последующее сопровождение программного продукта.

Что из себя представляет техническое задание.

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

При описании в документации о закупке заказчик должен руководствоваться следующими правилами, установленным 44-ФЗ:

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

Описание среды разработки

Весь интернет состоит из Web-страниц, которые создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language). Однако, HTML не является языком программирования в общем представлении. HTML – является языком разметки документов. Во время работы над HTML-документом, мы разбиваем нужную нам информацию на блоки текста и заголовков, то есть делаем разметку документа. Разметка служит браузеру некой инструкцией, как правильно отобразить текст страницы.

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

На сегодняшний день, HTML является самой популярной, практичной и востребованной технологией для создания и функционирования Web-приложений, поэтому именно её я и буду использовать для создания сайта.

Так же, для придания надлежащего внешнего вида документам HTML, мне понадобится CSS (Cascading Style Sheets) - каскадные таблицы стилей.

Для того, чтобы придать динамику нашему сайту, я буду использовать язык программирования PHP (Hypertext PreProcessor). С его помощью мы так же сможем реализовать взаимодействие сайта с БД (База Данных).

Ну и на конец нам понадобится сама БД, что бы мы где-то могли хранить данные нашего сайта. Для этих целей я собираюсь использовать СУБД (Система Управления Базами Данных) SQL (Structured Query Language).

Вся работа выполнялась в текстовом редакторе Sublime Text 3, с установленным плагином EMMET, который облегчил работу с HTML, CSS и PHP.

Основная часть

Алгоритмизация задачи

Алгоритмизация – процесс создания алгоритма для решения той или иной задачи.

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

При осуществлении проекта главной задачей является разработка рабочего программного кода с интерфейсом пользователя. Конкретно в моём случае эту задачу можно разбить на 2 этапа:

В первом этапе предстоит создать HTML-документ для корректного отображения всей текстовой информации и элементов управления сайта. Для этих целей подойдёт связка языков HTML и CSS.
На втором этапе необходимо будет разработать активные элементы сайта, а также внутренние и серверные компоненты, на скриптовом языке PHP, который подойдёт для обеспечения функционирования интерактивных элементов программного продукта, специализирующихся на работе с базой данных. Для работы с базой данных, необходимо будет использовать SQL-запросы.

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

Требования к сайту

Требования к стилистическому оформлению и дизайну сайта

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

Требования к средствам просмотра сайта

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

- Internet Explorer (версия 5.5 и выше);
- Opera (версия 7.0 и выше);
- Mozilla Firefox (версия 1.0 и выше);
- Chrome (версия 39.0.2171 и выше).

Требования к системе управления контентом сайта

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

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

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

Требования к компоновке страниц Сайта

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

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

Программирование

Основная часть сайта

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

Сайт состоит из взаимосвязанных страниц, чётко разделённых конкретными функциями.

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

Выглядеть файл с «шапкой» сайта будет следующим образом (смотреть приложение 1).

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

Файл с функциями для взаимодействия сайта с БД выглядит следующим образом (смотреть приложение 2).

Вид файла с «подвалом» сайта:

Рисунок 1. «Подвал» сайта.

Главная страница сайта.

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

Внешний вид главной страницы сайта выглядит следующим образом:

Рисунок 2. Главная страница сайта

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

Программная реализация главной страницы (смотреть приложение 3).

Сайт включает в себя такие разделы как:

«О КОМПАНИИ». В этом разделе представлена информация о деятельности компании и её история, а также информация о местоположении компании, а также номера телефонов и электронная почта.
«НОВОСТИ». В этом разделе расположен блок с новостными статьями сайта.
«УСЛУГИ». Перейдя на эту страницу, потенциальный клиент сможет ознакомиться с предлагаемым спектром услуг компании, а также оставить заявку в форме для клиентов.
«РЕШЕНИЯ». Тут клиент увидит информацию о предлагаемых комплексных решениях.
«КЛИЕНТАМ И ПАРТНЁРАМ». В этом разделе расположена информация для клиентов компании, к примеру номера телефонов, электронная почта службы поддержки и форма для отзывов и предложений клиентов.

Форма для клиентов

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

Это внешний вид формы:

Рисунок 3. Внешний вид формы для клиентов.

Программную реализацию формы можно посмотреть в приложении 4.

Для передачи введённых клиентами данных в БД, используются язык PHP и SQL запросы.

Адаптация под мобильные платформы

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

Рисунок 4. Адаптация навигационного меню.

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

Панель администратора сайта

Авторизация для доступа к панели администратора.

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

Рисунок 5. Вход в административную часть сайта.

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

Панель администратора, управление новостями сайта.

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

Рисунок 6. Панель администратора.

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

При нажатии на ссылку «Добавить статью», откроется форма для добавления новостной статьи:

Рисунок 7. Форма новой новостной статьи.

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

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

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

Тестирование и отладка

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

С точки зрения ISO 9126, Качество (программных средств) можно определить, как совокупную характеристику исследуемого ПО, с учётом следующих составляющих:

- надёжность;
- сопровождаемость;
- практичность;
- эффективность;
- мобильность;
- функциональность.

Более полный список атрибутов и критериев можно найти в самом стандарте ISO 9126 Международной организации по стандартизации. Состав и содержание документации, сопутствующей процессу тестирования, определяется стандартом IEEE 829-1998 Standard for Software Test Documentation.

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

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

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

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

Анализ результатов решения

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

Все найденные ошибки были успешно устранены.

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

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

Заключение

В ходе выполнения данной курсовой работы был создан и введён в эксплуатацию сайт для консалтинговой компании в сфере информационных технологий «Top IT». На основании результатов разработки, разработанный программный продукт обладает заданной функциональностью.

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

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

Во время работы над курсовым проектом была прочтена и проанализирована литература по разработке сайтов, были получены практические навыки разработки HTML-документов, разработки Web-приложений и работы с БД.

Список литературы

Федеральный закон "О контрактной системе в сфере закупок товаров, работ, услуг для обеспечения государственных и муниципальных нужд" от 05.04.2013 N 44-ФЗ
Бердышев С.Н.: Искусство оформления сайта. - М.: Дашков и Ко, 2012. – 148 с
Веселкова Т.В.: Эффективная эксплуатация сайта. - М.: Дашков и К, 2011. – 176 с
Гребенюк Е.И.: Технические средства информатизации. - М.: Академия, 2011. – 352 с
Квинт И.: HTML, XHTML и CSS на 100%. - СПб.: Питер, 2010. – 440 с
Колисниченко Д.Н.: Современный сайт на PHP и JavaScript. - СПб.: Питер, 2009. – 176 с
Кузовкин А.В.: Управление данными. - М.: Академия, 2010. – 256 с
Ташков П.А.: Веб-мастеринг: HTML, CSS, JavaScript, PHP, CMS, графика, раскрутка. - СПб.: Питер, 2010. – 512 с

Приложения

Приложение 1

Программная реализация «шапки» сайта.