Разработка Интернет-магазина

Содержание:

ВВЕДЕНИЕ

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

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

Объектом исследования является компания по производству мебели ООО «Мебельное ателье «RedWood».

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

Целью работы является разработка Web-сайта для мебельной компании

В процессе планирования web-сайта передо мной были поставлены следующие задачи:

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

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

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

Во второй практической части представлен анализ компании ООО «Мебельное ателье «RedWood», рассмотрены сайты аналогичных компаний, а также правила создания хорошего сайта и проектирование его структуры и дизайна. Далее была проведена разработка сайта, описание его работы и процесс опубликования в сети Интернет.

Глава 1. методические основы создания web-сайта как интернет-решения для продвижения ООО «Мебельное ателье «RedWood»,

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

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

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

• проанализировать уже существующую модель web-сайта компании RedWood и сделать заключение о том, что необходимо изменить;
• принять решение о необходимость написания web-сайта при помощи средств системы управления содержимым, выбрать подходящую систему управления содержимым;
• разработка проекта (структурной схемы) web-сайта компании на основе системы управления содержимым Drupal;
• разработка HTML-каркаса главной страницы web- сайта;
• контента web-сайта.

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

1. Разработка технического задания для создания сайта.
2. Составление структурной схемы сайта - размещение разделов, контента и навигации.
3. Веб-дизайн – разработка и утверждение макета, графических элементов сайта, навигации и стилей. [12.C.4]
4. Написание программного кода, модулей, базы данных и других элементов сайта необходимых в проекте.
5. Опубликование сайта в сети Интернет и его тестирование.

1.2.Этапы разработки web-сайта

Основной и первоначальной задачей для меня стала разработка структурной схемы проекта web - сайта для использования в среде Интернет.

Директор компании ООО «Мебельное ателье «RedWood» выделил следующие основные требования к разрабатываемому web - сайту:

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

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

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

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

• информация о компании;
• новости компании;
• контакты;
• каталоги (если таковые имеются);
• акции и скидки;
• отзывы и другое.

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

Административная часть - это всевозможные разделы настроек сайта, позволяющие администратору сайта редактировать содержание и графическое наполнение страниц. [3.C.17]

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

Система управления содержимым (англ. Contentmana gement system, CMS) - компьютерная программа, используемая для управления содержимым чего-либо (обычно это содержимое рассматривается как неструктурированные данные предметной задачи в противоположность структурированным данным, обычно находящимися под управлением СУБД). Такие системы применяются для хранения и публикации документов, изображений, музыки или видео. [9.C.32]

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

Аргументация выбора CMS (ContentManagementSystem):

• нужна развитая гипертекстовая структура (HTML создан именно для этого);
• важно обеспечить гибкую структуру управления материалом управлять HTML-содержанием удобно с помощью PHP+MySQL. Именно эта связка позволяет генерировать динамические HTML-страницы;
• необходимо реализовать вариативность представления материала - в этом случае использование HTML+CSS более чем обоснованно. Именно эта комбинация средств позволяет создавать мультимедийные документы; [3]
• важно обеспечить поддержку внутреннего форума web-сайта.

На основании поставленного технического задания была предложена структурная схема web-сайта компании мебельного ателье «RedWood».

1.3.Средства разработки

HTML

HTML (HyperTextMarkupLanguage) — это язык разметки документа, описывающий форму отображения информации на экране компьютера.

Просмотр HTML-документов возможен при помощи специальных программ, а именно Web-браузеров. В исходном коде HTML-документа описывается его структура с помощью тегов, а Web-браузеры отображают документ уже в заданном формате. [8.C.31]

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

DHTML

Динамический HTML (Dynamic HTML, DHTML) не является отдельным языком разметки страниц. Он всего лишь термин, используемый для определения HTML-страниц с динамически изменяемым содержимым.

DHTML состоит из трех основных составляющих:

• HTML;
• каскадные таблицы стилей;
• язык сценариев.

Все три составляющих DHTML соединяются между собой объектной моделью документа (DOM, DocumentObjectModel), которая, по сути, является интерфейсом прикладного программирования (API). DOM объединяет в единое целое эти три компонента, что и придает простому документу HTML новое качество такое как, возможность динамического изменения своего содержимого без перегрузки страницы. [9]

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

HTML-страницы при необходимости можно изменить, вследствие чего документ становится динамическим. Объектная модель документа трактует как событие любое действие пользователя, например, щелчок мышью, нажатие клавиши на клавиатуре и так далее. Оно может быть перехвачено и обработано конкретной процедурой сценария. [12.C.7]

