Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта дошкольного учреждения

Содержание:

Введение

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>

<head>

<!--[if lte IE 7]>

<![endif]-->

.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>

<a href="#">Сайта дошкольного учреждения</a>

</h1>

<h2 class="art-slogan">Растем вместе!</h2>

</form>

</div>

</header>

<li>

<a href="index.html" class="active">Главная</a>

<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>

<li>

<a href="home.html" class="active">Главная</a>

<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>

<h2 class="art-postheader"><span class="art-postheadericon">Главная</span></h2>

</div>

<h3 style="border-bottom: 1px solid #C1C6B8; padding-bottom: 5px"><span style="color: #49651A;">Популярное</span></h3>

<ul>

<li><a href="#">Сколько стоит </a></li>

<li><a href="#">Расписание занятий</a></li>

<li><a href="#">Наши преподователи</a></li>

</ul>

</div>

<h3 style="border-bottom: 1px solid #C1C6B8; padding-bottom: 5px"><span style="color: #49651A;">Новости</span><span style="color: #49651A;"></span></h3>

<ul>

<li><a href="#">Новый набор!</a></li>

<li><a href="#">Огонек</a></li>

<li><a href="#">Что нужно малышу</a></li>

</ul>

</div>

</article>

</div>

<label for="modlgn_username">Логин</label>

<br />

</p>

<label for="modlgn_passwd">Пароль</label>

<br />

</p>

<input type="checkbox" id="modlgn_remember" name="remember" value="yes" alt="Remember Me" />Запомнить меня

</label>

</p>

</fieldset>

<ul>

<li>

<a href="#">Забыли логин или пароль?</a>

</li>

<li>

<a href="#">Создать аккаунт</a>

</li>

</ul>

</form>

</div>

<p></p>

</p>

</footer>

</div>

</body>

</html>

new-page.html

<!DOCTYPE html>

<head>

<title>Записать ребенка в садик</title>

<!--[if lte IE 7]>

<![endif]-->

.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>

<a href="#">Сайта дошкольного учреждения</a>

</h1>

<h2 class="art-slogan">Растем вместе!</h2>

</form>

</div>

</header>

<li>

<a href="../index.html" class="active">Главная</a>

<li><a href="new-page.html">Записать ребенка в садик</a></li>

<li><a href="new-page-2.html">Расписание</a></li>

<li><a href="new-page-3.html">Контакты</a></li>

</ul>

</li>

</ul>

</nav>

<li>

<a href="home.html" class="active">Главная</a>

<li><a href="new-page.html">Записать ребенка в садик</a></li>

<li><a href="new-page-2.html">Расписание</a></li>

<li><a href="new-page-3.html">Контакты</a></li>

</ul>

</li>

</ul>

</div>

<h2 class="art-postheader"><span class="art-postheadericon">Главная</span></h2>

</div>

<div class="title">Информация о родителе</div>

<div class="field-name"><span class="name">Фамилия</span></div>

</label>

<div class="field-name"><span class="name">Телефон для связи:</span></div>

</label>

</label>

<div class="field-name"><span class="name">Контактный E-mail:</span></div>

</label>

<div class="field-name"><span class="name">Отчество</span></div>

</label>

<div class="field-name"><span class="name">Как Вы узнали о нашем садике?</span></div>

<ul>

<li class="ik_select_option" data-value="friends"><span class="ik_select_option_label">Рекомендации родственников, друзей, знакомых, соседей, коллег по работе.</span></li>

<li class="ik_select_option" data-value="search"><span class="ik_select_option_label">Поисковая система Google, Яндекс, Рамблер, Mail и др.</span></li>

<li class="ik_select_option" data-value="social"><span class="ik_select_option_label">Социальные сети: Вконтакте, Facebook, Одноклассники и др.</span></li>

<li class="ik_select_option" data-value="anothesite"><span class="ik_select_option_label">Другие сайты.</span></li>

<li class="ik_select_option" data-value="outdoor_ad"><span class="ik_select_option_label">Наружная уличная реклама.</span></li>

<li class="ik_select_option" data-value="transport_ad"><span class="ik_select_option_label">Реклама в общественном транспорте.</span></li>

