Файл: Сайт магазина «Цветы СПБ.pdf

ВВЕДЕНИЕ

Данная курсовая работа имеет отношение к сфере торговли. Исследуемое предприятие компания «Цветы СПБ», которая осуществляет продажу цветов.

В настоящее время имеется 1 магазин и сайт. Т.к Компания только развивается.

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

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

• Букет сиренево-черничный с калами;
• Букет с гиацинтами и кустовыми розами;
• Розовый букет;
• Оранжевый букет;

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

• исследовать понятие «промо-сайт»;
• предложить алгоритм взаимодействия торговой компании с конечным пользователем.
• Создать тестовый промо сайт;

Объектом исследования является компания «Цветы СПБ», торгующая цветами.

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

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

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

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

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

---

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

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

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

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

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

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

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

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

---

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

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

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

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

Промо-сайт должен содержать интерфейс который понятен посетителю.

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

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

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

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

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

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

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

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

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

• О нас;
• Каталог;
• Контакты;

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.

---

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

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

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

Виды каскадных таблиц стилей и их специфика

Внешняя таблица стилей – это текстовый файл с расширением .css, который содержит в себе набор CSS-стилей элементов. Файл создается в текстовом редакторе кода подобно HTML-странице. Внутри файла содержатся только стили, исключая HTML-разметку. Внешняя таблица стилей присоединяется к веб-странице при помощи тега <link>, который расположен внутри раздела <head></head>.

К одной веб-странице можно присоединить несколько внешних таблиц стилей, добавляя несколько тегов <link>, указав параметром тега media назначение данной таблицы стилей. Параметр rel="stylesheet" указывает тип ссылки (это ссылка на таблицу стилей).

<head>

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/assets.css" media="all">

</head>

Атрибут type="text/css" не является обязательным согласно стандарту HTML5, следовательно, его можно не указывать. Если этот атрибут не указан, то по умолчанию используется значение type="text/css".

<head>

<style>

h1,

h2 {

color: red;

font-family: "Times New Roman", Georgia, Serif;

line-height: 1.3em;

}

</style>

</head>

<body>

...

</body>

Внутренние стили можно встраивать в раздел <head></head> HTML-страницы и определить внутри тега <style></style>. Внутренние стили имеют приоритет над внешними таблицами, но уступают встроенным (которые заданы через атрибут style).

Встроенные стили

Когда используются встроенные стили, CSS-код пишется прямо в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

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

<p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p>

PHP

Проект выполняется с помощью языка программирования PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста»; изначально Personal Home Page Tools — «Инструменты для создания персональных интернет-страниц»; произносится «пи-эйч-пи») - язык программирования общего назначения, в главным образом применяемый для разработки веб-приложений. Сегодня поддерживается подавляющим большинством провайдеров и является одним лидером среди языков программирования, которые применяющихся для разработки динамических веб-сайтов.

---