- •Министерство образования и науки рф
- •Ижевск 2015 Аннотация
- •1.3 Выделение сегмента интернет-магазинов
- •2.1.Обзор существующих систем
- •2.1.2.Stels-rf.Ru
- •2.1.3.Velograd.Ru
- •2.1.4. Вывод
- •3.Анализ задачи
- •3.1. Выбор инструментальных средств.
- •3.2.1. Cms система Joomla
- •Плюсы cms Joomla
- •3.2.2. Cms система Wordpress
- •3.2.3.Cms система modx
- •3.2.4. Вывод
- •4.Проектирование интернет-магазина
- •4.2.Решение информационной задачи
- •4.3.Разработка web-интерфейса
- •4.3.2. Требования к оформлению и дизайну Сайта
- •4.3.3. Требования к шрифтовому оформлению Сайта
- •4.3.4.Выбор платформы для сайта (cms).
- •4.4.Размещение сайта на хостинге
- •4.4.1. Покупка хостинга
- •4.4.2. Выбор домена
- •4.5. ПодлючениеCms
- •4.6. Создание базы и пользователя базы
- •4.7. Соединение с сервером баз данных и определение соответствий
- •4.8.Вывод
- •5. Работа с интернет магазином
- •5.1.Создание логотипа
- •5.2.Создание меню
- •5.4. Фото галерея
- •5.5. Модальное окно
- •5.6. Корзина
- •5.7.Форма отправки писем на почту
- •5.8.Наполнение страниц сайта контентом
- •5.8.1. Главная
- •5.8.2. Новости
- •5.9. Вывод
- •1.Общие сведения
- •1.1 Наименование системы
- •1.2 Основания для разработки
- •1.3 Нормативные документы
- •1.4 Сроки исполнения работ
- •4. Содержание работ.
- •5. Порядок контроля и приёмки
- •6.Значимость работы
- •7.Источники разработки
5. Порядок контроля и приёмки
Испытание сайта и контроль качества её работы провести на базе обычного компьютера, имеющего доступ в интернет. Во время испытаний проверить работу программного продукта по следующим позициям:
-Запуск сайта
-Выбор хостинга
-Просмотр сайта с клиентского рабочего места.
-Завершение сеанса.
6.Значимость работы
Разработанный сайт-магазинпозволит находясь дома заказать тот или иной вело продукт..
7.Источники разработки
1. ГОСТ 24.103-84 «Автоматизированные системы. Основные положения».
2. ГОСТ 24.104-85 «Автоматизированные системы. Общие требования».
3. ГОСТ 34.201-89 «Информационная технология. Комплекс стандартов на автоматизированные системы. Виды, комплектность и обозначения документов при создании автоматизированных систем».
4. ГОСТ 34.601-90 «Автоматизированные системы. Стадии создания».
5. ГОСТ 34.602-89 «Комплекс стандартов на автоматизированные системы. Техническое задание на создание автоматизированной системы».
6. РД 50-34.698-90 «Автоматизированные системы. Требования к содержанию документов».
7. Book-sam [Электронный ресурс]/ Все о MODX-Режим доступа: http://book-sam.ru/modx
8. Modx.Официальный учебный курс. Редактор: Сергей Панферов. Издательство: «Эксмо-Пресс» Год издания: 2014
Приложение 2 «Начальныйшаблон»
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<html>
<head>
[[$header]]
</head>
<body>
<div id="pagewrap">
<div id="page">
<div id="wrap">
<div id="sidebar">
<div id="logowrap">
<div id="logo"></div>
</div>
<div id="menu">
[[$menu]]
<div class="bottom"></div>
</div>
<divid="lblock">
<h2>Рекомендуем</h2>
[[$rekomend]]
</div>
<div id="contentwrap">
<div id="header">
<ul id="tmenu">
<li><div class="bsk border">
<span style="font: bold 14px Arial;">Корзина: </span>
<a href="#" onclick="cart.clearBasket()" style="float: right; margin-top: 4px">Очистить</a>
<a href="#" id="basketwidjet" onclick="cart.showWinow('bcontainer', 1)"></a><span style="font: normal 11px Arial"></span>
</div></li>
</ul>
</div>
<div id="body_area">
<body>
[[*content]]
</body>
<!---Форма для магазина-------------------------------->
[[$forma]]
<!----------------------------------------------------->
<script>
var cart;
$(document).ready(function(){
// $('.item_img').loupe({ width: 200, height: 150, loupe: 'loupe'});
// Формадлявалидации
$.validationEngine.defaults.scroll = false;
varcontactForm = $('#formToSend');
// Подключаемкорзину
cart = new WICard("cart");
varconfig = {'clearAfterSend':true, 'showAfterAdd':true, 'valudate':contactForm};
cart.init("basketwidjet", config);
});
document.addEventListener('visibilitychange', function(e) {
cart.init("basketwidjet", {});
}, false);
</script>
<div style="border:#186096 solid 1px;padding:4px 6px 2px 6px"><imgsrc="images/banner.jpg" style="width:575px; height=50px;">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="bottom_menu">[[$menu2]] </div>
<div id="bottom_addr">© 2015 Велотуризм<br>Designed by Tigron</a></div>
</div>
</div>
</div>
<div>
</body>
</html>
Приложение3. Формаотправки
<div id="order" class="popup">
<a href="#" onclick="cart.closeWindow('order', 0)" style="float:right"><imgsrc="img/close.png" /></a>
<h4>Введите ваши контактные данные</h4>
<form id="formToSend">
<input id="fio" type="text" placeholder="Вашифамилия и имя" class="" />
<input id="city" type="text" placeholder="Город" class="validate[required] text-input"/>
<input id="phone" type="text" placeholder="Контактныйтелефон" class="validate[required] text-input"/>
<input id="email" type="text" placeholder="Электроннаяпочта" class="" />
<!--textarea id="question" placeholder="Адрес"></textarea-->
</form>
<button onclick="cart.sendOrder('formToSend,overflw,bsum');" href="#">Отправитьзаказ</button>
</div>
Приложение4. Шапка»
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>[[++site_name]] - [[*pagetitle]]</title>
<meta name="description" content="Велотуризм">
<meta name="keywords" content="jewelry">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href="css/wicart.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/gallerystyle.css" />
<!-- Условие для очень старого InternetExplorer -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->
<script type="text/javascript" src="js/motiongallery.js">
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" ></script>
<script src="js/wicart.js" type="text/javascript" ></script>
<script src="js/jquery.validationEngine-ru.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="//vk.com/js/api/openapi.js" type="text/javascript"></script>
<script type="text/javascript">
VK.init({
apiId: ВАШ_API_ID,
onlyWidgets: true
});
</script>
Приложение 5. Меню
<ul>
<li><a href="[[~1]]">Главная</a></li>
<li><a href="[[~2]]">Новости</a></li>
<li><a href="[[~3]]">Велосипеды</a></li>
<li><a href="[[~4]]">Отзывы</a></li>
<li><a href="[[~5]]">Контакты</a></li>
</ul>
Приложение 6 «Футер»
<a href="[[~1]]">Главная</a> | <a href="[[~2]]">Новости</a> | <a href="[[~3]]">Велосипеды</a> | <a href="[[~4]]">Отзывы</a> | <a href="[[~5]]">Контакты</a>
Приложение 7 «Модальноеокно»
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<html>
<head>
[[$header]]
</head>
<body>
<div id="pagewrap">
<div id="page">
<div id="wrap">
<div id="sidebar">
<div id="logowrap">
<div id="logo"></div>
</div>
<div id="menu">
[[$menu]]
<div class="bottom"></div>
</div>
<divid="lblock">
<h2>Рекомендуем</h2>
[[$rekomend]]
</div>
<div id="contentwrap">
<div id="header">
<ul id="tmenu">
<li><div class="bsk border">
<span style="font: bold 14px Arial;">Корзина: </span>
<a href="#" onclick="cart.clearBasket()" style="float: right; margin-top: 4px">Очистить</a>
<a href="#" id="basketwidjet" onclick="cart.showWinow('bcontainer', 1)"></a><span style="font: normal 11px Arial"></span>
</div></li>
</ul>
</div>
<div id="body_area">
<h1 align="center">Велосипеды Forward</h1>
<div id="vitrine" class="border">
<div class="item border">
<a href="#win1" ><imgsrc="gallery/1.jpg" width="250"></a>
<p><b>Описание: FORWARD 1112</b>
<br>Количество скоростей 20
<br>Размер колес 26"
<br>Рама Алюминиевый сплав U6
<br>Вес 11,5 кг (15")</p><divclass="cena2">Цена: 43 760 руб</div>
<button class="border" onclick="cart.addToCart(this, '001', 'FORWARD 1112', '43760')">Купить</button>
</div>
<div class="item border">
<a href="#win2" ><imgsrc="gallery/2.jpg" width="250"></a>
<p><b>Описание: FORWARD 1122</b>
<br>Количество скоростей 30
<br>Размер колес 26"
<br>Рама Алюминиевый сплав U6
<br>Вес 12 кг (15") </p><divclass="cena2">Цена: 35 220 руб</div>
<button class="border" onclick="cart.addToCart(this, '002', 'FORWARD 1122', '35220')">Купить</button>
</div>
<div class="item border">
<a href="#win3" ><imgsrc="gallery/3.jpg" width="250"></a>
<p><b>Описание: FORWARD 2250</b>
<br>Количество скоростей 18
<br>Размер колес 700C
<br>Рама Алюминиевый сплав U6
<br>Вес 10 кг (510) </p><divclass="cena2">Цена: 44 450 руб</div>
<button class="border" onclick="cart.addToCart( this, '003', 'FORWARD 2250', '44450')">Купить</button>
</div>
<div class="item border">
<a href="#win4" ><imgsrc="gallery/4.jpg" width="250"></a>
<p><b>Описание: FORWARD Cyclone 2.0</b>
<br>Количество скоростей 18
<br>Размер колес 24"
<br>Рама Сталь Hi-Ten, 4-х рычажная
<br>Вес 17,2 кг </p><divclass="cena2">Цена: 12 850 руб</div>
<button class="border" onclick="cart.addToCart(this, '004', 'FORWARD Cyclone 2.0', '12850')">Купить</button>
</div>
<div class="item border">
<a href="#win5" ><imgsrc="gallery/5.jpg" width="250"></a>
<p><b>Описание: FORWARD Grace 1.0</b>
<br>Количество скоростей 18
<br>Размер колес 26"
<br>Рама Сталь Hi-Ten
<br>Вес 19,2 кг </p><divclass="cena2">Цена: 14 010 руб</div>
<button class="border" onclick="cart.addToCart(this, '005', 'FORWARD Grace 1.0', '14010')">Купить</button>
</div>
<div class="item border">
<a href="#win6" ><imgsrc="gallery/6.jpg" width="250"></a>
<p><b>Описание: FORWARD Next 1.0 disc</b>
<br>Количество скоростей 21
<br>Размер колес 26"
<br>Рама Алюминиевый сплав 6061
<br>Вес 14,5 кг (15") </p><divclass="cena2">Цена: 17 610 руб</div>
<button class="border" onclick="cart.addToCart(this, '006', 'FORWARD Next 1.0 disc', '17610')">Купить</button>
</div>
<div class="clear"></div>
</div>
<? include("instruction.html");?>
<!---Формадлямагазина-------------------------------->
[[$forma]]
<!----------------------------------------------------->
<script>
var cart;
$(document).ready(function(){
// $('.item_img').loupe({ width: 200, height: 150, loupe: 'loupe'});
// Формадлявалидации
$.validationEngine.defaults.scroll = false;
varcontactForm = $('#formToSend');
// Подключаемкорзину
cart = new WICard("cart");
varconfig = {'clearAfterSend':true, 'showAfterAdd':true, 'valudate':contactForm};
cart.init("basketwidjet", config);
});
document.addEventListener('visibilitychange', function(e) {
cart.init("basketwidjet", {});
}, false);
</script>
<div style="border:#186096 solid 1px;padding:4px 6px 2px 6px"><imgsrc="images/banner.jpg" style="width:575px; height=50px;">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="bottom_menu">[[$menu2]] </div>
<div id="bottom_addr">© 2015 Велотуризм<br>Designed by Tigron</a></div>
</div>
</div>
</div>
<div>
<!-- Модальное окно 1 -->
[[$mod]]
</div><div>
<!-- Модальное окно 2 -->
[[$mod2]]
</div>
<div>
<!-- Модальное окно 3 -->
[[$mod3]]
</div>
<div>
<!-- Модальное окно 4 -->
[[$mod4]]
</div>
<div>
<div>
<!-- Модальное окно 5 -->
[[$mod5]]
</div>
<div>
<div>
<!-- Модальное окно 6 -->
[[$mod6]]
</div>
<div>
</body>
</html>
Приложение 8. Рекомендация
<h3 style="color:red;">Велосипеды со скидкой!</h3>
<div id="motioncontainer" style="position:relative;overflow:hidden; width:250px; height:150px;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap; ">
<nobr id="trueContainer"><a href="[[~3]]"><imgsrc="gallery/1.jpg" width="250" border=1></a><a href="[[~3]]"><imgsrc="gallery/2.jpg" width="250" border=1></a><a href="[[~3]]"><imgsrc="gallery/3.jpg" width="250" border=1></a><a href="[[~3]]"><imgsrc="gallery/4.jpg" width="250" border=1></a><a href="[[~3]]"><imgsrc="gallery/5.jpg" width="250" border=1></a><a href="[[~3]]"><imgsrc="gallery/6.jpg" width="250" border=1></a></nobr>
</div>
</div>
</div>
Прложение 9. Отзывы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<html>
<head>
[[$header]]
</head>
<body>
<div id="pagewrap">
<div id="page">
<div id="wrap">
<div id="sidebar">
<div id="logowrap">
<div id="logo"></div>
</div>
<div id="menu">
[[$menu]]
<div class="bottom"></div>
</div>
<divid="lblock">
<h2>Рекомендуем</h2>
[[$rekomend]]
</div>
<div id="contentwrap">
<div id="header">
<ul id="tmenu">
<li><div class="bsk border">
<span style="font: bold 14px Arial;">Корзина: </span>
<a href="#" onclick="cart.clearBasket()" style="float: right; margin-top: 4px">Очистить</a>
<a href="#" id="basketwidjet" onclick="cart.showWinow('bcontainer', 1)"></a><span style="font: normal 11px Arial"></span>
</div></li>
</ul>
</div>
<div id="body_area">
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments('vk_comments');
</script>
<body>
[[*content]]
</body>
<!---Формадлямагазина-------------------------------->
[[$forma]]
<!----------------------------------------------------->
<script>
var cart;
$(document).ready(function(){
// $('.item_img').loupe({ width: 200, height: 150, loupe: 'loupe'});
// Формадлявалидации
$.validationEngine.defaults.scroll = false;
varcontactForm = $('#formToSend');
// Подключаемкорзину
cart = new WICard("cart");
varconfig = {'clearAfterSend':true, 'showAfterAdd':true, 'valudate':contactForm};
cart.init("basketwidjet", config);
});
document.addEventListener('visibilitychange', function(e) {
cart.init("basketwidjet", {});
}, false);
</script>
<div style="border:#186096 solid 1px;padding:4px 6px 2px 6px"><imgsrc="images/banner.jpg" style="width:575px; height=50px;">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="bottom_menu">[[$menu2]] </div>
<div id="bottom_addr">© 2015 Велотуризм<br>Designed by Tigron</a></div>
</div>
</div>
</div>
<div>
</body>
</html>