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

Содержание

• Введение
• 1. Основныепринципы построения интернет-магазина
• 1.1 Язык программирования PHP
• 1.2 Язык запросов SQL и система управления базами данных MYSQL
• 1.3 Web-сервер XAMPP
• 1.4 HTML - язык гипертекстовой разметки
• 1.5 CSS - язык стилей
• 1.6 Оптимизация для поисковых систем
• 1.7 Анализ существующих интернет-магазинов
• 2. Разработка интернет-магазина одежды
• 2.1 Установка XAMPP
• 2.2 Трехуровневая архитектура
• 2.3 Разделение кода и оформления с помощью Smarty
• 2.4 Начало реализации проекта Goodstore
• 2.5 Создание каталога товаров
• 2.5.1 Установка соединения с MySQL
• 2.5.2 Отображение списка отделов
• 2.6 Создание модели данных с помощью ALLFUSION ERWIN DATA MODELER
• 2.7 Создание и заполнение новых таблиц
• 2.8 Отображение информации об отделе и категориях
• 2.9 Отображение списка товаров и содержимого главной страницы
• 2.10 Интеграция корзины и прием платежей
• 2.11 Администрирование каталога
• 2.11.1 Отделы и категории
• 2.11.2 Товары и атрибуты
• Заключение
• Список использованных источников
• Приложения

Введение

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

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

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

· Экономия денежных средств

· Экономия времени

· Возможность для клиентов приобретать необходимые товары 24 часа в сутки

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

Плюсы интернет-магазина:

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

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

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

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

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

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

Минусы интернет-магазина:

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

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

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

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

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

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

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

Цель работы - изучить принципы построения интернет-магазина, разработать сайт интернет-магазина одежды "Goodstore".

Исходя из поставленной цели, были определены задачи:

· обоснование необходимости создания интернет-магазина;

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

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

· оценка эффективности выполненной разработки.

1. Основные принципы построенияинтернет-магазина

интернет магазин база данные

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

1.1 Язык программирования PHP

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

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

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

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

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

· PHP хорошо работает с разными веб-серверами и операционными системами (семейств Unix, Windows или MacOS).

Однако PHP -- отнюдь не единственный серверный интерпретатор, позволяющий генерировать динамические веб-страницы. Среди его конкурентов можно упомянуть JavaServer Pages (JSP), Perl, ColdFusion и ASP.NET. У этих технологийесть свои особенности, но в целом они предназначены для решения одних и тех жезадач. Например, страницы, сгенерированные с помощью любой из этих технологий, состоят из простого HTML, отвечающего за статичную часть страниц (шаблон)и кода, генерирующего динамическую часть.

Программа на PHP (да и на любом другом языке программирования) - это набор команд (инструкций) [2]. Обработчику программы (парсеру) необходимо как-то отличать одну команду от другой. Для этого используются специальные символы - разделители. В PHP инструкции разделяются так же, как и в Си или Perl, - каждое выражение заканчивается точкой с запятой. Закрывающий тег «?>» также подразумевает конец инструкции, поэтому перед ним точку с запятой не ставят. Например, два следующих фрагмента кода эквивалентны (листинг 1):

Листинг 1. Примеры простых программ на PHP

<?php

// точка с запятой в конце команды обязательна

echo "Hello, world!";

...

?>

<!-- точка с запятой опускается из-за "?>" -->

<?php echo "Hello, world!" ?>

Часто при написании программ возникает необходимость делать какие-либо комментарии к коду, которые никак не влияют на сам код, а только поясняют его. Это важно при создании больших программ и в случае, если несколько человек работают над одной программой. При наличии комментариев в программе в ее коде разобраться гораздо проще. Кроме того, если решать задачу по частям, недоделанные части решения также удобно комментировать, чтобы не забыть о них в дальнейшем. Во всех языках программирования предусмотрена возможность включать комментарии в код программы. PHP поддерживает несколько видов комментариев: в стиле Cи, C++ и оболочки Unix. Символы // и # обозначают начало однострочных комментариев, /* и */ - соответственно начало и конец многострочных комментариев (листинг 2).

