Сайт для детского книжного магазина

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

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

Курсовая работа

на тему: «Сайт для детского книжного магазина»

Оглавление

• Введение
• Глава 1. Обзор литературы и информационных источников
• 1.1 Обоснование актуальности темы проекта
• 1.2 Обзор и анализ аналогичных интернет ресурсов
• 1.3 Обусловленность выбора средств разработки и языков программирования
• Глава 2. Разработка сайта детского книжного магазина
• 2.1 Описание инструментов среды разработки
• 2.2 Описание этапов разработки
• 2.3 Пользовательский интерфейс и руководство пользователя для работы с программой
• Заключение
• Список литературы
• Введение
• Вторжение Интернета в жизнь человека нельзя назвать иначе, чем ошеломляющим. Бесспорное преимущество, которое Интернет принес людям - это молниеносный обмен информацией. Люди общаются без границ, совершают покупки, отправляются в путешествия...
• Современный бизнес все больше перемещается в Интернет-пространство. Виртуальная реклама уверенно теснит все другие ее разновидности. Крупную корпорацию невозможно уже представить без многоуровневого хорошо организованного управляющего сайта. А Интернет-магазины шутя отвоевывают у своих материальных конкурентов толпы покупателей.
• Данный курсовой проект представляет собой сайт детского книжного магазина. На данном сайте размещена детская литература, которую зарегистрированный пользователь может приобрести как заказом по почте либо в электронном виде или же взять книгу напрокат.
• Целью работы студента над курсовым проектом является расширить и углубить свои знания по технологии разработки программного обеспечения, используя языки web-программирования и СУБД.

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

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

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

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

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

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

2. незарегистрированным пользователям доступ на сайт запрещен;

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

4. зарегистрированный пользователь имеет возможность также просмотреть имеющиеся книжные издания и сделать заказ (имитация);

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

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

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

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

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

Глава 1. Обзор литературы и информационных источников

1.1 Обоснование актуальности темы проекта

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

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

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

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

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

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

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

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

Распродажи и акции. Можно приобрести по совсем низким ценам во время распродаж. Покупки становятся не только удобными и быстрыми, но еще и выгодными.

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

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

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

1.2 Обзор и анализ аналогичных интернет ресурсов

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

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

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

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

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

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

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

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

Размещение слайдеров на главной странице сайта очень популярно в современном веб-дизайне. Галерея из крупных изображений - самый надежный способ привлечения внимания аудитории. Все слайдеры основаны на jQuery-плагинах (иногда в сочетании с CSS3). При смене изображений в них происходят интересные визуальные эффекты, которые выглядят очень привлекательно. Многие посетители используют для серфинга по сети различные тач-устройства (планшетные компьютеры или смартфоны), поэтому самые известные jQuery-плагины (Fancybox, Lightbox и другие), предназначенные для создания галерей изображений, учитывают это в своей работе. Важно, что кроме поддержки мобильных устройств с тач-скрином популярные слайдеры адаптируют изображения под размеры экранов различных устройств.

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

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

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

Обычно на сайте есть как минимум одно меню - главное меню сайта. Чаще всего туда входят пункты вроде «О компании», «Цены», «Товары и услуги», «Контакты» и так далее.

1.3 Обусловленность выбора средств разработки и языков программирования

Для разработки структуры сайта были выбраны язык разметки гипертекста HTML и язык стилей CSS.

Преимущества HTML - относительная несложность изготовления программного продукта, возможность представлять его по частям, уверенность в совместимости с программным обеспечением пользователей. Для просмотра используется любой браузер (интернет-обозреватель) -- Internet Explorer, Opera, Mozilla Firefox, Safari, Google Chrome и другие. [8]

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

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

Преимуществами CSS являются:

ь управление отображением множества документов с помощью одной таблицы стилей;

ь более точный контроль над внешним видом страниц;

ь различные представления для разных носителей информации (экран, печать, и т. д.);

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

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

Для реализации функционала сайта были использованы языки WEB-программирования Java Script, PHP.

Для того чтобы программа позволяла менять данные, обновлять содержание, предоставлять права доступа к структурным элементам сайта, необходимо разработать базу данных. Такие возможности предоставляют различные СУБД, которые могут взаимодействовать с WEB приложением: MYSQL, PostgreSQL, MSSQL и другие. Обращение к базе данных происходит посредством языка PHP. Для данного проекта была выбрана СУБД MYSQL. Она широко распространена, удобна и проста в использовании.

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