<li class="ik_select_option" data-value="radio_ad"><span class="ik_select_option_label">Реклама на радио.</span></li>

<li class="ik_select_option" data-value="tv_ad"><span class="ik_select_option_label">Реклама на ТВ.</span></li>

<li class="ik_select_option" data-value="other"><span class="ik_select_option_label">Свой вариант (укажите, какой).</span></li>

</ul>

</div>

<option value="friends">Рекомендации родственников, друзей, знакомых, соседей, коллег по работе.</option>

<option value="search">Поисковая система Google, Яндекс, Рамблер, Mail и др.</option>

<option value="social">Социальные сети: Вконтакте, Facebook, Одноклассники и др.</option>

</select>

</div>

</label>

</label>

</div>

<div class="title">Информация о родителе</div>

<div class="field-name"><span class="name">Фамилия</span></div>

</label>

</label>

<div class="field-name"><span class="name">Дата Рождения</span></div>

</label>

</label>

<div class="info">Нажимая на кнопку «Записать ребенка», Вы подтверждаете свое согласие на обработку конфиденциальных данных согласно <a href="/agreement/" target="_blank">Соглашению об обработке персональных данных</a></div>

</figure>

</div>

</form>

</div>

</article>

</div>

<label for="modlgn_username">Логин</label>

<br />

</p>

<label for="modlgn_passwd">Пароль</label>

<br />

</p>

<input type="checkbox" id="modlgn_remember" name="remember" value="yes" alt="Remember Me" />Запомнить меня

</label>

</p>

</fieldset>

<ul>

<li>

<a href="#">Забыли логин или пароль?</a>

</li>

<li>

<a href="#">Создать аккаунт</a>

</li>

</ul>

</form>

</div>

<p></p>

</p>

</footer>

</div>

</body>

</html>

new-page-2.html

<!DOCTYPE html>

<head>

<title>Расписание</title>

<!--[if lte IE 7]>

<![endif]-->

.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>

<a href="#">Сайта дошкольного учреждения</a>

</h1>

<h2 class="art-slogan">Растем вместе!</h2>

</form>

</div>

</header>

<li>

<a href="../index.html" class="active">Главная</a>

<li><a href="new-page.html">Записать ребенка в садик</a></li>

<li><a href="new-page-2.html">Расписание</a></li>

<li><a href="new-page-3.html">Контакты</a></li>

</ul>

</li>

</ul>

</nav>

<li>

<a href="home.html" class="active">Главная</a>

<li><a href="new-page.html">Записать ребенка в садик</a></li>

<li><a href="new-page-2.html">Расписание</a></li>

<li><a href="new-page-3.html">Контакты</a></li>

</ul>

</li>

</ul>

</div>

<h2 class="art-postheader"><span class="art-postheadericon">Главная</span></h2>

</div>

Расписание

<ul>

<li>с 7:00 до 8:15 – Радушный прием и осмотр детей. Самостоятельная игровая деятельность.</li>

<li style="text-align: justify;">с 8:15 до 8:30 — Утренняя зарядка, движение и игра.</li>

<li style="text-align: justify;">с 8:30 до 9:00 – Вкусный завтрак. Воспитание культуры еды. Трудовое воспитание (поручения, дежурства).</li>

<li style="text-align: justify;">с 9:00 до 10:00 – Подготовка к занятиям (дежурство, поручения). Занятие по расписанию. (Указана общая длительность, включая перерывы).</li>

<li style="text-align: justify;">с 10:00 до 10:20 – Ланч (второй завтрак — между занятиями).</li>

<li style="text-align: justify;">с 10:20 до 11:45 – Закрепление навыков самообслуживания. Двигательная активность на прогулке 40 минут. Возвращение с прогулки. Гигиенические процедуры. Игры.</li>

<li style="text-align: justify;">с 11:45 до 13:00 – Подготовка к обеду. Воспитание культурно-гигиенических навыков. Трудовое воспитание (дежурство, поручения). Обед. Воспитание культуры еды.</li>

<li style="text-align: justify;">с 13:00 до 15:00 – Подготовка ко сну. Сон с использованием музыкотерапии и сказкотерапии.</li>

