Онлайн-магазин носков "FoxSocks"

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное автономное образовательное учреждение высшего образования

«НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ «МИСиС»»

КУРСОВАЯ РАБОТА

по дисциплине: Разработка клиент-серверных приложений

на тему: Онлайн-магазин носков “FoxSocks”

Москва, 2021



Введение

В 21 веке люди по всему миру очень ценят собственное время. В настоящий момент технологии достигли больших высот, человечество делает все возможное для удобства и экономии времени. Хорошо разработанный сайт магазина дает возможность сэкономить время и силы потенциального покупателя. Теперь можно обновить гардероб не выходя из дома или по пути на работу, для этого понадобится: устройство с выходом в интернет, не определённая сумма и хорошее настроение.

Хорошо разработанный сайт дает следующие результаты:

- рост количества клиентов;

- узнаваемость бренда среди клиентов и партнеров;

- бустер для продвижения фирмы.

Для реализации создания сайта необходимо:

- определить идею и цель сайта;

- проработать его структуру и концепцию;

- создать графический шаблон;

- выполнить HTML-верстку, заполнить шаблоны содержимым, внедрить графическое наполнение;

- протестировать функциональность сайта, проверить корректность работы в различных браузерах;

- устранить обнаруженные неполадки.

Во время выполнения курсовой работы необходимо изучить архитектуру клиент-сервера, организацию взаимодействия между клиентом и сервером, проанализировать спрос клиентов и предложения конкурентов, научиться работать с HTML, CSS, Bootstrap и PHP, разработать сайт.

Постановка задачи

Для реализации поставленной цели необходимо разработать клиент-серверное приложение с удобным и понятным интерфейсом. На ряду с этим сайт должен быть комфортным для владельца и работников. При разработке web-страниц, используем язык программирования РНР, который используется наряду с MsSQL и другими полезными языками.

Сайт должен содержать:

Главную страницу с логотипом бренда;

Каталог с товарами;

Для каждого товара должна быть отдельная страница, с подробным описанием;

Страницу с информацией о доставке;

Базу данных, хранящую в себе данные клиентов.

Клиент-серверное приложение предназначено для представления компании и ознакомления с её услугами. При переходе на сайт у клиента появится возможность пользоваться предоставленной информацией, ознакомиться с товаром.



1. Описание архитектуры информационной системы

В основе разрабатываемой системы лежит архитектура «клиент-сервер», в которой задания или сетевая нагрузка распределены между поставщиками услуг (сервисов), называемых серверами, и заказчиками услуг, называемых клиентами.

2. Клиентская часть

Клиентская часть сайта, доступная широкому кругу пользователей, находится на компьютере пользователя. Сайт является интернет-магазином. Заходя на сайт, попадаем на главную страницу. С главной страницы сайта можно по ссылкам перейти на различные разделы: каталог, доставка и личный кабинет. Структура Web-страниц должна быть максимально простой, а наполнение - достаточно богатым, чтобы посетитель быстро нашёл нужную ему информацию. Кроме того, необходимо создавать Web-страницы так, чтобы дизайн не мешал восприятию информации, поэтому сайт выполнен в минималистичном стиле с яркими акцентами.

Клиентский интерфейс - это то, что видит пользователь, когда заходит на сайт. Он должен быть ориентирован на самого неопытного пользователя, поэтому он очень прост и удобен в использовании.

3. Структура базы данных

Для хранения данных клиентов воспользовались PhpMyAdmin5, где создали базу данных, состоящую из одной таблицы с полями:

id - уникальный номер пользователя. Поле заполняется автоматически;

full_name - полное имя пользователя;

email- почта пользователя;

login - логин;

password - пароль.

Рисунок 1. Таблица регистрации

Данная таблица заполняется автоматически после заполнения формы регистрации, расположенной на странице «Личный кабинет».

4. Серверная часть

Основной целью приложения является ознакомление с товарамимагазина и создание личного кабинета, поэтому необходимо включить в его серверную часть веб-сервер, предназначенный для обслуживания HTTP-запросов.

Большинство крупных веб-сайтов используют программирование серверной части чтобы динамично отображать различные данные при необходимости, в основном взятые из базы данных, располагающейся на сервере и отправляемые клиенту для отображения через некоторый код. Это также даёт возможность взаимодействовать с пользователем сайта, посылая уведомления и обновления по электронной почте или по другим каналам. Все эти возможности позволяют глубже взаимодействовать с пользователями.