гипертекст запрос интерфейс

Глава 2. Разработка сайта детского книжного магазина

2.1 Описание инструментов среды разработки

1. Описание архитектуры клиент-сервер

Разработанный проект выполнен посредством архитектуры клиент-сервер. Архитектура клиент-сервер представляет собой деление автоматизированной системы на три основных части:

– визуализация данных;

– прикладная часть;

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

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

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

2. Описание базы данных

Для разработки базы данных в проекте использовалась СУБД MySQL.

Создание таблиц, редактирование, запросы - все реализуется средствами структурированного языка запросов SQL.



Рисунок 1. Место базы данных в архитектуре клиент-сервер

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

Например, в таблице preferes первичным ключом является n_pref, а вторичным (внешним) n_pol, который связывает данную таблицу с родительской таблицей polzovateli. (см. рисунок 2)

Рисунок 2. Создание ключей в таблице

Наиболее значительное преимущество систем с базами данных - это централизованное обеспечение целостности данных. В данном проекте целостность данных обеспечивается за счет операторов ondelete и onupdate, которые задают параметры редактирования данных дочерней таблицы в случае изменения данных в родительской (см. рисунок 2).

Чтобы заполнить таблицы данными, используется команда INSERT TABLE. На рисунке 3 показан SQL код, обеспечивающий заполнение таблицы polzovateli.

Рисунок 3. Заполнение таблицы данными

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

Выборка данных из таблиц осуществляется с помощью SQL команды SELECT (см. рисунок 4).

Рисунок 4. Выборка данных с помощью оператора select

3. Использование PHP

Язык PHP специально предназначен для веб-программирования. PHP сочетает достоинства языков C и Perl и при этом весьма прост в изучении и обладает значительными преимуществами перед традиционными языками программирования.

В PHP есть практически все операторы и функции, имеющиеся в стандартном GNU С (или их аналоги), например есть циклы (while, for), операторы выбора (if, switch), функции работы с файловой системой и процессами (fopen, *dir, stat, unlink, popen, exec), функции ввода-вывода (fgets,fputs,printf) и множество других...

HTML-код корректно обрабатывается интерпретатором PHP. PHP команды можно встраивать прямо в HTML документ (рисунок 5).

Рисунок 5. Включение PHP в HTML документ

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

Основными конструкциями языка PHP являются:

– Условные операторы (if, else);

– Циклы (while, do-while, for, foreach, break, continue);

– Конструкции выбора (switch);

– Конструкции объявления (declare);

– Конструкции возврата значений (return);

– Конструкции включений (require, include).

Примеры конструкций языка PHP, которые использовались в программе, представлены на рисунке 5.

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

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

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

При старте сессии (при каждом вызове session_start()) клиенту устанавливается cookies. Браузер исправно при каждом следующем запросе эту cookies возвращает и PHP имеет идентификатор сессии. Браузер при клике на любую ссылку, или при нажатии на кнопку в форме, пошлет в запросе нужную нам переменную - идентификатор сессии!

session_start();

$_SESSION['test']='Hello world!';

И PHP запишет в файл, связанный с этой сессией, переменную test.

Использование iframe

С помощью IFRAME можно в произвольном месте страницы выделить прямоугольную область со своей полосой прокрутки и загружать в нее внешний *.html документ.

IFRAME схож с синтаксисом обычного <FRAME>: можно задавать наличие/отсутствие полос прокрутки, запрещать/разрешать изменение размеров окна. Кроме того, можно задать для него размеры WIDTH и HEIGHT.

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

Рисунок 6. Использование фрейма

4. Использование Java Script, PHP и MYSQL

Чтение данных из таблиц и вывод их на экран производится с помощью Java Script и PHP. Из таблиц базы данных с помощью оператора цикла с предусловием берутся данные, заносятся в массив, а затем выводятся в соответствующие компоненты формы. Для связи PHP переменных с переменными Java Script были созданы невидимые компоненты формы, из которых данные записывались в массив и обрабатывались. На рисунке 7 показаны команды занесения данных таблицы БД в массив.

Рисунок 7. Команды записи данных из таблиц БД в массив

С помощью операторов Java Script проверяется корректность ввода данных пользователя, предупреждаются ошибки и выводятся соответствующие сообщения (см. рисунок 8).



Рисунок 8. Предупреждение неправильного ввода и вывод соответствующих сообщений

