Добавлен: 24.05.2023
Просмотров: 148
Скачиваний: 3
Введение
Internet развивается довольно стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Internet превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей.
Через десять лет, по прогнозам специалистов, около 50 процентов семей будут использовать его ежедневно. Телевидение и радиоприемники не будут заменены компьютерами, но будут иметь мощный процессор, большую память и фактически сами станут в некотором отношении компьютерами.
Это будет время, когда любой человек, владеющий компьютером, сможет "скачать" с его помощью статьи, иллюстрации, видео- или аудиоинформацию по любой интересующей его теме. Он сможет получить эту информацию тогда, когда он этого пожелает. Через какое-то время системы искусственного интеллекта – параллельный машинный перевод, а также идентификация и распознавание голоса сломают последние национальные и языковые барьеры и сделают возможным свободный транснациональный обмен информацией.
Целью работы является углубленное изучение современных методов программирования приложений для среды Web.
По окончании работы над проектом студент будет:
знать:
- основные протоколы сети Интернет;
- правила построения Интернет приложений;
- принципы работы приложений в сети Интернет;
- технологию интеграции приложений;
- основные понятия и термины web – программирования.
уметь разрабатывать приложения:
- использующие в своей работе сеть Интернет;
- отображающие HTTP данных;
- формирующие сценарии Web приложений.
Основная часть
Требования к приложению
Разрабатываемое приложение предназначено для выполнения следующих действий:
– запись ребенка в детский сад
– предоставление пользователю необходимой ему информации из базы, возможность редактирования предоставленных данных, их удаления либо добавления новых, проверка на корректность и сохранение изменений;
Существует также ряд дополнительных требований к приложению, связанных с особенностями его использования. Все они приведены ниже.
Приложение будет использоваться большим числом пользователей, однако все они должны будут иметь доступ к общей информации. При этом нужно, чтобы пользователи имели возможность изменять данные и эти изменения были видны другим пользователям. Таким образом, необходимо обеспечить централизованное хранение данных, организовать возможность одновременного доступа к ним нескольких пользователей, а также предотвратить возникновение конфликтных ситуаций.
Требования к интерфейсу
На основании анализа общих требований к проектированию интерфейсной части приложения, был выделен ряд рекомендаций для создания «дружелюбного» к пользователю интерфейса. Можно выделить следующие из них:
– вместо создания отдельной страницы для редактирования данных предоставлять возможность их редактирования по месту. В этом состоит принцип прямых манипуляций, который можно охарактеризовать следующим образом: там, где выводятся данные, должна быть и возможность их ввода;
– не требовать перезагрузки страницы при каждом действии пользователя. Необходимость обновления страницы нарушает нормальный ход мысли. Поэтому имеет смысл заполнять страницы динамическим контентом, чтобы избавиться от лишних её перезагрузок. К тому же, такой подход снижает интенсивность обмена информацией между клиентской и серверной частями приложения;
– использовать контекстные инструменты для внедрения функциональных возможностей прямо в контент страницы. Эти инструменты являются аналогами контекстного меню в настольных приложениях. Они могут располагаться непосредственно на странице, отображаться при наведении курсора на объект, иметь переключатель для отображения/скрытия и т.д. Данный подход позволяет распределить функциональные возможности по всей странице, не загромождая ее при этом.
Ниже приведены требования к интерфейсу конкретно разрабатываемого приложения:
– наличие формы авторизации;
– наличие форм для отображения запрашиваемой информации (списка пользователей, тем, вопросов по конкретной теме и т. д.);
– наличие форм для редактирования полученной информации. Так как в вопросах и ответах на них могут присутствовать математические формулы, на форме необходимо присутствие редактора для их создания;
– наличие корректного инструмента отображения ошибок в случае их возникновения.
Естественно, все формы для создания и редактирования должны содержать необходимую справочную информацию и подсказки для упрощения работы с ними.
Выбор инструментов для создания приложения
Подходящим решением описанной задачи является разработка web-приложения. Это обеспечит выполнение таких требований как централизованное хранение информации, одновременный доступ к ней нескольких пользователей.
Для написания серверной части web-приложения выбран язык программирования php.
На стороне браузера используется технология Ajax (AJAX – Asynchronous Javascript and XML – асинхронный JavaScript и XML) для обеспечения функционально насыщенного и интерактивного интерфейса пользователя. Данный подход к построению интерактивных веб-приложений, заключается в фоновом обмене данными браузера с web-сервером. В результате, при обновлении данных, web-страница не перезагружается полностью, и web-приложения становятся более быстрыми и удобными.
Описанная технология позволяет удовлетворить указанные ранее рекомендации для создания дружелюбного к пользователю интерфейса. А библиотека готовых виджетов (визуальных элементов) позволяет реализовать все необходимые формы для взаимодействия с приложением, например, для редактирования информации.
Хранение информации будет осуществляться в базе данных. В качестве СУБД будет использоваться MySql – мощная объектно-реляционная система управления базами данных с открытыми исходными текстами
HTML-документ - это файл с расширением.html или. htm, в котором текст размечен HTML-тегами. Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Web-документа. Текст самих тегов Web-браузером не отображается.
Анализ исходных данных
World Wide Web распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Всемирную паутину образуют миллионы web-серверов. Большинство ресурсов всемирной паутины представляет собой гипертекст. Гипертекстовые документы, размещаемые во всемирной паутине, называются web-страницами. Несколько web-страниц, объединенных общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же web-сервере, называются web-сайтом. Для загрузки и просмотра web-страниц используются специальные программы - браузеры. Всемирная паутина вызвала настоящую революцию в информационных технологиях и бум в развитии Интернета.
HTTP (сокр. от англ. Hyper Text Transfer Protocol - «протокол передачи гипертекста») - протокол прикладного уровня передачи данных. Основой HTTP является технология «клиент-сервер», то есть предполагается существование потребителей (клиентов), которые инициируют соединение и посылают запрос, и поставщиков (серверов), которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно сообщение с результатом. HTTP в настоящее время повсеместно используется во всемирной паутине для получения информации с веб-сайтов.
Разработка приложения
Сначала была реализована главная страница, с двумя сайдбарами и окном авторизации. Рисунок 1
Рисунок 1
Дальше была разработа страница “Записать ребенка в садик”, рисунок 2
Рисунок 2
На которой была разработана форма, через которую можно записать ребенка в садик.
Данные отправляются POST запросом на сервер.
Рисунок 3
На странице “Расписание”, рисунок 3, было разработано расписание с возможностью его редактирования из админ панели.
Рисунок 4
На странице “Контакты”, рисунок 4, отображаются контакты детского сада.
Заключение
Разработанное программное обеспечение отражает требования пользователей, обладает умеренными потребностями в аппаратных ресурсах, основано на платформенно-независимой технологии.
Web-сайт прошел ряд тестовых испытаний на предмет выявления ошибок в проектировании и реализации программы. Программный продукт соответствует требованиям и обладает функциональностью, надежностью, мобильностью и удобством использования.
Web-сайт позволяет обеспечить более тесное взаимодействие с клиентами через Интернет, предоставляет возможность поиска новых контактов. С помощью данного программного продукта клиенты имеют возможность: получить нужную информацию о товарах и магазине, не выходя из дома.
Список литературы
- С. В. Глушаков, А.В. Коваль, С.А. Черепнин, Программирование на Visual C++, ФОЛИО, Москва, 2017.
- Ю. Тихомиров, Самоучитель MFC, БХВ-Санкт –Петербург, 2017.
- HTML5. Основы клиентской разработки Алексеев А.А., Савельев, НОИ Интуит, 2016.
- Новая большая книга CSS Дэвид Макфарланд, Питер, 2016.
- Секреты CSS. Идеальные решения ежедневных задач. Леа Веру, Питер, 2016.
- HTML5, CSS3 и JavaScript. Исчерпывающее руководство Дженнифер Нидерст Роббинс, Эксмо, 2014.
- Изучаем HTML, XHTML и CSS Эрик Фримен, Элизабет Фримен, Питер, 2014.
- HTML5 и CSS3: Разработка сайтов для любых браузеров и устройств Фрейн Бен., Питер, 2014.
Приложение
Index.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Created by Artisteer v4.2.0.60623 -->
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="style.css" media="screen">
<!--[if lte IE 7]>
<link rel="stylesheet" href="style.ie7.css" media="screen" />
<![endif]-->
<link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cabin|Open+Sans+Condensed:700&subset=latin,cyrillic">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="jquery.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<style>.art-content .art-postcontent-0 .layout-item-0 { padding-right: 10px;padding-left: 10px; }
.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
</style>
</head>
<body>
<div id="art-main">
<header class="art-header">
<div class="art-shapes">
<div class="art-textblock art-object1595633309">
<div class="art-object1595633309-text-container">
<div class="art-object1595633309-text"></div>
</div>
</div>
</div>
<h1 class="art-headline">
<a href="#">Сайта дошкольного учреждения</a>
</h1>
<h2 class="art-slogan">Растем вместе!</h2>
<div class="art-textblock art-object213717429">
<form class="art-search" name="Search" action="javascript:void(0)">
<input type="text" value="">
<input type="submit" value="" name="search" class="art-search-button">
</form>
</div>
</header>
<nav class="art-nav">
<ul class="art-hmenu">
<li>
<a href="index.html" class="active">Главная</a>
<ul class="active">
<li><a href="home/new-page.html">Записать ребенка в садик</a></li>
<li><a href="home/new-page-2.html">Расписание</a></li>
<li><a href="home/new-page-3.html">Контакты</a></li>
</ul>
</li>
</ul>
</nav>
<div class="art-sheet clearfix">
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-sidebar1">
<div class="art-vmenublock clearfix">
<div class="art-vmenublockcontent">
<ul class="art-vmenu">
<li>
<a href="home.html" class="active">Главная</a>
<ul class="active">
<li><a href="home/new-page.html">Записать ребенка в садик</a></li>
<li><a href="home/new-page-2.html">Расписание</a></li>
<li><a href="home/new-page-3.html">Контакты</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="art-layout-cell art-content">
<article class="art-post art-article">
<div class="art-postmetadataheader">
<h2 class="art-postheader"><span class="art-postheadericon">Главная</span></h2>
</div>
<div class="art-postcontent art-postcontent-0 clearfix">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-0" style="width: 50%" >
<h3 style="border-bottom: 1px solid #C1C6B8; padding-bottom: 5px"><span style="color: #49651A;">Популярное</span></h3>
<div class="image-caption-wrapper" style="width: 100%"><img src="images/0_72c4b_6c1ca31d_XL.png" alt="an image" class="art-lightbox" width="282" height="188"></div>
<ul>
<li><a href="#">Сколько стоит </a></li>
<li><a href="#">Расписание занятий</a></li>