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

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

Содержание:

Введение

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

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

- разработать страницы сайта на основе HTML кода;

- спроектировать таблицы стилей CSS для применения их на страницах сайта;

- создать базу данных для сайта на основе файловой системы;

- создать код PHP для работы с данными.

1. Техническое задание и выбор средств реализации.

1.1 Техническое задание.

Необходимо разработать сайт «Дошкольное учреждение». Сайт должен быть выполнен, соблюдая следующие правила:

1) Общее количество разделов сайта должно быть не менее шести.

2) Язык разметки сайта – HTML;

3) Безошибочная работа, отображение в браузерах: InternetExplorer, MozillaFirefox, Opera (Chrome, Safari);

4) Наличие главной страницы;

5) Все страницы сайта должны быть наполнены осмысленной информацией;

Задачи сайта «Дошкольное учреждение»:

- Новости сайта;

- информация об организации;

- место нахождения;

- обратная связь;

1.2 Средства реализации.

Выбор средств был прост это коды html, css, php. Базой данных служит СУБД MySQL.

HTML (HyperText Markup Language) — язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.

HTML не стоит путать с языками программирования, он создан специально для разметки Web-страниц. Именно язык разметки дает браузеру необходимые инструкции о том, как отображать тексты и другие элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код.

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов. CSS поддерживает таблицы стилей для конкретных носителей, поэтому авторы могут адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, брайлевским устройствам, карманным устройствам и т.д.

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

PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools — «Инструменты для создания персональных веб-страниц») — скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

В области веб-программирования, в частности серверной части, PHP — один из популярных сценарных языков (наряду с JSP, Perl и языками, используемыми в ASP.NET).

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

Язык SQL (Structured Query Language - структурированный язык запросов) представляет собой стандартный высокоуровневый язык описания данных и манипулирования ими в системах управления базами данных (СУБД), построенных на основе реляционной модели данных

Описание модулей серверной части программы и их взаимодействие.

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

Вывод данных из таблиц:

$mysql = new mysqli('localhost', 'root', '', 'solnishko');

if(isset($_POST['l_submit']))