<li style="text-align: justify;">с 15:00 до 15:20 – Постепенный подъем. Гимнастика после сна в группе. Игры.</li>

<li style="text-align: justify;">с 15:20 до 15:50 – Подготовка к полднику. Трудовое воспитание (дежурство, поручения). Полдник. Воспитание культуры еды.</li>

<li style="text-align: justify;">с 16:00 до 18:00 – Игры. Подготовка к занятиям (дежурство, поручения). Занятие по расписанию. (Указана общая длительность, включая перерывы).</li>

<li style="text-align: justify;">с 18:00 до 18:30 – Закрепление навыков самообслуживания. Подготовка к ужину. Воспитание культурно-гигиенических навыков. Ужин.</li>

<li style="text-align: justify;">с 18:30 до 20:00 – Прогулка. Работа с родителями. Уход детей домой.</li>

</ul>

</div>

</article>

</div>

<label for="modlgn_username">Логин</label>

<br />

</p>

<label for="modlgn_passwd">Пароль</label>

<br />

</p>

<input type="checkbox" id="modlgn_remember" name="remember" value="yes" alt="Remember Me" />Запомнить меня

</label>

</p>

</fieldset>

<ul>

<li>

<a href="#">Забыли логин или пароль?</a>

</li>

<li>

<a href="#">Создать аккаунт</a>

</li>

</ul>

</form>

</div>

<p></p>

</p>

</footer>

</div>

</body>

</html>

new-page-3.html

<!DOCTYPE html>

<head>

<title>Контакты</title>

<!--[if lte IE 7]>

<![endif]-->

.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>

<a href="#">Сайта дошкольного учреждения</a>

</h1>

<h2 class="art-slogan">Растем вместе!</h2>

</form>

</div>

</header>

<li>

<a href="../index.html" class="active">Главная</a>

<li><a href="new-page.html">Записать ребенка в садик</a></li>

<li><a href="new-page-2.html">Расписание</a></li>

<li><a href="new-page-3.html">Контакты</a></li>

</ul>

</li>

</ul>

</nav>

<li>

<a href="home.html" class="active">Главная</a>

<li><a href="new-page.html">Записать ребенка в садик</a></li>

<li><a href="new-page-2.html">Расписание</a></li>

<li><a href="new-page-3.html">Контакты</a></li>

</ul>

</li>

</ul>

</div>

<h2 class="art-postheader"><span class="art-postheadericon">Главная</span></h2>

</div>

<div>

<p>УЧРЕДИТЕЛЬ - ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ АДМИНИСТРАЦИИ ГОРОДА ТЮМЕНИ</p>

<p>Детский сад №42 города Тюмени</p>

<p>Адрес: 625007, Тюменская область, г.Тюмень, ул.Депутатская 129 А (1корпус)</p>

<p>Телефоны: 8(3452) 36-93-65 заместитель заведующего, вахта</p>

<p>г.Тюмень, ул. Союзная 131 (2 корпус)</p>

<p>Телефоны: 8(3452)36-98-44 заведующий, медицинский работник</p>

<p>Факс: 8(3452)64-41-88 бухгалтерия</p>

<p>Email: <a href="mailto:ds42tyumen@mail.ru">ds42tyumen@mail.ru</a></p>

<p>РЕЖИМ РАБОТЫ: группы 7-00 до 19-00</p>

<p>ЧИСЛЕНОСТЬ ВОСПИТАНИКОВ 745 ЧЕЛОВЕК</p>

<p>ЯЗЫК ОБРАЗОВАНИЯ - РУССКИЙ</p>

<p>вакансия -  медицинская сестра</p></div>

</div>

</article>

</div>

<label for="modlgn_username">Логин</label>

<br />

</p>

<label for="modlgn_passwd">Пароль</label>

<br />

</p>

<input type="checkbox" id="modlgn_remember" name="remember" value="yes" alt="Remember Me" />Запомнить меня

</label>

</p>

</fieldset>

<ul>

<li>

<a href="#">Забыли логин или пароль?</a>

</li>

<li>

<a href="#">Создать аккаунт</a>

</li>

</ul>

</form>

</div>

<p></p>

</p>

</footer>

</div>

</body>

</html>