Листинг 2. Использование комментариев в программе

<?php

...

// Конструкторкласса

public function __construct()

{

// В строке запроса должен присутствовать параметр

DepartmentId

if (isset ($_GET['DepartmentId']))

$this->_mDepartmentId = (int)$_GET['DepartmentId'];

else

trigger_error('DepartmentId not set');

/* Если CategoryId есть в строке запроса, мы сохраняем

его значение(преобразуя его в integer для защиты от

некорректныхзначений) */

if (isset ($_GET['CategoryId']))

$this->_mCategoryId = (int)$_GET['CategoryId'];

...

}

?>

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

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

define('PRESENTATION_DIR', SITE_ROOT . '/presentation/');

PHP поддерживает восемь простых типов данных.

Четыре скалярных типа:

· boolean (логический);

· integer (целый);

· float (сплавающейточкой);

· string (строковый).

Двасмешанныхтипа:

· array (массив);

· object (объект).

Идваспециальныхтипа:

· resource (ресурс);

· NULL.

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

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

if ($page > 1)

$link .= '&Page=' . $page;

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

if (isset ($_GET['DepartmentId']))

$this->_mDepartmentId = (int)$_GET['DepartmentId'];

else

trigger_error('DepartmentId not set');

Еще один способ расширения условного оператора if - использование оператора elseif. elseif - это комбинация else и if. Как и else, он расширяет if для выполнения различных действий в том случае, если условие, проверяемое в if, неверно. Но в отличие от else, альтернативные действия будут выполнены, только если elseif-условие является верным. Структуру оператора if, расширенного с помощью операторов else и elseif, можно представить следующим образом (листинг 3):

Листинг 3. Использованиеоператораelseif

...

if (isset ($_GET['Search']) || isset($_GET['SearchResults']) || isset ($_GET['AddProduct']))

{

return ;

}

// Obtain proper URL for category pages

elseif (isset ($_GET['DepartmentId']) && isset ($_GET['CategoryId']))

{

if (isset ($_GET['Page']))

$proper_url = self::ToCategory($_GET['DepartmentId'],

$_GET['CategoryId'], $_GET['Page']);

else

$proper_url= self::ToCategory($_GET['DepartmentId'],

$_GET['CategoryId']);

}

...

Если говорить о возможностях сегодняшнего PHP, то они выходят далеко за рамки тех, что были реализованы в его первых версиях. С помощью PHP можно создавать изображения, PDF-файлы, флэш-ролики, в него включена поддержка большого числа современных баз данных, встроены функции для работы с текстовыми данными любых форматов, включая XML, и функции для работы с файловой системой. PHP поддерживает взаимодействие с различными сервисами посредством соответствующих протоколов, таких как протокол управления доступом к директориям LDAP, протокол работы с сетевым оборудованием SNMP, протоколы передачи сообщений IMAP, NNTP и POP3, протокол передачи гипертекста HTTP и т.д.

Обращая внимание на взаимодействие между различными языками, следует упомянуть о поддержке объектов Java и возможности их использования в качестве объектов PHP. Для доступа к удаленным объектам можно использовать расширение CORBA.

Для работы с текстовой информацией PHP унаследовал (с небольшими изменениями) механизмы работы с регулярными выражениями из языка Perl и UNIX-систем. Для обработки XML-документов можно использовать как стандарты DOM и SAX, так и API для XSLT-трансформаций.

Для создания приложений электронной коммерции существует ряд полезных функций, таких как функции осуществления платежей Cybercash, CyberMUT, VeriSign Payflow Pro и CCVS.

Сегодня PHP используется сотнями тысяч разработчиков. Несколько миллионов сайтов написаны на PHP, что составляет более 20% доменов Интернета [2].

1.2 Язык запросов SQL и система управления базами данных MYSQL

SQL переводят на русский как Структурированный Язык Запросов. С помощью SQL-запросов можно создавать и работать с реляционными базами данных.

