CENTRUL DE EXCELENTA IN INFORMATICA SI TEHNOLOGII INFORMATIONALE SISTEM INFORMATIC DE TIP WEB „INTERNET MAGAZIN JUCARII PENTRU COPII” LUCRARE DE… [305239]

MINISTERUL EDUCATIEI AL REPUBLICII MOLDOVA

CENTRUL DE EXCELENTA IN INFORMATICA SI

TEHNOLOGII INFORMATIONALE

SISTEM INFORMATIC DE TIP WEB

„INTERNET MAGAZIN JUCARII PENTRU COPII”

LUCRARE DE DIPLOMĂ

la specialitatea 1851 ”Informatica”

”_______________________”

Director adjunct instruire și educație:

Zbîrciog Tatiana

”______” ___________________ 2019

Autor:

eleva grupei I.1542,

MOROZOVA Iana

________________________

Conducător științific:

[anonimizat]

________________________

Cahul, 2019

СОДЕРЖАНИЕ

СОКРАЩЕНИЯ И ОБОЗНАЧЕНИЯ ………………………………………..………… 3

ВВЕДЕНИЕ ………………………………………………………………………….……. 4

ГЛАВА I. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ ………………………………………….……. 6

1.1. Классификация Web-сайтов ………………………………………..……. 6

1.2. Проектирование Web-сайта ………………………………………..……… 7

1.3. Этапы разработки Web – сайтов ………………………………………..….. 9

1.3.1. Постановка задачи при проектировании Web – сайта …..…….9

1.3.2. Разработка интерфейса ………………………………………….. 10

1.3.3. Понятие Web-дизайна …………………………………………….…11

1.3.4. Разработка базы данных …………………………………..………. 13

1.3.5. Разработка административной части сайта ………………….. 15

ГЛАВА II. СРЕДСТВА РАЗРАБОТКИ ………………………………………….….…. 16

2.1. HTML …………………………….…………………………………….…….. 16

2.2. CSS ……………………………….……………………………………..…… 19

2.3. PHP ………………………………..……………………………………..….. 21

2.4. JavaScript …………………….………………………………………..……. 24

2.5. Технология ASP.NET ……………………………………………….……… 27

2.6. Web – сервер Denwer ………………………………………………………. 29

2.7. PhpDesigner ………………………………………………………………….. 30

ГЛАВА III. ПРОЕКТНАЯ ЧАСТЬ ………………………………………………..….…. 32

Сайт – интернет-магазин ………………………………………..… 32

Общая структура сайта …………………………………………… 34

Дизайн web-сайта …………………………………………………… 35

Верхняя навигация ………………………………………………… 36

Главная страница ……………………………………… 36

О нас ……………………………………………………… 37

Контакты ………………………………………………… 37

Корзина товаров ………………………………………… 38

Регистрация …………………………………………..…. 39

Авторизация …………………………………………….. 40

Панель управления …………………………………… 41

Средняя навигация ………………………………………………. 42

Категории товаров …………………………………… 42

Внутренний поиск ………………………………………………… 43

Архитектура базы данных ………………………………………… 44

Низ сайта – Footer …………………………………………………… 45

ЗАКЛЮЧЕНИЕ ……………………………………………………………………………46

БИБЛИОГРАФИЯ …………………………………………………………………………48

ПРИЛОЖЕНИЯ ……………………………………………………………………………50

Сокращения и обозначения

ASP.NET –(ActiveServerPages для .NET) ,платформа разработки веб-приложений, в состав которой входит: веб-сервисы, программная инфраструктура, модель программирования, от компании Майкрософт.

AJAX – (AsynchronousJavascriptand XML), подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.

CSS – (CascadingStyleSheets , каскадные таблицы стилей), формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

СУБД– Система управления базами данных.

HTML –  ( HyperTextMarkupLanguage , «язык гипертекстовой разметки») ,

стандартизированный язык разметки документов во Всемирной паутине.

Internet– всемирная система объединённых компьютерных сетей для хранения и передачи информации.

JavaScript–(аббр. JS ) , мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

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

PHP – (HypertextPreprocessor , «PHP: препроцессор гипертекста»; первоначально PersonalHomePageTools — «Инструменты для создания персональных веб-страниц»), скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений.

WWW –  ( WorldWideWeb) – Всемирная паутина.

ВВЕДЕНИЕ

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

Естественно, что для осуществления электронной коммерции, необходимо современное программное обеспечение. Сегодня существует множество технологий (такие как PHP, JSP, ASP, ASP.NET), позволяющих создавать надёжные и эффективные web-приложения, отвечающие самым современным требованиям, удобные в использовании, как со стороны продавца, так и со стороны покупателя.