5. Использование HTML

HTML-документ представляет собой простой текстовый файл Указанный файл, если он не включает в себя серверные сценарии, должен иметь расширение html. Редактировать файлы HTML удобно в специальных редакторах, предусмотренных для языков программирования. WEB-страницы данного проекта выполнялись в кроссплатформенном текстовом редакторе Sublime Text. Каждая HTML-страница имеет следующую общую структуру:

<html>

<head>

<!--раздел заголовок-->

</head>

<body>

<!--тело документа-->

</body>

</html>

Тег <head> указывает, где начинается и заканчивается HTML- документ. Элемент позволяет вставлять в HTML-документ комментарии или комментировать код, который никогда не будет визуализирован пользователю.

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

Раздел заголовка содержит также таблицы стилей CSS, подключаемые к документу. Стили также можно поместить в отдельный файл и дать в программе ссылку на него (рисунок 9).

Рисунок 9. Таблицы стилей

Тег <body> определяет расположение содержательной части HTML-документа.

ь Таблицы

Команда <TABLE> (задание и описание таблиц) является основной командой форматирования документа HTML.

Задание таблицы определяется двумя командами (и соответственно их атрибутами):

<TR> (table row) - описание строки таблицы;

<TD> (table detail) - описание клетки таблицы;

Атрибуты COLSPAN= и ROWSPAN= позволяют объединять столбцы и строки таблицы в группы, вокруг которых рисуется рамка (рисунок 10).

Рисунок 10. Команды построения таблицы

ь Списки и перечисления

Для задания ненумерованного списка используются команды UL и LI. Используя OL и LI, получим нумерованный список.

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

ь Гиперссылки

Связь между документами и отдельными частями документов дается через соответствующие гиперссылки - команда <A ...>

Атрибут HREF=reference задает адрес гиперссылки в URL формате.

TARGET=window определяет место (окно - window) загрузки документа. Этот атрибут применяется при использовании многооконных документов, определяемых командой FRAME.

ь Графика и картинки

Графические файлы включаются в HTML документы с помощью команды IMG.

Атрибут SRC определяет URL адрес (имя) графического файла. Размеры изображения задаются атрибутами HEIGHT (высота) и WIDTH (ширина).

Используя атрибут ALIGN= можно переместить, следующий перед и за картинкой текст.

ь Формы

Формы (Forms) позволяют запросить у пользователя информацию, требуемую для дальнейшей работы сервера, например, "права доступа" для регистрации или комментарии о работе сервера. Формы составляются из одного (или нескольких) запросов к пользователю, ответом на которые должен быть ввод текста или выбор условий.

Для создания формы используется команда FORM. Элементами форм являются кнопки, переключатели, списки, поля для ввода текста и др. Для их размещения на форме используются следующие команды.

<input> - это одиночный тег, с помощью которого можно создавать определённые элементы документа (текстовые поля, радиокнопки, флажки, списки, кнопки), которые предназначены для заполнения прямо на html-странице.

У тега <input> имеется несколько очень важных значений атрибутов. Name - атрибут, который следует всегда задавать для элемента, чтобы обработчик (скрипт) понимал, input с каким именем он обрабатывает (рисунок 11).

Рисунок 11. Элементы формы в HTML

Так скрипт обработки поймёт, что это два разных поля.

Type - данный атрибут отвечает за указание типа поля. При определённом типе input может стать радиокнопкой, флажком, списком, кнопкой, текстовым поля.

Size - атрибут, указывающий размер для текстового поля, когда type указан как text. Указанные данные воспринимаются как ширина поля.

Тег <input> имеет много других атрибутов, например, id (уникальный идентификатор поля, нужен, например, при работе с JavaScript), value - значение, которое отображается в данном элементе и видно пользователю.

6. Использование языка JavaScript

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

Вставлять JavaScript нужно между тэгами <head>…</head>, а сам сценарий нужно писать между парными тэгами <script>…</script>

Типы данных JavaScript условно можно разделить на две группы: простые данные и сложные данные. К простым данным можно отнести: числа, строки, логические значения. Из сложных типов данных в проекте использовались: функции, объекты, массивы.

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

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

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

Использование функции называется вызовом. Вызывать функцию можно сколько угодно раз и где угодно.

Рисунок 12. Функции на языке Java Script