SQL определяется Американским Национальным Институтом Стандартов и Международной Организацией по стандартизации (ISO) . Несмотря на это, некоторые производители баз данных вносят изменения и дополнения в этот язык. Эти изменения незначительны и основа остаётся совместимой со стандартом.

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

MySQL -- это одна из наиболее популярных и эффективных систем управления базами данных, которая очень часто используется при построении современных веб-сайтов. На основе данной системы можно строить, как небольшие веб-сайты, так и крупные Интернет-проекты.СУБД MySQL поддерживает язык запросов SQL. Это позволяет совершать такие операции, как запись данных в базу, редактирование данных, извлечение или удаление данных из базы данных.

Работать с MySQL можно не только в текстовом режиме, но и в графическом. Существует очень популярный визуальный интерфейс (кстати, написанный на PHP) для работы с этой СУБД. Называется он PhpMyAdmin. Этот интерфейс позволяет значительно упростить работу с базами данных в MySQL.

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

Начиная с версии 5.0, СУБД MySQL практически полностью удовлетворяет стандарту структурированного языка запросов SQL и, следовательно, совместима с другими базами данных.

Рассмотрим основные достоинства СУБД MySQL:

· Высокое качество - MySQL характеризуется устойчивой работой.

· Наряду с Oracle, MySQL считается одной из самых быстрых СУБД в мире.

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

· СУБД MySQL, разработанная с использованием языков C/C++, протестирована на многих платформах, среди которых Windows, Linux, FreeBSD, MacOSX, OS/2, Solaris и др.

· MySQLподдерживаетAPI (ApplicationProgrammingInterface, программныйинтерфейсприложения) дляС, C++, Eiffel, Java, Perl, PHP, Python, RubyиTcl. MySQL можно успешно применять как для построения Web-страниц с использованием Perl, PHP и Java, так и для работы прикладной программы, созданной с использованием Delphi, Builder C++ или платформы .NET.

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

· Локализация в MySQL выполнена корректно. У пользователя, как правило, не возникает проблем при обработке русского содержимого БД

Создание, заполнение и изменение таблиц в MySQL осуществляются с помощью стандартных SQL операторов CREATETABLE, ALTERTABLE, INSERT, UPDATE, DELETE. Определен также оператор REPLASE, который действует аналогично INSERT, но таким образом, что если значение индекса unique или primary KEY в старой записи таблицы такое же, как и в новой, то старая запись перед занесением новой будет удалена. Оператор TRUNCATETABLE предназначен для полного очищения таблицы [4].

СУБД MySQLподдерживает несколько типов таблиц.

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

Таблицы типа InnoDB могут достигать объема в 1 Тбайт. Таблицы этого типа хранятся в едином табличном пространстве. Данный тип таблиц поддерживает транзакции, блокировки на уровне отдельных записей и - единственный из типов таблиц MySQL - поддерживает внешние ключи и каскадное удаление (обновление). Впрочем, таблицы InnoDB уступают в скорости обработки таблицам MyISAM.

Для создания InnoDB-таблицы применяется ключевое слово ENGINE= InnoDB в операторе CREATE TABLE.

MySQLподдерживает несколько типов данных [5].

Числовые данные. К ним относят целые числа, не содержащие дробной части, а также вещественные числа, имеющие как целую, так и дробную части. Числовые данные делятся на точечные (bit, boolean, integer и decimal) и приближенные (float, real и double precision).

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

При объявлении целого типа можно задать количество отводимых под число разрядов (от 1 до 255).

Тип BIT предназначен для хранения битовых полей. Тип BOOLEAN является синонимом для TINYINT. Значение 1 рассматривается как истина (true), a 0 - как ложь (false). Тип DECIMAL, а также его синонимы NUMERIC и DEC предназначены для величин повышенной точности, например, для денежных данных.

Для представления вещественных (приближенных) типов в СУБД MySQL имеются типы: FLOAT, DOUBLE и DOUBLE. Числовые типы данных с плавающей точкой также могут иметь параметр UNSIGNED.