World Wide Web (WWW) – интеллектуальное достижение человечества в эпоху высоких технологий. На сегодняшний день WWW содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают пользование ресурсами WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

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

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

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

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

ГЛАВА I. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

Классификация Web-сайтов

Официальной классификации веб-страниц в интернете не существует, но есть особые характеристики, по которым можно классифицировать существующие сайты.

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

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

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

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

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

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

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

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

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

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

Кроме классификации сайтов по характеристикам можно различать веб-страницы и по сложности. Всего существует 2 вида: статичный или динамичный сайт.

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

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

1.2.Проектирование Web-сайта

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

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

Проектирование — это ключевой этап создания интернет-сайта, который отвечает нам на следующие вопросы:

Каковы наши цели создания сайта? Как мы реализуем поставленные цели?

Как сайт будет выглядеть и работать?

Проектирование даёт сайту большие возможности:

Сильно повышает гарантию достижения результата.

Экономит время и деньги.

Позволяет эффективно разделять работу.

Проектирование можно условно разбить на четыре основные части:

Целеполагание

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

Исследование контекста

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

Создание концепции

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

Моделирование

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

Проектирование и разработка сайтов включает:

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

Определение структурной схемы сайта – расположение разделов, контента и навигации.

Веб-дизайн – создание графических элементов макета сайта, стилей и элементов навигации.

Разработка программного кода, модулей, базы данных.

Тестирование и размещение сайта в сети Интернет.

1.3. Этапы разработки Web – сайтов

1.3.1. Постановка задачи при проектировании Web – сайта

Перед разработчиком стоит первая задача – разработать структурную схему веб-сайта для использования в интернете.

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

гибкостью, а также системой управления, удобной для администраторов;

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

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

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

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

1.3.2. Разработка интерфейса

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

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

Удобная форма для регистрации, поиск по товарам или статьям, общепринятые значки, например, схематическое изображение дискеты в качестве кнопки “сохранить”. Это понятно для каждого и не нуждается в объяснении.

ЭТАПЫ ПРОЕКТИРОВАНИЯ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

Аудит проекта

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

Составление технического задания

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

Проектирование интерфейса сайта

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

Разработка дизайна

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

Совмещение дизайна и вёрстки

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

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

1.3.3. Понятие Web-дизайна

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

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

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

Проектирование страниц или сайтов осложняется еще и тем обстоятельством, что одна и та же страница отображается по-разному разными браузерами (Internet Explorer, Netscape Navigator, Opera) и в окнах разного размера. Во многих случаях браузер самостоятельно "решает" как будет выглядеть загружаемая страница. Изменить внешний вид страницы может и пользователь, например, путем отключения опции загрузки рисунков, анимации.

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

Ниже, изображён рисунок, на котором представлена пирамида веб-дизайна:

Важные рекомендации по созданию Web-сайта. Целесообразно не перегружать страницу большим числом деталей. Это связано с тем, что человек за короткое время способен воспринять и запомнить не более 7-8 объектов.

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

1.3.4. Разработка базы данных

База данных (БД) — это организованная структура, предназначенная для хранения, изменения и обработки взаимосвязанной информации, преимущественно больших объемов. Базы данных активно используются для динамических сайтов со значительными объемами данных — часто это интернет-магазины, порталы, корпоративные сайты. Такие сайты обычно разработаны с помощью серверного языка программирования (как пример, PHP) или на основе CMS (как пример, WordPress), и не имеют готовых страничек с данными по аналогии с HTML-сайтами. Странички динамических сайтов формируются «на лету» в результате взаимодействия скриптов и баз данных после соответствующего запроса клиента к веб-серверу.

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

На сегодняшний день широко применяется на практике PHPMyAdmin.

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

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

Приложение распространяется под лицензией GNU GeneralPublicLicense и поэтому многие другие разработчики интегрируют его в свои разработки например XAMPP, Denwer, AppServ, OpenServer.

Интерфейс PhpMyAdmin

1.3.5. Разработка административной части сайта

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

Чаще всего выполняет следующие действия:

Добавление новых страниц или удаление существующих.

Редактирование контента.

Отслеживание и корректирование пользователей.

Модерация сообщений.

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

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

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

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

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

Если на сайте имеется интернет магазин, то, как правило, используется:

Формирование ордеров покупок.

Учет выполненных ордеров.

Учет ордеров в работе.

