Файл: Разработка сайта издательского дома «Book 24.pdf

ВВЕДЕНИЕ

Данная курсовая работа имеет отношение к сфере торговли. Исследуемое предприятие компания «Book 24», которая осуществляет продажу книг.

В настоящее время имеется онлайн-магазин так как компания не имеет помещения для продажи книг.

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

Цель данной курсовой работы – разработка онлайн магазина «Book 24», которая осуществляет торговлю книгами.

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

• Создать тестовый онлайн-магазин.

Объектом исследования является компания «Book 24», торгующая книгами.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Книги

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

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

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

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

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

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

Большинство 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-тегов

1.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-стиля.

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

Внешняя таблица стилей – это текстовый файл с расширением .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 — «Инструменты для создания персональных интернет-страниц»; произносится «пи-эйч-пи») - язык программирования общего назначения, в главным образом применяемый для разработки веб-приложений. Сегодня поддерживается подавляющим большинством провайдеров и является одним лидером среди языков программирования, которые применяющихся для разработки динамических веб-сайтов.

«Применение языка, подобного PHP и такой базы данных, как MySQL, позволяет делать сайты динамическими: они могут настраиваться и содержать информацию, изменяющуюся в реальном времени». [11, с. 27]

PHP специально создан для веб-разработок, и его код может внедряться непосредственно в HTML.

Простой ответ, но что же он может означать? Вот пример PHP кода:

<!DOCTYPE HTML>

<html>

<head>

<title>Пример</title>

</head>

<body>

<?php echo "Привет, я - скрипт PHP!"; ?>

</body>

</html>

PHP отличается от языка JavaScript тем, что его скрипты выполняются на сервере и генерируют код HTML, посылаемый клиенту. Если на сервере размещен вышеприведенный скрипт, клиент получает только результат его выполнения, но не может выяснить, какой именно код его создал.