В качестве протокола общения между клиентом и сервером был выбран режим «запрос-ответ». Это означает, что клиент посылает серверу сообщение, в котором содержится информация о том, какое действие хочет совершить клиент. Сервер анализирует это сообщение и выполняет предписанные действия, если они возможны. После завершения этих действий сервер возвращает результат работы. Все возможные варианты действий должны быть известны клиенту заранее. На уровне реализации были использованы объектно-ориентированные возможности языка PHP для упрощения разработки и понимания системы.

Серверная часть вмещает себя веб-сервер и сервер баз данных.

В задачи веб-сервера входят:

- получение и ответ на HTTP-запросы;

- перенаправление запросов на сайт, как правило, приписанное к определенному домену или поддомену;

- предоставление приложениям доступа к необходимым модулям (например, к модулю связи с СУБД, модулю обработки php-программ и другие);

- авторизация и аутентификация пользователей и т.д.

В задачи сервера баз данных входит:

- обслуживание запросов на манипуляции с данными на основе языка SQL;

- обслуживание базы данных;

- обеспечение целостности данных;

- предоставление утилит для административного управления СУБД.

Для создания серверной логики на данный момент существуют как минимум четыре достойных варианта: PHP, Python, Ruby, ASP.NET.

Для того, чтобы все эти средства могли работать, необходим http-сервер. Так получаем связку технологий и средств разработки, необходимых для создания серверной части системы создания и управления сайтами: HTML, CSS, PHP, MySQL.

5. Практическая вёрстка

На данном этапе создаём заготовку будущего сайта на основе языка HTML, являющимся языком тегов. Теги описывают структуру HTML-документа. Теги оформляются угловыми скобками, между которыми прописывается имя тега. Теги HTML документа предназначены для управления конструкциями разметки -- заголовками, абзацами, списками, таблицами и картинками.

Основы HTML.

Свою историю HTML начинает с 1986 года, когда Международной организацией по стандартизации (ISO) был принят стандарт озаглавленный "Standard Generalized Markup Language" - SGML. Этот стандарт был посвящен описанию обобщенного мета языка, который позволял строить системы логической структурной разметки любых разновидностей текстов.

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-браузер на компьютере пользователя Интернета. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

HTML довольно "демократичен": неправильный тег или неправильное вложение тегов обычно не приводят к "зависаниям" браузера, а только вызывает сообщение об ошибке в строке состояния окна браузера вашего Интернет-читателя. Разумеется, ошибки могут привести к неправильному форматированию HTML-документа.6

6. Вёрстка сайта

На данном этапе были созданы:

Главная страница;

Страница «Каталог»;

4 страницы для каждого товара.

Для удобного восприятия сайта был создан небольшой стиль, применяемый на каждой странице:

<style>

.leftimg {

float:left;

margin: 15px 15px 15px 0;

}

</style>

Для удобного перемещения между страницами была создана навигация с основными страницами сайта.

<a target="_blank" href="Главная.html" class="leftimg">Главная</a>

<a target="_blank" href="Каталог.html" class="leftimg">Каталог</a>

Рисунок 2. Страница «Каталог»

Данная страница предназначена для ознакомления с основными товарами, предоставленными на сайте магазина. Код, реализующий разметку страницы, предоставленный на рисунке 2 предоставлен в Приложении А.

Селекторы атрибутов и свойства стилей.

На данном этапе подключаем стили к каждой странице и настраиваем интерфейс сайта с использованием языка CSS.

Основы CSS.

С появлением интернета программисты создали множество браузеров, каждый из которых имел свои стили оформления информации.Тогда Хоком Виум Ли предложил использовать Каскадные Таблицы Стилей для стилистического оформления веб-страниц.

К концу 1996 года была опубликована первая спецификация CSS.

CSS (Cascading Style Sheets) - это каскадные листы стилей, которые применяются для описания внешнего вида веб-документа, написанного при помощи языка разметки HTML.

CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы. Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

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

Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.

7. Подключение стилей

Настраиваем для сайта задний фон, чтобы пока страница грузилась оставался единый интерфейс. Также настраиваем размеры и стили шрифта.

html, body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

width: 100%;

height: 100%;

background-color: white;

}

Рисунок 3. Главная страница