{

$query = mysqli_query($link, "SELECT id, password FROM users WHERE name='".mysqli_real_escape_string($link, $_POST['login_field'])."' LIMIT 1");

$data = mysqli_fetch_assoc($query);

$user = $_POST['login_field'];

if($data['password'] === ($_POST['password_field']))

{

setcookie('logged_user', $user, time()+3600, '/');

echo "<div class='php_log'>Вы авторизованы!</div

}

Пример ввода данных новых пользователей:

$link=mysqli_connect("localhost", "root", "", "solnishko");

if(isset($_POST['reg_submit']))

{

$login = $_POST['reg_login'];

$password = (trim($_POST['reg_password']));

$query = mysqli_query($link, "SELECT id FROM users WHERE name='".mysqli_real_escape_string($link, $_POST['reg_login'])."'");

if(mysqli_num_rows($query) > 0)

{

$err[] = "<div class='php_err'>Пользователь с таким логином уже существует в базе данных.</div>";

}

if(count($err) == 0)

{

$login = $_POST['reg_login'];

$password = (trim($_POST['reg_password']));

mysqli_query($link,"INSERT INTO users SET name='".$login."', password='".$password."'");

Описание структуры базы данных и ее функций.

База данных в работе является MySQL, в которой присутствует таблица со следующими наименованиями id, name, password, которую обрабатывает веб-сервер Apache, после чего данные выводятся на сайт или наоборот, как показано рис. 3.1

Рис. 3.1 Взаимосвязь базы данных с сайтом.

В таблице users сохраняются данные пользователей при регистрации, они нужны для входа в систему. В таблице 3.1 представлены данные из таблицы users.

Таблица 3.1

Данные пользователей в таблице users

Наименования	Расшифровка	Тип
id	Уникальный идентификатор	INT
name	Логин	VARCHAR
password	Пароль	VARCHAR

Описание структуры клиентской части.

Описание интерфейса.

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

Рис. 4.1 Главная страница сайта

Для посетителей есть возможность зарегистрироваться. Регистрация представлена на рисунке 4.2. После регистрации можно произвести вход. Если вход успешен, создаются cookie и система показывает сообщение «Вы авторизованы!». Функции входа представлены на рисунке 4.3.

Рис. 4.3 Регистрация нового пользователя.

Рис. 4.3 Реализация авторизации

На сайте также присутствуют новости учреждения на рисунке 4.4, краткая информация об организации на рисунке 4.5, обратная связь на рисунке 4.6 и контакты на рисунке 4.7.

Рис. 4.4 Вкладка новости

Рис 4.5 Краткая информация об организации

Рис. 4.6 Вкладка обратная связь.

Рис. 4.7 Вкладка контакты

На рисунке 4.8 отображен подвал сайта.

Рис. 4.8 Подвал сайта

Инструкция пользователя.

Для посетителей сайта. Можно использовать меню для поиска нужной информации:

«Главная» - обозревание воспитателей и дошкольных групп;

«Новости» - краткая информация о предстоящих мероприятиях;

«О нас» - краткая информация об организации;

«Обратная связь» - предоставление контактов от организации;

«Контакты» - местоположение и режим работы.

«Регистрация» - возможность зарегистрироваться на сайте.

Заключение

Результатом курсовой работы стал готовый к работе web - сайт в котором размещена информация о сайте дошкольного учреждения «Солнышко». В ходе проведения работы были решены поставленные в курсовой работе задачи. Оценивая проделанную работу, можно сделать следующие выводы:

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

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

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

– XAMPP

– язык разметки гипертекста html и css;

– язык программирования php;

– язык запросов SQL;

Список использованной литературы

1. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.

2. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016

3. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.

4. Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.

5. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016

6. http://biblioclub.ru/index.php?page=book&id=428953

7. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.

8. PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.

9. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.

10. PHPForum [Электронный ресурс] /форум.- Россия, 2003. - Режим доступа: http://phpforum.ru. - Дата доступа: 09.02.2012.

11. Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.

12. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.

13. Гущин А.Н. Базы данных: учебник. - М.: Директ-Медиа, 2014. - 266с

14. http://www.php.su/

15. https://tokmakov.msk.ru/

16. https://www.internet-technologies.ru/articles/webprogramming/php/

17. https://html5book.ru/

18. https://myrusakov.ru/

Приложения

Код html

Header:

<!DOCTYPE html>

<head>

<title>Сайт для дошкольного учерждения</title>

</head>

<body>

<h1>Солнышко</h1>

<h2>Все для детей</h2>

</div>

<li><a href="index.php">Главная</a></li>

<li><a href="news.php">Новости</a></li>

<li><a href="feedback.php">Обратная связь</a></li>

<li><a href="contacts.php">Контакты</a></li>

</ul>

</div>

Footer:

<p>

<a href="index.php">Главная</a> |

<a href="news.php">Новости</a> |

<a href="about.php">О нас</a> |

<a href="feedback.php">Обратная связь</a> |

<a href="contacts.php">Контакты</a>

</p>

<p>Михайлюк Дмитрий ДБИ-301</p>

</div>

Index:

<span><a href="registration.php">Регистрация</a></span>

</div>

</form>

</div>

<h1>Фотографии</h1>

</div>

<h1>Наши воспитатели</h1>

</div>

News:

<span><a href="registration.php">Регистрация</a></span>

</div>

</form>

</div>

<p class="news_header"><b>Уважаемые родители детей в возрасте до 7 лет!</b></p>

<p>Предлагаем Вашему вниманию порядок поступления детей в государственные образовательные учреждения Москвы, реализующие основную общеобразовательную программу дошкольного образования (в дальнейшем – ДОУ).</p>

<p>В ДОУ Ярославского района принимаются дети <b>в возрасте от 1 год 6 мес до 7 лет на 01 сентября года поступления.</b> Обращаем Ваше внимание, что групп для детей в возрасте до 1 г 6 мес в ДОУ Кировского района нет, поэтому прием детей, не достигших на 01 сентября этого возраста, не производится.</p>

<p>Учет детей, нуждающихся в услугах ДОУ (внесение в Книгу учета будущих воспитанников ДОУ) и выдачу направлений в ДОУ осуществляет <b>районная комиссия по комплектованию ДОУ</b> (далее – Комиссия). Заведующие ДОУ и иные должностные лица правом выдачи направлений в ДОУ не обладают.</p>

<p><b>Комиссия работает по адресу:</b></p>

<p>Улица Вешних Вод, дом 3 (здание информационно-методического центра Ярославского района)</p>

<p>Часы работы Комиссии:</p>

<p>— вторник с 14 до 18 часов</p>

<p>— четверг с 10 до 13 часов</p>

</div>

About:

<span><a href="registration.php">Регистрация</a></span>

</div>

</form>

</div>

<p><b>Полное название образовательного учреждения.</b></p>

<p>Государственное бюджетное дошкольное образовательное учреждение детский сад "Солнышко" комбинированного вида Ярославского района города Москвы</p>

<p><b>Режим работы:</b></p>

<p>Выходные дни суббота - воскресенье и утвержденные</p>

<p>Государственные праздничные дни.</p>

<p><b>Сеть групп ДОУ.</b></p>

<p>Всего – 11 групп.</p>

<p>2 группы раннего возраста,<br>

из которых:</p>

<p>1 группа. — с 1г.6м. до 2 лет</p>

<p>1 группа с 2 лет до 3 лет</p>

<p>9 групп дошкольного возраста с 4 до 8 лет</p>

</div>

Feedback:

<span><a href="registration.php">Регистрация</a></span>

</div>

</form>

</div>

<h2>Дополнительная информация.</h2>

<p><b>Телефоны: </b>+7 (812) 494 44 22; +7 (812) 757 10 44</p>

<p><b>E-mail: </b>yardou@mail.ru</p>

<p><b>Почтовый индекс: </b>129338</p>

<h2>Отзывы о нас.</h2>

</form>

</div>

Contacts:

<span><a href="registration.php">Регистрация</a></span>

</div>

</form>

</div>

<p><b>Адрес: </b>129338, г. Москва, ул. Вешних Вод 2, корпус 2</p>

<p><b>Режим работы: </b>с понедельника по пятницу - 7:00 - 19:00</p>

<p><b>Выходные дни: </b>суббота, воскресенье и выходные праздничные дни</p>

<p><b>Эл. почта: </b>yardou@mail.ru</p>

</div>

Registration:

<h1>Регистрация</h1>

</form>

</div>

Код CSS.

* {

margin: 0;

padding: 0;

}

body {

font-size: 1.2em;

background-image: url(../image/wall.png);

background-color: #fff;

background-size: 100%;

background-attachment: fixed;

}

iframe {

margin: 0 0 20px 50px;

}

p {

padding: 0 0 20px 0;

line-height: 1.7em;

cursor: default;

}

b {

color: yellow;

}

h1, h2 {

color: #FFFFFF;

font : normal 170% 'century gothic', arial;

margin: 0 0 15px 0;

padding: 15px 0 5px 0;

}

h2 {

font-size: 140%;

}

a, a:hover {

outline: none;

text-decoration: underline;

color: #aeb002;

}

ul {

margin: 2px 0 22px 17px;

}

ul li {

margin: 0 0 6px 0;

padding: 0 0 4px 5px;

line-height: 1.5em;

}

input[type="text"], input[type="password"], input[type="search"] {

color: #5d5d5d;

width: 60%;

padding: 8px;

border-radius: 5px;

}

input[type="password"] {

margin-top: 10px;

}

input[type="submit"] {

border-radius: 5px;

}

input {

outline: none;

border: solid 1px #f2f2f2;

}

textarea {

width:550px;

height: 200px;

margin-left: 30px;

border-radius: 5px;

}

.header {

background-color: rgba(0, 120, 201, 0.7);

height: 177px;

font-size: 0.8em;

margin-left: 0px;

margin-right: 0px;

min-width: 900px;

}

.main, .logo, .menubar, .site_content, .footer {

margin-left: auto;

margin-right: auto;

}

.logo {

width: 880px;

padding-bottom: 40px;

}

.logo h1, .logo h2 {

font: normal 300% 'century gothic', arial, sans-serif;

margin: 0 0 0 9px;

}

.logo_text h1 {

padding: 22px 0 0 0;

color: yellow;

letter-spacing: 0.1em;

text-decoration: none;

cursor: default;

}

.logo_text h2 {

font-size: 0.9em;

padding: 4px 0 0 0;

color: yellow;

cursor: default;

}

.menubar {

width: 900px;

height: 46px;

margin-left: 250px;

}

ul.menu {

float: right;

}

ul.menu li {

float: left;

padding: 0 0 0 19px;

list-style: none;

margin: 1px 2px 0 0;

}

ul.menu li a {

font: normal 100% 'trebuchet ms', sans-serif;

display: block;

height: 20px;

padding: 6px 35px 5px 28px;

color: #fff;

text-decoration: none;

}

ul.menu li.selected a {

color: yellow;

}

ul.menu li a:hover {

color: yellow;

}

.site_content {

width: 1200px;

overflow: hidden;

margin: 20px auto 0 auto;

background-color: none;

}

.sidebar_container {

float: right;

width: 224px;

}

.sidebar {

float: right;

width: 222px;

padding: 5%;

margin: 0 0 16px 0;

border: solid 1px #f2f2f2;

border-radius: 5px;

background-color: rgba(0, 120, 201, 0.7);

}

.btn {

padding: 8px;

background-color: white;

cursor: pointer;

}

.sidebar h2 {

color: yellow;

cursor: default;

}

.lables_passreg_text {

font-size: 0.7em;

margin-top: 3%;

margin-left: 2%;

color: white;

}

.lables_passreg_text a {

text-decoration: underline;

color: yellow;

}

.sidebar {

float: right;

}

.content {

text-align: left;

width: 620px;

padding: 0 0 0 50px;

float: left;

}

.content h1 {

color: yellow;

padding-left: 13px;

cursor: default;

}

.content a {

text-decoration: none;

}

.content p {

padding-left: 30px;

line-height: 1.3em;

padding-right: 30px;

padding-top: 10px;

color: white;

}

.content input[type="text"], .content input[type="password"], .content input[type="submit"] {

margin: 0 0 10px 10px;

}

.news {

margin-bottom: 5%;

background-color: rgba(0, 120, 201, 0.7);

border: solid 1px #f2f2f2;

border-radius: 5px;

}

.main_block {

margin-bottom: 5%;

background-color: rgba(0, 120, 201, 0.7);

border: solid 1px #f2f2f2;

border-radius: 5px;

}

.main_block img {

border-radius: 5px;

border: solid 4px #dad7d5;

width: 22%;

margin-bottom: 5px;

}

.main_block img.left_img {

margin-left: 13px

}

.main_block h2 {

color: yellow;

cursor: default;

margin-left: 30px;

}

.send {

margin-bottom: 70px;

}

.send input[type="submit"] {

float: right;

margin: 10px 20px 0 0;

}

.send h2 {

color: yellow;

margin: 0 0 5px 30px;

}

.main_block_r {

background-color: rgba(0, 120, 201, 0.7);

border: solid 1px #f2f2f2;

border-radius: 5px;

}

.php_err {

margin: 0 0 -17px 10px;

color: white;

}

.php_err b {

color: yellow;

}

.php_log {

color: yellow;

}

.footer {

position: absolute;

width: 100%;

height: 100px;

padding: 28px 0 5px 0;

text-align: center;

background-color: rgba(0, 120, 201, 0.7);

color: yellow;

margin: 0px;

min-width: 900px;

}

.footer a {

color: #fff;

text-decoration: none;

}

.footer a:hover {

color: yellow;

text-decoration: none;

}

.footer p {

padding: 0 0 10px 0px;

}

.footer_reg {

position: fixed;

bottom: 0;

width: 100%;

height: 100px;

padding: 28px 0 5px 0;

text-align: center;

background-color: rgba(0, 120, 201, 0.7);

color: yellow;

margin: 0px;

min-width: 900px;

}

.footer_reg a {

color: #fff;

text-decoration: none;

}

.footer_reg a:hover {

color: yellow;

text-decoration: none;

}

.footer_reg p {

padding: 0 0 10px 0px;

}

Код PHP.

Код для регистрации:

<?php

$link=mysqli_connect("localhost", "root", "", "solnishko");

if(isset($_POST['reg_submit']))

{

$err = [];

if(!preg_match("/^[a-zA-Z0-9]+$/",$_POST['reg_login']))

{

$err[] = "<div class='php_err'>Логин может состоять только из букв английского алфавита и цифр.</div>";

}

if(strlen($_POST['reg_login']) < 3 or strlen($_POST['reg_login']) > 30)

{

$err[] = "<div class='php_err'>Логин должен быть не меньше 3-х символов и не больше 30.</div>";

}

$query = mysqli_query($link, "SELECT id FROM users WHERE name='".mysqli_real_escape_string($link, $_POST['reg_login'])."'");

if(mysqli_num_rows($query) > 0)

{

$err[] = "<div class='php_err'>Пользователь с таким логином уже существует в базе данных.</div>";

}

if(count($err) == 0)

{

$login = $_POST['reg_login'];

$password = (trim($_POST['reg_password']));

mysqli_query($link,"INSERT INTO users SET name='".$login."', password='".$password."'");

header("Location: index.php");

exit();

}

else

{

print "<div class='php_err'><b>При регистрации произошла ошибка:</b></div><br>";

foreach($err AS $error)

{

print $error."<br>";

}

$link->close();

Код для авторизации:

<?php

$link = new mysqli('localhost', 'root', '', 'solnishko');

if(isset($_POST['l_submit']))

{

$query = mysqli_query($link, "SELECT id, password FROM users WHERE name='".mysqli_real_escape_string($link, $_POST['login_field'])."' LIMIT 1");

$data = mysqli_fetch_assoc($query);

$user = $_POST['login_field'];

if($data['password'] === ($_POST['password_field']))

{

setcookie('logged_user', $user, time()+3600, '/');

echo "<div class='php_log'>Вы авторизованы!</div>";

}

else

{

print "<div class='php_log'>Вы ввели неправильный логин/пароль!</div>";

}