Анализ покупок и т.д.

Кроме того в административной панели осуществляется работа с контентом. С помощью визуального редактора (похожего на Word) осуществляется работа с текстом и изображением.

ГЛАВА II. СРЕДСТВА РАЗРАБОТКИ

2.1.HTML

Для того, чтобы публиковать информацию для повсеместного распространения, необходимо иметь язык, понятный всем компьютерам. Издательский язык, используемый на WorldWideWeb, называется HTML (от английского HyperTextMarkupLanguage – язык разметки гипертекста).

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

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

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

Код html состоит из следующих элементов:

1. Теги.

2. Атрибуты тегов.

3. Значения атрибутов.

Рассмотрим их по порядку.

Тег html — это основной элемент кода. Пишется он так: <html></html>

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

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

Тег <html> сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.

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

Например, если поставить в угловых скобках букву h1, то на экране выведется текст в виде заголовка.

<h1>Здравствуйте<h1>

То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.

Если в угловые скобки поставить букву p, то текст заключённый в тег, будет выведен в виде абзаца.

<p> Здравствуйте</p>

То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.

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

Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, чтобы сделать заголовок цветным, надо в открывающую часть тега h1, вставить атрибут color: <h1 color></h1>

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

Это указание и будет значением атрибута. Выглядит оно так:

<h1 color="#FF000D"></h1> Это красный цвет.

Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.

Итак, выводом из вышесказанного является:

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

Текстовые документы, содержащие разметку на языке HTML обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами является: Google Chrome, Mozilla Firefox, Opera, Internet Explorer.

2.2. CSS

CSS (CascadingStyleSheets) — это язык описания внешнего вида документа, написанного с помощью языка гипертекстовой разметки (HTML). Сегодня CSS используется практически на всех сайтах.

Целью создания CSS было разделение описания логической структуры документа (сейчас производится с помощью HTML) от описания его внешнего вида (сейчас производится с помощью CSS). Дело в том, что с развитием компьютерных технологий и интернета, люди старались сделать сайты более функциональными и яркими. Но все параметры внешнего вида представлялись в html тегах прямо в веб-документе.

Помимо того, что CSS значительно упрощает форматирование документа, он еще и код загрязняет меньше и обладает большими возможностями, нежели те же HTML теги.

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

Как уже было сказано ранее, CSS — язык стилевой разметки, следовательно — у него есть свой синтаксис и особенности. Вообще, весь язык можно разделить на 2 пункта:

Правила — как должен выглядеть элемент в браузере (в фигурных скобках).

Селекторы — какой элемент должен так выглядеть (перед фигурной скобкой).

Существует три способа, как можно применить данные свойства к нашему документу:

Прописывание свойств прямо в теге — используется атрибут style, который применим к любому html тегу. В атрибуте и прописываем все стили, которые хотим использовать.

<html>

<head>…

</head>

<body>

<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">

</p></html>

Прописывание стилей в head — в шапке сайта (теги head) прописываем все стили, которые будем использовать, с помощью тега style.

<html>

<head>

<style>

body { color: red; }

</style>

</head>

<body> </body>

</html>

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

<html>

<head>

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

</head>

<body> </body>

</html>

2.3. PHP

PHP (HypertextPreprocessor – Препроцессор Гипертекста) – это язык сценариев, который широко используется программистами. PHP является языком общего назначения с открытым исходным кодом.
PHP – язык программирования, специально разработанный для написания web-приложений (скриптов, сценариев), исполняющихся на Web-сервере. Синтаксис языка во многом основывается на синтаксисе C, Java и Perl.

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

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

PHP-код встраивается в HTML-страницы при помощи угловых скобок и знака вопроса:

<?php

…здесь находится код программы php…

?>

Простейшая программа Hello world на PHP выглядит следующим образом:

<?php echo'Hello, world!'; ?>

Также возможен более короткий вариант вывода строки:

<?='Hello, world!'?>

Открывающий тег вида <?= используется для сокращённой записи конструкций используемых для вывода строки.

PHP исполняет код, находящийся внутри ограничителей, таких как <?php ?>. Всё, что находится вне ограничителей, выводится без изменений. В основном это используется для вставки PHP-кода в HTML-документ, например, так:

<html><head><title> Тестируем PHP

</title></head><body>

<?php echo 'Hello, world!'; ?>

</body></html>

Помимо ограничителей <?php ?>, допускается использование дополнительных вариантов, таких как <? ?> и <scriptlanguage="php"></script>. Кроме того, до версии 6.0 допускается использование ограничителей языка программирования ASP <% %> (конструкции <? ?> и <% %> могут быть выключены в конфигурационном файле php.ini).