Строковые данные-- последовательность символов, заключенных в одинарные или двойные кавычки: 'Hello world', '123', "MySQL". Поскольку в качестве стандарта в SQL определены одинарные кавычки, для совместимости с другими базами данных рекомендуется использовать именно их. РазличаютстроковыетипыCHAR, VARCHAR, BLOB, TEXT, MEDIUMTEXT, MEDIUMBLOB, LONGTEXT, LONGBLOB, ENUM, SET.

Тип CHAR позволяет хранить строку фиксированной длины; его дополняет тип VARCHAR, позволяющий хранить строки переменной длины. Длина строки может изменяться от 0 до 65 535. При создании таблицы нельзя смешивать столбцы типа CHAR и VARCHAR.

Тип TEXTобычно используется для хранения больших объемов текста, в то время как BLOB-- для больших двоичных объектов, таких как электронные документы, изображения, музыкальные файлы и т. п. Типы MEDIUMBLOB, MEDIUMTEXTимеютмаксимальный размер (224 - 1) символов, а типы LONGTEXT, LONGBLOB - (232 -1) символов.

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

Календарные данные. СУБД MySQL имеет пять календарных типов данных: DАТЕ, DATETIME, TIME, TIMESTAMP и YEAR. Тип DАТЕ предназначен для хранения даты, TIME -- для времени суток, a TIMESTAMP -- для представления и даты, и времени суток. Тип TIMESTAMP предназначен для представления даты и времени суток в виде числа секунд, прошедших с полуночи 1 января 1970 года. Тип данных YEAR позволяет хранить только год. Для значений, имеющих тип DATE и DATATIME принят формат YYYY-MM-DD или YY-MM-DD. В типах TIMEи DATATIMEвремя приводится в привычном формате hh:mm:ss.

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

Чтобы обратиться к серверу РСУБД, нужно составить SQL-запрос, передать егосерверу и получить от сервера ответ. SQL-запрос может содержать любое требование, касающееся базы данных, например “создать таблицу” (листинг 4), “вывести список отделов”, “удалить из базы данных товар 223” или “выдать всю информацию о зимних куртках каталоге”.

Листинг 4. Запрос создания таблицы

-- Создаем таблицу departmen

CREATE TABLE `departmen` (

`departmen_id` INT NOT NULL AUTO_INCREMENT,

`name` VARCHAR(100) NOT NULL,

`description` VARCHAR(1000),

PRIMARY KEY (`departmen_id`)

) ENGINE=MyISAM;

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

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

Для общения с MySQL не придется применять SQL -- язык, используемыйв реляционных базах данных. SQL позволяет отдавать РСУБД приказы наподобие“выдай мне детали последних десяти заказов” или “удали товар номер 228”.

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

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

1.3 Web-сервер XAMPP

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

XAMPP -- это аббревиатура:

· X (любая из четырех операционных систем)

· Apache

· MySQL

· PHP

· Perl.

Полный пакет содержит:

· Web-сервер Apache с поддержкой SSL

· СУБД MySQL

· PHP

· Perl

· FTP-клиент FileZilla

· POP3/SMTP сервер

· утилиту phpMyAdmin.

XAMPP работает со всеми 32-х разрядными ОС Microsoft (98/2000/XP/2003/Vista/7), а также с Linux, Mac OS X и Solaris. Программа свободно распространяется согласно лицензии GNU General Public License и является бесплатным, удобным в работе web-сервером, способным обслуживать динамические страницы.

