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

Реферат

Пояснительная записка к курсовому проекту 33 с., 10 рисунков, 9 источников, 1 приложение.

ВЕБ-РАЗРАБОТКА, ВЕБ-ПРИЛОЖЕНИЯ И СЕРВИСЫ, ВЕБ ПРОТОКОЛЫ, PHP, JAVA SCRIPT, РЕЛЯЦИОННЫЕ БАЗЫ ДАННЫХ, БАЗЫ ДАННЫХ, POSTGRESQL, UML, ПРОЕКТИРОВАНИЕ.

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

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

Предмет -- разработка Интернет-магазина.

Исходя из данной цели необходимо решить такие задачи:

1) разработка структуры сайта;

2) проектирование сайта;

3) реализация сайта;

4) общие сведения о разрабатываемом веб-интерфейсе;

5) разработка сайта.

Основные полученные результаты:

? проведён анализ ключевых процессов работы интернет-магазинов, составленны схемы работы сервиса, схемы товарооборота;

? спроектирован и разработан сайт интернет магазина для продажи строительной техники и стройматериалов.

? 

• Содержание
• Введение
• 1. Нормативные ссылки
• 2. Анализ предметной области
• 2.1 Общее описание предметной области
• 3. Проектирование архитектуры системы
• 3.1 Диаграмма вариантов использования
• 3.2 Диаграмма классов
• 3.3 Диаграмма состояний
• 3.3 Диаграмма деятельности
• 3.4 Диаграмма последовательности
• 4. Проектирование базы данных
• 4.1 Выбор СУБД
• 5. Проектирование бизнес-логики приложения
• 5.1 Выбор среды программирования
• 5.2 Описание требований к сайту
• 5.3 Разработка структуры сайта
• 6. Разработка веб приложения
• 6.1 Таблица товаров в базе данных
• 6.2 Добавление товара в базу данных
• 6.3 Вывод товаров в каталог
• 6.4 Пользователи
• 6.5 Вывод информации о текущем пользователе
• 6.6 Изменение информации о текущем пользователе
• 7. Результат разработки сайта
• 7.1 Главная (каталог)
• 7.2 Корзина
• 7.3 Оформление заказа
• 7.4 Оформление заказа
• Заключение
• Список использованных источников


Введение

приложение сайт магазин интернет

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

Выбранным языком для разработки backend части курсового проекта был язык программирования PHP. Этот язык был создан достаточно давно, но он не теряет актуальности в создании различного рода сайтов, значительно упрощая разработку именно web приложний. Для работы с базой данных использовалась система управления базами данных PostgreSQL.

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

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

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



1. Нормативные ссылки

В данной работе использованы ссылки на следующие стандарты:

1 ГОСТ Р7.0.5-2008 СИБИД. Библиографическая ссылка. Общие требования и правила составления.

2 ГОСТ Р1.5-2004. Стандарты национальные РФ. Правила построения, изложения, оформления и обозначения.

3 ГОСТ 2.301-68 ЕСКД. Форматы.

4 ГОСТ 7.82-2001 СИБИД. Библиографическая запись. Библиографическое описание электронных ресурсов. Общие требования и правила составления.

5 ГОСТ 7.12-93 СИБИД. Библиографическая запись. Сокращения слов на русском языке. Общие требования и правила.

6 ГОСТ 7.9-95 СИБИД. Реферат и аннотация. Общие требования.



2. Анализ предметной области

2.1 Общее описание предметной области

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

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



3. Проектирование архитектуры системы

3.1 Диаграмма вариантов использования

В данном случае роль Актера (Actor) будут играть Компания, Клиент, Транспортная компания, Банк, Сайт. Каждый вариант использования показывает, как конкретный актер использует систему. Необходимо рассмотреть и виды отношений, которыми они связаны:

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

Клиент - любой человек, которому был доставлен каталог товаров. В рамках системы он имеет возможность заказывать товары по каталогу или через Internet, может вернуть товар;

Сотрудник транспортной компании - обладает следующими полномочиями: доставляет товары по адресам клиентов, информирует компанию-посредника о доставке;

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



Рисунок 1 Диаграмма вариантов использования

3.2 Диаграмма классов

