Файл: Разработка сайта магазина игрушек.pdf

База данных под названием shop имеет таблицы:

1) category

2) product

3) product order

4) user

Структура таблицы category приведена на рис. 2.

Рис. 2 – Структура таблицы category

Содержимое таблицы category приведена на рис. 3.

Рис. 3 – Содержимое таблицы category

Структура таблицы product приведена на рис.4.

Рис. 4 – Структура таблицы product

Содержимое таблицы product приведено на рис. 5.

Рис. 5 – Содержимое таблицы product

Структура таблицы product_order приведена на рис.6.

Рис. 6 – Структура таблицы product_order

Содержимое таблицы product_order приведена на рис. 7.

Рис. 7 – Содержимое таблицы product_order

Структура таблицы user приведена на рис.8.

Рис. 8 – Структура таблицы user

Содержимое таблицы user приведено на рис. 9.

Рис. 9 – Содержимое таблицы user

4 ОПИСАНИЕ СТРУКТУРЫ КЛИЕНСКОЙ ЧАСТИ

4.1 Описание интерфейса «Обычный пользователь»

Начало работы начинается с главной страницы сайта (Рисунок 10).

Рисунок 10 – Главная страница сайта

Для получения доступа к функционалу пользователя, необходимо воспользоваться кнопкой Вход, которая направит пользователя на форму запроса данных для входа в систему. (Рисунок 11)

Рисунок 11 – Меню пользователя

Появившийся новый пункт “Редактировать”, служит для просмотра имени, изменения пароля в системе. Пункт “Список покупок”, служит для просмотра истории покупок. Для завершения работы необходимо использовать кнопку Выход.

4.2 Описание интерфейса «Администратор»

Если воспользоваться входом в систему под аккаунтом администратора меню системы примет следующий вид (Рисунок 12).

Рисунок 12 – Меню администратора

В данном виде меню появилось несколько пунктов: Управление товарами, управление категориями, управление заказами. При помощи этих пунктов администратор системы имеет возможность вносить изменения в справочники системы.

Рисунок 13 – Управление товарами

В данном пункте мы можем полностью изменять информацию о товарах. (Рисунок 13).

Пример работы с одним из товаров приведен на рисунке (Рисунок 14).

Рисунок 14 – Изменение информации о товаре

Рисунок 15 – Управление категориями

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

Пример одной из категории приведен на рисунке (рисунок 16)

Рисунок 16 – Настройка категории

4.3 Инструкция пользователя

Рисунок 17 – Меню

Для входа в систему служит кнопка Вход, после чего откроется пункт авторизации (Рисунок 18).

Рисунок 18 – Меню авторизации пользователя.

Для зарегистрированных пользователей доступна возможность редактирования данных и список покупок. (Рисунок 19).

Рисунок 19 – Просмотр информации для авторизованных пользователей.

Рисунок 20 – Редактирование данных.

Данная система позволяет изменить свое имя и пароль.

Для незарегистрированных пользователей служит кнопка Регистрация, после чего откроется пункт регистрации. (Рисунок 21).

Рисунок 21 – Регистрация пользователя.

ЗАКЛЮЧЕНИЕ

Результатом курсовой работы стало создание информационной системы. Она имеет интуитивно-понятный и дружелюбный интерфейс и функционал.

В процессе выполнения работы была создана база данных, с применением среды MySQL. Реализация проекта велась с применением языков CSS, HTML, PHP, а также м использованием языка SQL запросов для обращения и изменения информации в связанной базе данных системы.

Во время работы над данным курсовым проектом были решены следующие задачи:

1. Была поставлена и изучена предметная область;
2. Спроектирована структура сайта;
3. Создан многостраничный веб-сайт;
4. Разработана база данных.

Возможные недостатки и доработки сайта на перспективу:

1) Все фото на сайте одного размера – предусмотреть отображение разных размеров.

2) В карточке товара сделать хороший просмотр фото.

3) Сделать поиск товаров.

4) Реализовать блог (разработать БД, модель, контроллер, вью, работа с другими частями приложения).

