Файл: Разработка промо сайта «Галактика».pdf

ВВЕДЕНИЕ

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

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

Цель данной курсовой работы – разработка информационного промо-сайта торговой компании «Галактика», которая осуществляет торговлю техникой по низким ценам. Данная компания предоставляет следующие виды товаров:

• Электроника;
• Бытовая техника;
• Встраиваемая техника;
• Климатическая техника;

Задачи курсовой работы:

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

Объектом исследования является компания «Галактика», торгующая техникой по низким ценам.

Предмет исследования – промо-сайт торговой компании.

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

Научная новизна исследования состоит в следующем:

- деятельность торговой компании изучается не в теории, а на практике непосредственно в офисе компании «Галактика» во время прохождения практики;

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

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

Курсовая работа разбита на разделы.

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

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

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

Раздел 4 содержит описание структуры сайта и взаимодействие элементов сайта с серверным приложением. Раздел отражает процесс проектирования программного обеспечения клиентской части задачи содержит:

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

1. Техническое задание и выбор средств реализации.=

1.1. Техническое задание

Требования: При помощи языков программирования HTML, PHP и CSS создать промо-сайт компании «Галактика», осуществляющей торговлю техникой по низким ценам. Промо-сайт должен размещать данные о компании, каталог продукции, новости компании, контактные данные компании.

Промо-сайт должен содержать две важные части: пользовательская (доступная пользователям) и административная (доступная администраторам).

Система должна предусмотреть возможность администратору через административную панель ввода и редактирования всей информации, видимой пользователю.

Промо-сайт должен содержать единый дизайн на всем страницах. Интерфейс должен быть дружественным посетителю и понятным даже неопытным пользователям.

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

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

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

При реализации проекта должны выполняться следующие условия:

База данных должна включать не менее 8-и таблиц. Используется СУБД MySQL 5.0

В качестве веб-сервера используется Apache 1.3.x.

Количество записей во вспомогательных таблицах – не менее 5

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

Дополнительные требования:

Сайт должен содержать следующие разделы:

• Главная;
• О компании;
• Каталог;
• Форма обратной связи;
• Контакты;
• Новости;

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

Язык разметки гипертекстовых страниц HTML

HTML-документы - это файлы с расширением .html или .htm. Просматривать их можно с помощью любого браузера (например, Safari, Mozilla Firefox, Google Chrome). Браузер считывает HTML-файл и отображает его содержимое, чтобы те, кто пользуются интернетом, могли просмотреть его содержимое.

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

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

«Используя HTML, мы помечаем содержимое тегами, чтобы придать ему структуру. Мы называем соответствующие теги и их содержимое элементом». [19]

Большинство HTML-тегов имеют элемент открытия и закрытия, в которых используется следующий синтаксис <tag> </tag>.

Ниже вы можете увидеть пример HTML- кода, с помощью которого можно структурировать элементы HTML-страницы:

<div>

<h1> Основная рубрика </h1>

<h2> Броский подзаголовок </h2>

<p> Пункт 1 </p>

<img src = "/" alt = "Изображение">

<p>Пункт с гиперссылкой <a href="https://example.com"></a></p>

</div>

Основной элемент — это простая пара тегов (<div> </div>), которую используют для разметки больших блоков контента.

Такие блоки могут содержать заголовок (<h1> </h1>), подзаголовок (<h2> </h2>), абзацы (<p> </p>) и изображения (<img>).

Второй абзац в нашем примере содержит гиперссылку (<a> </a>) с атрибутом href, который указывает целевой URL.

Тег изображения имеет два параметра: src для указания пути к изображению и alt для его описания.

Обзор часто используемых HTML-тегов

Блочные и строчные элементы

Большинство элементов либо блочные, либо строчные. В чём разница?

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

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

Теги блочного уровня

Три обязательных тега уровня блока, которые каждый HTML-документ должен содержать: <html>, <head> и <body>.

Тег <html> </html> - это элемент самого высокого уровня, который охватывает любую HTML-страницу.

<html>

<head>

<!-- META INFORMATION -->

</head>

<body>

<!-- PAGE CONTENT -->

</body>

</html>

Тег <head> </head> содержит информацию с мета-тегами, такую ​​как заголовок страницы, ее описание и кодировка.

И, наконец, тег <body> </body> включает в себя всё содержимое, отображаемое на странице.

Основы CSS

CSS (Cascading Style Sheets), или каскадные таблицы стилей, используют для описания внешнего вида HTML-страницы, написанной языком разметки. Обычно CSS-стили используют для создания и изменения стиля отображения элементов веб-страниц, написанных на языках HTML и XHTML, но также они могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

Объявление стиля состоит из двух частей: тега веб-страницы - селектора, и команды форматирования – самого блока объявления. Селектор посылает информацию браузеру, какой именно элемент нужно форматировать, а в блоке объявления (это код в фигурных скобках) перечисляются списком форматирующие команды — свойства и их значения через двоеточие (см. Рисунок).

Рисунок 1 - Структура объявления CSS-стиля