Строка JavaScript - это последовательность Unicode-символов (буквы, числа, знаки препинания и др.), которая заключается в кавычки (одинарные или двойные зависит от разработчика). Строка JavaScript - это тип данных, который служит для представления текста.

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

if (условие) {последовательность действий}; else {последовательность действий}

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

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

for (var i = нач.знач.; i=кон.знач.; i++) {последовательность действий};

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

while (условие) {операторы};

Метод alert() - это метод Java Script, который выводит нам окно предупреждение с текстовым сообщением и кнопкой OK. В проекте он использовался как проверка работы отдельных команд алгоритма.

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

2.2 Описание этапов разработки

Работа по созданию программы проводилась в несколько этапов:

1) Поиск, анализ и систематизация информации по данной предметной области;

2) Установка WEB-сервера, сервера базы данных, языка программирования PHP;

3) Определение групп пользователей и привилегий их доступа к данным;

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

5) Разработка логической модели базы данных, структуры таблиц, входящих в нее, связей между таблицами, ключей и индексов;

6) Физическое создание базы данных, таблиц и связей, заполнение таблиц данными;

7) Создание запросов;

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

9) Верстка страниц с помощью HTML, создание стилей CSS, подготовка и внедрение фреймов, изображений, таблиц, списков, гиперссылок, форматирование текста;

10) Алгоритмизация и программирование основных функций программы на языках Java Script и PHP;

11) Тестирование и отладка программы.

ь Установка ПО

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

ь Группы пользователей

Предварительно были выделены три группы пользователей сайта:

1. Незарегистрированные посетители

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

2. Зарегистрированные посетители

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

3. Администратор сайта

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

ь Функциональная структура сайта

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



Рисунок 12. Структурная схема сайта

ь Логическая модель базы данных

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

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

Таблицы Пользователи и Жанры связаны отношением много-ко-многим. Поэтому таблицы Пользователи и Предпочтения связываем отношением один-ко-многим. Таблицы Жанры и Предпочтения также связываем отношением один-ко-многим. Логическая модель данных представлена на рисунке 13.

ь Физическое проектирование базы данных

Ниже приведены SQL запросы СУБД MySQL на создание базы данных, создание и заполнение таблиц. Приведены только две из пяти таблиц, связанные отношением один-ко-многим.



Рисунок 13. Логическая модель базы данных

$query="create table if not exists ganry

(n_gan int not null auto_increment,

name varchar(30),

primary key (n_gan))

engine=innodb;";

if (!mysql_query($query, $link))

{

echo "<br>"."Hе могу создать таблицу ganry"."<br>";

exit();

}

$query="create table if not exists preferes

(n_pref int not null auto_increment,

n_pol integer not null,

n_gan integer not null,

var integer,

primary key (n_pref),

foreign key (n_pol) references polzovateli (n_pol) on delete cascade on update cascade,

foreign key (n_gan) references ganry (n_gan) on delete cascade on update cascade)

engine=innodb;";

if (!mysql_query($query, $link))

{

echo "<br>"."Hе могу создать таблицу preferes"."<br>";

exit();

}

$query="insert into polzovateli (f,i,class,dat,sex,dolg,address,phone,mail,log,pass) values

('Администратор','Сайта',null,null,null,null,null,null,null,'admin','a'),

('Смирнов','Семен','2а','2008-06-08','м','+','Спортивная, 3-9','87340102034','smirnov@mail.ru','sema','1'),

('Огородова','Дарья','2б','2007-01-04','ж','+','3 м-он, 33/1-6','87654321223','darya@mail.ru','ogorodova','2'),

('Лукьянова','Екатерина','3б','2004-04-15','ж','-','3 м-он, 27-58','87966666666','katya@mail.ru','lykianova','3'),

('Колобков','Антон','4б','2003-09-20','м','-','Юбилейная, 7-8','87901020304','kolobok@mail.ru','toha','4'),

('Шмаров','Михаил','4а','2005-06-11','м','+','Виноградова, 34-98','87340321098','shmarov@mail.ru','miha','5'),

('Глушенкова','Екатерина','2б','2008-11-13','ж','+','3 м-он, 33-4','87947563546','kat_gl@mail.ru','katya','6'),

('Денисов','Александр','1а','2009-02-28','м','+','Весенняя, 34-2','87084503403','denisov@mail.ru','sasha','7');";

if (!mysql_query($query, $link))

{

echo "<br>"."Hе могу добавить данные в таблицу polzovateli"."<br>";

exit();

}

