Курсовая Алиев

МИНИСТЕРСТВО ОБРАЗОВАНИЯ, НАУКИ И МОЛОДЕЖИ РЕСПУБЛИКИ КРЫМ
ГБОУВО РК «КРЫМСКИЙ ИНЖЕНЕРНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ

ИМЕНИ ФЕВЗИ ЯКУБОВА»
Факультет экономики, менеджмента и информационных технологий

Кафедра прикладной информатики
Направление подготовки 09.03.03 Прикладная информатика

Профиль «Прикладная информатика в информационной сфере»
КУРСОВОЙ ПРОЕКТ
по дисциплине «Программирование и поддержка веб-приложений»
НА ТЕМУ
«Разработка интернет-каталога товаров для школы»
Студента IV курса
группы И-1-16
очной формы обучения
Алиева Мустафы Хусеновича
_____________________________
(подпись)
Руководитель:
преп. Абдулаева Усние Бахтияровна
_____________________________
(подпись)
Симферополь – 2020
2
СОДЕРЖАНИЕ
ВВЕДЕНИЕ......................................................................................................................3
ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ СОЗДАНИЯ WEB-

САЙТОВ...........................................................................................................................5
1.1 Общая характеристика интернет-каталогов, преимущества и отличия.........5
1.2 Описание популярных языков веб-разработки.................................................8
1.3 Программное обеспечение для разработки Web-приложения......................10
Выводы по первой главе...............................................................................................12
ГЛАВА II РАЗРАБОТКА ИНТЕРНЕТ-КАТАЛОГА ТОВАРОВ ДЛЯ ШКОЛЫ...13
2.1 Структура сайта.................................................................................................13

2.2 Описание интерфейса сайта..............................................................................13
2.3 Разработка проекта............................................................................................15
Вывод по второй главе..................................................................................................20
ЗАКЛЮЧЕНИЕ.............................................................................................................21
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ....................................................22
ПРИЛОЖЕНИЕ.............................................................................................................23
3
ВВЕДЕНИЕ
Актуальность темы. Интернет давно и прочно вошел в повседневную
жизнь, у любой современной компании существует свой собственный сайт. Это
один из элементов престижа, ведь именно в Интернете потенциальные клиенты
будут в первую очередь искать информацию о фирме.
Актуальность создания сайта состоит также в том, что если вы хотите
донести информацию максимально быстро до огромного количества людей, то
лучше, чем с помощью собственного сайта сделать это не получится никак. Веб-
ресурс позволяет представить информацию о компании и ее товарах или услугах
сжато и одновременно полноценно. Также сайт может сообщать о новостях
фирмы, об изменениях в прайсе или режиме работы, содержать отзывы
благодарных клиентов.
В данном курсовом проекте рассматривается вопрос разработки онлайн-
каталога школьных товаров. Данная тема актуальна, поскольку с ходом научно-
технического прогресса, в настоящее время каждый человек, хотевший совершить
покупку, ищет сначала в интернете, поэтому интернет каталог школьных товаров
будет актуален всегда.
Целью данного курсового проекта является разработка интернет-каталога
школьных товаров.
Объектом исследования курсового проекта является процесс разработки
web-сайта.
Предметом исследования данного курсового проекта является технология
разработки интернет-каталога школьных товаров.
Для достижения цели были поставлены следующие задачи:
 рассмотреть характеристики, классификацию веб-сайтов, провести
обзор интернет-каталогов;
 рассмотреть основные средства разработки web-сайта;
 реализовать интернет-каталог школьных товаров с использованием
актуальных технологий разработки.
4
Структура курсового проекта. Курсовой проект состоит из введения, двух

глав, выводов к главам, заключения, списка использованных источников. Общий
объем курсового проекта: 36 страниц печатного текста, основной объем – 23
страницы, на которых представлено 3 рисунка и 4 листинга.
5
ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ СОЗДАНИЯ

WEB-САЙТОВ
1.1 Общая характеристика интернет-каталогов, преимущества и
отличия
Интернет-каталог - это «витрина» которая расположена в сети интернет и
который дает возможность просмотреть любой товар через интернет. В интернете
появились удобные и недорогие магазины, и их услугами пользуется все больше и
больше людей. В интернет-каталоге могут быть реализованы практически любые
торговые схемы: торговля со склада и на заказ, торговля с частными лицами и с
организациями, торговля вещественными и цифровыми товарами, услугами,
информацией и т.д. На сайтах обычно представлен подробный каталог товаров с
ценами, на основе которого пользователь формирует свой заказ. Заказывая товары
в интернет-магазине, вы можете получать их по почте или с курьером, а
оплачивать непосредственно при получении или также через Интернет.
Преимущества, которые даёт интернет-каталог:
1. Интернет-каталог работает 24 часа в сутки, 365 дней в году, без перерыва
на обед, без выходных и праздничных дней.
2. Доступ к виртуальным витринам может получить любой покупатель,
находящийся в любой точке планеты на любом континенте.
3. Интернет-каталог не имеет ограничений на виртуальную площадь.
Можно разместить сколь угодно много товаров или описать любое количество
услуг [1].
Наиболее распространенные виды электронных каталогов можно условно
разделить на следующие группы:
 Справочные электронные каталоги. При работе с большим
ассортиментом продукции или услуг возникает необходимость быстрого поиска
необходимой информации. Особенно актуальной эта задача становится в том
случае, когда описания по каждой позиции каталога (изображения, схемы,
инструкции и т.д.) хранятся в виде отдельных файлов. В отличие от каталога на
6
сайте, справочный электронный CD-каталог работает значительно быстрее и

всегда "под рукой" [3].
 Интерактивные электронные каталоги с системой заказов. Как
правило, интерактивные электронные каталоги с системой заказов применяют
компании, ориентированные на работу с постоянными заказчиками. Такой
каталог сочетает в себе удобство работы и функциональность (как в Интернет-
магазине) с высокой скоростью доступа к большому объему справочной
информации.
 Презентационные электронные каталоги. Презентационный
