Разработка интернет-магазина для компании

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

Введение

Актуальность темы выпускной квалификационной работы бакалавра: разработка интернет-магазина для компании “Powermatrix54, заключается в том, что с увеличением числа пользователей интернета значительно вырос спрос на приобретение товаров или услуг, не выходя из дома. Электронный бизнес приобретает всё большую популярность в России. Для покупателя главное - это удобство, комфорт, быстрота и возможность просмотра большого количества товаров при минимуме действий. В свою очередь, для продавца это малозатратный инструмент ведения бизнеса: отсутствие необходимости в аренде торгового помещения, в подборе рабочего персонала, в приобретении кассового аппарата и выполнения соответствующего технического обслуживания, доступность любому пользователю в любой точке планеты 24 часа в сутки, 7 дней в неделю. Вот поэтому интернет торговля стремительно развивается. Покупатель может в два клика “мыши” приобрести себе товар, не выходя из дома, а продавец - принять заказ и доставить до клиента.

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

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

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

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

Для достижения цели необходимо решить следующие задачи:

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

- обосновать выбор и использование системы управления контентом;

- оценить затраты на создание и размещения проекта;

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

- разработка и реализация самого интернет - магазина;

- разработать и описать структуру хранения данных;

- подробно описать проект разработки проекта интернет - магазина “Powermatrix54.ru”.

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

В первом разделе представлено обоснование в создание сайта интернет - магазина, выбора системы управлением контентом.

Во втором разделе дано описание средств разработки, использующихся в ходе выполнения квалификационной работы. Реализация проекта проводилась с использованием следующих программ: CMS “Prestashop”, Web-сервер Apache, РНР 5, JavaScript, СУБД MySQL.

В третьем разделе представлен анализ ведущих топ сайтов в России.

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

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



1. Теоретическая часть

1.1 Обоснование потребности в web-сайте

Нынешнее время значительно сильно отличается от предыдущего.

XXI век - век информационного развития, где правит техника, а в роли товара выступает - информация.

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

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

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

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

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

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

1.2 Затраты на создания и размещения web-сайта

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

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

· наличие Apache HTTP сервер или Windows IIS;

· поддержка интерпретатора скриптового языка программирования PHP не менее 5 версии;

· наличие сервера база данных MySQL;

· возможность работы в защищенном режиме SSL, безопасной работы с платежами;

· поддержка работы PHP в режиме CGI или FastCGI;

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

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

· дискового пространства не менее 3 Гигабайт;

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

По всем вышеперечисленным требованиям, выбор остановился на молодой, но стремительно развивающейся хостинг-компании “Шнайдер - хостинг” (www. shneider-host.ru).

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

Кроме всего этого, данная хостинг-компания предлагает бесплатно установить SSL сертификат от “Let's encrypt” (центр сертификация, работающий с декабря месяца 2015 предоставляющее бесплатные криптографические сертификаты “X.509” для “TSL” шифрования (HTTPS)).

Скорость подключения сервера к сети интернет 500mbps, что превзошли требуемые ожидания по отношению к 256 мегабайтам. Поддержка всех нужных программных обеспечений. Неограниченное количество баз данных MySQL.

Дисковое пространство 3 Гигабайта. Неограниченный трафик сайтов. Антиспамовая защита. Автоматическое резервное копирование. SSH доступ (позволяющий удаленно управлять операционной системой и осуществлять туннелирование TCP соединений (например: передача файлов)).

При всем этом спектре услуг и предоставляемого сервиса, цена за хостинг при единовременной годовой оплаты составит для владельца интернет - магазина 1320(одна тысяча триста двадцать) рублей или 110(сто десять) рублей в месяц, что дешевле порядка на 20(двадцать) рублей в месяц или 240(двести сорок) рублей в год, по сравнению со средней рыночной стоимостью на данные услуги-130 (сто тридцать) рублей в месяц или 1560(тысяча пятьсот шестьдесят) рулей в год.

Множество онлайн способов оплаты за услуги компании “Шнайдер - хост”.

1.3 Обоснование выбора CMS (Content Management System)

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

CMS (Content Management System) - система управления контентом, используемая для управлением содержимым сайта, которая выполняла бы следующее функции:

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

· управление содержимым: хранение, контроль над режимом доступа, управление потоком скачиваемы, загружаемых документов;

· чтобы информация была в удобном виде для поиска и навигации.

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

Мною была выбрана бесплатная система управления содержимым, свободное программное обеспечение с открытым исходным кодом “Prestashop 1.6”.