Имена переменных начинаются с символа $, тип переменной объявлять не нужно. Имена переменных, функций и классов чувствительны к регистру. Константы также чувствительны к регистру. Переменные обрабатываются в строках, заключённых в апострофы или двойные кавычки, и heredoc-строках (строках, созданных при помощи оператора <<<).

PHP рассматривает переход на новую строку как пробел, так же как HTML и другие языки со свободным форматом. Инструкции разделяются с помощью точки с запятой (;), за исключением некоторых случаев, после объявления конструкции if/else и циклов.

Переменные в функцию можно передавать как по значению, так и по ссылке (используется знак &).

PHP поддерживает три типа комментариев: в стиле языка Си (ограниченные /* */), C++ (начинающиеся с // и идущие до конца строки) и оболочки UNIX (с # до конца строки).

Сами же файлы, в которых присутствует PHP-код, имеют расширение ***.php.

Для создания веб-проектов на языке php, необходимо программировать, используя либо установленный локальный сервер на своём компьютере, либо работая с помощью удалённого сервера. Удалённый сервер не всегда удобен, да и, как правило, за это надо платить. Для создания сервера на своём компьютере понадобятся следующие программы: Apache или Denver (сервер), MySQL (базы данных), PHP. Все программы актуальных версий можно найти на официальных сайтах разработчиков. Создание PHP-файлов, написание кода и работа с ним ничем не отличается от того же процесса, что и при работе с HTML. Работать с php-кодом можно также в обычном текстовом редакторе, но делать это с помощью php-редактора намного удобнее.

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

PHP прост для освоения, и вместе с тем способен удовлетворить запросы профессиональных программистов.

Даже если Вы впервые услышали о PHP, изучить этот язык не составит для Вас большого труда. Мы не сомневаемся, что изучив основы PHP в течение нескольких часов, вы уже сможете создавать простые PHP-скрипты.

Язык PHP постоянно совершенствуется, и ему наверняка обеспечено долгое доминирование в области языков web-программирования, по крайней мере, в ближайшее время.

2.4. JavaScript

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

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

Вопреки распространенному мнению, JavaScript не является "интерпретируемым Java". В двух словах, JavaScript — это динамический скриптовый язык, поддерживающий прототипное создание объектов. Базовый синтаксис намеренно похож на Java и C++, чтобы уменьшить число новых концепций, необходимых для изучения языка. Такие языковые конструкции, как if, for, while, switch, try … catch похожи на конструкции этих языков.

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

Объектно-ориентированность. Выполнение программы представляет собой взаимодействие объектов;

Приведение типов данных проводится автоматически;

Функции выступают объектами базового класса. Эта особенность делает JavaScript похожим на многие функциональные языки программирования, такие как Lisp и Haskell;

Автоматическая очистка памяти. Так называемая, сборка мусора делает JavaScript похожим на C# или Java.

Если говорить о сути применения JavaScript, то этот язык позволяет «оживлять» неподвижные страницы сайтов с помощью кода, который можно запустить на исполнение (так называемые, скрипты). То есть, можно провести аналогию с мультфильмами, где html и css– это прорисованные герои, а JavaScript – это то, что заставляет их двигаться.

Если говорить о синтаксисе JavaScript, то ему присущи следующие особенности:

Регистр важен. Функции с названиями func() и Func() – совершенно разные;

После операторов необходимо ставить точку с запятой;

Встроенные объекты и операции;

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

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

<script type="text/javascript">

alert('Hello, World!');

</script>

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

Разработка веб-приложений. Хотите установить простой счетчик, организовать передачу данных между формами или поместить на своем сайте игру? Тогда JavaScript выступит верным помощником в этом деле;

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

Операционные системы. Возможно, кто-то не знал, но Windows, Linux и Mac имеют своих браузерных конкурентов, львиная доля кода которых написана на JavaScript;

Мобильные приложения;

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

Недостатки JavaScript

Необходимость обеспечивать кроссбраузерность. Раз уж JavaScript выступает как интернет-технология, то приходится мириться с правилами, которые устанавливает всемирная паутина. Код должен корректно выполняться во всех, или хотя бы самых популярных, браузерах;

Система наследования в языке вызывает трудности в понимании происходящего. В JavaScriptреализовано наследование, основанное на прототипах. Люди, изучавшие другие объектно-ориентированные языки программирования, привыкли к привычному «класс потомок наследует родительский класс». Но в JavaScript такими вещами занимаются непосредственно объекты, а это не укладывается в голове;

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

Синтаксис в целом затрудняет понимание. Красота кода – явно не конёк JavaScript, но главное правило программистов соблюдено: «Работает? Не трожь!».

Теперь стоит отметить некоторые преимущества

JavaScript предоставляет большое количество возможностей для решения самых разнообразных задач. Гибкость языка позволяет использовать множество шаблонов программирования применительно к конкретным условиям. Изобретательный ум получит настоящее удовольствие;

Популярность JavaScript открывает перед программистом немалое количество готовых библиотек, которые позволяют значительно упростить написание кода и нивелировать несовершенства синтаксиса;

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

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

2.5. Технология ASP.NET

Технология ASP.NET является развитием Active Server Page (ASP). Данная технология представляет собой универсальную платформу для разработки веб-приложений и веб-сервисов от компании Microsoft. ASP.NET предлагает новую модель программирования и инфраструктуру, которые позволяют разрабатывать защищенные и масштабируемые решения. В ASP.NET следует отметить следующие функциональные возможности:

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

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

простота развертывания. Развертывание ASP.NET-приложений выполняется путем копирования файлов приложения в специальную папку на веб-сервере. Перезапуск веб-сервера при этом не требуется;

высокая производительность. ASP.NET имеет дело со скомпилированным кодом. Благодаря этому ASP.NET получает возможность эффективно использовать различные механизмы оптимизации кода (например, механизмы раннего связывания или оптимизация под конкретную платформу);

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

доступность и масштабируемость. ASP.NET разрабатывалась в расчете на использование в крупных кластерных системах. Реализованные в рамках IIS 6.0 механизмы позволяют гарантировать высокую степень доступности приложений. Если с процессом, в рамках которого выполняется приложение, возникнут проблемы, система самостоятельно запустит новый процесс, который возьмет на себя задачи обслуживания запросов пользователей;

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

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

Принципы ASP.NET

Хотя ASP.NET берёт своё название от старой технологии Microsoft ASP, она значительно от неё отличается. Microsoft полностью перестроила ASP.NET, основываясь на CommonLanguageRuntime (CLR), которая является основой всех приложений Microsoft .NET. Разработчики могут писать код для ASP.NET, используя практически любые языки программирования, входящие в комплект .NET Framework (C#, Visual Basic.NET и JScript .NET). ASP.NET имеет преимущество в скорости по сравнению со скриптовыми технологиями, так как при первом обращении код компилируется и помещается в специальный кэш, и впоследствии только исполняется, не требуя затрат времени на парсинг, оптимизацию, и т. д.

2.6. Web – сервер Denwer

Веб-сервер — сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными.

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

Клиент, которым обычно является веб-браузер, передаёт веб-серверу запросы на получение ресурсов, обозначенных URL-адресами. Ресурсы — это HTML-страницы, изображения, файлы, медиа-потоки или другие данные, которые необходимы клиенту. В ответ веб-сервер передаёт клиенту запрошенные данные. Этот обмен происходит по протоколу HTTP.

Для своей дипломной работы я использовала, самый известный и удобный из существующих на данный момент веб-серверов, – Денвер (Denwer).

Денвер  — набор дистрибутивов (локальный сервер WAMP) и программная оболочка, предназначенные для создания и отладки сайтов на локальном ПК под управлением ОС Windows.

Что включает в себя базовый пакет Денвера:

Инсталлятор (поддерживается также инсталляция на flash-накопитель).

Apache, SSL, SSI, mod_rewrite, mod_php.

PHP5 с поддержкой GD, MySQL, sqLite.

MySQL5 с поддержкой транзакций.

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

Система управления запуском и завершением всех компонентов Денвера.

phpMyAdmin — система управления MySQL через Web-интерфейс.

Эмулятор sendmail и SMTP-сервера (отладочная «заглушка» на localhost:25, складывающая приходящие письма в /tmp в формате .eml); поддерживается работа совместно с PHP, Perl, Parser и т.д.

2.7. PhpDesigner

PhpDesigner – продукт, разработанный компанией MPSOFTWARE. Редактор имеет много плюсов. Это подсветка синтаксиса и мощное ядро обработок ошибок. Также автоподстройку выражений и секций кода, подсказки кода, а также справочник по функциям языка PHP.

Эти функции часто помогают начинающим программистам. Это программа -комплекс для комфортной разработки веб-сайтов. Кроме языка PHP она отлично справляется с разметкой страниц на HTML и стилями для нее CSS.

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

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

Также есть мануал по PHP, HTML, CSS, JavaScript, Pear, SQL.

Комментирование кода очень удобное. Достаточно выделить фрагмент кода и нажать одну кнопку. Так что не нужно комментировать каждую строчку отдельно. Снимаются комментирование также просто.

Есть поддержка популярных PHP и JavaSrcipt фреймворков.

Вид интерфейса программы PhpDesigner

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

ГЛАВА III. ПРОЕКТНАЯ ЧАСТЬ

3.1. Сайт – интернет-магазин

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

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

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

Логика работы интернет-магазина

Посетитель заходит на сайт и набирает корзину товаров, после чего происходит оформление заказа. Если посетитель уже покупал товары на этом сайте, достаточно ввести логин, пароль и уточнить адрес доставки. Если не покупал – необходимо будет дополнительно ввести контактные данные. Затем выбирается способ доставки и формируется конечная стоимость заказа (товары + доставка).

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

После оплаты посетитель возвращается на сайт и получает подтверждение – прошла оплата или нет. Если нет – обычно предлагается повторить попытку или связаться с менеджером интернет-магазина для получения помощи.

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

Основное отличие Интернет-магазина от традиционного — в типе торговой площадки. Если обычному магазину нужен торговый зал, витрины, ценники, а также продавцы, кассиры и опытные консультанты, то у его онлайнового «тезки» вся инфраструктура реализована программно. Другими словами, Интернет-магазин — это совокупность программ, работающих на Web-сайте, которые позволяют покупателю дистанционно выбрать товар из каталога и оформить его заказ. Функции витрины и торгового зала выполняют «страницы» с иллюстрированным каталогом товаров, а консультантов — подсказки, инструкции и описания. Все остальное — как в обычном магазине. Даже в интерфейсе Интернет-магазина сохраняются привычные элементы, например виртуальная «тележка» («корзина»), куда мы по пути к кассе складываем выбранные товары.

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

3.2. Общая структура сайта

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

В тезисах структуру сайта можно охарактеризовать так:

Где я нахожусь сейчас (страница входа);

куда я могу попасть (переход);

взаимосвязь между категориями.

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

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

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

В центральной колонки отображается основная информация.

В верхней навигации есть ссылка на главную страницу, ссылка «О нас», где пользователь может узнать дополнительную информацию о интернет-магазине.

Кроме этого, ссылка «Контакты», на которой пользователь может узнать все контакты сайта – телефоны, адрес, email, график работы и др.

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

Рядом с логотипом находится ссылка “Регистрация”, которая позволяет пользователям зарегистрироваться на данном сайте.

Также ссылка “Авторизация”. После регистрации, пользователи могут авторизироваться и выполнять необходимые для них операции. И ссылка для входа в панель управления администратора.

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

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

3.3. Дизайн web-сайта

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

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

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

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

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

Помимо полей к основным инструментам структурирования страниц веб-ресурса относятся также линии, блоки (цветные или нет), отступы, графические элементы.

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

(Смотрите приложение 2).

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

3.4. Верхняя навигация

3.4.1 Главная страница

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

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

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

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

3.4.2. О нас

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

3.4.3. Контакты

Страница «Контакты» на сайте — это конец пути пользователя по вашему ресурсу. Сюда он приходит уже после того, как ознакомился с вашим предложением и принял решение о покупке – конечно же, положительное. Теперь он хочет узнать, каким образом связаться с вами или попасть в ваш офис. На странице контактов недостаточно просто написать номер телефона. Вам нужно оставить как можно больше данных, чтобы потенциальный клиент мог связаться с вами. А он может захотеть сделать это не только с помощью звонка. Желательно, чтобы на странице обязательно были следующие элементы:

Номера телефонов

Электронная почта

Адрес

Время работы

Адреса филиалов

Схема проезда

На рисунке 5 изображена страница «Контакты» сайта «Розовый слон». На ней пользователь может узнать всю контактную информацию: номера телефонов, email, адрес, график работы и доставки и др. (Приложение 5)

3.4.4. Корзина товаров

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

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

корзина должна быть заметна с первого взгляда – чтобы покупатель не тратил время на ее поиски, визуально она должна отличаться от остального оформления шапки сайта;

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

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

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

Когда все необходимые товары добавлены, покупатель переходит к непосредственному оформлению покупки.

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

Также рекомендуется:

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

товары выводить с фотографиями и ссылками на их страницы;

добавить ссылки на страницы оплаты и доставки, которые будут открываться в новой вкладке;

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

максимально сократить количество не значимых полей, из обязательных оставить только номер телефона. (Приложение 6)

На рисунке 6 представлен интерфейс корзины на сайте “Розовый слон ”. На странице корзины посетитель увидит необходимую информацию: миниатюрную фотографию товара, краткое описание товара, цену товара. Также клиенты могут выбирать количество товаров, могут удалять товар из корзины. Корзина есть только у зарегистрированных пользователей, поэтому гости сайта не смогут осуществлять покупки (см. рисунок 7).

3.4.5. Регистрация

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

На рисунке 8 изображена форма регистрации пользователя на сайте «Розовый слон». Необходимые для заполнения поля являются: Логин, Пароль, Фамилия Имя, Email, Телефон, Адрес. При нажатии на кнопку «Зарегистрироваться» вы считаетесь авторизированным пользователем и можете приступать к покупкам. (Приложение 7)

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

Аккаунт – это ваша учетная запись на каком-либо сайте. Для каждого сайта или интернет-сервиса требуется регистрировать свой аккаунт.

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

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

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

Другими словами, аккаунт это еще и идентификатор пользователя.

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

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

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

То есть, основными данными аккаунта являются:

Логин – это имя пользователя на сайте, не настоящее, а вымышленное (Ник), как правило, записанное латинскими буквами. Очень часто в качестве логина используется e-mail.

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

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

3.4.6. Авторизация

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

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

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

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

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

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

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

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

3.4.7. Панель управления

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

(Приложение 9)

На рисунке 11 представлена панель управления сайта «Розовый слон». С левой стороны находиться блок с основным меню, в центральном блоке выводиться общая статистика сайта.

Главное меню включает в себя следующие пункты:

1) Заказы

2) Товары