электронный каталог рассчитан на клиентов пока не знакомых с компанией. Его
основное назначение – представить компанию и продукцию или услуги,
произвести положительное впечатление. В таких каталогах широко используются
средства мультимедиа и различные визуальные эффекты. Выполняются в
программе Power point (презентация) или других аналогах. Презентационные
интерактивные электронные каталоги могут быть с элементами анимации,
версиями Flash-демо и другими визуальными эффектами. Также презентационные
электронные каталоги могут быть использованы при демонстрации и выпуске
новой коллекции, серии, линейки товара или модельного ряда изделий для того,
чтобы подчеркнуть их особенности и преимущества [2].
Отличие интернет-каталога от интернет-магазина
Сайт-каталог с продуманной структурой можно назвать расширенной
визиткой или корпоративным сайтом. Помимо информации о компании и
основных сведений, на сайте размещается перечень товаров. Каждый из них
может иметь как отдельную страницу с описанием и основными
характеристиками товара, так и быть в общем списке каталога с минимальным
набором параметров. Но заказать товар на сайте получится только через форму
обратной связи (звонок по телефону или отправка заявки по почте).
Интернет-магазин - структура более сложная и объемная, у которой и
«плюшек» намного больше. В интернет-магазине любой товар имеет свою
7
страницу с подробными характеристиками. Есть кнопка «купить» или «заказать»,

которая ведет в корзину, где будет указываться количество выбранных товаров и
итоговая сумма заказа. Оформление заказа осуществляется непосредственно на
сайте, можно массово добавлять товары в корзину [7]. Интернет-магазин может
иметь до сотен тысяч наименований товаров, поэтому для сортировки
предусмотрены фильтры. Что касается администрирования сайта, то в интернет-
магазине оно сложнее, и поэтому его разработка стоит дороже.
Особенности сайта-каталога:
1. Четкое формирование каталога (наличие категорий и подкатегорий).
Классический каталог имеет усложненную каталогизацию. В нем присутствует
гораздо больше фильтров и расширенный функционал.
2. Возможно наличие карточки товара с кратким описанием,
фотографией и ценой (необязательный параметр).
3. Отсутствует корзина для заказа. Реализация товара осуществляется
через форму обратной связи (звонок по телефону или отправка заявки по почте).
4. Если отдельная страница товара не предусмотрена, продукция
представлена в соответствующем списке с минимальным набором параметров и
описанием.
Отличия интернет-магазина:
1. Помимо наличия карточки товара, поиска и фильтрации, есть
возможность отправления товара в корзину и формирования заказа на сайте.
2. Наличие личного кабинета (персональные данные, история покупок,
текущее состояние заказов, данные о способах оплаты и т.д.)
3. Подключение платежных систем, онлайн оплата на сайте.
4. Взаимодействие со службами доставки.
5. Формирование скидок и акций на определенные группы товаров.
6. Интегрирование с 1C и другими CRM/ERP системами.
7. Автоматизированные процессы документооборота.
8. Поиск по каталогу осуществляется с использованием параметров
товара.
8
9. Сравнение выбранных позиций, формирование для пользователя

списка похожих или сопутствующих товаров.
10. Размещение комментариев, отзывов и возможность оценить товар [2].
1.2 Описание популярных языков веб-разработки

HTML (от англ. HyperText Markup Language - «язык разметки гипертекста»;)
- в первую очередь, это язык с помощью которого можно сообщить браузеру
информацию о том какие элементы есть на веб-странице и какую смысловую
нагрузку они несут.
Язык HTML интерпретируется браузерами, полученный в результате
интерпретации форматированный текст отображается на экране монитора либо
мобильного устройства. При создании интернет каталога основание разметки
сайта будет HTML5 [3].
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — это язык,
который отвечает за визуальное представление документов пользователю. СSS
преимущественно используют для создание графических эффектов на веб-
странице.
CSS определяет отображение HTML-документов. CSS работает со
шрифтами, с цветами символов и фона, с полями, со строками, с высотой и с
шириной элементов отображения, с фоновыми изображениями, с
позиционированием элементов и со многим другим.
CSS может быть применён к HTML или XHTML с использованием трёх
методов: связывание (linking), внедрение (embedding) и встраивание (inlining).
В связанном методе таблица стилей создаётся и хранится в отдельном файле
с расширением .css . Это связанные (или внешние) стили.
Во внедрённом методе CSS хранится как часть HTML-страницы в
теге <style> между тегами <head>. Это внедрённые (или внутренние) стили.
9
Во встроенном методе CSS хранится непосредственно в атрибуте стиля

HTML тега, пример: <div style="font-weight: bold">Bold Font</div> Это
встроенные стили [4].
Для реализации сайта был выбран первый метод.
JavaScript – это язык программирования, который оживляет сайт. В отличие
от HTML (который определяет контент) и CSS (который задаёт стили) и в отличие
от PHP (который является языком стороны сервера), он запускается на стороне
устройств посетителей.
Javascript – это клиентский язык программирования. Это означает то, что он
работает на стороне клиента. Когда мы переходим на какой-либо сайт в сети
Интернет, мы делаем это по протоколу HTTP. Со своего домашнего компьютера
мы отправляем запрос на удаленный сервер, на котором располагается сайт. И
удаленный сервер нам уже присылает ответ (html-страницу, которая будет
отображена на домашнем компьютере в браузере).
Преимущества JavaScript.
1. Ни один современный браузер не обходится без поддержки JavaScript.
2. С использованием написанных на JavaScript плагинов и скриптов
справится даже не специалист.
3. Полезные функциональные настройки.
4. Постоянно совершенствующийся язык – сейчас разрабатывается бета-
вариация проекта, JavaScript2.
5. Взаимодействие с приложением может осуществляться даже через
текстовые редакторы – Microsoft Office и Open Office.
6. Перспектива использования языка в процессе обучения
программированию и информатике [5].
PHP
Язык программирования PHP один из самых популярных языков в WEB-
программировании. На этом языке написаны такие социальные сети, как
ВКонтакте и Facebook. Главный плюс PHP в том, что редко приходится делать
10
что-то с нуля, так как существуют большое количество готовых решение и

систем. Для создания новостных сайтов или аналогичных есть 3 CMS (систем
управления содержимими):
 Joomla;
 Wordpress;
 Drupal [8].
Существуют системы управления и для интернет-магазинов:
 OpenCart;
 Magento.
