1Смирнов_курсоваяоснов. Разработка webсайта
 Скачать 2.14 Mb.
|
|
Содержание 2.9.1. Введение 2.9.1.1. Область применения 2.9.1.2. Краткое описание возможностей 2.9.1.3. Уровень подготовки пользователя 2.9.1.4. Перечень эксплуатационной документации 2.9.2. НАЗНАЧЕНИЕ И УСЛОВИЯ ПРИМЕНЕНИЯ 2.9.2.1. Виды деятельности, функции 2.9.2.2. Программные и аппаратные требования к системе 2.9.3. ПОДГОТОВКА К РАБОТЕ 2.9.3.1. Состав дистрибутива 2.9.3.2. Запуск системы 2.9.3.3. Проверка работоспособности системы 2.9.4. ОПИСАНИЕ ОПЕРАЦИЙ 2.9.4.1. Наименование операции 2.9.4.2. Условия выполнения операции 2.9.4.3. Подготовительные действия 2.9.4.4. Основные действия 2.9.4.5. Заключительные действия 2.9.4.6. Ресурсы, расходуемые на операцию 2.9.5. АВАРИЙНЫЕ СИТУАЦИИ. ВОССТАНОВЛЕНИЕ БАЗЫ ДАННЫХ 2.9.6. РЕКОМЕНДАЦИИ ПО ОСВОЕНИЮ Курсовая работа Изм. Лист № докум Подпись Дата Разраб. Смирнов В.С. Р УКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Лит. Лист Листов Провер. Кузнецова Г.Л. 36 4 Реценз. ГПОУ МПТ 09.02.04 гр.ИС-17 Н. Контр. Утверд. 2.9.1. Введение 2.9.1.1. Область применения Сайт «WorlackGame» предназначена для предоставления информации об иг- ре и продажи игр, в части исполнения следующих процессов: • поиск игр по жанрам; • подробная информация об игре; • осуществление продажи. Сайт «WorlackGame» деятельность будет осуществляться на территории Российской Федерации, СНГ, Украины , задействованных в исполнении вышепере- численных процессов. 2.9.1.2. Краткое описание возможностей Целью данного проекта является разработка электронного представительства сайта по продаже компьютерных игр с последующим размещением в сети Интер- нет. Перечень автоматизированных функций: • ведение списка игр; • создание блоков для игр. Ведение списка игр представляет собой набор следующих функций: • добавление игр в список; • изменение информации об игре; • отображение информации в списке. Создание блоков для игр представляет собой набор следующих функций: • уменьшение кода сайта; • упрощение ввода информации. 2.9.1.3. Уровень подготовки пользователя Пользователь должен обладать умениями пользования интернетом. 2.9.1.4. Перечень эксплуатационной документации Соглашение. Ознакомиться можно на сайте. 2.9.2. НАЗНАЧЕНИЕ И УСЛОВИЯ ПРИМЕНЕНИЯ 2.9.2.1. Виды деятельности, функции Целью данного проекта является разработка электронного представительства сайта по продаже компьютерных игр с последующим размещением в сети Интер- нет. Перечень автоматизированных функций: • ведение списка игр; • создание блоков для игр. Ведение списка игр представляет собой набор следующих функций: • добавление игр в список; • изменение информации об игре; • отображение информации в списке. Создание блоков для игр представляет собой набор следующих функций: • уменьшение кода сайта; • упрощение ввода информации. 2.9.2.2. Программные и аппаратные требования к системе Программные требования: Р УКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Лист 2 Изм. Лист № докум Подпись Дата • PHP 7.3 — «Инструменты для создания персональных веб-страниц») — скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. • MySQL 5.7 — это реляционная база данных (СУБД). Реляционная — значит внутри неё есть данные, которые связаны между собой, и эту связь можно представить в виде таблиц. Аппаратные требования: • Серверная система Supermicro SYS−5039MS−H12TRF. • Процессор Intel Xeon E3-1270 V6. • Два диска SSD Intel® D3-4510 Series на 480 GB. • Оперативная память DDR4 16GB Kingston две плашки. • RAID контроллер ASUS PIKE II 3108-8I/240PD/2G. • Сеть с пропускной способностью 100 Мб/с. 2.9.3. ПОДГОТОВКА К РАБОТЕ 2.9.3.1. Состав дистрибутива В состав дистрибутива сайта «WorlackGames» входит: • СУБД PhpMyAdmin; • страницы сайта. 2.9.3.2. Запуск системы Для того, чтобы зайти на сайта «WorlackGames» откройте браузер и адресной строке напишите https://woralckgames.com 2.9.3.3. Проверка работоспособности системы Сайт работоспособен, если в результате действий пользователя, изложенных в п.п.2.9.3.2, на экране монитора отобразилось главное страница сайта. 2.9.4. ОПИСАНИЕ ОПЕРАЦИЙ 2.9.4.1. Наименование операции Просмотр справочной информации. 2.9.4.2. Условия выполнения операции Сайт запущен, успешно функционирует, не выполняет никаких операций. 2.9.4.3. Подготовительные действия Отсутствуют. 2.9.4.4. Основные действия Нажать на панель навигации "Соглашение". Откроется страница "Соглаше- ние", содержащее разделы со справкой. 2.9.4.5. Заключительные действия После завершения работы со справочной информацией, перейти на главную страницу. 2.9.4.6. Ресурсы, расходуемые на операцию Отсутствуют. 2.9.5. АВАРИЙНЫЕ СИТУАЦИИ. ВОССТАНОВЛЕНИЕ БАЗЫ ДАННЫХ При критических ошибках сайт будет закрыт на технические работы, во вре- мя технических работ сайт прекратит свою работу для пользователей; 2.9.6. РЕКОМЕНДАЦИИ ПО ОСВОЕНИЮ Для успешного освоения приложения сайта «WorlackGames» необходимо иметь навыки работы с ПК и изучить следующее: • Раздел «Соглашения» документа. Р УКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Лист 3 Изм. Лист № докум Подпись Дата • Раздел «Описание автоматизируемых функций. • Настоящее «Руководство пользователя». Р УКОВОДСТВО ПОЛЬЗОВАТЕЛЯ Лист 4 Изм. Лист № докум Подпись Дата ЗАКЛЮЧЕНИЕ Рассмотренные вопросы в курсовой работе работе являются актуальными в области разработки и создания современного Web-сайта. В процессе выполнения работы были решены следующие задачи: 1. Изучить теоретические аспекты создания Web-сайтов. 2. Провести анализ существующего программного обеспечения для создания Web сайтов. 3. Рассмотреть языки программирования, используемые в Web технологиях. 4. Провести анализ средств создания баз данных для Web-сайтов. 5. Определить структуру и пользовательский интерфейс сайта. 6. Создать базу данных для сайта. 7. Провести анализ работоспособности созданного сайта. В результате изучения данного направления был выбран язык программиро- вания php, разработаны таблицы стилей для дизайна сайта, создан современный Web-сайт для магазина «WorlackGames», сайт наполнен контентом. Разработанный сайт имеет ряд отличительных особенностей: − современный дизайн; − кроссбраузерность разработанного сайта; Исходя из материалов курсовой работы можно уверенно сказать, что постав- ленные задачи, сформулированные во введении, полностью решены. Цель курсо- вой работы достигнута. ЛИТЕРАТУРА 1. Вейл, Эстель HTML5. Разработка приложений для мобильных устройств / Эстель Вейл. - М.: Питер, 2019. - 705 c. 2. Гончаров, А. Web-дизайн / А. Гончаров. - Москва: ИЛ, 2016. - 320 c. 3. Дронов, В. JavaScript и AJAX в Web-дизайне / Владимир Дронов. - Москва: Высшая школа, 2016. - 736 c. 4. Дронов, В. PHP 5/6, MySQL 5/6 и Dreamweaver CS4. Разработка интер- активных Web-сайтов / В.А. Дронов. - М.: БХВ-Петербург, 2016. - 820 c. 5. Лоусон, Б. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. - М.: Питер, 2019. - 304 c 6. Робин Н. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Н. Робин – М.: Питер, 2019 г. – 816 с. ПРИЛОЖЕНИЕ Приложение 1. Слайдер HTML и код CSS код .slider{ max-width: 90%; padding-top: 10px; position: relative; margin: auto; height: 600px; margin-bottom: 15px; } /* Картинка мастабируется по отношению к родительскому элементу */ .slider .item img { object-fit: cover; width: 100%; height: 600px; border: none !important; box-shadow: none !important; } /* Кнопки вперед и назад */ .slider .prev, .slider .next { cursor: pointer; position: absolute; top: 50%; width: auto ; margin-top: -22px; padding: 16px; color: #000; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .slider .next { right: 0; border-radius: 3px 0 0 3px; } /* При наведении на кнопки добавляем фон кнопок */ .slider .prev:hover, .slider .next:hover { background-color: rgba(133, 131, 131, 0.753); } /* Заголовок слайда */ .slideText { position: absolute; color: #fff; font-size: 35px; /* Выравнивание текста по горизонтали и по вертикали*/ left: 50%; bottom: 0; text-align: center; transform: translate(-50%, -50%); /* Тень*/ text-shadow: 1px 1px 1px #000, 0 0 1em #000; } .slider-dots_item{ cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #ddd; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .slider-dots_item:hover { background-color: #aaa; } /* Анимация слайдов */ .slider .item { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } /*lenta*/ #ticker{ top: 0; left: 0; right: 0; width: 98%; margin-left: 1%; height: 335px; overflow: hidden; } #ticker li{ height: 335px; } JavaScript код /* Индекс слайда по умолчанию */ var slideIndex = 1; showSlides(slideIndex); /* Функция увеличивает индекс на 1, показывает следующй слайд*/ function plusSlide() { showSlides(slideIndex += 1); } /* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/ function minusSlide() { showSlides(slideIndex -= 1); } /* Устанавливает текущий слайд */ function currentSlide(n) { showSlides(slideIndex = n); } /* Основная функция слайдера */ function showSlides(n) { var i; var slides = document.getElementsByClassName("item"); var dots = document.getElementsByClassName("slider-dots_item"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } Приложение 2. Основной блок с играми HTML и PHP код
% руб CSS код .block_kartin { position: absolute; width: 40%; height: 346.968px; z-index: 1; } .block_osoben { position: relative; margin-left: 41%; width: 59%; height: 346.968px; } .block_opisan { position: relative; width: 100%; height: 160.032px } .block_sum { width: 100%; height: 40px; } .kartin { width: 90%; height: 320px; float: left; padding-left: 5%; padding-top: 13.484px; padding-bottom: 13.484px; } .nazvan { font-size: 40px; padding-top: 14px; padding-left: 8px; font-weight: bold; font-family: 'Roboto'; } .table_genre { width: 50%; padding-top: 50px; padding-left: 8px; } .table_features { width: 90%; padding-top: 50px; padding-left: 8px; } .table_genre tr, .table_features tr { font-size: 20px; font-family: 'Roboto'; } .table_td_left{ width: 20%; padding-right: 5px; vertical-align: top; } .table_td_right { padding-left: 5px; } .opisan { font-family: 'Roboto'; text-align: justify; padding-left: 10px; padding-top: 10px; padding-right: 10px; font-size: 20px; } .red_stroka{ padding-left: 20px; } .discount_and_sum { text-align: right; font-family: 'Roboto'; font-size: 20px; padding: 5px; } .discount { background: tomato; padding: 5px; } .left_a { text-decoration: none; color: black; } Приложение 3. Боковой блок с играми HTML код -75% 245 Р CSS код .right { background: rgb(54, 140, 167); position: absolute; text-align: left; top: 50px; left: 67%; width: 31%; height: 235px; /*box-shadow: 0 3px 7px 0 rgba(82, 81, 81, 0.35);*/ } .rigft_content { background:white; position: relative; text-align: left; width: 100%; height: 235px; margin-bottom: 2px; } .rigftContent:hover { box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35); } .kartinRight { width: 100%; height: auto; } .sumRight { position: absolute; width: 35%; font-size: 20px; top: 5px; left: 5px; } .skidRight { background: tomato; font-weight: bold; } .zenaRight { font-weight: bold; } Приложение 4. Блок с описанием игры HTML и PHP код Описание Особенности игры: CSS код .block_kartin { position: absolute; width: 40%; height: 346.968px; z-index: 1; } .block_osoben { position: relative; margin-left: 41%; width: 59%; height: 346.968px; } .block_opisan { position: relative; width: 100%; height: 160.032px } .block_sum { width: 100%; height: 40px; } .kartin { width: 90%; height: 320px; float: left; padding-left: 5%; padding-top: 13.484px; padding-bottom: 13.484px; } .nazvan { font-size: 40px; padding-top: 14px; padding-left: 8px; font-weight: bold; font-family: 'Roboto'; } Приложение 5. Блок с описанием системных требований игры HTML и PHP код
CSS код .table_genre { width: 50%; padding-top: 50px; padding-left: 8px; } .table_features { width: 90%; padding-top: 50px; padding-left: 8px; } .table_genre tr, .table_features tr { font-size: 20px; font-family: 'Roboto'; } .table_td_left{ width: 20%; padding-right: 5px; vertical-align: top; } .table_td_right { padding-left: 5px; } Приложение 6. Блок с описанием информацией об игре HTML и PHP код Описание Особенности игры: CSS код .tbInfo { width: 100%; padding-top: 40px; padding-bottom: 40px; } .osobenLeft { text-align: right; width: 39%; padding-right: 1%; vertical-align: top; font-size: 18px; color: rgba(95, 94, 94, 0.753); /*border: 1px solid red;*/ } .osobenRight { width: 59%; padding-left: 1%; padding-bottom: 10px; font-size: 18px; color: rgb(226, 223, 223); } .centerContent { position: relative; width: 57%; height: auto; left: 35%; margin-bottom: 10px; background: white; z-index: 2; } .zagolovok { width: 97%; padding-left: 3%; padding-top: 10px; padding-bottom: 10px; font-size: 20px; font-family: 'Roboto'; } .opisanie { width: 97%; color: rgba(65, 63, 63, 0.753); padding-left: 3%; font-size: 17px; font-family: 'Roboto'; } .opisanieOsob { width: 97%; color: rgba(65, 63, 63, 0.753); padding-left: 3%; padding-bottom: 10px; font-size: 17px; font-family: 'Roboto'; } .krasstroka { color: black; margin-left: 2%; } Приложение 7. Блок с жанрами HTML и PHP код Жанры hp">Экшены .php">Cтратегии hp">Гонки php">Казуальные p">RPG php">Симуляторы php">Приключения php">Спорт CSS код .rigft_content { background:rgb(209, 209, 209); position: relative; text-align: left; width: 100%; height: 235px; margin-bottom: 2px; } .rigftContent:hover { box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35); } .pod { background: rgb(8, 8, 8); position: relative; width: 100%; height: auto; } Приложение 8. Панель навигации HTML код CSS код #navbar, #navbar ul { margin: 0; padding: 0; width: 100%;; list-style-type: none; text-align: center; } #navbar { margin-top: 10px; height: 40px; padding-bottom: 10px; min-width: 100px; font-size:35px ; } #navbar li { float: left; position: relative; padding-right: 1%; padding-left: 1%; height: 100%; text-align: left; } #navbar li a { display: block; width: 100%; color: black; font-family: 'Roboto'; text-decoration: none; } .poisk { background: rgb(250, 250, 250); height: 20px; border: 2px solid rgb(155, 154, 154); } .knop_poisk { width: 60px; height: 25px; background: rgb(250, 250, 250); border: 2px solid rgb(155, 154, 154); } |