3) Категории

4) Клиенты

Функционалом панели управления данного сайта является:

1) Добавление, редактирование и удаление товаров в интернет-магазине.

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

3) Добавление новых категорий

4) Обработка заказов на сайте.

5) Возможность удаления пользователе

3.5. Средняя навигация

3.5.1. Категории товаров

В средней навигации моего сайта пользователи могут увидеть горизонтальное выпадающее меню со всеми категориями игрушек. (Приложение 10)

На сайте 5 категорий товаров, каждая из которых содержит 4 подкатегории. Пользователь может легко найти необходимую ему игрушку, выбрав подходящую категорию. Разделение товаров по категориям необходима в интернет-магазине, так как она позволяет быстрее найти нужные товары, что позволяет посетителям сэкономить время. (см. рис. 13, 14, 15, 16, 17).

3.6. Внутренний поиск

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

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

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

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

3.7. Архитектура базы данных

Для того чтобы сайт был полностью функциональным и динамическим необходимо создание базы данных. Структуру сайта обычно хранят непосредственно в коде (допустим, в PHP-скриптах), либо в отдельных файлах, так называемых шаблонах. Встает вопрос, как хранить контент сайта. Вот для этой задачи как нельзя лучше подходит база данных. В базе данных можно хранить не только текстовую информацию, но и изображения. База данных представляет собой набор таблиц. Каждая таблица — это сущность, в которой хранятся однотипные данные. Для полного функционала своего сайта я создала базу данных rozovii_slon, используя для этого СУБД PhpMyAdmin. Моя база данных состоит из 8 таблиц, связанных по одному инкрементному полю. (Приложение 12)