В PHP есть расширения и библиотеки для создания GUI-приложений, такие
как PHP-GTK и PHP-Qt. Но сейчас для создания таких приложений редко
применяется данный язык программирования.
1.3 Программное обеспечение для разработки Web-приложения
В наше время существует очень большое количество средств разработки
Web-сервисов. Для реализации проекта интернет каталога школьных товаров, я
использовал следующие средства разработки: Avocode, Sublime Text 3, Хостинг
Beget.
Avocode – это графический редактор, позволяющий работать с psd
макетами. Самая основная особенность этого графического редактора – это то что
разработчик может получать код элементов прямо из макетов. Сервис
предоставляет собой программную среду для работы с макетами таких
графический редакторов, как Photoshop, Sketch, Ilustrator, Figma, HD Adobe.[6]
Sublime Text 3 – кроссплатформенный текстовый редактор. Sublime Text
поддерживает больше количество языков программирования, также данный
текстовый редактор имеет возможность подсветки синтаксиса для C, C++, C#,
CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lupa,
Markdown, MATLAB, Ocaml, Perl, PHP, Python, R, Ruby, SQL. Преимуществами
данного текстового редактора является:
1. Скорость работы
11
2. Кроссплатформенность
3. Большое количество плагинов для различных задач [7].
Open Server — это портативный локальный WAMP/WNMP сервер,
имеющий многофункциональную управляющую программу и большой выбор
подключаемых компонентов. Представленный пакет программ не является
очередной любительской сборкой, собранной «на коленке», это первый
полноценный профессиональный инструмент, созданный специально для веб-
разработчиков с учётом их рекомендаций и пожеланий. Для отладки скриптов в
различном окружении Open Server предлагает на выбор сразу два вида HTTP
серверов, различные версии PHP и СУБД модулей, а так же возможность
быстрого переключения между ними. Open Server — это целиком и полностью
портативный сервер. Никаких системных сервисов, куч мусора в реестре и
system32. Вы можете везде таскать его с собой на флешке (желательно на
скоростной), запускать на рабочей/домашней машине без опаски что у вас что-то
не заработает.
Хостинг Beget. Для развертывания сайта был выбран хостинг Beget.
Преимуществами данного хостинга является: собственная панель управления,
неограниченный трафик, автоматическая установка CMS, автоматическое
резервное копирование. Также хостинг поддерживает языки программирования:
PHP, Python, Perl 5, Zend [8].
FileZilla Client – это свободный многоязычный FTP-клиент
предназначенный для передачи файлов. Оснащён возможностью перетаскивания
объектов, синхронизацией каталогов и поиском на удалённом
сервере. Поддерживает многопоточную загрузку файлов [9].
Visual Studio Code – редактор исходного кода, разработанный Microsoft для
Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для
кроссплатформенной разработки веб- и облачных приложений. Включает в себя
отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и
средства для рефакторинга. Имеет широкие возможности для кастомизации:
пользовательские темы, сочетания клавиш и файлы конфигурации.
12
Распространяется бесплатно, разрабатывается как программное обеспечение с

открытым исходным кодом, но готовые сборки распространяются под
проприетарной лицензией [4].
Выводы по первой главе

В первой главе описывается, что такое интернет-каталог, в чем его
преимущества. Описываются основные характеристики интернет-каталогов и
востребованность их в современном мире. Также были рассмотрены языки веб-
программирования, локальные сервера, а также среды разработки. Для написания
курсового проекта «Разработка интернет каталога школьных товаров» были
выбраны следующие языки программирования: PHP, HTML, CSS. В качестве
локального сервера был выбран Open Server и для удобного написания кода
Sublime Text 3.
13
ГЛАВА II РАЗРАБОТКА ИНТЕРНЕТ-КАТАЛОГА ТОВАРОВ ДЛЯ

ШКОЛЫ
2.1 Структура сайта
В процессе выполнения курсового проекта будет создан несложный
интернет каталог, главной задачей которого будет являться знакомство
пользователей со школьными товарами. Пользователь сможет не только
просмотреть школьные товары, но и цены на них. Также пользователь будет
иметь возможность выбрать категорию товаров, предоставленных на сайте
каталоге. В данном интернет каталоге пользователь сможет оставить заявку
онлайн на покупку товара.
2.2 Описание интерфейса сайта
Сразу после того как пользователь зашел на сайт ему будут предложены
дальнейшие варианты развития событий: перед пользователем сразу
предоставляются две страницы это Главная и Магазин(Рис.2.1). Кликнув на
любой из вариантов пользователь будет отправлен на соответствующую страницу
для дальнейшего ознакомления.
Рис.2.1. Главные ссылки сайта

14
Спустившись вниз по главной странице, пользователь имеет возможность

кликнув по кнопке «ПОЗВНОНИТЬ», сделать звонок оператору.
Рис.2.2. Кнопка «Заказать»

После того как пользователь перейдет в раздел «Магазин» будет
представлен баннер(Рис.2.2) возможность ознакомиться полным каталогом
школьных товарах, а также их ценой. (Рис.2.3).
Рис.2.3. Баннер каталог товаров

15
2.3 Разработка проекта

Сайт создавался с использованием технологий HTML5, CSS3 и JavaScript.
Структура сайта создавалась с помощью HTML5, все стили были разработаны на
языке каскадных стилей CSS3, за всю логику отвечает язык программирования
JavaScript.
В первую очередь был создан файл index.html, а также был задан заголовок
страницы и были подключены файлы стилей (листинг 2.1).
Листинг 2.1. Фрагмент файла index.html
</head>
<body class="animsition">


<header>

<div class="container-menu-desktop">
<div class="wrap-menu-desktop">
<nav class="limiter-menu-desktop container">


<div class="menu-desktop">
<ul class="main-menu">
<li>
<a href="index.html">Главная</a>
</li>
<li>
<a href="product.html">Магазин</a>
</li>
<li>
<a href="contact.html">Заказать</a>
</li>
</ul>
</div>
16
</nav>
</div>
</div>


<div class="modal-search-header flex-c-m trans-04 js-hide-modal-search">
<div class="container-search-header">
<button class="flex-c-m btn-hide-modal-search trans-04 js-hide-modal-
search">
<img src="images/icons/icon-close2.png" alt="CLOSE">
</button>
<form class="wrap-search-header flex-w p-l-15">

<button class="flex-c-m trans-04">
<i class="zmdi zmdi-search"></i>
</button>
<input class="plh3" type="text" name="search"
placeholder="Search...">
</form>
</div>
</div>
</header>