Данная страница - это первое, что будет видеть пользователь, когда зайдёт на сайт организации Код, реализующий стили главной страницы, предоставленной на рисунке 3 предоставлен в Приложении В.

8. Применение Bootstrap

На данном этапе подключаем Bootstrap, чтобы настроить адаптивность сайта под мониторы с разными разрешениями.

Основы Bootstrap

Bootstrap -- свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML - и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Основные преимущества:

Экономия времени -- Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках;

Высокая скорость -- динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке;

Гармоничный дизайн -- все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом;

Простота в использовании -- платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Bootstrap;

Совместимость с браузерами -- Bootstrap совместим с Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer и Opera;

Открытое программное обеспечение -- особенность Bootstrap, которая предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки.

Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

Подключение Bootstrap

Для подключения Bootstrap необходимо вставить в код следующие строки:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Для удобной работы с сайтом на других мониторах воспользовались навигацией, предложенной Bootstrap, подключив собственные стили. Код навигации предоставлен в Приложении C п.1.

Рисунок 4. Навигация сайта

сервер веб программный



Подключение сервера и базы данных.

На данном этапе необходимо создать базу данных, где будет храниться информация зарегистрированных пользователей сайта. Для этого необходимо воспользоваться языком PHP.

9. Основы PHP

PHP - это распространённый язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML.1

РНР позволяет изменять веб-страницу на сервере непосредственно перед тем, как она будет отправлена браузеру. Он умеет исполнять код -- так называемые сценарии. В ходе исполнения PHP может изменить или динамически создать любой HTML-код, который и является результатом исполнения сценария. Затем сервер отправляет этот код браузеру. При этом браузеру не известно, как была сформирована данная страница -- статично сверстана верстальщиком, или динамически создана при участии PHP. Это не важно, т.к. браузер всегда работает только с тем, что получил от сервера.

10. Подключение базы данных

База данных - совокупность связанных данных, сохраняемая в двумерных таблицах информационной системы. Программное обеспечение информационной системы, обеспечивающей создание, ведение и совместное использование баз данных, называется системой управления базами данных. База данных представляет собой удачно организованный набор поименованных таблиц. Каждая таблица - массив из однородных элементов, которые называются записями. Запись может содержать в себе одно или несколько именованных полей. Число и имена полей задаются при создании таблицы. Каждое поле имеет определенный тип. Для работы с компьютерной системой была выбрана одна из самых популярных СУБД - MySQL, потому что она проста и универсальна для большинства приложений. Для работы с ней используется язык структурированных запросов SQL, который позволяет выполнять различные операции с базами данных: создавать таблицы, помещать, обновлять и удалять из них данные, производить запросы из таблиц и так далее.

Для разработки сайта потребовалось создать одну таблицу: users. Таблица users содержит данные обо всех зарегистрированных пользователях системы.

Рисунок 5. База данных «users»

Для работы с базой создали несколько PHP файлов см. Приложение С п.2.



Заключение

В результате выполнения курсового проекта усовершенствованы знания в области программирования баз данных и объектно-ориентированного программирования, были изучены языки HTML и PHP, проанализированы особенности написания клиент-серверных приложений, предназначенные для генерирования страниц на web-сервере и работы с базами данных, приобретены навыки использования научно-технической информации. Также мы познакомились со стилями CSS и Bootstrap, настроив адаптивность сайта для различных девайсов.

Результатом данной работы стало приложение клиента и сервера, демонстрирующее использование технологии «клиент-сервер», представляющее из себя простой информативный сайт с небольшой базой данных и с удобным пользовательским интерфейсом, интуитивно понятным для любого пользователя. Программа написана на языках PHP и HTML в среде программирования Brackets, и ей не требуется установка.



Список литературы

1. https://www.php.net/manual/ru/intro-whatis.php

2. https://free-osp.ru/

3. https://ru.wikipedia.org/wiki/CSS

4. https://getbootstrap.com/

5. https://www.phpmyadmin.net/

6. https://www.sites.google.com/site/osnovyhtml



Приложение А

Код страницы «Каталог» на начальном этапе проектирования.

<style>

.leftimg {

float:left; /* Выравнивание по левому краю */

margin: 15px 15px 15px 0; /* Отступы вокруг картинки */

}

</style>

<p><a target="_blank" href="Главная.html" class="leftimg">Главная</a></p>

<p><a target="_blank" href="Каталог.html" class="leftimg">Каталог</a></p>

<br>