Плюсы базы данных:

Ну, во-первых, простое и быстрое управление данными. Любая современная СУБД поддерживает язык запросов SQL, с помощью которого осуществляется выборка, добавление, удаление и изменение данных в базе. На моём сайте вывод товаров по категориям, по параметрам происходит благодаря базе данных, путем создания простых SQL запросов.

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

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

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

3.8. Низ сайта – Footer

Footer (футер, подвал)  — это один из элементов структуры сайта, располагающийся внизу страницы. Его название происходит от английского слова foot – ступня или нога. Несмотря на небольшой размер и не престижное место размещения, футер можно использовать с большой пользой как для владельца сайта, так и его посетителей.

Что можно разместить в футере:

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

Краткую информацию о ресурсе

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

Копирайт

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

Контактные данные

На коммерческих ресурсах наряду с отдельной страницей с подробным описанием способов связи, целесообразно указать в подвале основные контакты (телефон, skype, e-mail).

Карта сайта

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

Кнопки социальных сетей

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

Теги

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

Счетчики статистики

Счетчик является показателем работы сайта для посетителей и инструментом анализа его посещаемости для владельца. Футер – наиболее оптимальное место его размещения.

На сайте «Розовый слон» также есть Footer, с некоторой полезной информацией, а именно номер телефона администратора, адрес, email и график доставки, а также год разработки и название сайта. (Приложение 13)