<div class="wrap-header-cart js-panel-cart">
<div class="s-full js-hide-cart"></div>
<div class="header-cart flex-col-l p-l-65 p-r-25">

<div class="header-cart-title flex-w flex-sb-m p-b-8">
<span class="mtext-103 cl2">
Your Cart
</span>
<div class="fs-35 lh-10 cl2 p-lr-5 pointer hov-cl1 trans-04 js-hide-cart">

<i class="zmdi zmdi-close"></i>
</div>
</div>
<div class="header-cart-content flex-w js-pscroll">

<ul class="header-cart-wrapitem w-full">
<li class="header-cart-item flex-w flex-t m-b-12">
<div class="header-cart-item-img">
<img src="images/item-cart-01.jpg" alt="IMG">
</div>
<div class="header-cart-item-txt p-t-8">

17
<a href="#" class="header-cart-item-name m-b-18

hov-cl1 trans-04">
White Shirt Pleat
</a>
<span class="header-cart-item-info">
1 x $19.00
</span>
</div>
</li>
<li class="header-cart-item flex-w flex-t m-b-12">

<div class="header-cart-item-img">
<img src="images/item-cart-02.jpg" alt="IMG">
</div>
На главной странице сайта мы видим 3 раздела, такие как:

 главная;
 магазин;
 заказать.
На вкладке главная мы можем просмотреть самые лучшие предложение
интернет-каталога, новейшие коллекции одежды, а также есть возможность
напрямую позвонить владельцу интернет каталога для получения больших
ответов по вопросам сайта. Кнопка звонок реализуется с помощью фунции tel
(листинг 2.2).
Листинг 2.2. Реализация конопки звонка
<div class=”layer-slick1 animated visible-false” data-appear=”sliddeInUp” data-
delay=”1600”>
<a href=tel:MTC +7(978) 999 9999 class=”fkex-c-m stext-101 c10 size-101 bg1 bort1
hov-btn1 p-lr-15 trans-04”>
Заказать
</a>
</div>
Основным элементом интернет-каталога являются товары, которые были
созданный на странице файла index.html. Приведем в пример создание товара
«рубашка» ценной 500 рублей (листинг 2.3).
Листинг 2.3. Фрагмент файла index.html
18
<div class="block2-txt
flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="#" class="stext-104 cl4 hov-cl1 trans-04 js-name-
b2 p-b-6">
Рубашка
</a>
<span class="stext-105 cl3">
500 рублей
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative
js-addwish-b2">
<img class="icon-heart1 dis-block trans-04"
src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l"
</a>
</div>
</div>
</div>
</div>
C помощью функции «<a href="#" class="stext-104 cl4 hov-cl1 trans-04 js-

name-b2 p-b-6">» задаем название товара, в данном случае «рубака». За цену
товара отвечает функция «<span class="stext-105 cl3">». А для того чтобы доваить
картинку нашей рубашки используем функцию «<img class="icon-heart1 dis-block
trans-04" src="images/icons/icon-heart-01.png" alt="ICON">», где «images/icons/icon-
heart-01.png» - имя файла картинки.
Также данный интернет-каталог имеет функция онлайн заказа товара
(листинг 2.4). В данном разделе нам нужно всего лишь ввести свою почту и
выбрать товар. Дальнейшие инструкции по оплате и получению товара поступят
на указанную почту.
Листинг 2.4. Фрагмент файла mail.html
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';
$name = $_POST['product'];
19
$phone = $_POST['msg'];
$email = $_POST['email'];
//$mail->SMTPDebug = 3; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP

$mail->Host = 'smtp.mail.ru';
//
Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'Crimeadedmoroz@mail.ru'; // Ваш логин от почты с которой будут
отправляться письма
$mail->Password = 'Blbyf[eq12'; // Ваш пароль от почты с которой будут отправляться письма
$mail->SMTPSecure = 'ssl'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP porR to connect to / этот порт может отличаться у других провайдеров
$mail->setFrom('Crimeadedmoroz@mail.ru'); // от кого будет уходить письмо?
$mail->addAddress('alievmustafa23@gmail.com'); // Кому будет уходить письмо
//$mail->addAddress('ellen@example.com'); // Name is optional
//$mail->addReplyTo('info@example.com', 'Information');
//$mail->addCC('cc@example.com');
//$mail->addBCC('bcc@example.com');
//$mail->addAttachment('/var/tmp/file.tar.gz'); // Add attachments
//$mail->addAttachment('/tmp/image.jpg', 'new.jpg'); // Optional name
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Заявка с тестового сайта';

$mail->Body = '' .$name . ' оставил заявку, его телефон ' .$phone. '<br>Почта этого
пользователя: ' .$email;
$mail->AltBody = '';
if(!$mail->send()) {
echo 'Error';
} else {
header('location: thank-you.html');
20
}
?>
Вывод по второй главе

Во второй главе курсового проекта был рассмотрен процесс разработки
интернет-каталога школьных товаров. Описан интерфейс каталога, подробно
описаны этапы разработка сайта, а также был выполнен запуск и сопровождение
данного сайта. В результате выполнения всех вышеописанных действий был
разработан интернет-каталог школьных товаров.
21
ЗАКЛЮЧЕНИЕ
В ходе выполнения курсового проекта была разработан интернет-каталог
«Товары для школы», помогающая пользователям в поиске школьных товаров.
В ходе написание курсового проекта был проведен общий анализ и
характеристика веб-сайтов. В ходе которого были рассмотрены основные виды
веб-сайтов, а также для каждого вида было написано краткое описание для
понимания различий, а также плюсов и минусов каждого вида сайта. Был
выполнен обзор популярных языков программирования для создания интернет-
каталогов. Для разработки интернет-каталога «Товары для школы» были
использованы язык гипертекстовой разметки HTML5, язык каскадных стилей
CSS3 и язык программирования JavaScript, в связи с тем, что данный набор
инструментов является наиболее используемой и популярной для разработки
WEB сайтов. Было выполнено подробное описание WEB продукта, а также были
описаны особенности использования интернет-каталога «Товары для школы». В
заключении первой главы были описаны основные технологии, используемые в
разработке данного сайта.
На втором этапе исполнения плана было представлено использования
ресурсы исследования, выполнены главные методы логики Интернет-ресурса с
детальным представление листингов программный код, изобретен доступный
также практичный обще пользовательский сокет интернет-плана, что был
разобран согласно фрагментам, также понятием ко любому блоку, что отражается
22
пользователю, html-разметка с представление исполнения также взаимодействием