В рамках данной системы будут присутствовать следующие классы: Клиент, Транспортная компания, Заказ, Товар, Оплата, Информационная система, Компания посредник.

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

Чтобы заказ был получен клиентом, необходимо его доставить по определенному адресу и в определенные сроки. Следовательно, на диаграмме необходимо указать класс "Транспортная компания", который будет также иметь соответствующие атрибуты, и выполнять определенные операции.

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

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

Рисунок 2 Диаграмма классов

3.3 Диаграмма состояний

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

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

Диаграмма состояний для веб-приложения представлена на рисунке 2:

Рисунок 3 диагрмма состояний

3.3 Диаграмма деятельности

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

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

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

Информация о сделанном заказе просматривается менеджером магазина и передается на выполнение.

Со схемой алгоритма работы интернет-магазина можно будет ознакомиться в Рисунке 4.

Рисунок 4 Диаграмма последовательности действий

3.4 Диаграмма последовательности

На данной диаграмме последовательности будет отображаться вариант использования "Информировать о доставке". Тем самым объектами взаимодействия будут являться Транспортная компания, Форма информационной системы, БД заказов. Эти объекты выполняют определенные действия (инициированные сообщениями) в хронологическом порядке. Таким образом, при логическом моделировании поведения информационной системы, диаграмма последовательности будет выглядеть следующим образом (рисинук 5):



Рисунок 5 Диаграмма последовательности действий



4. Проектирование базы данных

4.1 Выбор СУБД

Для данной системы была выбрана СУБД PostgreSQL - свободная объектно-реляционная система управления базами данных.

Данная СУБД была выбрана из-за наличия некоторых преимуществ над остальными СУБД. Такими как:

? высокопроизводительные и надёжные механизмы транзакций и репликации;

? расширяемая система встроенных языков программирования: в стандартно поставке поддерживаются PL/pgSQL, PL/Perl, PL/Python и PL/Tcl;

? наследование;

? встроенная поддержка слабоструктурированных данных в формате JSON с возможностью их индексации;

? расширяемость (возможность создавать новые типы данных, типы индексов, языки программирования, модули расширения, подключать любые внешние источники данных).



5. Проектирование бизнес-логики приложения

5.1 Выбор среды программирования

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

Для разработки приложений были выбраны инструменты, поддерживающие разработку на данном языке. PostgreSQL была выбрана в качестве объектно-реляционной системы управления базой данных, для связи с базой данных использовался Entity Framework Core.

5.2 Описание требований к сайту

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

Данный Интернет-магазин ориентирован на продажу товаров для строительста.

В описании товаров должны присутствовать следующие свойства: название; цена; производитель; количество, остаток на складе; описание товара.

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

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

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

По окончанию оформления заказа, пользователь получает уведомление, на указанный ранее, электронный адрес.

5.3 Разработка структуры сайта

На основе результатов описания предметной области можно определить содержание веб-сайта.

Веб-сайт «Интернет-магазин строительных товаров» должен содержать:

-- информацию о товарах;

-- список категорий товаров;

-- меню для регистрации пользователей;

-- страница авторизации пользователей на сайте;

-- корзину товаров;

-- страницу оформления заказа;

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

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



6. Разработка веб приложения

6.1. Таблица товаров в базе данных

Таблица товара в базе данных представляет из себя следующую структуру