ь Верстка и проектирование дизайна web-страниц

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

ь Блочные элементы

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

input.i1{

font-family: Bookman Old Style; font-size:12px;

color:green; font-weight:bold; font-style: italic;

}

.radio{

box-shadow: 8px 8px 8px green;

display: inline;

position: relative;

top: 7px;

left: 5px;

}

.checkB{

background-color:green;

color: white;

font-weight:bold;

display: inline;

position: relative;

top: 7px;

left: 10px;

}

.s1{

background-color:green; color:white; font-weight:normal;

}

.s2{

background-color:white; color: green; font-weight:normal;

}

H3{

color:green; font-family: Bookman old style; font-size:24px;

font-weight:normal;box-shadow: 8px 8px 8px green;

display: inline;

position: absolute;

top: 10px;

left: 150px;

}

.td1{

border: 2px solid green;

background-color: green;

box-shadow: 10px 10px 10px green;

font-family: Bookman Old Style;

font-size: 16px;

text-align: center;

font-weight:bold;

color: white;

}

td{

border: 1px solid green;

background-color:white;

box-shadow: 10px 10px 10px green;

font-family: Bookman Old Style;

font-size:14px;

color:green;

}

select {

font-weight:bold;color:white;background-color:green;

}

body{

background: url(J0143754.GIF);

}

Результат представлен на рисунке 14.

Рисунок 14. Стили для элементов

С помощью функций PHP рисуются рисунки, строится диаграмма, а также формируется текст.

<?php

header("Content-Type: image/png");

$text7=trim($_GET["pr7"]);

if ($text7=='ж')

$im1=imagecreatefrompng("1.png");

else $im1=imagecreatefrompng("2.png");

$txt_color=imagecolorallocate($im1,251,007,012);

$font="./Calligraphia_Two.ttf";

$text1=$_GET['pr1'];

imagettftext($im1,50,-10,400,50,$txt_color,$font,$text1);

$txt_color=imagecolorallocate($im1,25,300,212);

$font="./TORHOK.TTF";

$text2=$_GET['pr2'];

imagettftext($im1,28,-40,450,90,$txt_color,$font,$text2);

$txt_color=imagecolorallocate($im1,123,107,24);

$font="./CORRIDA.TTF";

$text3=$_GET['pr3'];

imagettftext($im1,28,10,400,160,$txt_color,$font,$text3);

$txt_color=imagecolorallocate($im1,189,47,102);

$font="./Calligraphia_Two.ttf";

$text4=$_GET['pr4'];

imagettftext($im1,28,-30,450,180,$txt_color,$font,$text4);

$txt_color=imagecolorallocate($im1,10,147,152);

$font="./comic.ttf";

$text5=$_GET['pr5'];

imagettftext($im1,24,0,450,320,$txt_color,$font,$text5);

$txt_color=imagecolorallocate($im1,251,007,012);

$font="./comic.ttf";

imagettftext($im1,18,0,450,390,$txt_color,$font,"Предпочитаемая литература:");

$f = fopen ("genre.txt", "r");

$o[1]="художественная литература";

$o[2]="детектив";

$o[3]="фантастика";

$o[4]="научная литература";

$o[5]="сказки";

$o[6]="";

$a=file("genre.txt");

foreach($a as $kk=>$vv)

{

$b=explode(";",$vv);

foreach($b as $ll=>$ww)

{

if ($ww!=1)

$as[$kk+1][$ll+1]=$o[6];

else $as[$kk+1][$ll+1]=$o[$ll+1];

}

};

fclose($f);

$txt_color=imagecolorallocate($im1,0,255,0);

$e=$_GET['pr11'];

$text2=$as[$e][1];

$u=400;

if ($text2!='')

{$u=$u+20;

imagettftext($im1,14,0,450,$u,$txt_color,$font,$text2);}

$text3=$as[$e][2];

if ($text3!='')

{$u=$u+20 ;

imagettftext($im1,14,0,450,$u,$txt_color,$font,$text3);}

$text4=$as[$e][3];

if ($text4!='')

{$u=$u+20;

imagettftext($im1,14,0,450,$u,$txt_color,$font,$text4);}

$text5=$as[$e][4];

if ($text5!='')

{$u=$u+20;

imagettftext($im1,14,0,450,$u,$txt_color,$font,$text5);}

$text5=$as[$e][5];