со JavaScript кодом. При выполнении проекта были проанализированы понятия и
основы проектирования веб сайта; разработаны основные функции интерне-
каталога «Товары для школы».
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Для чего нужен интернет каталог [Электронный ресурс]. – Режим
доступа:URL:https://proactive.lv/index.php?
route=simple_blog/article/view&simple_blog_article_id=11 (дата обращения
25.10.2019).
2. В чем отличие интернет магазина от интернета каталога
[Электронный ресурс]. – Режим доступа: URL: https://asterica.ru/blog/v-chem-
otlichie-internet-magazin (дата обращения 25.10.2019).
3. Общая характеристика сайтов [Электронный ресурс]. – Режим
доступа: https://semantica.in/blog/chto-takoe-veb-sajt.html.
4. Классификация веб-сайтов [Электронный ресурс]. – Режим доступа:
https://seoklub.ru/tipy_saitov.html.
5. Этапы разработки сайтов [Электронный ресурс]. – Режим доступа:
https://impulse-design.com.ua/etapy-razrabotki-sajta.html.
6. Visual studio code [Электронный ресурс]. – Режим доступа:
https://habr.com/ru/company/microsoft/blog/262523/.
7. MDN web docs [Электронный ресурс]. – Режим доступа: URL:
https://developer.mozilla.org/ru/docs/Web/HTML
8. What is CSS? [Электронный ресурс]. Режим доступа:URL:
https://www.tutorialspoint.com/css/what_is_css.htm (дата обращения 15.11.2019).
23
9. Негрино Т., JavaScript для начинающих / Негрино, Том. - М.: Огни,

2013. - 544 c.
10. Использование Avocode для верстки сайтов [Электронный ресурс]. –
Режим доступа:URL: https://habr.com/ru/post/458378/ (дата обращения 15.11.2019).
11. Sublime Text 3 – удобный редактор кода для веб-разработчиков
[Электронный ресурс]. –Режим доступа:URL: https://ru.wh-db.com/article/sublime-
text-3-luchshiy-redactor-coda-dla-razrabotchikov/ (дата обращения 15.11.2019).
12. Виртуальный хостинг Beget [Электронный ресурс]. – Режим
доступа:URL: https://beget.com/ru
13. Что такое FTP [Электронный ресурс]. – Режим доступа:URL:
https://filezilla.ru/article/chto-takoe-ftp
24
ПРИЛОЖЕНИЕ
Листинг кода index.html
<!DOCTYPE html><html><head><title>Главная</title><meta charset="UTF-
8"><meta name="viewport" content="width=device-width, initial-scale=1"><link
rel="icon" type="image/png" href="images/icons/favicon.png"/><link rel="stylesheet"
type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"><link rel="stylesheet"
type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"><link
rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-
font.min.css"><link rel="stylesheet" type="text/css" href="fonts/linearicons-
v1.0.0/icon-font.min.css"><link rel="stylesheet" type="text/css"
href="vendor/animate/animate.css"><link rel="stylesheet" type="text/css"
href="vendor/css-hamburgers/hamburgers.min.css"><link rel="stylesheet"
type="text/css" href="vendor/animsition/css/animsition.min.css"><link rel="stylesheet"
type="text/css" href="vendor/select2/select2.min.css"><link rel="stylesheet"
type="text/css" href="vendor/daterangepicker/daterangepicker.css"><link
rel="stylesheet" type="text/css" href="vendor/slick/slick.css"><link rel="stylesheet"
type="text/css" href="vendor/MagnificPopup/magnific-popup.css"><link
rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-
scrollbar.css"><link rel="stylesheet" type="text/css" href="css/util.css"><link
rel="stylesheet" type="text/css" href="css/main.css"></head><body
class="animsition"> <header><div class="container-menu-desktop"><div class="wrap-
menu-desktop"> <nav class="limiter-menu-desktop container"><div class="menu-
desktop"><ul class="main-menu"><li> <a href="index.html">Главная</a></li><li> <a
25
href="product.html">Магазин</a></li><li> <a
href="contact.html">Заказать</a></li></ul></div> </nav></div></div><div
class="modal-search-header flex-c-m trans-04 js-hide-modal-search"><div
class="container-search-header"> <button class="flex-c-m btn-hide-modal-search trans-
04 js-hide-modal-search"> <img src="images/icons/icon-close2.png" alt="CLOSE">
</button><form class="wrap-search-header flex-w p-l-15"> <button class="flex-c-m
trans-04"> <i class="zmdi zmdi-search"></i> </button> <input class="plh3"
type="text" name="search" placeholder="Search..."></form></div></div>
</header><div class="wrap-header-cart js-panel-cart"><div class="s-full js-hide-
cart"></div><div class="header-cart flex-col-l p-l-65 p-r-25"><div class="header-cart-
title flex-w flex-sb-m p-b-8"> <span class="mtext-103 cl2"> Your Cart </span><div
class="fs-35 lh-10 cl2 p-lr-5 pointer hov-cl1 trans-04 js-hide-cart"> <i class="zmdi
zmdi-close"></i></div></div><div class="header-cart-content flex-w js-pscroll"><ul
class="header-cart-wrapitem w-full"><li class="header-cart-item flex-w flex-t m-b-
12"><div class="header-cart-item-img"> <img src="images/item-cart-01.jpg"
alt="IMG"></div><div class="header-cart-item-txt p-t-8"> <a href="#" class="header-
cart-item-name m-b-18 hov-cl1 trans-04"> White Shirt Pleat </a><span class="header-
cart-item-info"> 1 x $19.00 </span></div></li><li class="header-cart-item flex-w flex-t
m-b-12"><div class="header-cart-item-img"> <img src="images/item-cart-02.jpg"
cart-item-name m-b-18 hov-cl1 trans-04"> Converse All Star </a><span class="header-
cart-item-info"> 1 x $39.00 </span></div></li><li class="header-cart-item flex-w flex-t
m-b-12"><div class="header-cart-item-img"> <img src="images/item-cart-03.jpg"
cart-item-name m-b-18 hov-cl1 trans-04"> Nixon Porter Leather </a><span
class="header-cart-item-info"> 1 x $17.00 </span></div></li></ul><div class="w-
full"><div class="header-cart-total w-full p-tb-40"> Total: $75.00</div><div
class="header-cart-buttons flex-w w-full"> <a href="shoping-cart.html" class="flex-c-m
stext-101 cl0 size-107 bg3 bor2 hov-btn3 p-lr-15 trans-04 m-r-8 m-b-10"> View Cart
</a><a href="shoping-cart.html" class="flex-c-m stext-101 cl0 size-107 bg3 bor2 hov-
26
btn3 p-lr-15 trans-04 m-b-10"> Check Out </a></div></div></div></div></div>