Для установки XAMPP необходимо скачать всего один файл формата zip, tar или exe, а компоненты программы не требуют настройки. Программа регулярно обновляется, для включения в состав новейших версий Apache/MySQL/PHP и Perl. Также XAMPP идет с множеством других модулей, включая OpenSSL и phpMyAdmin. Пользовательский интерфейс программы настолько прост, что ее называют «сборкой для ленивых» («lazy man's WAMP/LAMP installation»). Установка XAMPP занимает меньше времени, чем установка каждого компонента в отдельности.

Данный web-сервер распространяется в полной, стандартной и уменьшенной (известной как XAMPP Lite) версиях. Все дополнительные модули также доступны для скачивания. Из дополнительных возможностей можно отметить, что сама компания выпускает пакеты обновления выпускаемые в виде zip, 7-zip , tar или exe, которые позволяют обновить все компоненты с одной версии сборки XAMPP на более новую. Изначально XAMPP создавался как инструмент для разработчиков, позволяя веб-дизайнерам и программистам тестировать свою работу, не используя Интернет. Для упрощения работы некоторые возможности и настройки безопасности отключены по умолчанию, и в целом XAMPP рекомендуется к использованию только в очень дружественном окружении. Однако XAMPP иногда используется и во всемирной паутине. Также программа поддерживает создание и управление базами данных MySQL и SQLite.

1.4 HTML - языкгипертекстовой разметки

Язык HTML (HyperTextMarkupLanguage -- язык разметки гипертекста) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WWW (WorldWideWeb -- Всемирная паутина). HTML-документы (или веб-документы) могут просматриваться различными типами веб-браузеров. Если документ создан с использованием HTML, веб-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки.

Основное преимущество HTML заключается в том, что документ может быть просмотрен на веб-браузерах различных типов и на различных платформах.HTML -- один из наиболее простых языков создания веб-страниц[6].

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

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

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

HTML-документ -- это обычный файл в формате ASCII. В его основе лежат специальные дескрипторы (теги), которые и определяют правила форматирования данных[6].

Итак, тег -- последовательность символов, заключенных между символами < и >. Почти все теги образуют пары, то есть для открывающего тега существует закрывающий тег. Есть и непарные теги, например <BR>, <AREA>, но их мало.

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

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

· Тег <HTML>. Самый первый тег, который встречается в документе, должен быть тегом <HTML>. Данный тег сообщает веб-браузеру, что документ написан на языке HTML. Минимальный HTML-документ мог бы выглядеть так:

<html> ...тело документа... </html>

Таким образом, теги <HTML> и </HTML> образуют для HTML-документа такназываемый контейнер.

· Тег<HEAD>. Структурно документ распадается на две части: заголовочную и основную, или тело документа. Заголовочная часть размещается между тегами <HEAD> и </HEAD>, основная -- между тегами <BODY> и </BODY>.

· Тег <TITLE>. Внутри контейнера <HEAD> и </HEAD> размещается единственный обязательный контейнер из тегов <TITLE> и </TITLE>, содержащий текст заголовка.

Тег заголовочной части документа должен быть указан сразу после тега <HTML> и более нигде в теле документа. Данный тег представляет собой обобщенное описание документа. Следует избегать размещения какого-либо текста внутри тега <HEAD>. Открывающий тег <HEAD> указывается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, а закрывающий тег </HEAD> -- сразу после окончания описания документа.

Большинство веб-браузеров отображают содержимое тега <TITLE> в заголовке окна, содержащего документ, и в файле закладок, если он поддерживается веб-браузером. Заголовок, ограниченный тегами <TITLE> и </TITLE>, размещается внутри тегов <HEAD>. Заголовок документа при отображении самого документа в окне браузера не виден.

Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

· Тег <BODY>. Тело документа должно находиться между тегами <BODY>и </BODY>. Это та часть документа, которая отображает его текстовую и графическую информацию.

Следует заметить, что открывающие и закрывающие теги <HTML>, <HEAD> и <BODY> необязательны, но их настоятельно рекомендуется использовать, поскольку это позволяет веб-браузеру уверенно отделить друг от друга заголовочную и непосредственно смысловую части документа.

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

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

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

· Каждая веб-страница должна иметь заголовок.

· Не перегружать страницу графикой.

· Попытка визуально выделить все означает не выделить ничего.

· Использовать свободное пространство для привлечения внимания.

Для создания HTML-страниц можно пользоваться любым текстовым редактором, но существуют и специализированные программы. Эти HTML-редакторыделятся на два типа: визуальные и невизуальные[7]. Визуальные HTML-редакторыобладают интуитивно понятным интерфейсом и не требуют много времени на освоение, но генерируют очень длинный, неоптимальный и малопонятный HTML-код, который потом трудно редактировать. К редакторам этого типа относится,например Microsoft FrontPage Express.

Невизуальные редакторы требуют знания HTML, но лишены недостатков визуальных редакторов. Кроме того, это, как правило, небольшие, компактныепрограммы, бесплатные или условно-бесплатные. К HTML-редакторам этого типа относятся, например MacroHTML и HomeSite.

1.5 CSS - язык стилей

CSS (Cascading Style Sheets -- каскадные таблицы стилей) - одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.

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

Существуют три основных способа использования CSS совместно с HTML:

· Вложение -- CSS код прописывается непосредственно в нужном теге элемента с помощью атрибута Style

· Встраивание -- весь стилевой код для web-документа прописывается в его шапке (внутри тегов Head) с помощью элемента Style

· Связывание -- весь CSS код размещается (выносится) в отдельном внешнем файле, который подключается к документу с помощью элемента Link в его шапке

Одно правило в CSS коде состоит из двух элементов -- свойство и его значение. Обязательным условием является отделение свойства от его значения двоеточием (рис. 1).

Рисунок 1 - Схема формирования правила CSS

Главные свойства CSS, применимые сейчас[8]:

border-radius - скругляет углы элемента на заданное значение - радиус. Пример:

.foo {

border-radius: 10px;

}

text-shadow - свойство из CSS2 (выкинутое в версии 2.1, возвращенное в CSS3), котороедобавляет тень к тексту; можно указывать направление, количество размытия и цвет тени.

p {

text-shadow: 1px 1px 2px #999;

}

box-shadow - добавляет тень к элементу. Синтаксис тот же, что у свойства text-shadow.

Пример:

.foo {

box-shadow: 1px 1px 2px #999;

}

opacity - определяет непрозрачность элемента. Значение 1 соответствует полнойнепрозрачности; значение 0 соответствует полной прозрачности.

Пример:

.foo {

opacity: 0.5; /*.foo will be 50% transparent */

}

RGBA - не свойство CSS, но, скорее, новая цветовая модель, введенная в CSS3, добавляющаявозможность задавать уровень прозрачности элемента вместе с его цветом в формате RGB.

Пример:

.foo {

color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */

}

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

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

1.6 Оптимизация для поисковых систем

SEO является аббревиатурой от Search Engine Optimization, что в переводе означает оптимизация под поисковые системы или просто поисковая оптимизация[9].

В Интернете есть несколько определений поисковой оптимизации:

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

2. Поисковая оптимизация (SEO) - это процесс увеличения количества пользователей на web-сайт путем увеличения его ранга в результатах поиска в поисковых системах. Чем больше рейтинг сайта в поисковых результатах, тем больше вероятность того, что пользователь посетит ваш сайт. Практически, все пользователи Интернет не переходят далеко по страницам поисковых результатов, поэтому позиция сайта очень существенна для привлечения большего количества трафика.

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

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

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

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

К черным методам оптимизации относят такие методы, как:

· клоакинг (когда пользователи и боты видят разный контент);

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

· использование невидимого для пользователя, но видимого для поисковиков текста;

· спамдексинг, поисковый спам, ссылочный спам;

· линкбомбинг;

· другие методы, нуждающиеся в санкциях со стороны поисковиков.

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

1. Внутреннюю оптимизацию (on-page SEO) сайта или конкретной страницы

2. Внешнее продвижение (off-page SEO).

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

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

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

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

1.7 Анализ существующих интернет-магазинов

На сегодняшний день существуют много современных интернет-магазинов одежды. При поиске в поисковике “Яндекс” по запросу “Интернет-магазин одежды”можно увидеть самые популярные сайты (рис 2).

Рисунок 2 - Поиск по запросу “Интернет-магазин одежды”

Итак, три самых популярных сайта интернет-магазинов:



Рисунок 3 - Главная страница интернет-магазина одежды Lamoda

www.lamoda.ru

Рисунок 4 - Главная страница интернет-магазина одежды Visavis

www.visavis-fashion.ru

Рисунок 5 - Главнаястраница интернет-магазина одежды Wildberries

www.wildberries.ru

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

Проект “Goodstore” будет разработан на основе структуры существующих интернет-магазинов. Будет создан каталог товаров, база данных, корзина покупателя, система оплаты, а так же раздел администрирования сайтов.

2. Разработка интернет-магазина одежды

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

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

· написать код на SQL (StructuredQueryLanguage) и PHP (HypertextPreprocessor) для доступа к этой базе данных и обеспечения работы каталога;

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

· принятьплатежиспомощью PayPal Website Payments Standard;

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

2.1 Установка XAMPP

XAMPP -- это пакет, созданный ApacheFriends. Если на компьютере не установлены Apache, PHP, MySQL, то самый простой способ установить их -- именно с помощьюXAMPP.

Для установки сервера XAMPP нужно скачать выполняемый файл с именем xampp-win32-5.5.19-0-VC11-installer.exe, запустить загруженный файл. Установить XAMPP во вложенную папку корневой папки диска, например C:\xampp. Также выбратьустановку Apache и MySQL как служб (рис. 6).



Рисунок 6 - Выбор настроек при установке XAMPP

В конце нужно подтвердить запуск XAMPP Control Panel, с помощью которой можно управлять установленными службами. Окно этой программы показано на рис. 7.

Рисунок 7 - Окно панели управления XAMPP: XAMPP Control Panel

Чтобы убедиться в том, что Apache установлен и работает, нужно в окнебраузера открыть страницу http://localhost. Загрузится страница приветствия XAMPP, показанная на рис. 8.



Рисунок 8 - Проверка успешности установки Apache

Далее нужно создать папку “goodstore”, в которой будут размещаться все рабочие файлы проекта: C:\xampp\htdocs\goodstore\,по умолчанию Apache из XAMPP использует для обслуживания запросов клиентов папку: C:\xampp\htdocs\.

Создадим в папке goodstore файл с именем test.php со следующей строкой внутри:

<?php phpinfo(); ?>

ОткроемURLhttp://localhost/goodstore/test.php (рис. 9).

Рисунок 9- Проверка успешного завершения установки Apache

Первый шаг к созданию электронного магазина Goodstore -- маленький, но очень важный, поскольку он позволяет проверить работоспособность Apache, PHP и псевдонима goodstore. Если при открытии тестовой страницы возникли проблемы, прежде всего надо убедиться, что правильно установлен XAMPP.

2.2 Трехуровневая архитектура

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

В частности, трехуровневая архитектура подразумевает разделение кода на триуровня:

· уровень представления (presentationlayer);

· уровень логики приложения (бизнес-уровень, или businesslayer);

· уровень данных (datalayer).

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

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

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



Рисунок 10 - Простое представление трехуровневой архитектуры

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

2.3 Разделение кода и оформления с помощью Smarty

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

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

Смешивание кода на PHP и HTML приводит к двум проблемам:

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

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

Эти проблемы привели к появлению систем шаблонов, позволяющих разделять логику уровня представления и HTML-код. Smarty -- это одна из самых популярных и эффективных систем шаблонов для PHP. Ее основное

назначение -- именно разделение логики приложения (кода на PHP) и кода представления (HTML).

Дизайн-шаблон Smarty (файл .tpl с тегами HTML и тегами, специфичными дляSmarty) и соответствующий ему подключаемый файл Smarty (файл .php с кодом, взаимодействующим с шаблоном) образуют компонентный шаблон Smarty.

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

Для работы Smarty требует трех папок, которые нужно будет создать, --templates, templates_cиconfigs. Внутрипапкиgoodstoreсоздатьпапкуpresentation, авней -- папкиtemplatesиtemplates_c. Впапкеpresentation будут находиться файлы уровня представления нашего приложения.

В папке goodstore создать папку include. В ней будут храниться конфигурационные файлы приложения. Внутри папки include создать папку configs -- она будет использоваться для хранения конфигурационных данных Smarty.

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

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



Рисунок 11 - Структура веб-страниц сайта Goodstore

Чтобы как можно проще реализовать эту структуру, воспользуемся компонентными шаблонами Smarty.

2.4 Начало реализации проектаGoodstore

ВходнаястраницасайтаGoodstoreбудетгенерироватьсяфайламиindex.phpиstore_front.tpl. Создадимвпапкеgoodstoreвложеннуюпапкуimages, вэтойпапкебудетхранитсяизображениелоготипа (logo.tif) Goodstore, котороедолжноотображатьсянаглавнойстранице.

В папке goodstore/include/configs создадим файл site.conf и введем в него следующую строку:

site_title = "Goodstore: Demo Product Catalog from Beginning PHP andMySQL E-Commerce"

Впапкеgoodstore/presentation/templatesсоздадимфайлstore_front.tpl (приложение) - шаблон Smarty, содержащий заместители для трех основных элементов страниц -- заголовка, списка отделов и ячейки с содержимым страниц.

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

Создадим в папке goodstore/styles файл goodstore.css и наберем в нем следующий код (листинг 5):

Листинг 5. Стили CSSдля оформления страницы

@import "reset-min.css";

@import "base-min.css";

@import "fonts-min.css";

@import "grids-min.css";

body {

font-size: 85%;

font-family: "century gothic";}

.yui-t2, #bd, #yui-main {

z-index: -5;

}

