Проектирование модели данных
1 нормальная форма:
Таблица 2 - Список
| Фамилия покупателя | Наименование категории |
| Имя покупателя | Наименование товара |
| Отчество покупателя | Наименование категории |
| Телефон покупателя | Дата поставки |
| Адрес проживания покупателя | Цена поставки |
| Фамилия поставщика | Количество поставок |
| Имя поставщика | № Поставщика |
| Отчество поставщика | Сумма товаров |
| Телефон поставщика | Сумма поставки |
| Дата заказа | Фирма |
| Количество продано | Фамилия менеджера |
| Цена товара | Имя менеджера |
| Телефон менеджера | Email покупателя |
| Отчество менеджера |
2 нормальная форма:
3 нормальная форма
4 нормальная форм:
а) назначение:
1. Сайт предназначен для людей любого возраста, кто умеет пользоваться компьютером и выходить в интернет, и находится в Челябинской области.
2. Автоматизировать способ покупки продуктов через интернет.
б) целевая аудитория:
возрастная категория не ограничена.
в) содержание:
· о компании - контактная информация о магазине, и адрес где он расположен;
· каталог продуктов – категории продуктов с изображением и с ценами;
· как заказать – форма заказа и инструкция как правильно оформить заказ;
· доставка и оплата - способ оплаты, стоимость доставки, сроки доставки;
· акции-все акции и скидки;
· поисковая система;
· новости.
Разработка дизайна
Для создания дизайна шаблона было решено выбрать яркие тона, которые бы не отталкивали покупателей и выдерживали строгий стиль интернет - магазина, на сайте не должно быть бесполезной информации, шрифт должен быть легко читаем. Графика должна быть чёткой, красочной и быстро загружаемой, не должна быть анимация и звук, которая медленно загружается, и надоедает посетителям сайта.
В верхней части страницы сайта, как правило, размещается наиболее важная информация: название фирмы, логотип, само название сайта и т.д.
Важно чтобы посетитель без проблем мог найти нужный товар и смог просмотреть информацию по нему.
Чем проще выполнена верхняя часть страницы, тем легче запомнить название сайта и саму фирму.
Будет сделана простая и предельно удобной навигация.
Цветовая гамма будет ориентирована на зеленый цвет на белом фоне:
1. Зеленый цвет это один из самых стабильных цветов, однако обильное его использование может вызвать скуку, также это цвет роскоши, богатства, достатка, а также гармонии и легкости, который лучше и комфортнее всего воспринимается человеческим глазом. Непосредственно в веб-дизайне, при цветовом оформлении целевой страницы интернет-магазина используют, для продвижения сайта и роста посещаемости.
Для интернет - магазина этот цвет сыграет большую роль не только увеличив производительность магазина но и будет благоприятно влиять на покупателей заставляя их возвращаться к нам.
2. В дизайне белый цвет используют в качестве нейтрального фона. Популярен белый также в минималистичном дизайне, и в качестве символа зимы, также - символизирует чистоту и безопасность. Прекрасно подходит для web дизайна любого направления. Идеален для текстовых блоков. Это простой и элегантный цвет.
Для разработки и создание шаблона и его дизайна были использованы следующие программные продукты:
1. Adobe Photoshop CS4 – многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. В настоящее время Photoshop доступен на платформах Mac и Windows.
Рисунок 23 - Adobe Photoshop CS4
2. Artisteer – это Визуальный редактор для создания тем для самых распространенных CMS (WordPress, Joomla, Drupal, Blogger, DotNetNuke), шаблонов для HTML сайтов, приложений Asp.net и CodeCharge Studio.
Рисунок 24 - Artisteer
3. Favicon – Favicon.ru - создание и редактирование иконок сайтов.
Рисунок 25 - Favicon
4. Adobe Dreamweaver CS6 – Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире, замечательном помощнике при создании своих веб-сайтов.
Рисунок 26 - Adobe Dreamweaver CS6
Разработка макета
Макет сайта - это схема страниц, на которой определенным образом располагаются графические и текстовые элементы. Другими словами, макет сайта это каркас, на котором формируется дизайн и осуществляется наполнение страниц.
Макет сайта создает единство всех страниц. Качественно разработанный макет делает материал упорядоченным, легко-читаемым и удобным для зрительного восприятия.
Рисунок 27 - Макет
Рисунок 28 - Шаблон
Выбор хостинга
Хостинг – дисковое пространство, которое Вы арендуете на сервере в интернете, и на котором будут располагаться файлы вашего сайта(сайтов). Срок аренды может быть различным, как правило, минимальный срок – один месяц, ну а максимальный срок зависит только от ваших вложений.
Как выбрать хостинг? Как правило выбор хостинга зависит от преследуемых целей. Хостинг может быть платный и бесплатный. Бесплатный хостинг подойдет для тренировки, т.е. чтоб попрактиковаться с настройкой сайта, подключением домена и т.п.
Выбор - хостинга на бесплатной основе для хороших, перспективных проектов это не серьезно. Как правило данный хостинг имеет ряд ограничений, и обязательным условием при его использовании, является размещение рекламы на вашем сайте (предложенная реклама может быть различной: ссылки, баннеры и т.п.) , ведь надо ж хозяевам отбивать деньги, потраченные на аренду сервера, электроэнергию и.т.п.
Поэтому если проект серьезный - лучше выбрать хостинг на платной основе, тем более что стоит он совсем недорого. Платный хостинг как правило имеет более удобную панель управления, более качественную службу поддержки и более стабильную работу…
Как правило, чтобы правильно выбрать хороший хостинг , обращают внимание на следующие факторы:
1. Сколько места необходимо для сайта(сайтов). Существуют различные тарифы, от десяти МБ до десятков гигабайт. Поэтому четко определитесь сколько места нужно вам.
2. Какие технологии должен поддерживать сервер. Пример: php, mysql, perl и т.д. Если Вы делаете самый простой статичный сайт на html , то вам можно выбрать хостинг, на котором самый низкий набор технологий, тем самым можно сэкономить денежку. Если вы делаете хороший , перспективный, динамический сайт, то выбирайте тариф с базами данных и всеми скриптами (php, mysql, perl и т.д.).
3. Если вы собираетесь размещать на этом хостинге несколько сайтов, обратите внимание на то, возможно ли это, и если возможно, то сколько полноценных сайтов можно разместить. Как правило в различных тарифах, число сайтов варьируется от одного до десяти.
4. Обращайте внимание на ограничения по трафику. Желательно, чтобы он был неограничен, т.к когда ваш сайт начнет набирать обороты, для вас будет достаточно сложно или дорого использовать данный хостинг.
5. Ну и конечно, при выборе хорошего хостинга необходимо посмотреть на внешний вид сайта, предоставляющего услуги хостинга. Чем качественней и красивее он сделан, тем как правило его услуги лучше. Обратите внимание на контакты с администрацией и службой поддержки. Они должны обязательно быть на сайте, иначе - это мошенники.
Описание работы
1. Установка локального сервера denwer.
· шаг первый, для начало скачайте Denwer, и дважды кликните на скачанном EXE файле;
· шаг второй, на вопрос о безопасности нажмите «Выполнить» для продолжения;
Рисунок 29 - Файл
· шаг третий, далее в открывшемся окне инсталлятора нужно подтвердить свое согласие на установку нажатием кнопки «Да»;
· шаг четвертый, ждем распаковки архива. Вы должны увидеть вот такое вот окошко с прогрессом распаковки;
Рисунок 30 - Загрузка
· шаг пятый, перед вами откроются окно браузера (IE) и консоль. Нужно закрыть браузер для продолжения установки;
Рисунок 31 - Инсталляция денвера
Рисунок 32 - Админ
· шаг шестой, в открывшемся окошке просто нажимаем «Enter»;
Рисунок 33 - Ентер
· шаг седьмой, введите директорию куда бы вы хотели установить Denwer;
Рисунок 34 - Веб-сервер
· шаг восьмой, в открывшемся окне подтверждаем выбор вводом буквы «Y» (или отменяем если вдруг ошиблись вводом буквы «N»);
Рисунок 35 - Ввод
· шаг девятый, далее будет создать виртуальный диск. Нажмите «Enter»;
Рисунок 36 - Виртуальный диск
· шаг десятый, введите название виртуального диска. Выбираем любое название которое не занято в системе;
Рисунок 37 - Название
· шаг одиннадцатый, дальше для продолжения нажимаем опять «Enter»;
Рисунок 38 - Продолжение
· шаг двенадцатый, ждите пока не произойдет копирование файлов;
Рисунок 39 - Копирование
· шаг тринадцатый, нужно выбрать один из режимов. Вводим число один или два и нажимаем «Enter»;
Рисунок 40 - Выбор
· шаг четырнадцатый, создание ярлыков запуска на рабочем столе. Для создания ярлыков вводим «Y», а если не хотите создавать, то соответственно вводим «N»;
Рисунок 41 - Ярлыки
· шаг пятнадцатый, если все установилось, то откроется вот такое окно приветствия. В котором так же есть пометка, что при использовании скайпа смените порт.
Рисунок 42 - Завершение
2. Установка на denwer joomla.
· запускаем Денвер, переходим на страницу разработчика;
· внизу страницы ® Утилиты ® Заведение новых БД и пользователей MySQLhttp://localhost/denwer/Tools/addmuser/index.php;
Рисунок 43 - База данных
· создадим папку 'joomla' – C:\WebServers\home\localhost\www\joomla;
· скачиваем joomla и распаковываем в папку joomla;
· запускаем denwer и прописываем в строке браузера – http://localhost/joomla;
· в окне браузера откроется страница установки Joomla;
Рисунок 44 - Первый шаг
· в joomla семь шагов установки, с первый по четвертый нажимаем далее;
· в четвертом шаге заполняем настройки базы данных и нажать далее;
Рисунок 45 - Шаг четвертый
· на шестом шаге установки вводим название и описание сайта;
Рисунок 46 - Шаг шестой
· седьмой шаг завершает установку Joomla и, установка не будет завершена, пока не удалить директорию INSTALLATION, для удаления директории просто нажмите на кнопку удалить;
Рисунок 47 - Шаг седьмой
· для входа в панель управления наберите в Вашем браузере –
http://localhost/joomla/administrator.
3. Скачиваем и устанавливаем Virtuemart.
· скачиваем архив и русификатор программы и с помощью менеджера расширений устанавливаем в joomla;
Рисунок 48 - Virtuemart
4. Создание шаблона.
· скачиваем и устанавливаем программу Artisteer;
Рисунок 49 - Artisteer
· выбираем шаблон из стандартных или создаем свой;
· импортируем шаблон из программы в архив и устанавливаем на сайт;
Рисунок 50 - Установка шаблона
· загружаем и редактируем контент.
5. Переносим сайт с локального сервера на платный хостинг.
· первое, что нужно сделать - это создать аккаунт на хостинге;
· для переноса сайта на собственный домен - необходимо его зарегистрировать или, если он у вас уже есть, перенести на хостинг;
Рисунок 51 - Инструкция
· нужно будет на денвере создать копию базы данных (дамп базы), используя инструмент "Экспорт" программы phpMyAdmin;
Рисунок 52 - База данных
· следующее, что надо сделать, это переместить файлы на сервер. С помощью любого FTP-клиента (Total Commander, FileZilla и т.п.) или с помощью файлового менеджера в Панели Управления необходимо переместить все файлы из папки локального сервера Денвер (где находится сайт, как правило, путь до файлов: "директория где установлен Denwer/home/имя сайта/www/" в корневую папку сайта на сервере (в нашем случае - "test.ru/public_html");
· затем необходимо сделать импорт базы данных в созданную базу. Рядом с базой кнопка phpMyAdmin, инструмент "Импорт". Перед совершением импорта, необходимо нажать на имя базы в левом меню, тем самым выбрав базу, куда надо импортировать;
· последний шаг - это настройка соединения с базой данных.
Рисунок 53 - База данных
Тестирование продукта
Тестирование сайта – это проверка сайта разными методами на правильную работоспособность.
Существует два основных способа тестирования — ручной и автоматизированный.
Для ручного тестирования необходимо разработать программу тестов, подобрать тестировщиков, обучить их выполнять необходимую работу, да еще и повторять ее неоднократно, до достижения необходимого результата.
Автоматизированное тестирование снимает многие из вышеперечисленных проблем, оставляя за владельцем в сайта (поскольку мы говорим о тестировании сайтов) определение программы тестирования.
1. Визуальное отображение
Тестировщики проверяют, что видит на экране посетитель сайта, при этом учитывают разные операционные системы, браузеры, скорости соединения, экраны.
Рисунок 54 - Кроссбраузер
Таблица 3 - Проверка браузеров
| название браузера | версия браузера |
| Avant | 12.0 |
| Chrome | 26.0 |
| Chrome | 27.0 |
| Firefox | 22.0 |
| Firefox | 23.0 |
| Opera | 12.5 |
| Opera | 15.0 |
| Interner Explorer | 9.0 |
2. Проверка работы элементов управления
В рамках этой проверки специалисты убеждаются, что все функциональные элементы работают корректно, т.е. кнопки нажимаются, по ссылке происходит переход, формируются таблицы (с результатами поиска или с заказами клиента).
Рисунок 55 - Фильтр
3. Тестирование производительности
Отслеживается время загрузки страницы с текстом, картинками, результатами поиска, время на авторизацию.
Таблица 4 - Производительность
| адрес | размер | время загрузки | средняя скорость |
| Черемушки174.рф | 51,5 кб | 1,05 сек | 49 кб/сек |
4. Нагрузочное тестирование
Нагрузочное тестирование - это проверка работы сайта при одновременном подключении определенного количества пользователей.
Рисунок 56 - Пропускная способность
В диаграмме оторажено:
· активных клиентов: 50;
· пользовательское время загрузки: 26.16 сек;
· стр. 1, ср: 1,9 м.
5. Тестирование безопасности
Тестирование безопасности следует проводить регулярно. Кроме того, тестированию подвергается не только сам конкретный сайт или веб-приложение, а весь сервер полностью — и веб-сервер, и операционная система, и все сетевые сервисы.
Таблица 5 - База данных