Интернет-магазин с функцией форума по продаже товаров для художников
Министерство
образования и науки Российской Федерации
ФГБОУ
ВПО «Сибирский государственный индустриальный университет»
Институт
дополнительного профессионального образования
ПОЯСНИТЕЛЬНАЯ
ЗАПИСКА
к
выпускной квалификационной работе:
Интернет-магазин
с функцией форума
по
продаже товаров для художников
Слушатель
Кутукова Ю.В.
Руководитель зав.
сектора НТБ
Койнов Р. С.
Директор ИДПОк.э.н.
доцент
Шарафутдинов Р.Я.
Новокузнецк
г.
Пояснительная записка 38 стр. 10 рис.
САЙТ, ИНТЕРНЕТ - МАГАЗИН, HTML, CSS, PHP, MYSQL,
SEO, ДИЗАЙН, ИНТЕРФЕЙС.
Цель работы - Спроектировать и создать
интернет-магазин по продаже товаров для художников с функциями форума с целью
увеличения клиентской базы магазина, оптимизации ассортимента и работы
магазина, рекламы новых товаров. Методом работы является применение языка
сценариев общего назначения с открытым исходным кодом - PHP.
Объектом работы является специфика
проектирования сайта интернет-магазина
В результате работы выполнен сайт,
предназначенный для продажи товаров через интернет с функциями форума и
популяризации новинок в данной области.
Содержание
Введение
.
Теоретическая часть
.1
Классификация сайтов
.2
Базовые Интернет-технологии для создания интернет-магазина
.2.1
Языки разметки и таблицы стилей
1.2.2
Web-сервер
1.2.3
Языки сценариев и программирования
1.2.4
Базы данных и СУБД для web-приложений
1.2.5
Архитектура баз данных для web-приложений
.2.6
Поддержка, обслуживание и продвижение сайтов
.3.
SEO -оптимизация сайта
.3.1
Как работают поисковые машины Интернета
.3.2
Этапы составления индекса и поиска по нему
.
Разработка интернет-магазина
.1
Постановка задачи
.2
Программно-технические средства
.3
База данных
.4
Создание схемы главной страницы сайта
.5
Верстка страниц
.6
Публикация данных
Заключение
Список
используемых источников
приложение сайт поиск продажа
Определения, обозначения и сокращения
В настоящей ВКР применяют следующие термины с
соответствующими определениями:
1 . HTML - hypertext mark-up
language - язык разметки
гипертекста.
Система
кодов для разметки документов. Применяется для документов, циркулирующих в
среде World Wide Web. Основная задача HTML - определить структуру документов и
семейств документов так, чтобы они могли быть легко и быстро доставлены
пользователю по сетям и отображены на самых разных дисплеях.
. Сайт (от англ. website: web - «паутина, сеть»
и site - «место», буквально «место, сегмент, часть в сети») - совокупность
электронных документов (файлов) частного лица или организации в компьютерной
сети, объединенных под одним адресом (доменным именем или IP-адресом).
3. URL - Uniform Resource Location -
унифицированный
адрес
ресурса.
Стандартная
форма обозначения имен файлов в Интернете и в World Wide Web, описывающая тип
сетевой службы, абонентское имя компьютера и имя файла на данном компьютере,
включая полный путь поиска файла.
. MySQL - свободная реляционная система
управления базами данных.
. БД - база данных MySQL.
Введение
В настоящее время в области информационных
технологий и, в частности, методах программирования просматривается тенденция
отхода от корпоративных (уровня предприятия) в сторону интернет - технологий.
Интранет (сеть больших корпораций) это уже
вчерашний день информационных технологий. На передний план выходят методы,
позволяющие управлять производством практически из любой точки земного шара,
где доступен Интернет.
Для этого достаточно иметь персональный
компьютер с Web-браузером и права доступа к требуемой информации. Ну и,
конечно, профессионально созданный сайт предприятия.
Веб-сайт сегодня является не только
информационным средством или визиткой, а полноценным маркетинговым
инструментом, привлекающим новых клиентов, приносящим прибыль.
За последние несколько лет интернет вообще и
браузеры в частности кардинально изменились. Теперь браузеры больше не являются
статичными инструментами для вывода текста и изображений. Они превратились в
платформы для приложений.
И ключевой аспект роста - HTML5. Про него
говорят многие, но далеко не все понимают, что же это такое на самом деле.
HTML5 - это платформа, которая позволяет создавать веб-приложения. Нынешние
веб-приложения, даже самые сложные, в той или иной степени основаны на уже
устаревших технологиях.- новая технология, которая позволит обеспечить полную
совместимость между разными браузерами.
Разработка HTML5 началась в новой
рабочей группе W3C <#"722013.files/image001.gif">
Рисунок 2.3.1 - Схема БД сайта
.4 Создание схемы главной страницы
сайта
Для хорошей функциональности сайта
важен удобный интерфейс. Удобный интерфейс должен соответствовать нескольким
простым правилам.
) Простое решение для макета главной
страницы.
Излишняя оригинальность и
нестандартный вид страницы затрудняет восприятие страницы пользователем.
Пользователь теряется и не понимает куда ему следовать за нужной ему
информацией.
) Простая навигация.
Попавший на сайт посетитель, на
какой странице он бы не находился, должен представлять себе структуру сайта.
Обеспечьте пользователю свободное перемещение по разделам и страницам сайта. В
этом вам поможет размещение простого и наглядного меню навигации на каждой
странице.
) Соответствие пожеланиям заказчика,
а так же кругу посетителей сайта.
При создании сайта нужно хорошо
представлять, что хочет заказчик сайта. Также следует проанализировать, какого
рода посетители заходят на подобные сайты - их профессию, возраст, уровень
доходов и т.п.
Сайт должен иметь удобную панель
навигации. Чтобы, посетитель, впервые попавший на сайт, мог сразу найти нужную
ему информацию. Элементы не должны быть разбросаны по странице, страница должна
восприниматься целостно. С этой же целью, используют небольшое количество
шрифтов (2-3 вида).
На рисунках 2.4.1 и 2.4.2
представлены схемы главной страницы сайта и схема главного меню.
Рисунок. 2.4.1- Схема главной
страницы сайта
.
Рисунок. 2.4.2- Схема главного меню
сайта
2.5 Верстка страниц
Главная страница index.php является
визиткой с ее атрибутами. Имеютсяукрашающие элементы: логотип, ниже баннер,
представляющий собой слайд-шоу популярной продукции. Фон имитирует холст.Этот фон
и логотип присутствует на всех страницах сайта.
Страница также имеет верхнее и
нижнее меню, форму для оставления комментария, блок новостей
Для зарегистрированного пользователя
появляется именное приветствие и кнопка перехода на личную страничку.
Рисунок. 2.5.1- Вид главной
страницы.
Страница регистрации указана на
Рисунке. 2.4.2. В традиционном стиле
предлагается
заполнить форму, где обязательными являются поля имени, e-mail, телефона,
адреса и дважды пароля. Методами Javascript проверяется имя на непустоту и
совпадение двух наборов паролей. После успешной проверки методами PHP
проверяется отсутствие введенного имени в базе данных и, если такого имени еще
нет, то имя и зашифрованный функцией PHP md5() пароль сохраняются в таблице
Пользователи базы данных.
Рисунок 2.5.2 - Страница регистрации
Страница «Оформление заказа» наиболее
функционально нагруженная. Здесь производятся главные действия, из-за которых и
задуман был сайт. А именно, производится набор корзины потребителя,
интерактивный подсчет суммы заказа, проверка на заполненность необходимых
полей, сохранение заказа в базе данных.
Эта страничка также имеет две разновидности
(Рисунки 2.4.3 и 2.4.4)
для незарегистрированного гостя
зарегистрированного клиента, для которого
имеется возможность более быстрого оформления заказа с использованием указанных
ранее данных, а также возможность отследить выполнение заказа.
Рисунок 2.5.3- Страница меню для
неавторизованного пользователя.
Рисунок 2.5.4- Страница меню для авторизованного
пользователя
На Рисунке 2.4.5. показана страница с
демонстрацией видео мастер-класса, выйти на которую можно через нижнее меню.
Эта возможность реализована через сайт “You
Tube”, путем вставки предоставляемого сайтом html-кода через панель
администрирования.
Рисунок 2.5.5- Страница демонстрации видео
мастер-класса
На главной странице интернет-магазина имеется
форма обратной связи (Рисунке 2.5.6.), где авторизованный клиент может оставить
свой комментарий.
Эта возможность реализована через сайт
“ВКонтакте”, путем вставки предоставляемого сайтом html-кода в таблицу стилей
(CSS).
Рисунок 2.5.6- Форма обратной связи
И, наконец, предусмотрен еще тип пользователя
сайта с правами администратора базы данных. У него в таблице Пользователи
должен быть проставлен особый статус. Администратор имеет свой логин и пароль и
может зайти на панель администрирования (Рисунок 2.5.7)
Рисунок 2.5.7- Страница администратора БД
Здесь администратор может изменять внешний вид
магазина сделать, менять базу данных, заносить туда, например, сведения о новых
товарах, уничтожать комментарии клиентов и т.д..
Этот инструмент при использовании скриптов SQL
позволяет обойтись без phpMyAdmin хостинга.
.6 Публикация сайта
После создания сайта его нужно опубликовать на
каком-то хостинге, т.к.
любой сайт должен быть помещен на собственный
сервер, иметь зарегистрированный домен и т.д. Поисковые машины Google и Yandex
на запрос«бесплатный хостинг» выдают несколько десятков ответов. При ближайшем
знакомстве с их тарифами и с отзывами «форумчан» оказывается, что по-настоящему
бесплатными и с необходимым набором услуг остаются единицы.
Необходимый набор услуг для нас - это:
) сервер apache,
) PHP 5,
)MySQL 5.
Остальные слово «бесплатный»
используют в качестве рекламного элемента для поднятия рейтинга сайта.
Бесплатность у них на 10-30 дней, а далее либо оплачивать, либо «отключат».
Либо нет нужного набора услуг. Имеются приемлемые предложения на <http://guru-host.ru>
и <http://arvixe.ru>.
У первого довольно сложная
регистрация, разные логины для доступа к разным услугам: обычная авторизация,
для входа в панель управления своим сайтом, для доступа к ftp. Потом пароли
можно поменять. Предоставляемый бесплатно объем дисковой памяти 35 Мб. Для
начала достаточно. Правда, через месяц пользования могут вставлять свою
рекламу.
У второго регистрация намного проще,
но своя «просьба» - раз в месяц где-то на просторах Паутины вставлять в
форумах, блогах и т.д. упоминание об их сайте и отправлять им отчет о
«проделанной работе».
Заключение
В представленной дипломной работе
дана условная классификация типов интернет - сайтов. Описаны базовые интернет -
технологии, необходимые для создания интернет - магазина. Это язык разметки
HTML, каскадных стилей CSS, языки сценариев Javascript и PHP. Описаны методы
SEO-оптимизации сайта Рассмотрена организация базы данных на примере MySQL.
Поставлена задача создания интернет - магазина для продажи товаров для
художников. Указаны программно - технические средства, используемые для решения
поставленной задачи. Предложено одно из возможных решений задачи с подробным
описанием этапов проделанной работы. Рассказано о методах публикации сайта на
хостинге.
Список используемых источников
Макфедрис
П. Создание Web-страниц: Пер. с англ.[Текст] .- ООО «издательство АСТ»: ООО
«издательство Астрель», 2004. - 218с.
Котеров
Д.В. PHP5 / Костарев А.Ф. - Спб,2005. - 322с.
Дронов
В.А. JavaScript в Web-дизайне [Электронный ресурс ]
Кузнецов
М., Симдянов И. Самоучитель MySQL5 [Электронный ресурс ] / Симдянов И. - Спб,
2005.