<hr align="center" width="1500" size="4" color="#cc5200"/>

<h1><center>FoxSocks</center></h1>

<hr align="center" width="1500" size="4" color="#cc5200"/>

<h2>Каталог</h2>

<br>

<p><a target="_blank" href="Socks1.html"><img src="photo/noski1.jpg" alt="#Ice Cream Half Crew" width="150" class="leftimg"></a></p>

<br>

<br>

<p><a target="_blank" href="Socks2.html"><img src="photo/noski2.jpg" alt="#Andy Warhol Skull" width="150" class="leftimg"></a></p>

<br>

<br>

<p><a target="_blank" href="Socks3.html"><img src="photo/noski3.jpg" alt="#Cherry Berry Crew" width="150" class="leftimg"></a></p>

<br>

<br>

<p><a target="_blank" href="Socks4.html"><img src="photo/noski4.jpg" alt="#Thumbs Up Crew" width="150" class="leftimg"></a></p>

<br>

<br>

<hr align="center" width="1000" size="2" color="#331400"/>

<p align="center">©Все права защищены</p>

<p align="center">+7(967)006-10-80</p>



Приложение В

Код, реализующий стили главной страницы.

html, body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

width: 100%;

height: 100%;

background-color: white;

}

.fixed-container {

width: 1000px;

margin: 0 auto;

padding-bottom: 50px

}

header {

height: 20px;

display: flex;

justify-content: space-between;

align-items: 100%;

width: 100%;

background: #d77d31;

margin-top: 500px;

}

nav {

display: flex;

align-items: center;

}

hr {

border: 0;

height: 2px;

background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

color: #d2691e;

}

p {

display: block;

margin-block-start: 1em;

margin-block-end: 1em;

margin-inline-start: 0px;

margin-inline-end: 20px;

}

.footer {

padding-top: 90px;

padding-bottom: 100px;

text-align: center;

}



Приложение С

Навигация Bootstrap;

<nav class="navbar navbar-expand-lg navbar-dark bg-warning">

<div class="container">

<a href="" class="navbar-brand">FoxSocks</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav me-auto mb-2 mb-lg-0">

<li class="nav-item">

<a href="Glavnaya.html" class="nav-link">Главная</a>

</li>

<li class="nav-item">

<a href="Catalog.html" class="nav-link">Каталог</a>

</li>

<li class="nav-item">

<a href="Delivery.html" class="nav-link">Доставка</a>

</li>

</ul>

<form action="" class="d-flex">

<input type="search" placeholder="Поиск" class="form-control mr-2">

<button class="btn btn-outline-danger">Поиск</button>

</form>

</div>

</div>

</nav>

PHP файлы:

connect.php

<?php

//mysqli_connect

$connect = mysqli_connect('localhost', 'root', 'root', 'users');

if (!$connect){

die('Error connect to DataBase')

}

?>

singin.php

<?php

session_start();

require_once 'connect.php';

$login = $_POST['login'];

$password = md5($_POST['password']);

$check_user = mysqli_query($connect, "SELECT * FROM 'users' WHERE 'login' = '$login' AND 'password' = '$password' ");

if (mysqli_num_rows($check_user)>0) {

$user = mysqli_fetch_assoc($check_user);

$_SESSION['user'] = [

"id" => $user['id'],

"full_name" => $user['full_name'],

"email" => $user['email']

];

header('Location: ../registration.php');

} else {

$_SESSION['message'] - 'Неверный логин или пароль';

header(string:'Location: ../form.php');

}

?>

<pre>

<?php

print_r($check_user);

print_r($user);

?>

</pre>

singup.php

<?php

session_start();

require_once 'connect.php';

$full_name = $_POST['full_name'];

$email = $_POST['email'];

$login = $_POST['login'];

$password = $_POST['password'];

$password_comfirm = $_POST['password_confirm'];

if ($password === $password_confirm) {

$password = md5($password);

mysqli_query($connect, query: "INSERT INTO `users`

(`id`, `full_name`, `email`, `login`, `password`)

VALUES

(NULL, '$full_name', '$email', '$login', '$password')");

$_SESSION['message'] - 'Регистрация прошла успешно!';

header(string:'Location: ../form.php');

} else {

$_SESSION['message'] - 'Пароли на совпадают';

header(string:'Location: ../registration.php');

die('Пароли не совпадают');

}

?>

Размещено на Allbest.ru

...