5) Админка для администратора (добавить блог).

6) Улучшить интерактивность при наведении на товар (css/html).

СПИСОК ЛИТЕРАТУРЫ

1. Дакетт, Джон HTML и CSS. Разработка и дизайн веб-сайтов) / Джон Дакетт. - Москва: Наука, 2017. - 480 c. ISBN 978-5-699-64193-2
2. Вадим Дунаев. HTML, скрипты и стили. BHV, Санкт-Петербург, 2015. ISBN 978-5-9775-3317-1.
3. Н. Закас, Джереми Мак-Пик, Джо Фосетт. Ajax для профессионалов. Перевод: Александр Киселев. Символ, Санкт-Петербург, 2015. ISBN 978 5 93286-081-6.
4. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2011. - 416 c. ISBN 978-5-9775-0596-3.
5. Adobe Dreamweaver CS6. Официальный учебный курс. Эксмо, Москва, 2014. ISBN 978-5-699-69655-0.
6. Чои Вин. Как спроектировать современный сайт. Питер, Санкт-Петербург, 2011. ISBN 978-5-459-00579-0.
7. А. Годин, К. Джонсон, К. Уоррен, М. Уэбер, Брайан Хоган. Книга веб-программиста: секреты профессиональной разработки веб-сайтов. Питер, Санкт-Петербург, 2013. ISBN 978-5-459-01510-2.
8. Кирилл Сухов. HTML 5. Путеводитель по технологии. ДМК, Москва, 2013. ISBN 978-5-94074-910-3.
9. Алан Купер, Дэйв Кронин, Кристофер Носсел, Роберт Рейман. Алан Купер об интерфейсе. Основы проектирования взаимодействия. Символ, Санкт-Петербург, 2015. ISBN 978-5-93286-132-5
10. Дронов, Владимир JavaScript и AJAX в Web-дизайне / Владимир Дронов. - Москва: Высшая школа, 2012. - 736 c. ISBN 978-5-9775-0251-1

ПРИЛОЖЕНИЯ

index.php

<?php

declare(strict_types = 1);

// FRONT CONTROLLER

// 1. Общие настройки

ini_set('display_errors','1');

error_reporting(E_ALL);

session_start();

// 2. Подключение файлов системы

define('ROOT', dirname(__FILE__));

//include_once (ROOT.'/models/Product.php');

//require_once(ROOT.'/components/Router.php');

//require_once(ROOT.'/components/Db.php');

require_once(ROOT.'/components/Autoload.php');

// 4. Вызов Router

$router = new Router();

$router->run();

header.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="">

<meta name="author" content="">

<title>Главная</title>

<link href="/template/css/bootstrap.min.css" rel="stylesheet">

<link href="/template/css/font-awesome.min.css" rel="stylesheet">

<link href="/template/css/prettyPhoto.css" rel="stylesheet">

<link href="/template/css/price-range.css" rel="stylesheet">

<link href="/template/css/animate.css" rel="stylesheet">

<link href="/template/css/main.css" rel="stylesheet">

<link href="/template/css/responsive.css" rel="stylesheet">

<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

<link rel="shortcut icon" href="/template/images/ico/favicon.ico">

<link rel="apple-touch-icon-precomposed" sizes="144x144"

href="/template/images/ico/apple-touch-icon-144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114"

href="/template/images/ico/apple-touch-icon-114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72"

href="/template/images/ico/apple-touch-icon-72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="/template/images/ico/apple-touch-icon-57-precomposed.png">

</head><!--/head-->

<body>

<header id="header"><!--header-->

<?php if (isset($isAdmin) && $isAdmin == true ):?>

<a href="/admin/" class="adminPanel">Перейти в админ панель</a>

<?php endif;?>

<div class="header_top"><!--header_top-->

<div class="container">

<div class="row">

<div class="col-sm-6">

<div class="contactinfo">

<ul class="nav nav-pills">

<li><a href="#"><i class="fa fa-phone"></i> +71234567890</a></li>