<section class="section-slide"><div class="wrap-slick1"><div class="slick1"><div
class="item-slick1" style="background-image: url(images/slide-01.jpg);"><div
class="container h-full"><div class="flex-col-l-m h-full p-t-100 p-b-30 respon5"><div
class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
<span class="ltext-101 cl2 respon2"> Женская школьная коллекция
</span></div><div class="layer-slick1 animated visible-false" data-appear="fadeInUp"
data-delay="800"><h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1"> Новый
сезон</h2></div><div class="layer-slick1 animated visible-false" data-
appear="zoomIn" data-delay="1600"> <a href="tel:МТС +7(978) 999 9999"
class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">
Позвонить </a></div></div></div></div><div class="item-slick1"
style="background-image: url(images/slide-02.jpg);"><div class="container h-
full"><div class="flex-col-l-m h-full p-t-100 p-b-30 respon5"><div class="layer-slick1
animated visible-false" data-appear="rollIn" data-delay="0"> <span class="ltext-101
cl2 respon2"> Мужская школьная коллекция </span></div><div class="layer-slick1
animated visible-false" data-appear="lightSpeedIn" data-delay="800"><h2 class="ltext-
201 cl2 p-t-19 p-b-43 respon1"> Новый сезон</h2></div><div class="layer-slick1
animated visible-false" data-appear="slideInUp" data-delay="1600"> <a href="tel:МТС
+7(978) 999 9999" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15
trans-04"> Заказать </a></div></div></div></div></div></div> </section><div
class="sec-banner bg0 p-t-80 p-b-50"><div class="container"><div class="row"><div
class="col-md-6 col-xl-4 p-b-30 m-lr-auto"><div class="block1 wrap-pic-w"> <img
src="images/banner-01.jpg" alt="IMG-BANNER"><a href="product.html"
class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3"><div
class="block1-txt-child1 flex-col-l"> <span class="block1-name ltext-102 trans-04 p-b-
8"> Девочки </span><span class="block1-info stext-102 trans-04">
</span></div><div class="block1-txt-child2 p-b-4 trans-05"><div class="block1-link
stext-101 cl0 trans-09"> Смотреть</div></div> </a></div></div><div class="col-md-
6 col-xl-4 p-b-30 m-lr-auto"><div class="block1 wrap-pic-w"> <img
27

8"> Мальчики </span> <span class="block1-info stext-102 trans-04">
stext-101 cl0 trans-09"> Смотреть</div></div> </a></div></div><div class="col-md-
6 col-xl-4 p-b-30 m-lr-auto"><div class="block1 wrap-pic-w"> <img
8"> Аксессуары </span><span class="block1-info stext-102 trans-04">
stext-101 cl0 trans-09"> Смотреть</div></div> </a></div></div></div></div></div>
<section class="bg0 p-t-23 p-b-140"><div class="container"><div class="p-b-10"><h3
class="ltext-103 cl5"> Товары</h3></div><div class="flex-w flex-sb-m p-b-52"><div
class="flex-w flex-l-m filter-tope-group m-tb-10"> <button class="stext-106 cl6 hov1
bor3 trans-04 m-r-32 m-tb-5 how-active1" data-filter="*"> Все товары
</button><button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-
filter=".women"> Для девочек </button><button class="stext-106 cl6 hov1 bor3 trans-
04 m-r-32 m-tb-5" data-filter=".men"> Для мальчиков </button> <button class="stext-
106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".watches"> Ручки </button>
<button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".shoes">
Тетради </button></div></div><div class="row isotope-grid"><div class="col-sm-6
col-md-4 col-lg-3 p-b-35 isotope-item women"><div class="block2"><div
class="block2-pic hov-img0"> <img src="images/product-01.jpg" alt="IMG-
PRODUCT"></div><div class="block2-txt flex-w flex-t p-t-14"><div class="block2-
txt-child1 flex-col-l "> <a href="#" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-
b-6"> Футболка </a><span class="stext-105 cl3"> 500 рублей. </span></div><div
class="block2-txt-child2 flex-r p-t-3"> <a href="#" class="btn-addwish-b2 dis-block
pos-relative js-addwish-b2"> <img class="icon-heart1 dis-block trans-04"
28
src="images/icons/icon-heart-01.png" alt="ICON"> <img class="icon-heart2 dis-block

trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a></div></div></div></div><div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-
item women"><div class="block2"><div class="block2-pic hov-img0"> <img
src="images/product-02.jpg" alt="IMG-PRODUCT"></div><div class="block2-txt
flex-w flex-t p-t-14"><div class="block2-txt-child1 flex-col-l "> <a href="#"
class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Рубашка </a><span
class="stext-105 cl3"> 500 рублей </span></div><div class="block2-txt-child2 flex-r
p-t-3"> <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png"
alt="ICON"> <img class="icon-heart2 dis-block trans-04 ab-t-l"
item men"><div class="block2"><div class="block2-pic hov-img0"> <img
class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Пальто </a><span
29

class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Пиджак </a><span
class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Футболка </a><span
30

class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Ремень </a><span
31

32