if ($text5!='')

{$u=$u+20;

imagettftext($im1,14,0,450,$u,$txt_color,$font,$text5);}

for ($i=0; $i<70; $i++)

{

$x=rand(400,1800);

$y=rand(20,700);

$r=rand(10,100);

$c1=rand(1,255);

$c2=rand(1,255);

$c3=rand(1,255);

$ink = imagecolorallocate($im1, $c1, $c2, $c3);

imageellipse($im1,$x,$y,$r,$r,$ink);

}

imagepng($im1);

imagedestroy($im1);

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

ь Построение диаграммы

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



Рисунок 15. Изображения, построенные вручную

header ("Content-type: image/png");

$im = imagecreatetruecolor(800, 180);

$back=imagecolorallocatealpha($im, 255, 255, 255, 0);

imagefilledrectangle($im, 0, 0, 800, 180, $back);

$link = mysql_connect("localhost", "root", "12345678","utf8");

if (! $link) {echo "Heльзя соединиться с сервером базы данных..."; exit();}

mysql_select_db('book_shop', $link);

mysql_query("SET NAMES utf8");

$q3="select n_gan as n,count(n_gan) as co from preferes

where var=1 group by n_gan;";

$result = mysql_query($q3, $link);

$i=1;

while($rows = mysql_fetch_array($result))

{

//$ar[$i]['n']=$rows['n'];

$ar1[$i]=$rows['co'];

// echo $ar1[$i].' ';

$i=$i+1;

} //echo '<br>';

// $arra=array($ar1[1], $ar1[2], $ar1[3], $ar1[4], $ar1[5]);

$m=max($ar1);

// echo 'max='.$m;

if ($m==0) $m=1;

$red1 = imagecolorallocate($im, 90, 34, 155);

$red2 = imagecolorallocate($im, 200, 255, 0);

$red3 = imagecolorallocate($im, 250, 34, 55);

$red4 = imagecolorallocate($im, 0, 170, 250);

$red5 = imagecolorallocate($im, 0, 200, 0);

if ($ar1[1]!=0)

imagefilledrectangle($im,20,20,(($ar1[1]/$m)*400+20),40,$red1);

if ($ar1[2]!=0)

imagefilledrectangle($im,20,50,(($ar1[2]/$m)*400+20),70,$red2);

if ($ar1[3]!=0)

imagefilledrectangle($im,20,80,(($ar1[3]/$m)*400+20),100,$red3);

if ($ar1[4]!=0)

imagefilledrectangle($im,20,110,(($ar1[4]/$m)*400+20),130,$red4);

if ($ar1[5]!=0)

imagefilledrectangle($im,20,140,(($ar1[5]/$m)*400+20),160,$red5);

$txt_color=imagecolorallocatealpha($im,0,120,0,0);

$font="./BOOKOSI.TTF";

$text1="художественная литература";

imagettftext($im,16,0,450,40,$txt_color,$font,$text1);

imagettftext($im,16,0,452,38,$txt_color,$font,$text1);

$text1="детектив";

imagettftext($im,16,0,450,70,$txt_color,$font,$text1);

imagettftext($im,16,0,452,68,$txt_color,$font,$text1);

$text1="фантастика";

imagettftext($im,16,0,450,100,$txt_color,$font,$text1);

imagettftext($im,16,0,452,98,$txt_color,$font,$text1);

$text1="научная литература";

imagettftext($im,16,0,450,130,$txt_color,$font,$text1);

imagettftext($im,16,0,452,128,$txt_color,$font,$text1);

$text1="сказки";

imagettftext($im,16,0,450,160,$txt_color,$font,$text1);

imagettftext($im,16,0,452,158,$txt_color,$font,$text1);

imagepng($im);

imagedestroy($im);

ь Шрифты

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

@font-face {

font-family: Ariadna script;

src: url("Ariadna script.ttf");}

ь Начисление скидок и проведение акций

С помощью функций PHP для работы с датой рассчитывается возраст пользователя и тем, кому 6, 7, 8 лет и у кого нет долга предоставляется в подарок книга.

date_default_timezone_set('UTC');

$o=trim($ar[$ii][3]);

$d=substr($o,8,2);

$m=substr($o,5,2);

$y=substr($o,2,2);

$r=mktime(0, 0, 0, $m, $d, $y);

$age = (time()-$r)/31536000;

list($o) = explode(".",$age);

// echo $o;