CSS

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

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

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

Значение параметра style (color: #bababa) называется стилем или определение стиля. Элемент определения стиля (color) называется атрибутом. Любой атрибут имеет значение (#bababa), записываемое после двоеточия.

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

JavaScript

JavaScript — это язык программирования, который позволяет сделать Web-страницу интерактивной, а именно откликающейся пользователю на его действия. Ряд команд (называемый программой, сценарием или скриптом) исполняется интерпретатором, который является частью обычного Web- браузера. Другими словами, код программы помещается в HTML-документ и начинает свое выполнение уже на стороне клиента. Запуск данной программы происходит даже без перезагрузки Web-страницы. Все сценарии исполняются после возникновения какого-либо события. К примеру, перед отправкой данных какой-нибудь формы можно проверить их на определенные значения и, в случае если они не совпадают с заданными, мы можем не разрешать их отправку. [8.C.33]

PHP

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

Ряд команд (называемый программой или скриптом) выполняется интерпретатором языка PHP. Код программы может встраиваться в HTML-код. Это является отличительной чертой PHP от других языков, которые используются в Интернете, например, от языка Perl. Чтение PHP-кода воспроизводится на сервере перед тем как страница будет отправлен на Web- браузеру. По итогу Web-браузер загружает обычный HTML-код или другой вывод.

Скрипт PHP содержит HTML с вкраплениями кода, в отличии от обычного вывода HTML-кода командами языка. Код PHP выделяется определенными начальным и конечным тегами <?php и ?>, дающими возможность входить и выходить в "PHP-режим". [11.C.54]

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

MySQL

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

Базой данных называется совокупность структурированных данных. Которые могут быть абсолютно любыми, начиная от обычного перечня будущих мероприятий до списка позиций каталога или большого количества справочной информации в федеральной сети. Программное обеспечение MySQL представляет собой систему управления базой данных, позволяющую добавлять, обрабатывать и сортировать данные. Управление базами данных является основой частью в вычислениях, так как современные компьютеры способны обрабатывать огромный объем данных. Реализация данного управления может быть выполнена в нескольких вариантах: как отдельная дополнительная программа, так и частью кода внутри какого-либо приложения. [12.C.8]

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

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

Программное обеспечение MySQL всегда с открытым кодом. Программное обеспечение с открытым кодом подразумевается, что использовать и изменять его может любой желающий. К данному программному обеспечению можно получить доступ по Интернету и использовать его безвозмездной основе. При этом любой пользователь может изучить составляющие исходного кода, с возможностью модернизировать под свои потребности. Применение данного программного обеспечения MySQLрегламентируется лицензией GNU GeneralPublicLicense, http://www.gnu.org/licenses/, в которой прописаны все правила пользования этим программным обеспечением в различных ситуациях. Если такие правила работы в рамках лицензии вас не устраивают или у вас есть необходимость использовать MySQL-код в коммерческих приложениях, вы можете купить коммерческую лицензированную версию MySQLу компании. [9.C.11]

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

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

Технические возможности СУБД MySQL.

Программное обеспечение MySQL представляет собой систему клиент- сервер, которая включает многопоточный SQL-сервер, обеспечивающий поддержку разных вычислительных машин баз данных, а также несколько различных клиентских программ и библиотек, средства администрирования и широкий спектр программных интерфейсов (API). Так же предоставляется сервер MySQL в виде многопоточной библиотеки, подключаемой пользовательскому приложению, с помощью этого можно получить компактный, более быстрый и легкий в управлении продукт. [10.C.34]

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

MySQL правильно произносится как ''Май Эс Кью Эль'', хотя никто не может вам запретить произносить эту аббревиатуру как «майсиквел» или каким-либо другим образом.

Drupal

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

Drupal - это одна из наиболее известных систем управления контентом (CMS), которуюиспользуют миллионы людей на всей планете, а если говорить о цифрах, то это 26% от всех пользователей интернета. Многие веб-мастера, включая меня, начинают свое знакомство с сайтами и их разработкой именно с Друпал.

Преимущества CMSDrupal

• Функциональность, доходящая до универсальности
• Стабильная работа ядра
• Масштабируемость
• Гибкость в работе и в управлении. Легкое понимание архитектуры сайта и системы управления.
• Качественное построение всех используемых модулей
• Построение CMS направлена на удобное понимание работы с контентом
• Возможность мультисайтовой работы
• Полный набор документации по API — интерфейса прикладного программирования. [9]

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

Модульное построение Drupal. Основное преимущество Drupal - функционал можно расширять практически до бесконечности. В рамках написанных плагинов, конечно. Делается это модульным способом построения сайта. Модули помогут вам не только расширить функциональность сайта, но и кардинально поменять дизайн (сразу вспоминается WordPress - такие же возможности). Все, что можно реализовать на Drupal, уже существует в виде модулей - вам осталось только выбрать нужный и установить его. Можно инсталлировать столько модулей, сколько пожелаете - ваш сайт на Drupal выдержит любую нагрузку, выдержал бы хостинг. Кстати, вы можете просто заказать выделенный сервер, и ваш сайт будет «летать» даже со всеми нужными и ненужными модулями. А если вы не нашли такого модуля - предложите его к разработке в сообществе - обязательно кто-нибудь возьмется. [11.C.4]

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

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

Drupal имеет встроенную организацию seo-оптимизации под поисковые системы. Умеет поддерживать разные виды URL-адресов, и ЧПУ в том числе (человеко-понятные URL-ы, которые так любят все поисковые системы), а HTML-код, который генерируется Drupal, соответствует всем стандартам, и в новой версии, по словам Дриса Байтаерта, HTML5 будет использоваться на всю катушку, а также будет организована возможность работы с любыми мобильными приложениями. Все эти новшества и дружественное отношение ПС навевает мысль о том, что ваш сайт будет гарантировано постоянно индексироваться. [11]

В Drupal, как и в Вордпресс, и в Битрикс, права доступа обрисовываются ролью пользователя. То есть, администратор сайта может назначать какую-то роль пользователю, и он будет иметь доступ только к определенным функциям сайта (см. Распределение ролей пользователей на сайтах WordPress.Значение каждой роли (группы) и ее возможности). Роль пользователя и гибкая настройка этих ролей дают права доступа в Drupal к разным его компонентам, расширениям и модулям. [3.C.65]

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

1.4.Выбор программного средства разработки

Нами было принято решение, переписать сайт с самого начала на языке PHP с базой SQL. Рассмотрим возможности PHP.

PHP может все. Главная область применения PHP - написание скриптов, которые будут работать на стороне сервера; таким образом, PHP может выполнять все то, что выполняет любая другая программа, например, обрабатывать данные форм, создавать динамические страницы или отправлять и получать cookies. Но PHP способен выполнить гораздо больше.

Существуют три основных области применения PHP.

Разработка скриптов для выполнения на стороне сервера. PHP в большинстве случаев используется именно таким образом. Для этого вам необходимы три самые важные вещи: интерпретатор PHP (в виде программы CGI или серверного модуля), веб-сервер и браузер. Чтобы вы могли просматривать результаты выполнения PHP-скриптов в браузере, вам понадобится работающий веб-сервер и установленный PHP. Посмотреть итог PHP-кода можно в веб-браузере, получив PHP-страницу, обработанную сервером. В случае, если вы просто делаете эксперименты, вы можете применять свой компьютер как локальный сервер. [8.C.3]

Создание скриптов для выполнения в командной строке. Вы можете разрабатывать PHP-скрипт, способный работать без сервера или браузера. Все, что вам нужно - парсер PHP. Такой способ применения PHP идеально подходит для скриптов, которые должны выполняться регулярно, например, с помощью cron (на платформах nix или Linux) или с помощью планировщика задач (TaskScheduler) на платформах Windows. Такие скрипты могут быть использованы в задачах простой обработки текстов.

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

PHP общедоступен для большинства операционных систем, включая Linux, многие модификации Unix, MicrosoftWindows, Mac OS X, RISC OS, и многие другие. Еще в PHP включена поддержка большого количества современных веб-серверов, таких как Apache, IIS и многих других. В принципе, подойдет любой веб-сервер, способный использовать бинарный файл FastCGI PHP, например, lighttpd или nginx. PHP может работать как модуль или функционировать как процессор CGI. [11]

Таким образом, останавливая свой выбор на PHP, мы получаем свободу выбора операционной системы и веб-сервера. Более того, у нас появляется выбор между использованием процедурного или объектно-ориентированного программирования (ООП) или же их сочетания.

PHP способен создавать не только HTML код. Доступно сформировывание изображений, файлов PDF и даже роликов Flash (с использованием libswf и Ming), создаваемых «на лету». PHP также имеет возможность составлять любые текстовые данные, такие, как XHTML и другие XML-файлы. PHP может автоматически генерировать такие файлы и сохранять их в файловой системе вашего сервера вместо того, чтобы передавать клиенту, преобразовывая таким образом серверный кэш для вашего динамического контента. Поддержка широкого круга баз данных – это одно из самых значимых преимуществ PHP. Написать скрипт, который использует базы данных - невероятно просто. Можно использовать расширение, специфичное для отдельной базы данных (таким как mysql) или воспользоваться уровнем абстракции от базы данных, такой как PDO, или присоединиться к любой базе данных, поддерживающей Открытый Стандарт Соединения Баз Данных (ODBC), с помощью одноименного расширения ODBC. Для других баз данных, таких как CouchDB, можно использовать сокеты. [4.C.76]

PHP также взаимодействует с другими сервисами через такие протоколы, как LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (на платформах Windows) и многих других. Кроме того, вы можете работать с сетевыми сокетами напрямую. PHP поддерживает стандарт обмена сложными структурами данных WDDX практически между всеми языками веб-программирования. Обращая внимание на взаимодействие между различными языками, следует упомянуть о поддержке объектов Java и возможности их использования в качестве объектов PHP.

PHP имеет много возможностей по обработке текста, включая регулярные выражения Perl (PCRE) и много других расширений и инструментов для обработки и доступа к XML документам. В PHP обработка XML-документов стандартизирована и происходит на базе мощной библиотеки libxml2, расширив возможности обработки XML добавлением новых расширений SimpleXML, XMLReader и XMLWriter.

Именно поэтому мной было принято решение, переписать сайт с самого начала на языке PHP с базойSQL, вместо первого варианта работы с системой CMSDrupal.

Выводы:

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

Глава 2. Практическая реализация интернет-решения для компании по производству мебели ООО «Мебельное ателье «RedWood»

2.1.Анализ компании ООО «Мебельное ателье «RedWood»

Компания ООО «Мебельное ателье «RedWood» зарегистрирована 13 апреля 2011 г. в г. Красноярске. Во главе директор компании Редькин Юрий Валерьевич.

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

Офис и выставочный зал ООО «Мебельное ателье «RedWood» находится по адресу: г. Красноярск, ул. Молокова, д.40, оф.332. Офис представляет собой переделанную трехкомнатную квартиру, расположенную на первом этаже жилого девятиэтажного дома. Данное место имеет малую проходимостью, в связи с тем, что вход располагается с торца дома вдали от центральных дорог и мест массового пребывания людей. Вывеска расположена только над входом и не имеется дополнительных ориентиров на местонахождение выставочного зала ООО «Мебельное ателье «RedWood».

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

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

По изученной информации о компании я выделила для себя несколько уникальных положительных качеств компании ООО «Мебельное ателье «RedWood»:

1. Работают с натуральным массивом дерева;
2. Работают с натуральными шпонами;
3. Можно заказать всю корпусную мебель в одной компании и в одной цветовой гамме;
4. Собственное производство;
5. Могут изготовить неординарные изделия.

2.2.Анализ сайтов аналогичных компаний

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

В Красноярске присутствуют федеральные торговые сети такие как Шатура, Лазурит, Дятьково, Евромебель, Коста Белла и другие. Большая часть продукции в крупных торговых центрах относится к ценовым сегментам эконом и средний. Дорогая элитная мебель зарубежных производителей представлена в гораздо меньшем объеме и выставлена в таких салонах как Галерея Света, Room.

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

Как отмечают участники этого рынка, в последнее время в Сибирском регионе стали активно развиваться собственные федеральные производители мебели. В том числе Иркутская мебельная компания, Кузбасская мебельная компания, также на рынок пришли московская и калининградская мебельные фабрики Лотус и Лазурит, Тюменский производитель мебели под торговой маркой Мебельвилль. Среди красноярских производителей мебели можно отметить мебельную фабрику Браво, Гранд Мебель, Арт Мебель, Березовскую мебельную фабрику.

Среди компаний, работающих на заказ можно отметить компании «MESTO», «Ролен», «Скользящая дверь», «Максимум» и «Данко».

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

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

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

2.3.Проектирование структуры Web-сайта

Проанализировав сайт компании «RedWood», созданный в 2011 г., можно сказать следующее:

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

Для начала необходимо разобраться со структурой нового сайта, необходима простота и понятность. Среди многих вариантов, предложенных мной заказчику, директором компании ООО «Мебельное ателье «RedWood» была согласована схема (рис.1.).

Рисунок 1 - Структура сайта

В главном меню 4 раздела: о компании, каталог, покупателю и дизайнерам. В разделе «О компании» все страницы, относящиеся к работе компании: новости, отзывы, контакты, миссия компании, производство и о копании. «Каталог» содержит все категории изготавливаемой мебели.

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

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

С помощью профессионального дизайнера был Выполнен следующий дизайн страниц (рис. 2):

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

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

Рисунок 3 -Меню сайта

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

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

Рисунок 4 - Страница каталога

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

2.5.Разработка сайта

Изучив самостоятельно с помощью учебной литературы и интернет ресурсов техники создания сайтов, изначально было принято решение создать сайт с помощью СМБ системы Drupal. Собственно, сейчас в сети Интернет и существует сайт компании ООО «Мебельное ателье «RedWood» по адресу использованием данной системы.

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

Для более четкой работы и понятного кода, без помощи CMS системы Drupal, сайт был переписан полностью с самого начала на языке PHP.

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

2.6.Описание работы сайта

Как и любой сайт, стандартно, (если не было внесено изменений в файл .htaccess) сайт компании ООО «Мебельное ателье «RedWood» начинает свою работу с открытия файла index.php.

C помощью phpфункции session_start() мы подключаем несколько файлов, в одном из которых находятся данные о хостинге, логине и пароле для доступа на него. Далее открывается стандартный блок HTML. Для заголовков страниц сайта подключаем файл title.php, в котором указываются условия использования той или иной базы данных для изъятия заголовка для страницы.

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

При выборе страниц из категорий меню использовали php код, который с помощью оператора switch/case и базы данных (рис.6) будет открывать выбранную таблицу. А именно, изначально проверяется typeв таблицеsystem.pages.cat, если тип page, то выборка проходит уже в таблице system.pages (рис. 6) и далее выводится ссылка на страницу с адресом, указанном в столбце name, и так же выводится заголовок, соответствующий этой странице. Если тип catalog, то выборка производится уже в таблице system.catalog.cat (рис. 7). В данном условии проверяем по параметру parent. Это нужно для того, чтобы правильно отображать меню и делать выборку, так как в меню есть категория «Спальни и детские», которая при наведении должна выдавать подкатегории «Спальни» и «Детские».

А в остальном все повторяется с типом page.

Рисунок 6 - База данных

Рисунок 7 - Таблица базы данных system.pages

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

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

Необходимо обратить внимание, что с такой организацией сайта нет необходимости каждый раз переписывать все страницы, если, например, что-то изменилось в верхней или нижних частях. Достаточно изменить лишь часть кода только в файле index.php, либо расположение какого-либо объекта на странице в файле style.css. Все объекты имеют идентификатор или класс, по которым в последствии, используя файл style.css, можно установить им стиль и параметры: отступы от других объектов, фоновое изображение, размер и тип шрифта и многое другое.При открытии страниц каталога, информация тоже выбирается из базы данных, а именно из таблицы system.catalog , в которой находится абсолютно вся информация по всем категориям.

Для редактирования любой строки в таблице каталога открываем окно редактирования, нажав «Изменить» на нужной нам строке. В открытом окне (рис. 8) мы можем изменять необходимые ячейки. Здесь ячейка cat соответствует номеру

Рисунок 8- Окно редактирования строки таблицы system.catalog

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

Рисунок 9 - Страница «Контакты»

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

Рисунок 10 - Страница «Расчет кухни»

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

Рисунок 11 - Пример расчета стоимости кухонного гарнитура

Для правильного расчета мы в первую очередь интересуемся расположением кухонного гарнитура, так как для каждого из трех вариантов своя формула расчета. Для прямой кухни формула: х/1000**(тип фасада+покрытие фасада+столешница). Для углового варианта формула расчета стоимости выглядит таким образом: (х+у-600)/1000*(тип фасада+покрытие фасада+столешница). Для П-образного кухонного гарнитура - (х+у+2-1200)/1000*(тип фасада+покрытие фасада+столешница).

Расчет выполняется с помощью JavaScript, скрипт встроен в главную страницу сайта.

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

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

2.7.Опубликование в сети Интернет

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

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

В моем случае у сайта компании ООО «Мебельное ателье «RedWood» уже существовали оплаченные домен redwoodkrk.ru и хостинг у провайдера hts.ru. И не было необходимости регистрировать новый адрес и покупать место на хостинге.

Так как делали модернизацию существующего сайта, и прорабатывала его на своем локальном сервере, для того чтобы презентовать его директору компании и протестировать на другом мобильном устройстве, я решила для себя выполнить стандартную операцию. Зарегистрировалась на сайте hostinger.ru, зарегистрировала и оплатила домен на год по адресу redwoodkrk1.xyz, и начала пользоваться бесплатным хостингом на данной сайте. Почему выбран именно hostinger.ru? Для меня этот ресурс отвечал необходимым требованиям, а именно бесплатен и стабильно работающий. Вопрос стоимости данных ресурсов для меня был важен, так как я использую этот ресурс только в обучающих целях, и нет необходимости регистрировать хостинг на платной основе. Изучив опыты многих разработчиков сайтов, остановили свой выбор именно на этом ресурсе.

Для того, чтобы перенести веб-сайт с локального сервера на хостинг, использовали программу FileZillaFTPClient, с помощью нее мне удалось перенести все файлы на сервер. Для того чтобы перенести базу данных, необходимо всю имеющуюся базу на локальном сервере экспортировать. В адресной строке браузера вводим http://localhost/tools/phpmyadmin/index.php, открывается страница, в которой мы и создавали все наши базы данных, выбираем нужную базу, выделяем все и нажимаем экспорт. Заходим в базы данных на хостинге, в данном случае по адресу http://sql16.hostinger.ru/phpmyadmin/index.php и здесь уже импортируем сохраненную базу данных. Очень часто возникали проблемы по импорту базы данных, происходила какая-то ошибка, но с некоторого раза выполнения импорта все получилось.

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

Выводы

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

Используя HTML, PHP, JavaScript, MySQL был разработан сайт для мебельной компании ООО «Мебельное ателье «RedWood» с корректировками. Сайт в тестовом режиме работает по адресу redwoodkrk1.xyz.

Заключение

Для компании ООО «Мебельное ателье «RedWood» был спроектирован и создан Web-сайт, который реализует все желания заказчика, отвечает всем требованиям.

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

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

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

1. Гольчевский Ю. В. О безопасности Интернет-сайтов под управлением системы управления контентом Joomla / Ю. В. Гольчевский, П. А. Северин // Вопр. защиты информ. – 2012. – № 3. – С. 44-49.
2. Граф Х.Создание веб-сайтов с помощью Joomla! 1.5 : [популярное учебное пособие по Joomla!, обновленное с четом последней версии системы] / Х. Граф ; [пер. с англ. Н. А. Мухина]. – М. : Вильямс, 2009. – 294 c.
3. Декстер М. Joomla!: программирование / М. Декстер, Л. Лэндри ; [пер. с англ. и ред. И. В. Берштейна]. – М. : Вильямс, 2013. – 592 c.
4. Золотухин С. А. Практикум разработки образовательного сайта на CMS Joomla! 1.5x / С. А. Золотухин. – Курск : КГУ, 2011.
5. Колисниченко Д. Н. Joomla 1.5.15/1.6.0: руководство пользователя: [оптимальные решения для начинающих и пользователей средней квалификации] / Д. Н. Колисниченко. – М. : Диалектика, 2010. – 240 c.
6. Королева Н. Л. Разработка web-сайта ООО “ИТ-МЕРИДИАН” средствами CMS JOOMLA / Н. Л. Королева, В. И. Печерица // Гаудеамус. – 2012. – Т. 2, № 20. – С. 202-204.
7. Костромин В. А. Конспект вебмастера. Выбор системы управления содержанием сайта (контентом) // Справочник вебмастера. – 2009-2013.
8. Крамер Д. Joomla! Как спланировать, создать и поддерживать ваш веб-сайт / Д. Крамер. – М. : Рид Групп, 2011. – 400 с.
9. Лобуренко Е. О. Школьный сайт: создание, наполнение и привлечение посетителей / Е. О. Лобуренко, Е. В. Якушина // Народное образование. – 2012. – № 4. – С. 171-181.
10. Маркелов А. О. Разработка Интернет-ресурса “Гид первокурсника института математики, физики и информатики” средствами CMS JOOMLA // Гаудеамус. – 2011. – Т. 2, № 18. – С. 137-138.
11. Севердиа Р. Joomla. Создание сайтов без программирования : [пер. с англ.] / Р. Севердиа, К. Краудер. – М. : Эксмо, 2011. – 382 c.
12. Сычев И. А. Создание сайтов на основе систем управления контентом: электрон. учеб.-метод. пособие / И. А. Сычев, В. Н. Половников. – Бийск : АГАО, 2012.