Файл: Выпускная квалификационная работа разработка интернетмагазина запчасти для автомобилей Допущена к защите в гэк Зав кафедрой информатики и вт шестаков А. П. июня 2016 г.pdf
Добавлен: 09.11.2023
Просмотров: 51
Скачиваний: 3
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
23
2.1.4 Регистрационная форма
Служит для ввода персональных данных пользователей. В дальнейшем эта информация используется для их идентификации между сеансами работы с интернет-магазином. Данная информация может храниться как на стороне сервера, так и на стороне клиента.
2.1.5 Форма отправки заказа
Форма отправки заказа служит для ввода контактной информации заказчика и отправки ее и заказа на электронный ящик организации.
24
2.2 Реализация Интернет-магазина с помощью выбранных
инструментов разработки
2.2.1 Установка и настройка локального хостинга
Для того чтобы установить Denwer, необходимо проделать 2 простых шага:
1) Скачать Denwer бесплатно на сайте разработчика.
2) Запустить скаченный файл и следовать инструкциям установки, подтверждая действия нажатием Enter, и вписывая необходимые символы (y или n, 1 или 2). Рекомендую на последних шагах выбрать цифру 1, чтобы создать отдельный виртуальный диск (допустим диск H).
После установки Denwer создаст папку, которую вы указали. Если не указывали, то папка будет находиться здесь: C:\WebServers. Также, если было выбрано создание отдельного виртуального диска, при запуске в Мой компьютер появится новый диск. С ним и будет производиться работа.
Каждый ярлык выполняет свою функцию:
Start Denwer – запускает все компоненты Денвер и подключает виртуальный диск.
Stop Denwer – останавливает работу всех серверов комплекса
Restart Denwer – перезапускает все сервера.
25
2.2.2 Установка Wordpress на Denwer
Чтобы установить Wordpress на Denwer, необходимо проделать следующие шаги:
1) Скачать архив с русским Wordpress.
2) Создать виртуальный хост. Для этого зайдите в C:\WebServers\home или в H:\home (все зависит от того, какие папку и букву диска выбрать в процессе установки) и создать в ней папку. Имя папки задается любое по желанию, но латинскими буквами, например, cms1.
В созданной папке создать папку www.
3) Скопировать все файлы из папки wordpress, которая находилась в архиве, и вставьте их в папку H:\home\cms1\www
4) Перезапустить Denwer.
5) Открыть браузер и ввести localhost.
Если появилась страница с надписью: “Ура, заработало!”, значит, все сделано правильно, и Denwer работает (см. Приложения, рис.1).
Теперь необходимо создать базу данных (БД) для WordPress. Для работы с БД используется phpMyAdmin, которая уже установлена в денвере. phpMyAdmin – это бесплатная утилита для управления базами данных
MySQL. Под управлением понимается создание, редактирование и удаления
БД через интерфейс браузера.
Чтобы войти в phpMyAdmin, необходимо перейти по ссылке: http://localhost/Tools/phpMyAdmin Проверка MySQL и phpMyAdmin
Чтобы работать с базами данных, нужно создать пользователя MySQL с паролем. По умолчанию в phpMyAdmin в денвере создан пользователь root без пароля. Некоторые CMS требуют, чтобы у пользователя MySQL был пароль. Поэтому можно отредактировать уже созданного пользователя либо создать нового. Пользователь создается один раз и потом его можно использовать для установки других скриптов или CMS, которые работают с
MySQL.
26
2.2.3 Заполнение каталога товаров
В меню «Woocommerce» переходим на страницу «Товары» и попадаем на страницу товаров (см. Приложения, рис.2), где можно просмотреть все имеющиеся на данный момент товары.
Нажав на кнопку «Добавить товар» попадаем на страницу добавления товара (см. Приложения, рис.3), где можно добавить новую единицу товара и добавить всю информацию о нем.
Также есть возможность добавить каталог с помощью специального конфигурационного файла формата *.csv, содержащего упорядоченный список товаров.
2.2.4 Формирование главной страницы сайта
На главной странице расположены недавно добавленные товары, форма входа, корзина и панель поиска по магазину. (см. Приложения, рис.4)
Часть кода главной страницы:
widget_product_search">
27
widget_price_filter">
Фильтр по цене
woocommerce widget_product_categories">
Категории товаров
- >
- АККУМУЛЯТОРЫ
- ef="http://localhost/sobolperm/product- category/%d0%b0%d0%bc%d0%bc%d0%be%d1%80%d1%82%d0%b8%d0%b7
%d0%b0%d1%82%d0%be%d1%80%d1%8b/">АММОРТИЗАТОРЫ - ef="http://localhost/sobolperm/product-
28 category/%d0%b0%d0%bd%d1%82%d0%b8%d1%84%d1%80%d0%b8%d0%b7
/">АНТИФРИЗ
%d0%ba/">БРЫЗГОВИК
%d0%ba%d0%b0%d1%80%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d0%b9
/">ВАЛ КАРДАННЫЙ
%d1%81%d1%86%d0%b5%d0%bf%d0%bb%d0%b5%d0%bd%d0%b8%d1%8f/
">ДИСК СЦЕПЛЕНИЯ
2.2.5 Страница корзины
На данной странице выводятся товары, добавленные пользователем в корзину (см. Приложения, рис.5), где можно изменить, либо добавить адрес выставления счета и выбрать способ оплаты и доставки, а также оформить заказ.
Редактирование страницы корзины (см. Приложения, рис.6)
Часть кода страницы:
ef="#wp-toolbar" tabindex="1">Перейти к верхней панели
29
>О
WordPress
haspopup="true" href="http://localhost/sobolperm/wp-admin/">Интернет- магазин автозапчастей "Соб…
item" href="http://localhost/sobolperm/wp- admin/customize.php?url=http%3A%2F%2Flocalhost%2Fsobolperm%2Fcart%2F
">Настроить
href="http://localhost/sobolperm/wp-admin/update-core.php" title="2 обновления плагинов, 3 обновления тем, Обновления переводов">icon">6text">2 обновления плагинов, 3 обновления тем, Обновления переводов
30 href="http://localhost/sobolperm/wp-admin/edit-comments.php" title="0 комментариев ожидают проверки">0">0
haspopup="true" href="http://localhost/sobolperm/wp-admin/post- new.php">label">Добавить
31 body, h1, h2, h3, h4, h5, h6, .widget h3, .post .title, .section .post .title,
.archive_header, .entry, .entry p, .post-meta { font-family: 'Varela Round', arial, sans-serif; }
.feedback blockquote p, #post-entries, #breadcrumbs { font-family: 'Varela
Round', arial, sans-serif; }
2.2.6 Страница оформления заказа
На данной странице показывается оформление заказа (см. Приложения, рис.8), с указанием номера телефона, адреса, Email-адреса и т.п.
Часть кода страницы:
панель" tabindex="0">
-
haspopup="true" href="http://localhost/sobolperm/wp-admin/about.php">
29
>О
WordPress
-
href="http://localhost/sobolperm/wp-admin/about.php">О WordPress
- submenu">
-
href="https://ru.wordpress.org/">WordPress.org - Документация
-
href="https://ru.forums.wordpress.org/">Форумы поддержки -
href="https://ru.forums.wordpress.org/forum/20">Обратная связь
haspopup="true" href="http://localhost/sobolperm/wp-admin/">Интернет- магазин автозапчастей "Соб…
wrapper">
-
href="http://localhost/sobolperm/wp-admin/">Консоль
-
href="http://localhost/sobolperm/wp-admin/themes.php">Темы -
href="http://localhost/sobolperm/wp-admin/widgets.php">Виджеты
">Настроить
href="http://localhost/sobolperm/wp-admin/update-core.php" title="2 обновления плагинов, 3 обновления тем, Обновления переводов">icon">6text">2 обновления плагинов, 3 обновления тем, Обновления переводов
30 href="http://localhost/sobolperm/wp-admin/edit-comments.php" title="0 комментариев ожидают проверки">0">0
haspopup="true" href="http://localhost/sobolperm/wp-admin/post- new.php">label">Добавить
-
href="http://localhost/sobolperm/wp-admin/post-new.php">Запись -
href="http://localhost/sobolperm/wp-admin/media-new.php">Медиафайл
-
href="http://localhost/sobolperm/wp-admin/post- new.php?post_type=page">Страницу -
href="http://localhost/sobolperm/wp-admin/post- new.php?post_type=product">Товар
2.2.5 Страница каталога товаров
На данной странице выводится список всех товаров магазина с возможностью сортировки (см. Приложения, рис.7).
Часть кода страницы:
content/uploads/2016/05/logo.jpg" />
31 body, h1, h2, h3, h4, h5, h6, .widget h3, .post .title, .section .post .title,
.archive_header, .entry, .entry p, .post-meta { font-family: 'Varela Round', arial, sans-serif; }
.feedback blockquote p, #post-entries, #breadcrumbs { font-family: 'Varela
Round', arial, sans-serif; }
2.2.6 Страница оформления заказа
На данной странице показывается оформление заказа (см. Приложения, рис.8), с указанием номера телефона, адреса, Email-адреса и т.п.
Часть кода страницы:
Оформление заказа
="
woocommerce
">
woocommerce
">
У вас есть купон? ="
#
"
>Нажмите здесь для введения кода
#
"
>Нажмите здесь для введения кода
32
="
submit
" class
="
button
" name
="
apply_coupon
" value
="
Применить купон " />