CREATE TABLE IF NOT EXISTS `wp_posts` (

`ID` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,

`post_author` bigint(20) UNSIGNED NOT NULL DEFAULT '0',

`post_date` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

`post_date_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

`post_content` longtext COLLATE utf8mb4_unicode_520_ci NOT NULL,

`post_title` text COLLATE utf8mb4_unicode_520_ci NOT NULL,

`post_excerpt` text COLLATE utf8mb4_unicode_520_ci NOT NULL,

`post_status` varchar(20) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT 'publish',

`post_name` varchar(200) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

`post_parent` bigint(20) UNSIGNED NOT NULL DEFAULT '0',

`guid` varchar(255) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

`menu_order` int(11) NOT NULL DEFAULT '0',

`post_type` varchar(20) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT 'post',

PRIMARY KEY (`ID`),

KEY `post_name` (`post_name`(255)),

KEY `post_author` (`post_author`)

);

Наш товар имеет следующие текстовые поля:

post_name - наименование товара

post_title - заголовок товара

post_content - описание товара

guid - кратокое описание товара

Также храниться дата публикации в двух форматах - по местному времени и без часового пояса соответственно post_date, post_date_gmt.

Также хранятся следующие числовые значения

ID - id продукта

post_author - id пользователя создавшего

post_parent - id родительской записи

menu_order - положение при выводе

При этом в MySQL существует такое понятие как внешние ключи. В данном случае такими ключами являются ключи post_name, post_author.

6.2 Добавление товара в базу данных

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

Для начала нам необходимо создать сам товар, для этого зададим его следующим образом

$post = array(

'post_author' => 1,

'post_content' => 'Текст', //Описание товара

'post_status' => "publish",

'post_title' => "Мой товар", // Название товара

'post_type' => "product",

);

$post_id = wp_insert_post($post); //Создаем запись

wp_set_object_terms($post_id, 22, 'product_cat'); //Задаем категорию товара

При этом для передачи данных в саму базу мы используем функцию wp_insert_post(), которая записывает данные в базу, в таблицу wp_post и в поле post_type указывает тип записи product.

С помощью же функции wp_set_object_terms() мы задаем категорию нашего товара при необходимости по его id в базе. При этом сами категории также могут быть созданы с помощью функции wp_create_category(), также для каждой категории можно задать родительскую, что позволяет также создавать и подкатегории товаров.

function wp_create_category( $cat_name, $parent = 0 ) {

$id = category_exists( $cat_name, $parent );

if ( $id ) {

return $id;

}

return wp_insert_category(

array(

'cat_name' => $cat_name,

'category_parent' => $parent,

)

);

}

Далее необходимо прикрепить путь до нашего изображения товара.

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

$puthUpload = wp_upload_dir();

$PhotoProd = "mainimg.jpg";

if($PhotoProd){

$PhotoProd = trim($PhotoProd);

$PhotoProd = $puthUpload["baseurl"]."/productimg/images/".$PhotoProd;

$thumbid = media_sideload_image($PhotoProd, $post_id, $desc = null, $return = 'id');

set_post_thumbnail($post_id, $thumbid);

}

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

$PhotosProd = "img1.jpg,img2.jpg,img3.jpg";

//Доп. картинка

if($PhotosProd){

$arPhotosProd = explode(",",$PhotosProd);

foreach($arPhotosProd as $key=>$Item){

if($Item){

$Item = trim($Item);

$Item = $puthUpload["baseurl"]."/productimg/images/".$Item;

$imgID[$key] = media_sideload_image($Item, $post_id, $desc = null, $return = 'id');

}

}

update_post_meta( $post_id, '_product_image_gallery', implode(", ", $imgID));

}

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

update_post_meta( $post_id, '_regular_price', 1000); //Базовая цена

update_post_meta( $post_id, '_sale_price', 500); //Цена распродажи

6.3 Вывод товаров в каталог

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

global $wpdb;

$wpdb = new wpdb( 'имя_юзера', 'пароль', 'название_БД', 'localhost' );

// если не удалось подключиться, и нужно оборвать PHP с сообщением об этой ошибке

if( ! empty($wpdb->error) )

wp_die( $wpdb->error );

// Готово, теперь используем функции класса wpdb

$results = $wpdb2->get_results( "SELECT * FROM table" );

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



6.4 Пользователи

Информация о пользователях будет храниться в базе wp_users

CREATE TABLE IF NOT EXISTS `wp_users` (

`ID` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,

`user_login` varchar(60) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

`user_pass` varchar(255) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

`user_nicename` varchar(50) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

`user_email` varchar(100) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

`user_registered` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

`user_status` int(11) NOT NULL DEFAULT '0',

`display_name` varchar(250) COLLATE utf8mb4_unicode_520_ci NOT NULL DEFAULT '',

PRIMARY KEY (`ID`),

)

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

Связь между таблицами базы данных пользователей и товаров представлена на рисунке 6



Рисунок 6 связи между таблицами

6.5 Вывод информации о текущем пользователе

Для вывода информации о пользователе используем следующую функцию

$uq = new WP_User_Query( array( 'number' => 10 ) );

echo '<h3>Пользователи (всего: '. $uq->total_users. ')</h3>'; // также можно юзать $uq->get_total()

/*

* Пустой объект нам ни к чему, поэтому создаем эту проверку

*/

if ( ! empty( $uq->results ) ) {

/*

* Запускаем цикл (актуально только если параметр fields = all (он стоит по умолчанию) или all_with_meta

*/

foreach ( $uq->results as $u ) {

/*

* $u в данном случае это и есть объект пользователя, давайте поглядим, какие у него параметры

*/

echo '<p>'. $u->ID. '</p>'; // ID

echo '<p>'. $u->user_login. '</p>'; // логин

echo '<p>'. $u->first_name. '</p>'; // имя

echo '<p>'. $u->last_name. '</p>'; // фамилия

echo '<p>'. $u->user_pass. '</p>'; // хэш пароля

echo '<p>'. $u->user_nicename. '</p>'; // найснейм

echo '<p>'. $u->user_registered. '</p>'; // дата регистрации

echo '<p>'. $u->user_activation_key. '</p>'; // ключ активации

echo '<p>'. $u->user_status. '</p>'; // статус пользователя

echo '<p>'. $u->display_name. '</p>'; // отображаемое имя

echo '<p>'. $u->user_email. '</p>'; // емайл

}

}

}

6.6 Изменение информации о текущем пользователе

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

$user_id = 1;

$user_email = 'www.kubstu@mail.ru';

$user_id = wp_update_user( [

'ID' => $user_id,

'user_email' => $user_email

] );

if ( is_wp_error( $user_id ) ) {

// Произошла ошибка, возможно такого пользователя не существует.

}

else {

// Все ОК!

}



7. Результат разработки сайта

7.1 Главная (каталог)

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

Рисунок 7 карточки товаров

7.2 Корзина

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

Также присутсвует отдельное поле с подытогом и суммой заказа (рисунок 8).



Рисунок 8 страница оформления заказа

7.3 Оформление заказа

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

Рисунок 9 страница оформления заказа

7.4 Оформление заказа

На странице профиля храниться информация о текущем пользователе, а также доступно его редактирование.

Также существует архив заказов, совершенных текущим пользователем ранее (рисунок 10).

Рисунок 10 страница профиля пользователя



Заключение

В процессе выполнения данного курсового проекта была разработана система веб приложения и его инфраструктуры.

Были проведены работы, связанные с проектированием межсетевых взаимодействий, были рассмотрены возможности использования разных протокол для обеспечения безопасности и высокой скорости передачи данных.

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

Была проведена работа над изучением СУБД PostgreSQL, которая предоставляет множество возможностей для проектирования базы данных.

В результате были приобретены навыки, которые в будущем позволят эффективно производить проектирование, разработку, поддержку какого-либо продукта.



Список использованных источников

1. Белоногов Г.Г., Новоселов А.П. Автоматизация процессов накопления, поиска и обобщения информации / М.: Наука, 2017. 256 c.

2. Ульман Дж. Основы систем баз данных / М.: Финансы и статистика, 2017. 292 c.

3. Роберт Мартин, Мика Мартин. Гибкий Принципы, Модели, и практики в С# / M.: Санкт-Петербург - Москва 2015. 756 c.

4. Томас Марк Тиленс. React в действии / М.: Наука, 2016. 342 c.

5. Мартин Р. Идеальный программист: как стать профессионалом разработки ПО -- СПб.: Питер, 2018. 224c.: ил.

6. Рихтер Дж. CLR via C#. Программирование на платформе Microsoft.NET Framework 4.5 на языке C#. 4-е изд. СПб.: Питер, 2013. 896 с.: ил. (Серия «Мастер-класс»).

7. PostgreSQL [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/PostgreSQL (дата обращения 03.05.2021).

8. Хавербеке Марейн “Выразительный JavaScript. Современное веб-программирование”, ИД.: «Питер», Санкт-Петербург, 2019. 480 с.

9. Дакетт Джон “HTML и CSS. Разработка и дизайн веб-сайтов”, ИД.: «Эксмо», Санкт-Петербург, 2019. 480 с.

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