item watches"><div class="block2"><div class="block2-pic hov-img0"> <img
src="images/prod12.jpg" alt="IMG-PRODUCT"></div><div class="block2-txt flex-w
flex-t p-t-14"><div class="block2-txt-child1 flex-col-l "> <a href="#" class="stext-104
cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Ручка </a><span class="stext-105 cl3"> 50
рублей </span></div><div class="block2-txt-child2 flex-r p-t-3"> <a href="#"
class="btn-addwish-b2 dis-block pos-relative js-addwish-b2"> <img class="icon-heart1
dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON"> <img
class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png"
alt="ICON"> </a></div></div></div></div><div class="col-sm-6 col-md-4 col-lg-3 p-
b-35 isotope-item watches"><div class="block2"><div class="block2-pic hov-img0">
<img src="images/prod13.jpg" alt="IMG-PRODUCT"></div><div class="block2-txt
class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Ручка </a><span
class="stext-105 cl3"> 55 рублей </span></div><div class="block2-txt-child2 flex-r p-
t-3"> <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2"> <img
class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png"
item watches"><div class="block2"><div class="block2-pic hov-img0"> <img
cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Ручка </a><span class="stext-105 cl3"> 100
рублей </span></div><div class="block2-txt-child2 flex-r p-t-3"> <a href="#"
class="btn-addwish-b2 dis-block pos-relative js-addwish-b2"> <img class="icon-heart1
dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON"> <img
class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png"
33
alt="ICON"> </a></div></div></div></div><div class="col-sm-6 col-md-4 col-lg-3 p-

b-35 isotope-item shoes"><div class="block2"><div class="block2-pic hov-img0">
<img src="images/prod111.jpg" alt="IMG-PRODUCT"></div><div class="block2-txt
class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Обычная тетрать </a><span
item shoes"><div class="block2"><div class="block2-pic hov-img0"> <img
cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Тетрать по физике </a><span class="stext-
105 cl3"> 70 рублей </span></div><div class="block2-txt-child2 flex-r p-t-3"> <a
href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2"> <img
item shoes"><div class="block2"><div class="block2-pic hov-img0"> <img
cl4 hov-cl1 trans-04 js-name-b2 p-b-6"> Тетрадь по литературе </a><span
34
</a></div></div></div></div></div></div> </section> <footer class="bg3 p-t-75 p-b-

32"> </footer><div class="btn-back-to-top" id="myBtn"> <span class="symbol-btn-
back-to-top"> <i class="zmdi zmdi-chevron-up"></i> </span></div><div class="wrap-
modal1 js-modal1 p-t-60 p-b-20"><div class="overlay-modal1 js-hide-
modal1"></div><div class="container"><div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-
pos3-parent"> <button class="how-pos3 hov3 trans-04 js-hide-modal1"> <img
src="images/icons/icon-close.png" alt="CLOSE"> </button><div class="row"><div
class="col-md-6 col-lg-7 p-b-30"><div class="p-l-25 p-r-30 p-lr-0-lg"><div
class="wrap-slick3 flex-sb flex-w"><div class="wrap-slick3-dots"></div><div
class="wrap-slick3-arrows flex-sb-m flex-w"></div><div class="slick3 gallery-
lb"><div class="item-slick3" data-thumb="images/product-detail-01.jpg"><div
class="wrap-pic-w pos-relative"> <img src="images/product-detail-01.jpg" alt="IMG-
PRODUCT"><a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3
trans-04" href="images/product-detail-01.jpg"> <i class="fa fa-expand"></i>
</a></div></div><div class="item-slick3" data-thumb="images/product-detail-
02.jpg"><div class="wrap-pic-w pos-relative"> <img src="images/product-detail-
02.jpg" alt="IMG-PRODUCT"><a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10
bg0 hov-btn3 trans-04" href="images/product-detail-02.jpg"> <i class="fa fa-
expand"></i> </a></div></div><div class="item-slick3" data-thumb="images/product-
detail-03.jpg"><div class="wrap-pic-w pos-relative"> <img src="images/product-detail-
03.jpg" alt="IMG-PRODUCT"><a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10
bg0 hov-btn3 trans-04" href="images/product-detail-03.jpg"> <i class="fa fa-
expand"></i> </a></div></div></div></div></div></div><div class="col-md-6 col-lg-
5 p-b-30"><div class="p-r-50 p-t-5 p-lr-0-lg"><h4 class="mtext-105 cl2 js-name-detail
p-b-14"> Lightweight Jacket</h4><span class="mtext-106 cl2"> $58.79 </span><p
class="stext-102 cl3 p-t-23"> Nulla eget sem vitae eros pharetra viverra. Nam vitae
luctus ligula. Mauris consequat ornare feugiat.</p><div class="p-t-33"><div
class="flex-w flex-r-m p-b-10"><div class="size-203 flex-c-m respon6">
Size</div><div class="size-204 respon6-next"><div class="rs1-select2 bor8 bg0">
<select class="js-select2" name="time"><option>Choose an
35
option</option><option>Size S</option><option>Size M</option><option>Size