if (trim($ar[$ii][5])=="+") echo '<H3 style="position:absolute;left:300px;top:0px;">У Вас долг! Верните книги!</H3>';

if ($o<9)

echo '<H3 style="position:absolute;left:700px;top:0px;">ВНИМАНИЕ, акция для тех, кому 6,7,8 лет!<br>Сказка в подарок, если у Вас нет долга!</H3>';

На рисунке 16 показан вывод сообщения о подарке.

Рисунок 16. Сообщение о подарке

ь Организация прав доступа к ресурсам сайта

Для входа в систему проверяем наличие введенных логина и пароля в таблице ПОЛЬЗОВАТЕЛИ. Если таковые имеются, система запоминает идентификационный номер данного пользователя в переменную сессии $_SESSION[`pol'].

$q3='select * from polzovateli;';

$result = mysql_query($q3, $link);

$i=1;$u=0;

while($rows = mysql_fetch_array($result))

{

if ($_POST['ed1']==$rows['log'] && $_POST['ed2']==$rows['pass'])

{

$u=1;

$_SESSION['pol']=$rows['n_pol'];

$_SESSION['log']=$rows['f'].' '.$rows['i'];

}

$i=$i+1;

}

Значение данной переменной не стирается до тех пор, пока пользователь не выберет команду ВЫХОД и переменная обнулится:

Unset($_SESSION[`pol']);

Таким образом, при перемещении по сайту система помнит пользователя.

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

2.3 Пользовательский интерфейс и руководство пользователя для работы с программой

Запустив главный файл с названием index.htm с помощью веб-браузера, можно увидеть титульную страницу с названием сайта, содержанием и главным меню (рисунок 17).

Страница, открывающаяся администратору, показана на рисунке 18. С помощью кнопки ПОКАЗАТЬ открываются детальные сведения о конкретном пользователе.



Рисунок 17. Титульная страница

Рисунок 18. Страница администратора

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

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

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

Рисунок 19. Личный кабинет пользователя

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

Рисунок 20. Форма для регистрации пользователя

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

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

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

Рисунок 21. Предупреждение некорректного ввода данных

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

Рисунок 22. Вывод предупреждающих сообщений

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

Заключение

В ходе работы над проектом была изучена и систематизирована литература о важности чтения для детей, преимуществах интернет-магазинов, проанализированы функционал, элементы интерфейса, навигация, оформление сайтов, аналогичных разработанному в проекте ресурсу. Отработаны практические навыки верстки WEB-страниц и их оформления с помощью языка разметки гипертекста HTML и таблиц стилей CSS. Глубже изучены алгоритмические структуры, система команд и функций языков программирования Java Script, PHP, приобретен большой практический опыт разработки программ на данных языках, а также разработки базы данных в СУБД MYSQL, создания SQL запросов.

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

Таким образом, цели и задачи, поставленные в начале работы над проектом, реализованы в полной мере.

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

1. В.Б. Попов. Основы информационных и телекоммуникационных технологий. Программные средства информационных технологий. - М.: Финансы и статистика, 2005. - 216 с.

2. С.А. Филиппов Основы современного веб-программирования учебное пособие ля студентов высших учебных заведений Москва 2011;

3. Кузнецов М.В., Симдянов И.В. - MySQL 5 (в подлиннике) - 2010

4. Грофф Дж.Р., Вайнберг П.Н. SQL полное руководство, ISBN; Издательство: 2001;

5. Дейт, К. Введение в системы баз данных // 6-издание. / К. Дейт - Киев: Диалектика, 1998.;

6. Мейер, М. Теория реляционных баз данных. / М. Мейер- М.: Мир, 1987.;

7. Чен, П. Модель "сущность-связь" - шаг к единому представлению о данных //СУБД. / П.Чен - М. 1995.;

8. Ульман Л.MySQL. Руководство по изучению языка. Издательство: ДМК Пресс; Питер;

9. Котеров Д. В., Костарев А. Ф.PHP 5 в подлиннике. Издательство: БХВ-Петербург, 2006 г.;

10. Джон Коггзолл, PHP 5. Полное руководство. Издательство: Диалектика, 2006 г.;

11. Ричард Вагнер, Аллен Вайк, Java Script. Энциклопедия пользователя. Издательство: ДиаСофт, 2001 г.;

12. А. Шевчук «jQuery учебник для начинающих»

Размещено на Allbest.ru