ЗАКЛЮЧЕНИЕ

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

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

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

Для осуществления разработки были использованы следующие Интернет-технологии:

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

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

При разработке архитектуры Интернет-магазин был разделен на две части: клиентскую и администраторскую.

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

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

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

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

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

БИБЛИОГРАФИЯ

Издания:

Томас Коннолли, Каролин Бегг, «Базы данных. Проектирование, реализация и сопровождение. Теория и практика», 2003

Дженнифер НидерстРоббинс, «Web-дизайн. Справочник», 2008

Кристофер Шмитт, «CSS. Рецепты программирования», 2007

ЗельдманД., «Web-дизайн по стандартам», 2007

Муссиано, Кеннеди, «HTML и XHTML. Подробное руководство», 2012

Флэнаган Д., «JavaScript. Подробное руководство», 2004

Зандстра, «PHP. Объекты, шаблоны и методики программирования», 2009

Э. Молинаро, «SQL. Сборник рецептов», 2010

Алан Бьюли, «Изучаем SQL», 2011

Дмитрий Котеров, «PHP 5 (2-е изд.)», 2004

БерБибо, Иегуда Кац, «jQuery. Подробное руководство по продвинутому JavaScript, 2-е издание», 2008

Нильсен, Лоранжер, «Web-дизайн: удобство использования Web-сайтов», 2007