<li><a href="#"><i class="fa fa-envelope"></i> Gilev@yandex.ru</a></li>

</ul>

</div>

</div>

<div class="col-sm-6">

<div class="social-icons pull-right">

<ul class="nav navbar-nav">

<li><a href="#"><i class="fa fa-facebook"></i></a></li>

<li><a href="#"><i class="fa fa-google-plus"></i></a></li>

</ul>

</div>

</div>

</div>

</div>

</div><!--/header_top-->

<div class="header-middle"><!--header-middle-->

<div class="container">

<div class="row">

<div class="col-sm-4">

<div class="logo pull-left">

<a href="index.html"><img src="/template/images/home/logo.png" alt=""/></a>

</div>

</div>

<div class="col-sm-8">

<div class="shop-menu pull-right">

<ul class="nav navbar-nav">

<li>

<a href="/cart/"><i class="fa fa-shopping-cart"></i> Корзина

(<span id="cart-count"><?php echo UserCart::countItems(); ?></span>)</a>

</li>

<?php if (User::isGuest()): ?>

<li><a href="/user/login/"><i class="fa fa-lock"></i> Вход</a></li>

<?php else: ?>

<li><a href="/cabinet/"><i class="fa fa-user"></i> Аккаунт</a></li>

<li><a href="/user/logout/"><i class="fa fa-unlock"></i> Выход</a></li>

<?php endif; ?>

<!-- <li><a href="/cabinet/"><i class="fa fa-user"></i> Аккаунт</a></li>-->

<!-- <li><a href="/user/login"><i class="fa fa-lock"></i> Вход</a></li>-->

<!-- <li><a href="/user/logout/"><i class="fa fa-unlock"></i> Выход</a></li>-->

</ul>

</div>

</div>

</div>

</div>

</div><!--/header-middle-->

<div class="header-bottom"><!--header-bottom-->

<div class="container">

<div class="row">

<div class="col-sm-12">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="mainmenu pull-left">

<ul class="nav navbar-nav collapse navbar-collapse">

<li><a href="/">Главная</a></li>

<li class="dropdown"><a href="#">Магазин<i class="fa fa-angle-down"></i></a>

<ul role="menu" class="sub-menu">

<li><a href="/catalog/">Каталог товаров</a></li>

<li><a href="/cart/">Корзина</a></li>

</ul>

</li>

<li><a href="/contacts/">Контакты</a></li>

</ul>

</div>

</div>

</div>

</div>

</div><!--/header-bottom-->

</header><!--/header-->

footer.php

<script src="/template/js/jquery.js"></script>

<script src="/template/js/bootstrap.min.js"></script>

<script src="/template/js/jquery.scrollUp.min.js"></script>

<script src="/template/js/price-range.js"></script>

<script src="/template/js/jquery.prettyPhoto.js"></script>

<script src="/template/js/main.js"></script>

<script>

$(document).ready(function(){

// $(".item").first().addClass("active");

$(".add-to-cart").click(function () {

// alert('Товар добавлен');

var id = $(this).attr("data-id");

$.post("/cart/addAjax/"+id, {}, function (data) {

$("#cart-count").html(data);

});

return false;

});

});

</script>

<script src="/template/js/addToCart.js"></script>

</body>

</html>

login.php

<?php include ROOT . '/views/layouts/header.php'; ?>

<section>

<div class="container">

<div class="row">

<div class="col-sm-4 col-sm-offset-4 padding-right">

<?php if (isset($errors) && is_array($errors)): ?>

<ul>

<?php foreach ($errors as $error): ?>

<li> - <?php echo $error; ?></li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

<div class="signup-form"><!--sign up form-->

<h2>Вход на сайт</h2>

<form action="#" method="post">

<input type="email" name="email" placeholder="E-mail" value="<?php echo $email; ?>"/>

<input type="password" name="password" placeholder="Пароль" value="<?php echo $password; ?>"/>

<input type="submit" name="submit" class="btn btn-default" value="Вход" />

</form>