L</option><option>Size XL</option> </select><div
class="dropDownSelect2"></div></div></div></div><div class="flex-w flex-r-m p-b-
10"><div class="size-203 flex-c-m respon6"> Color</div><div class="size-204
respon6-next"><div class="rs1-select2 bor8 bg0"> <select class="js-select2"
name="time"><option>Choose an
option</option><option>Red</option><option>Blue</option><option>White</option>
<option>Grey</option> </select><div
class="dropDownSelect2"></div></div></div></div><div class="flex-w flex-r-m p-b-
10"><div class="size-204 flex-w flex-m respon6-next"><div class="wrap-num-product
flex-w m-r-20 m-tb-10"><div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-
c-m"> <i class="fs-16 zmdi zmdi-minus"></i></div><input class="mtext-104 cl3 txt-
center num-product" type="number" name="num-product" value="1"><div class="btn-
num-product-up cl8 hov-btn3 trans-04 flex-c-m"> <i class="fs-16 zmdi zmdi-
plus"></i></div></div><button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-
btn1 p-lr-15 trans-04 js-addcart-detail"> Add to cart </button></div></div></div><div
class="flex-w flex-m p-l-100 p-t-40 respon7"><div class="flex-m bor9 p-r-10 m-r-11">
<a href="#" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 js-addwish-detail
tooltip100" data-tooltip="Add to Wishlist"> <i class="zmdi zmdi-favorite"></i>
</a></div><a href="#" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8
tooltip100" data-tooltip="Facebook"> <i class="fa fa-facebook"></i> </a><a href="#"
class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100" data-
tooltip="Twitter"> <i class="fa fa-twitter"></i> </a><a href="#" class="fs-14 cl3 hov-
cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100" data-tooltip="Google Plus"> <i
class="fa fa-google-plus"></i> </a></div></div></div></div></div></div></div>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script> <script
src="vendor/animsition/js/animsition.min.js"></script> <script
src="vendor/bootstrap/js/popper.js"></script> <script
src="vendor/bootstrap/js/bootstrap.min.js"></script> <script
src="vendor/select2/select2.min.js"></script> <script>$(".js-select2").each(function(){$
36
(this).select2({minimumResultsForSearch:20,dropdownParent:$
(this).next('.dropDownSelect2')});})</script> <script
src="vendor/daterangepicker/moment.min.js"></script> <script
src="vendor/daterangepicker/daterangepicker.js"></script> <script
src="vendor/slick/slick.min.js"></script> <script src="js/slick-custom.js"></script>
<script src="vendor/parallax100/parallax100.js"></script> <script>$
('.parallax100').parallax100();</script> <script
src="vendor/MagnificPopup/jquery.magnific-popup.min.js"></script> <script>$
('.gallery-lb').each(function(){$(this).magnificPopup({delegate:'a',type:'image',gallery:
{enabled:true},mainClass:'mfp-fade'});});</script> <script
src="vendor/isotope/isotope.pkgd.min.js"></script> <script
src="vendor/sweetalert/sweetalert.min.js"></script> <script>$('.js-addwish-
b2').on('click',function(e){e.preventDefault();});$('.js-addwish-b2').each(function(){var
nameProduct=$(this).parent().parent().find('.js-name-b2').html();$
(this).on('click',function(){swal(nameProduct,"is added to wishlist !","success");$
(this).addClass('js-addedwish-b2');$(this).off('click');});});$('.js-addwish-
detail').each(function(){var nameProduct=$(this).parent().parent().parent().find('.js-
name-detail').html();$(this).on('click',function(){swal(nameProduct,"is added to wishlist
!","success");$(this).addClass('js-addedwish-detail');$(this).off('click');});});$('.js-
addcart-detail').each(function(){var nameProduct=$
(this).parent().parent().parent().parent().find('.js-name-detail').html();$
(this).on('click',function(){swal(nameProduct,"is added to
cart !","success");});});</script> <script src="vendor/perfect-scrollbar/perfect-
scrollbar.min.js"></script> <script>$('.js-pscroll').each(function(){$
(this).css('position','relative');$(this).css('overflow','hidden');var ps=new
PerfectScrollbar(this,
{wheelSpeed:1,scrollingThreshold:1000,wheelPropagation:false,});$
(window).on('resize',function(){ps.update();})});</script> <script
src="js/main.js"></script> </body></html>

Курсовая Алиев

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Курсовая Алиев

Загружено:

Авторское право:

Доступные форматы

МИНИСТЕРСТВО ОБРАЗОВАНИЯ, НАУКИ И МОЛОДЕЖИ РЕСПУБЛИКИ КРЫМ

ГБОУВО РК «КРЫМСКИЙ ИНЖЕНЕРНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ

Факультет экономики, менеджмента и информационных технологий

Направление подготовки 09.03.03 Прикладная информатика

«Разработка интернет-каталога товаров для школы»

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ СОЗДАНИЯ WEB-

1.1 Общая характеристика интернет-каталогов, преимущества и отличия.........5

1.2 Описание популярных языков веб-разработки.................................................8

1.3 Программное обеспечение для разработки Web-приложения......................10

Выводы по первой главе...............................................................................................12

ГЛАВА II РАЗРАБОТКА ИНТЕРНЕТ-КАТАЛОГА ТОВАРОВ ДЛЯ ШКОЛЫ...13

2.1 Структура сайта.................................................................................................13

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ....................................................22

Структура курсового проекта. Курсовой проект состоит из введения, двух

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ СОЗДАНИЯ

сайте, справочный электронный CD-каталог работает значительно быстрее и

страницу с подробными характеристиками. Есть кнопка «купить» или «заказать»,

9. Сравнение выбранных позиций, формирование для пользователя

1.2 Описание популярных языков веб-разработки

Во встроенном методе CSS хранится непосредственно в атрибуте стиля

что-то с нуля, так как существуют большое количество готовых решение и

Распространяется бесплатно, разрабатывается как программное обеспечение с

Выводы по первой главе

ГЛАВА II РАЗРАБОТКА ИНТЕРНЕТ-КАТАЛОГА ТОВАРОВ ДЛЯ

Рис.2.1. Главные ссылки сайта

Спустившись вниз по главной странице, пользователь имеет возможность

Рис.2.2. Кнопка «Заказать»

Рис.2.3. Баннер каталог товаров

2.3 Разработка проекта

<form class="wrap-search-header flex-w p-l-15">

<div class="header-cart flex-col-l p-l-65 p-r-25">

<div class="fs-35 lh-10 cl2 p-lr-5 pointer hov-cl1 trans-04 js-hide-cart">

<div class="header-cart-content flex-w js-pscroll">

<div class="header-cart-item-txt p-t-8">

<a href="#" class="header-cart-item-name m-b-18

<li class="header-cart-item flex-w flex-t m-b-12">

На главной странице сайта мы видим 3 раздела, такие как:

C помощью функции «<a href="#" class="stext-104 cl4 hov-cl1 trans-04 js-

//$mail->SMTPDebug = 3; // Enable verbose debug output

$mail->isSMTP(); // Set mailer to use SMTP

$mail->Subject = 'Заявка с тестового сайта';

Вывод по второй главе

пользователю, html-разметка с представление исполнения также взаимодействием

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

9. Негрино Т., JavaScript для начинающих / Негрино, Том. - М.: Огни,

btn3 p-lr-15 trans-04 m-b-10"> Check Out </a></div></div></div></div></div>

src="images/banner-02.jpg" alt="IMG-BANNER"><a href="product.html"

src="images/icons/icon-heart-01.png" alt="ICON"> <img class="icon-heart2 dis-block

alt="ICON"> <img class="icon-heart2 dis-block trans-04 ab-t-l"

alt="ICON"> <img class="icon-heart2 dis-block trans-04 ab-t-l"

alt="ICON"> <img class="icon-heart2 dis-block trans-04 ab-t-l"

alt="ICON"> <img class="icon-heart2 dis-block trans-04 ab-t-l"

alt="ICON"> </a></div></div></div></div><div class="col-sm-6 col-md-4 col-lg-3 p-

</a></div></div></div></div></div></div> </section> <footer class="bg3 p-t-75 p-b-

option</option><option>Size S</option><option>Size M</option><option>Size

Вам также может понравиться