.yui-b, .yui-g {

z-index: auto;

}

#header {

margin-top: 15px;

text-align: right;

}

.error_box {

background-color: #ffffcc;

border: 1px solid #dc143c;

color: #DC143C;

margin: 0 auto;

overflow: auto;

padding: 5px;

position: relative;

text-align: left;

width: 90%;

z-index: 5;

}

Добавимвпапкуgoodstore/includeфайлconfig.phpв котором задаются значения некоторых глобальных константивведемвнегоследующийкод (листинг 6):

Листинг 6. Конфигурационный файл

<?php

// в SITE_ROOT содержится полный путь к папке goodstore

define('SITE_ROOT', dirname(dirname(__FILE__)));

// Папкиприложения

define('PRESENTATION_DIR', SITE_ROOT . '/presentation/');

define('BUSINESS_DIR', SITE_ROOT . '/business/');

// Настройки, необходимые для конфигурирования Smarty

define('SMARTY_DIR', SITE_ROOT . '/libs/smarty/');

define('TEMPLATE_DIR', PRESENTATION_DIR . 'templates');

define('COMPILE_DIR', PRESENTATION_DIR . 'templates_c');

define('CONFIG_DIR', SITE_ROOT . '/include/configs');

?>

Функция dirname(__FILE__) возвращает имя папки, в которой находитсяуказанный файл, dirname(dirname((__FILE__)) возвращаетпапку, в которой находится папка с указанным файлом. Это позволяет поместить в SITE_ROOT полный путь к goodstore.

В папке goodstore/presentation создадим файл с именем application.php и введем в него следующий код (листинг 7).

Листинг 7.Класс, расширяющий Smarty

<?php

// Ссылка на библиотеку Smarty

require_once SMARTY_DIR . 'Smarty.class.php';

/* Класс, расширяющий Smarty, используется для обработки и

отображения файлов Smarty */

class Application extends Smarty{

// Конструктор класса

public function __construct()

{

// ВызовконструктораSmarty

parent::Smarty();

// Меняемпапкишаблоновпоумолчанию

$this->template_dir = TEMPLATE_DIR;

$this->compile_dir = COMPILE_DIR;

$this->config_dir = CONFIG_DIR;

}

}

?>

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

Добавим в папку goodstore файл index.php (листинг 8). Задача этого файла -- загружать файл store_front.tpl с помощью класса Application, созданноговыше.

Листинг 8. Файл index.php

<?php

// Подключаем служебные файлы

require_once 'include/config.php';

// Загружаемшаблонстраницыприложения

require_once PRESENTATION_DIR . 'application.php';

// Загружаемфайлшаблонов Smarty

$application = new Application();

// Отображаемстраницу

$application->display('store_front.tpl');

?>

А теперь можно посмотреть, как все это работает,открыть в окне браузерассылку http://localhost/goodstore/. Должна отобразиться страница, показанная на рис. 12.

Рисунок 12 - Работающее приложение Goodstore

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