ТероуШэри, «Видимость в Интернете. Поисковая оптимизация сайтов», 2005

Хуторской А. В., Орешко А. П., «Технология создания сайтов», 2004

Фрейен Бен, «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств», 2003

Фридман В. А., Александров А. В., Сергеев Г. Г., Костин С. П. «Строительство Web-сайтов», 2002

Мэтью Д., «HTML5. Разработка веб-приложений», 2011

Никсон Р., «Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript», 2008

Веб – ресурсы:

www.flaticon.com

www.cyberforum.ru

http://www.learn-angular.org/

http://colours.neilorangepeel.com/

CSS Triggers List – What Kind of Changes You Can Make

http://webfont.ru/

https://websitebuilders.com/tools/html-codes/a-z/

https://www.wikipedia.org/

https://www.w3schools.com

https://www.htmlbook.ru/

https://www.studfiles.net

https://www.monetavinternete.ru

https://www.semantica.in

https://www.www.internet-technologies.ru

https://www.hostiq.ua

https://www.studbooks.net

https://www.support.office.com

https://www.php.net

https://www.php.su

https://www.studopedia.info

ПРИЛОЖЕНИЯ

Приложение 1

Рисунок 1. Общая структура интернет-магазина «Розовый слон»

Приложение 2

Рисунок 2: Интерфейс интернет-магазина “Розовый слон ”

Приложение 3

Рисунок 3. Главная страница интернет-магазина «Розовый слон»

Приложение 4

Рисунок 4. Страница «О нас» интернет-магазина «Розовый слон»

Приложение 5

Рисунок 5. Страница «Контакты» интернет-магазина «Розовый слон»

Приложение 6

Рисунок 6: Страница корзины интернет-магазина “Розовый слон”

Рисунок 7: Страница корзины интернет-магазина “Розовый слон” для гостей сайта

Приложение 7

Рисунок 8: Страница регистрации интернет-магазина “Розовый слон”

Приложение 8

Рисунок 9: Страница авторизации интернет-магазина “Розовый слон”

Приложение 9

Рисунок 10: Страница авторизации администратора интернет-магазина “Розовый слон”

Рисунок 11: Панель управления интернет-магазина “Розовый слон”

Приложение 10

Рисунок 12: Выпадающее меню с категориями интернет-магазина “Розовый слон”

Рисунок 13: Страница категории «Игрушки для малышей» сайта “Розовый слон”

Рисунок 14: Страница категории «Игрушки для мальчиков» сайта “Розовый слон”

Рисунок 15: Страница категории «Игрушки для девочек» сайта “Розовый слон”

Рисунок 16: Страница категории «Развитие и творчество» сайта “Розовый слон” Рисунок 17: Страница категории «Детская комната» сайта “Розовый слон”

Приложение 11

Рисунок 18: Строка поиска интернет-магазина “Розовый слон”

Приложение 12

Рисунок 9: База данных сайта “Розовый слон”

Приложение 13

Рисунок 11. Footer(подвал) интернет-магазина «Розовый слон»