1.4 Этапы и цель разработки веб - сайта

Работу по созданию интернет-магазина разделяю на следующие этапы:

· определить цель создания сайта. Один из важных этапов в создании web - сайта. От цели зависит процесс дальнейшей разработки;

· анализ и исследование ведущих интернет - магазинов в России, потенциальных конкурентов;

· разработка дизайна, макета интернет сайта;

· HTML и CSS верстка;

· установка CMS и программирование сайта;

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

· тестирование;

· размещение в интернете.

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

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

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

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

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

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



2. Средства разработки и программное обеспечение

2.1 Notepad++

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

В Notepad++ присутствует подсветка кода. К данному редактору можно подключать различные плагины, например, файловый менеджер, так же возможно создавать API файлы.

Редактор Notepad++ имеет открытый программный код.

Его базовые возможности:

· закрытие скобок и тэгов происходит автоматически, автодополнение;

· поиск и замена присутствующих регулярных выражений;

· наличие записи макросов и воспроизведения;

· горячие клавиши можно назначать самому или менять те значения, которые установлены по умолчанию;

· имеется резервное копирование, она включается в настройках;

· текст можно трансформировать при помощи подключенного плагина TextFX;

· текст можно выделить блоком, а также одновременно в нескольких разных местах.

В моей квалификационной работе данный вид инструмента применялся для быстрой, и удобно - читаемой верстки, а также редактирования файлов формата PHP, HTML, CSS, JavaScript.



2.2 HTML и DHTML

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

HTML - (Hyper Text Markup Language -- «язык гипертекстовой разметки»), данный язык является стандартизированным языком разметки документов во всемирной паутине. Этот язык интерпретируются всеми браузерами, полученное в результате интерпретации форматированный текст отображается на экране пользователя.

HTML является приложением стандартного, обобщенного языка разметки, который соответствуют международному стандарту ISO 8879.

В интернете страницы HTML передаются, как правило, по протоколу http или https от сервера к клиенту в виде простого текста или бывает с использование шифрования.

Данный язык был разработан британским ученым Тимом Бернерсом - Ли с 1986 по 1991 год в Женеве в Швейцарии. Изначально HTML предполагался для использования обмена научно-технической документации, для людей, которые не являются специалистами в области верстки.

HTML прекрасно справлялся с проблемами сложности SGML путем определения небольшого набора структурных и семантических элементах, таких как дескрипторы - очень часто дескрипторы называют “тегами”.

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

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

<html>

<head>

<title>Название</title>

</head>

11

<body>

<p>Здесь само “тело” документа

</body>

</html>

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

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

Dynamic HTML или DHTML - этот подход или способ для создания интерактивного web-сайта, который используется в сочетании со статическим языком гипертекстовой разметки HTML, встраиваемого скриптового языка Javascript, CSS и объектной модели документа. Так же предполагается его использования для создания приложений в браузере: для более простой навигации, а также для придания интерактивности форум.

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

2.3 CSS - средство описание, оформление web - страниц

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

Данное средство используются для описания, оформления внешнего вида web-страниц, которые написаны при помощи HTML и XHTML, но также может применяться и к XML-документам. . Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» 2010 г. Издательство: Эксмо, - 768 с.

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

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

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

В таблицах стилей CSS располагаются все необходимые правила.

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

Такие правила состоят из двух частей - определение и селектор.

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

Рассмотрим пример:

селектор {

свойство: значение;

H1{

color: red;}

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

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

1)Когда таблица CSS стилей располагается в отдельном файле, она может подключена к документу посредством тега <link>, который расположен в этом документе между тегами <head> </head>.

Правила этой таблице действует на протяжении всего документа.

Например:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</body>

</html>

2) Таблицы стилей CSS которые описаны в отдельном файле, могут быть подключены к документу посредством директивы “@import”, располагающиеся в этом же документе между тегами <style>, который в свою очередь находится в документе между тегами <head> </head>.

Например:

<!DOCTYPE html>

<html>

<head>

<style crome="go">

@import url(Mystyle.css);

</style>

</head>

</html>

3) Следующий способ подключения - это когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа.

Например:

<!DOCTYPE html>

<html>

<head>

<style>

body {

color: green;

}

</style>

</head>

<body>

</body>

</html>

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

Например:

<!DOCTYPE>

<html>

<head>

</head>

<body>

<p style="font-size: 10px; color: yellow">

</p>

</body>

</html>

Знание написания каскадных таблиц стилей CSS крайне необходимо. Так как создать сайт без использования языка программирования PHP или Javascript возможно, но без знания HTML и CSS это будет крайне проблематично.

