5. Создание интернет магазина телевизоров.

Устанавливаем набор дистрибутивов (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки сайтов на «домашней» (локальной) Windows-машине без необходимости выхода в Интернет (Denwer).

Запускаем скачанный файл с расширением exe, соглашаемся установить пакет, после чего начинается его распаковка, а затем откроется окно браузера с описанием установки Денвер, которое можно сразу закрыть, после появляется черное окно DOS с мастером установки Denwer.

Рис.1 Установка Denwer

Следуя указаниям мастера для продолжения установки Denwer, нажимаем «Enter». В следующем окне нам нужно указать, в какую папку на нашем компьютере мы будем устанавливать сервер Денвер. Можно выбрать, например,Z:.

Рис.2 Установка Denwer

Нажимаете «Enter», на вопрос точно ли вы хотите установить Denwer именно в эту директорию, отвечаем установкой «y» и нажимаем «Enter». 

Рис.3 Установка Denwer

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

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

В этом случае, вам нужно будет нажать «Enter» и повторить шаг с вводом имени директории установки локального сервера Denwer, опять нажать «Enter» и ввести уже другую букву. Какие именно буквы для обозначения дисков в вашем компьютере уже заняты, вы можете посмотреть в «Мой компьютер». В случае если выбранная вами буква не занята, вы увидите сообщение об успешном создании виртуального диска.

Рис. 4 Установка Denwer

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

Рис. 5 Окончание установки Denwer

После установки на рабочем столе появляются иконки управления Denwer.

Рис. 6 Ярлыки управления Denwer

Приступаем к установке Joomla.

Извлекаем из архива установочные файлы Joomla.

4. Как установить Joomla!

Этап № 1: выбор языка

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

Рис. 1. Выбор языка.

Этап № 2: начальная проверка

На втором этапе инсталлятор проверяет: пригодны ли программное обеспечение

и конфигурация для установки Joomla.

Рис. 2. Начальная проверка.

Зеленым цветом отмечены параметры, по которым серверное окружение прошло проверку. Что будет отмечено зеленым, а что — красным, зависит от конфигураций операционной системы, веб-сервера и PHP-интерпретатора. Именно они проверяются веб-инсталлятором. Если устанавливить сайт на компьютер, управляемый Unix-подобной системой, например, Linux или OS X, нужно обратить внимание на права доступа к папкам и файлам. Особое значение имеют права доступа к корневой папке [в нее копировались файлы Joomla], потому что в ней будет создаваться файл конфигурации — «configuration.php».

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

Этап № 3: ознакомление с лицензией

Каждый программный продукт поставляется по той или иной лицензии, определяющей его дальнейшее применение. В случае с Joomla это GNU General Public License версии 2.0 (рис. 3).

Рис. 3. Лицензионное соглашение Joomla.

Этап № 4: настройка доступа к базе данных

На локальном сервере можно создать неограниченное количество баз данных. Среди учетных записей MySQL есть одна с именем «root». Это запись администратора базы данных, обладающего неограниченными правами. Пароль этой записи зависит от того, какая сборка используется: в XAMPP пароля нет, в MAMP пароль — «root».

Рис. 4. Настройка доступа к базе данных.

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

• имя хоста: localhost;

• имя пользователя: root;

• пароль задается сообразно разновидности сервера и его настройкам.

На этом этапе потребуется задать имя для базы данных. В случае с рабочим сайтом

[на удаленном сервере] и количество баз данных, и реквизиты доступа к ним заранее определены. Администратор — вводит [свои реквизиты доступа,] имя для базы данных Joomla создаст сама. [В поле «Действия с уже имеющимися таблицами»] можно изменить сгенерированный случайным образом префикс, а также выбрать действия инсталлятора в отношении имеющихся таблиц в выбранной вами базе данных: их можно удалить или сохранить, переименовав. Веб-инсталлятор добавит к их названиям префикс «bak_».

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

Этап № 5: настройка доступа по FTP

Во избежание проблем, связанных с правами доступа, а также, возможно, вызванных включенным режимом «Safe Mode», для загрузки файлов и управления ими можно воспользоваться FTP-функционалом PHP-интерпретатора. В случае с локальным хостингом это не нужно. В случае с удаленным хостингом данные для ввода на этом этапе можно получить от хостинг-провайдера. Если ваш тарифный план предполагает возможность создания нескольких учетных записей для доступа по FTP, то для Joomla следует создать собственную.

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

Рис. 5. Этап настройки доступа по FTP.

Этап № 6: настройка CMS

Настройка CMS состоит из трех подэтапов. На первом подэтапе потребуется дать сайту имя. Оно будет появляться на панели заголовка браузеров посетителей. Это имя будет появляться не только там: также, например, в письмах, отправляемых новым пользователям для подтверждения регистрации. Сайт, который в этой книге будет использоваться в качестве примера, назовем «Joomla» (рис. 6).

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

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

Демонстрационные данные.

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

Рис. 6. Настройка CMS: ввод имени, адреса электронной почты и пароля администратора.

Кликните по кнопке «Далее» и содержимое заполненных полей будет сохранено.

Этап № 7: завершение

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

Рис. 7. Заключительный этап

Установка завершена и можно приступить к настройке и наполнению сайта. На последней странице [той, на которой выводится кнопка «Удалить директорию „installation“»] есть две кнопки: «Сайт» и «Панель управления». Для того, чтобы посмотреть на сайт со стороны посетителя, нужно кликнуть по кнопке «Сайт». Если не удалена директория «installation», то система предупредительно напомнит о необходимости сделать это, а затем обновить страницу.

Результат выглядит впечатляюще (рис. 8).

Рис. 8. Главная страница вашего сайта после установки, глазами посетителя.

Теперь нужно полностью удалить папку instalation

Рис. 9 Завершение установки Joomla.

Для создания новой категории для товаров, вам нужно будет зайти в панель (рис 5) управления интернет магазина JoomShopping (в админпанели Joomla выбрать из верхнего меню пункт «Компоненты» — «JoomShopping») и выбрать из меню пункт «Товары» — «Список категорий». Откроется окно со списков всех категорий уже созданных в вашем интернет магазине JoomShopping.

Рис10. Вход в панель управления

Рис 11. Панель управления

Далее устанавливаем модуль JoomShopping который поможет нам в создании нашего интернет магазина.

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

Рис. 12 Менеджер расширений.

Загружаем архив RAR В файл пакета. Жмем загрузить и установить.

Рис. 13 Установленный JoomShopping

Чтобы построить древо меню мы воспользовались интерфейсом «Пункты меню»

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

Рис. 15 Интерфейс «Пункты меню»

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

Рис. 16 Создание категории товара.

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

Рис. 17 Категории товара.

Для нашего интернет магазина мы создали три категории. Все эти категории прикреплены к пункту меню «Категории»

Рис. 18 Создание списка товаров

В этом разделе мы описываем товар, указываем его категорию, стоимость.

Рис. 19 Список товаров.

Как итог работы готовый сайт.

Рис. 20 Готовый сайт интернет магазина.

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

Рис. 21 Категории товаров на сайте.

Рис.22 Товар в подпункте «Категории». Товар марки Samsung

Возможна сортировка по разному количеству товаров.

Так же название, по цене, по дате, по рейтингу, по популярности.

Рис.23 Товар в подпункте «Категории». Товар марки HTC

Рис.24 Товар в подпункте «Категории». Товар марки Nokia.

Рис. 25 Поиск.

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

Рис.26 Поиск по тексту

Возможен поиск «Любое из слов», «Все слова», Точное совпадение».

Рис. 27 Пример поиска по названию.

Пример поиска с учетом поиска «Точное совпадение».

Рис. 28 Пример поиска по стоимости

Представлен поиск с учетом стоимости от 190 евро.

Рис. 29 Пример поиска по стоимости

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

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

Рис. 30 Потребительская корзина

Пример корзины с выбранными товарами. Подсчет стоимости.

Рис. 31 Контакты

В этом блоке мы указываем адрес и телефон.

Рис 32. Меню «Контакты», блок дополнительной информации.

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