2.4 XML

Extensible Markup Language (XML) - является расширяемым языком разметки, который не фиксирует разметку в используемых документах, определяет набор правил для кодирования, является удобным для восприятия человеком и машины.

Цели дизайна XML подчеркивают простоту, универсальность и удобство использования через Интернет. Это текстовой формат при мощной поддержке с помощью Unicode для различных языков. Хотя дизайн XML фокусируется на документах, язык широко используется для представления произвольных структур данных которые используются в веб - службах.

Ключевые термины языка XML представляют следующее:

Символ:

XML документ представляет собой строку символов. Почти каждый Unicode символ может появляться в документе XML.

Процессор и приложения:

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

Процессор часто называют в просторечии как “синтаксический анализ XML”.

Разметка и содержание:

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

Как правило строки, которые представляют собой разметку могут либо начинаться с символа “<” и заканчиваться символом “>” или начинаться с символа “&” и заканчиваться “;”.

Тег:

Тег (англ. tag) -- конструкция разметки, содержит имя элемента. Например:

Начальный тег: <element1>

Конечный тег: </element1>

Элемент:

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

Примером может служить <greeting>Hello, world!</greeting>. Другой <line-break />.

Атрибут:

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

Примером может служить <img src="madonna.jpg" alt="Madonna" />, в котором имя атрибуты "src" и "Alt" их значения "madonna.jpg" и " Madonna " соответственно.

Другим примером может служить <step number="3">Connect A to B. </step> - имя атрибута является "число" и его значение равно "3". Атрибут XML может иметь только одно значение и каждый атрибут может появляться не более одного раза на каждом элементе. В общей ситуации где требуется список из нескольких значений, это должно сделано путем кодирования списка в хорошо сформированных XML атрибутах. Обычно это либо запятая или точкой с запятой.

Декларация XML:

XML - документы могут начинаться с декларации XML, который описывает некоторую информацию о себе. Примером может служить <?xml version="1.0" encoding="UTF-8"?>.

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

2.5 JavaScript

Javascript - прототипно-ориентированный, сценарный язык программирования.

Практически все современные браузеры поддерживают javascript.

Код Javascript исполняется в браузере пользователя, которые в свою очередь еще называются “клиентами”. Программы написанные на нем называются “скриптами”, которые непосредственно интегрированы в HTML страницы.

Приложения написанные на языке javascript могут выполняться как на стороне сервера так и на стороне клиента.

Данный язык соответствует всем стандартам ECMA - европейской ассоциации стандартизации.

Использование написание javascript-кода имеет большой спектр действий для взаимодействия с пользователем:

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

· с помощью написания скриптов можно изменить содержимое HTML элементов;

· широко используется для обратной связи с клиентом посредством онлайн форм;

· использование в написании формы регистрации - логин и пароль пользователя;

· поиск вводимых данных пользователем, на основе которых выводятся нужные результаты;

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

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

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

· прием пользовательских комментариев или обратной связи с клиентами в онлайн режиме;

· использовать для хранения IP адресов пользователей, а так же запись посещаемости страниц сайта.

К примеру: создав на странице “кнопка” и написав javascript сценарий:

<div onclik=”alert(`Вы нажали на кнопку');” кнопка>

</div>

При ее нажатии, “скажет” что делать дальше или “сообщит” что то полезное.

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

2.6 PHP

Становление и развитие сценарного языка программирования PHP началась с 1994 года, когда датский программист Расмус Лердорф создал набор скриптов на Perl/CGI c целью учета и вывода посетителей его онлайн резюме, которые обрабатывали шаблоны HTML документов. Лердорф назвал этот набор

- Personal Home Page (Личная Домашняя Страница).

При нехватке быстроты и функциональности Perl - интерпретатора скриптов, разработал с использованием языка программирования “C” - новый интерпретатор шаблонов PHP/FI (персональная домашняя страница / интерпретатор форм).

8 июня 1995 года вышел первый публичный релиз.

Язык программирования PHP молодой и очень динамично развивающийся. В настоящее время выпущена версия PHP 7.0.

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

Например, простейшая программа “Hello World”:

<?php

echo 'Hello, world!';

?>

PHP - один из популярнейших сценарный язык программирования.

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

Самые основные:

· извлечение POST и GET параметров, а также значения переменных окружения web сервера в массивы;

· взаимодействие с большим количеством систем баз данных - MySQL, Oracle, Lotes Notes и т.д;

· отправка HTTP заголовков - автоматизирована;

· работа с сессиями и cookies;

· работа с локальными и удаленными файлами, сокетами;

· обработка файлов загружаемых на сервер.

PHP так же можно использовать для создания GUI - приложений.

Начиная с PHP 5.0(пятой) версии обладает полной поддержкой объектно-ориентированного программирования. Оптимизирована работа с классами, код работает достаточно быстро. Описание класса начинается с ключевого слова “class”. Экземпляры класса создаются ключевым словом “new”, обращение к полям и методам объекта происходит с использованием оператора “->”. Для доступа к членам класса из его методов используется переменная “$this”. Робин Никсон. Создаем вебсайты с помощью PHP, MySQL и JS. - М.: O'reilly, 2011г. - 497с. Издательство: Эксмо, - 768 с.

Начиная с PHP 5.0, объекты передаются по ссылке, например:

class a

{

public $cvet = 'green';

}

$a = new a();

echo $a -> cvet; // green

$b = $a;

$b -> cvet = 'blue';

echo $a -> color; // blue

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

2.7 Web-сервер Apache

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

Также web-сервер может иметь дополнительные функции, например:

· автоматизация работы web-страниц;

· ведение журнала всех обращений пользователей к ресурсам;

· авторизация пользователей, а также их аутентификация;

· поддерживание динамически генерируемых страницы;

· поддержка протокола https c целью защиты соединений с клиентами.

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

Начиная с 2011 года самым распространенным web-сервером, который занимал более 65% всего рынка, является свободный веб-сервер Apache, который часто встречается в операционных системах unix подобных.

Название Apache произошло в честь группы североамериканских племен индейцев - Апачи.

Apache поддерживает различные операционные системы, такие как Microsoft Windows, Linux, BSD и другие.

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

Свою историю становления и развития web-сервер Apache считается начало 1995 года.

Уже с начала 1996 года, апреля месяца и до настоящего времени web-сервер Apache - это самый популярный HTTP сервер в интернете.

Ядро Apache представляет полностью написан на языке программирования Cи.

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

Ядро веб-сервера Apache полностью разрабатывалась без участия сторонних программистов - Apache Software Foundation. Теоретические Apache этот сервер может функционировать в чистом виде без использования различных модулей однако такая функциональность крайне ограничено.

Конфигурационная система Apache основана на текстовых конфигурационных файлов, имеет следующие условные уровни конфигурации:

- конфигурация сервера(httpd.conf);

- конфигурация виртуального хоста скобках (httpd.conf);

- конфигурация уровня директории (.htaccess).

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

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

В модулях реализуются функции:

· добавление функций;

· поддержка языков программирования;

· модификации основных функций или исправление ошибок;

· безопасность.

Web-сервер Apache имеет встроенный механизм виртуальных хостов, который позволяет полноценно обслуживать на одном IP адресе множество сайтов.

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

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

· PHP;

· Python;

· Ruby;

· Perl и другие.

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

2.8 MySQL

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

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

По моделям баз данных можно квалифицировать:

· иерархическая;

· объектная и объектно-ориентированная;

· объектно-реляционная;

· реляционная;

· сетевая;

· функциональная.

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

MySQL - это отличное решение для малых и средних приложений.

Она входит в состав серверов AppServ, WAMP, LAMP и в портативные сборки серверов Денвер. Почти всегда MySQL используется в роли сервера, к которому обращаются удалённые или локальные клиенты, однако помимо этого в дистрибутив входит библиотека внутреннего сервера, которая позволяет включать MySQL в автономные программы.

Очень хорошая гибкость пользования. СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбирать таблицы типа как - MyISAM, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Кроме всего, СУБД MySQL поставляется со специальными типами таблиц EXAMPLE, демонстрирующие принципы создания новых типов таблиц. Спасибо открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц. Люк Веллинг, Лора Томсон “Разработка Web - приложений с помощью PHP и MySQL”. Издательство “Вильямс” 2003г. Москва Санкт - Петербург, Киев.

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

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

2.9 CMS PrestaShop

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

CMS PrestaShop - это веб-приложение с открытым кодом. Приложение написано на языке программирования PHP. Для хранения данных использует СУБД MySQL. PrestaShop предназначен для малого и среднего бизнеса и считается одним из лучших веб-приложений для создания и обслуживание интернет - магазинов.

Официально компания создана в 2007 году Игорем Шлюмбергером.

Данная CMS поддерживает следующее системные требования:

· наличие веб-сервера Apache;

· использование языка программирования PHP;

· наличие базы данных MySQL;

· операционная система Linux, Unix или Windows.

Функциональные особенности CMS PrestaShop заключаются в следующем:

1) Каталог

· использование водяных знаков на фотографии;

· оставлять отзывы;

· отображать цены, как с учетом налога, так и без него;

· отображать остаток товара на складе:

· сортировать товар;

· показ скидок;

· показывать производителей.

2) Оплата.

· Оплачивать товар различными способами - банковской картой, чеком, наличными при доставке.

3) Доставка товара. Отслеживание товара.

4) Вести статистику. Статистика посетителей, заказов, посещаемости сайта и др.

5) Осуществлять переводы текста, к примеру на английский.

6) Безопасность.

7) Локализация.

Архитектору данной CMS построена по принципу MVC (Model - View - Controller, Модель - Представление(Вид) - Контроллер).

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



3. Анализ, проектирование и реализация сайта

3.1 Анализ ведущих интернет-сайтов России

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

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

Мною выбрано порядка трех интернет магазинов, два из которых будут приходиться конкурентами: www.Lamoda.ru, www.Powermatrix.info и www.Powermatrix.ru.

Рассмотрим первый сайт Lamoda.ru, интернет магазин по продаже одежды, обуви, аксессуаров как для взрослых так и для детей.

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

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

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

Под логотипом, авторы сайта расположили основное меню групп товаров

- одежда, обувь, аксессуары, новинки, бренды и т.д, что делает навигацию по сайту для рядового пользователя очень простой и удобной. Для конкретного поиска нужного товара справа от меню имеется “поисковая строка”, напечатав в которой ключевое слово, например, “обувь”, сайт отобразит все, что с этим словом значиться. Поиск по сайту выполнен при помощи Ajax (асинхронный javascript, заключающийся в фоновом обмене данных браузера с веб-сервером, без перегрузки веб-страницы) и PHP, вводя слово, пользователю в виде ниспадающего списка отображается меню, что делает сайт более современным и удобным в использование.

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

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

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

Рассмотрим, как работает функционал поиска и выбора товара, на примере поиска детской одежды (рис 3.2).



Рисунок 3.1. - главная страница сайта.

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



Рисунок. 3.2 - Категория детская одежда.

Чтобы увидеть подробное описание, характеристики, все фотографии нужного нам товара, достаточно всего лишь в него провалиться, а точнее кликнуть по баннеру (рисунок 3.3)



Рисунок 3.3 - выбранный товар.

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

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

Рис 3.4 - регистрация на сайте.

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

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



Рисунок 3.5 - Оформление заказа.

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

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

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

Авторы предлагают пользователям воспользоваться всего двумя пунктами под меню это “продукции” и “рекомендации” (рис 3.7)

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

Рисунок 3.6 - стартовая страница.

Рис 3.7 - меню.



Рис 3.8 - Продукция сайта.



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

Рис 3.9 - форма регистрации.

Отсутствует форма обратной связи.

При рассмотрении следующего нашего примера - powermatrix.info, перейдя по ссылке, сайт встречает нас своей главной страницей. Таких видимых неприятных вещей как в предыдущем примере нет (рис 4.0).

При просмотре стартовой страницы мы видим неровности в дизайне сайта.

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

Рисунок 3.10 - Главная страница сайта.

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



Рис 3.11 - меню сайта.

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

Посмотрим, как работает навигация по сайту, а так же поиск товара и его покупка.

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

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



Рисунок 3.12 - Продукция сайта.

Рисунок 3.13 - быстрый заказ.



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

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

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

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

Основной деятельностью сайта будет заключаться реализация продукции для здоровья человека, разработанная по российским технологиям. Это биологически активные добавки (БАД) к пище. В традиционном понимание эта продукция не является медицинскими препаратами. Из себя продукция “Power matrix” представляет уникальную, специально обработанную воду, которую прозвали “матрицей здоровья”, способная бороться с различными заболеваниями, проблемами со здоровьем, а так выступаю в роли профилактики.

Разработка биодобавок происходит путем обработки питьевой воды в несколько этапов, в специальном оборудовании. Молекулы воды перестраиваются таким образом, что становятся носителями “информационной матрицы” клеток здорового человека, в общих чертах данная продукция относится к биоэнергоинформационной. Использование БАД можно отнести к любой возрастной группы людей, будь то ребенок, будь то взрослый, не зависимо от пола - мужчина или женщина, здоровый человек (в целях профилактики) или больной (лечение различных заболеваний, симптомов).

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

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

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

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

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

...