Материал: Разработка информационной системы для раскрытия отчетности жилищно-коммунальных организаций
Разработка структуры сайта
Так как у меня нет навыка работы для создания макета
сайта, поэтому воспользуюсь встроенной в ОС Windows программой Paint, чтобы
создать примерную структуру программного продукта. Примерная структура сайта
изображена на Рисунке 1.
Рисунок 1 - Примерная структура сайта
Как видно в структуре сайта имеется 4 блока. В блоке «Название сайта» соответственно будет наименование сайта. В блоке «Авторизация пользователя» будут поля для ввода логина и пароля, а также две кнопки: «войти» и «регистрация». В блоке «Основное меню» будут содержаться 3 ссылки на страницы на соответствующие страницы: «Главная», «База данных» и Контакты». И последний блок «Контент». В нём будет отображаться информация основной таблицы «houses», а так же будет создана кнопка «Добавить запись» для ввода и сохранения новой информации в базе данных приложения.
3. РЕАЛИЗАЦИЯ ПП
3.1 Реализация базы данных
С того момента, как я получил данную тему на диплом, мне уже было понятно, что без хранения данных тут никак не обойтись. Приступив к реализации БД, я сначала создал основную таблицу «houses» при помощи виртуальных команд.
Для её создания была выполнена команда:
CREATE TABLE houses (id INT(11), house_id INT(10), street VARCHAR(10), build_year INT(10), house_type INT(1), house_wall_material INT(1), heating_system INT(1), hot_water_system INT(1), cold_water_system INT(1), house_state INT(1), house_floor_type INT(1), electricity_system INT(1), gas_system INT(1), living_quarter INT(1), not_living_quarter INT(1), area_common_property DECIMAL(10,2));
После её создания я заполнил одну строчку в ней командой:
INSERT TABLE houses VALUES(0, 1, “Зосимовская”, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 500,00);
Это было сделано для того, чтобы при реализации самого сайта, я мог видеть результат правильной работы кода HTML и PHP, но об этом позже.
После того, как таблица была заполнена, я приступил к реализации других таблиц и их заполнению.
Создание и заполнение таблицы house_type.
CREATE TABLE house_type (id INT(11), identificator INT(1), text TEXT);TABLE house_type (1, 1, “Общежитие”);
INSERT TABLE house_type (2, 2, “Объект индивидуального жилищного строительства”);TABLE house_type (3, 3, “Жилой дом блокированной застройки”);
INSERT TABLE house_type (4, 4, “Многоквартирный дом”);
Создание и заполнение таблицы house_wall_material.
CREATE TABLE house_wall_material (id INT(11), identificator INT(1), text TEXT);TABLE house_wall_material (1, 1, “Нет данных”);TABLE house_wall_material (2, 2, “Каменные, кирпичные”);TABLE house_wall_material (3, 3, “Панельные”);TABLE house_wall_material (4, 4, “Блочные”);TABLE house_wall_material (5, 5, “Смешанные”);TABLE house_wall_material (6, 6, “Монолитные”);TABLE house_wall_material (7, 7, “Деревянные”);TABLE house_wall_material (8, 8, “Прочие”);
Создание и заполнение таблицы heating_system.
CREATE TABLE heating_system (id INT(11), identificator INT(1), text TEXT);TABLE heating_system (1, 1, “Нет данных”);TABLE heating_system (2, 2, “Отсутствует”);TABLE heating_system (3, 3, “Центральное”);TABLE heating_system (4, 4, “Автономное”);TABLE heating_system (5, 5, “Поквартирное”);TABLE heating_system (6, 6, “Печное”);
Создание и заполнение таблицы hot_water_system.
CREATE TABLE hot_water_system (id INT(11), identificator INT(1), text TEXT);TABLE hot_water_system (1, 1, “Нет данных”);TABLE hot_water_system (2, 2, “Отсутствует”);TABLE hot_water_system (3, 3, “Централизованная открытая”);TABLE hot_water_system (4, 4, “Централизованная закрытая”);TABLE hot_water_system (5, 5, “Поквартирная”);TABLE hot_water_system (6, 6, “Автономная”);
Создание и заполнение таблицы cold_water_system.
CREATE TABLE cold_water_system (id INT(11), identificator INT(1), text TEXT);TABLE cold_water_system (1, 1, “Нет данных”);TABLE cold_water_system (2, 2, “Отсутствует”);TABLE cold_water_system (3, 3, “Централизованное”);TABLE cold_water_system (4, 4, “Открытое”);
Создание и заполнение таблицы house_state.
CREATE TABLE house_state (id INT(11), identificator INT(1), text TEXT);TABLE house_state (1, 1, “normal”);TABLE house_state (2, 2, “warning”);TABLE house_state (3, 3, “alarm”);TABLE house_state (4, 4, “noinfo”);
Создание и заполнение таблицы house_floor_type.
CREATE TABLE house_floor_type (id INT(11), identificator INT(1), text TEXT);TABLE house_floor_type (1, 1, “нет данных”);TABLE house_floor_type (2, 2, “железобетонные”);TABLE house_floor_type (3, 3, “деревянные”);TABLE house_floor_type (4, 4, “смешанные”);
Создание и заполнение таблицы electricity_system.
CREATE TABLE electricity_system (id INT(11), identificator INT(1), text TEXT);TABLE electricity_system (1, 1, “нет данных”);TABLE electricity_system (2, 2, “отсутствует”);TABLE electricity_system (3, 3, “централизованное”);TABLE electricity_system (4, 4, “комбинированное”);
Создание и заполнение таблицы gas_system.
CREATE TABLE gas_system (id INT(11), identificator INT(1), text TEXT);TABLE gas_system (1, 1, “нет данных”);TABLE gas_system (2, 2, “отсутствует”);TABLE gas_system (3, 3, “централизованное”);
Кстати говоря, хочу отметить, что все таблицы в
базе данных связаны , то есть имеется главная таблица «houses», а с ней имеют
связи оставшиеся таблицы, кроме таблицы «users» - она отдельно хранит
информацию о пользователях. Визуально связи и таблицы выглядят так, как
показано на рисунке 2.
Рисунок 2 - Таблицы и их связи мой БД
3.2 Реализация HTML- и PHP-кода
После проведения всех описанных в пункте 3.1 манипуляций я смело приступил к реализации сайта.
Сперва я создал 4 файла: index.php, header.php, menu.php и style.css. В первом файле я реализовывал главную страницу сайта, во втором файле - шапка сайта, в третьем - меню, которое располагалось прямо под шапкой, а в последнем - таблица стилей моего сайта.
В первых трёх файлах я создал по одному блоку div в формате:
<div class = header> это шапка </div>
<div class = menu> это меню </div>
<div class = content> это контент </div>
А в таблице стилей я прописал следующее для каждого класса:
div.header
}.menu{: inline-block;: 100%;: 50px;
}.content{: block;: 700 px;: 100%
}
Немного поясню. Команда «display» позволяет
определить, как элемент должен быть показан в документе. Команда
«vertical-align» позволяет выровнять элемент. В данном случае - по центру.
Команда «width» позволяет задать ширину. Команда «height» позволяет задать
высоту элемента. С помощью команды «border» я залил границы каждого элемента,
то есть шапки, контента и меню чёрным цветом толщиной в 1 пиксель для
наглядности, чтобы было проще ориентироваться себе. А командой «background» я
задал фон шапке с помощью файла, найденного на просторах сети Интернет
специально подогнанного под необходимые размеры. В итоге всего этого мой
предварительный результат выглядел почти так же, как на рисунке 3.
Рисунок 3 - Предварительный вид сайта
Следующим мои шагом было создание фона контента, а также создание таблицы, где будет отображаться вся основная информация.
Создание головы таблицы.
<div align="center">
<font face="Times New Roman" size="2" color="black">
<table border = "1" align="center" cellpadding="6">
<tr>
<th>Номер дома</th>
<th>Улица</th>
<th>Год основания</th>
<th><a href="house_typeDB.php">Тип здания<a></th>
<th><a href="house_wall_material.php">Внешний материал здания</th>
<th><a href="heating_system.php">Система отопления</th>
<th><a href="hot_water_system.php">Система подачи горячей воды</th>
<th><a href="cold_water_system.php">Система подачи холодной воды</th>
<th>Жилая площадь</th>
<th>Нежилая площадь</th>
<th>Общая площадь</th>
</tr>
Немного пояснений по порядку. Тег <font> позволяет задать некоторые свойства таблицы. В моём примере я задал свойства шрифта, то есть стиль "Times New Roman", размер - 2 и цвет шрифта - черный.
Далее я создаю таблицу с помощью тегов <table></table>, также задаю ей свойства: «border» - создаю заливку границ шириной в 1 пиксель, «align» - выравнивание текста внутри таблицы по центру, «cellpadding=”6”» - задаю расстояние в ячейках таблицы между текстом и границей ячейки.
Следующими тегами <th></th> создаю заголовки столбцов, которые выделены полужирным начертанием. Попутно некоторые заголовки я создаю в виде ссылок при помощи тегов <a></a>, указывая при этом, на какой сайт или в какой файл она приведёт. Те файлы, что указаны в ссылках, будут созданы позднее.
После того, как заголовки столбиков таблицы были созданы, необходимо создать оставшуюся часть таблицы. Продолжим код создания таблицы, но сперва нам необходимо подключиться к созданной раннее базе данных. Это делается очень просто.
Создаётся новый файл сonnection.php, который содержит следующие строки:
<?php
$host="localhost";
$user="root";
$password="qwerty";
$db="diplom";
$connection = mysql_connect($host, $user, $password) or die("Error");_query("set_client='utf8");_query("set character_set_results='utf8");_query("set collation_connection='utf8_general_ci'");_query ("SET NAMES utf8");
$select_bd = mysql_select_db($db, $connection) or die("Error");
?>
Кратко поясню, что делает этот файл. Перед тем, как вообще зайти в интерфейс программы phpMyAdmin, чтобы создать базу данных, мне требовалось создать пользователя. Таким образом, созданная БД имеет свой хост, своего пользователя, пароль и имя базы данных. Эту информацию и хранят те четыре переменные, что описаны в коде (имя переменной соответствует самой информации). Следующая переменная $connection создаёт подключение к phpMyAdmin. Если подключение успешное, то продолжаем дальше, в противном случае - выводит сообщение о том, что подключение не удалось. А переменная $connect_bd позволяет нам подключиться к той базе данных, которая указана в скобках.
А теперь вернёмся к завершению создания таблицы. Последняя часть кода таблицы:
<?php
$result = mysql_query("SELECT * FROM houses");($myrow = mysql_fetch_array($result))
{
$pole1=$myrow['house_id'];
$pole2=$myrow['street'];
$pole3=$myrow['build_year'];
$pole4=$myrow['house_type'];
$pole5=$myrow['house_wall_material'];
$pole6=$myrow['heating_system'];
$pole7=$myrow['hot_water_system'];
$pole8=$myrow['cold_water_system'];
$pole9=$myrow['living_quarter'];
$pole10=$myrow['not_living_quarter'];
$pole11=$myrow['area_common_property'];"<div>
<tr>
<td align='center'>$pole1</td>
<td align='center'>$pole2</td>
<td align='center'>$pole3</td>
<td align='center'>$pole4</td>
<td align='center'>$pole5</td>
<td align='center'>$pole6</td>
<td align='center'>$pole7</td>
<td align='center'>$pole8</td>
<td align='center'>$pole9</td>
<td align='center'>$pole10</td>
<td align='center'>$pole11</td>
</tr>";"</div>";
}?>
</table>
Итак, в переменную $result заносится выборка
информация каждого поля одной строчки из таблицы «houses». Затем эта информация
записывается в массив $myrow. Далее каждое поле из таблицы отдельно
записывается в свою переменную. А цикл «while» помогает пробежаться по каждой
записи в таблице и. И наконец, с помощью команды вывода «echo» мы «рисуем ещё
строчку таблицы в документе, тем самым она заполняется с помощью «while».
Результат этого кода представлен на рисунке 4.
Ссылки, которые были созданы в начале кода таблицы, указывают на файлы, благодаря которым информация отображается похожим образом. Поэтому их создание я не буду сюда включать.
Следующим этапом проектирования было создание кнопки, с помощью которой пользователь мог бы заносить информацию прямо с сайта в базу данных, её сохранение и отображение.
Сперва нужно создать кнопку, которая могла бы отправить пользователя на страницу, где пользователь мог был занести данные в БД.
<form>
<button formaction="invite.php">Добавить запись</button>
</form>
С помощью этого куска кода я создаю форму, в которой создаётся кнопка с говорящим названием «Добавить запись». Нажав на неё, пользователь попадает на заранее созданную страницу в файле invite.php. Часть кода, хранимого в этом файле такова:
<div align="center">
<form action="query-invite.php" method="post">
<label>Номер дома:</label><br />
<input type="text" name="house_id"><br />
<label>Улица:</label><br />
<input type="text" name="street"><br />
<label>Год ввода в эксплуатацию:</label><br />
<input type="text" name="build_year"><br />
<label>Тип здания:</label><br />
<?php
$result = mysql_query("SELECT identificator FROM house_type");'<select style="width: 175px" name="house_type">';($row = mysql_fetch_array($result))
{
$pole1=$row['identificator'];"<option value='$row[identificator]'>$row[identificator]</option>";
}"</select>";
?></br>
<label>Внешний материал здания:</label><br />
<?php
$result = mysql_query("SELECT type FROM house_wall_material");'<select style="width: 175px" name="house_wall_material">';($row = mysql_fetch_array($result))
{
$pole1=$row['identificator'];"<option value='$row[type]'>$row[type]</option>";
}"</select>";
?></br>
<label>Система отопления:</label><br />
<?php
$result = mysql_query("SELECT identificator FROM heating_system");'<select style="width: 175px" name="heating_system" >';($row = mysql_fetch_array($result))
{
$pole1=$row['identificator'];"<option value='$row[identificator]'>$row[identificator]</option>";
}"</select>";
?></br>
<label>Система подачи горячей воды:</label><br />
<?php
$result = mysql_query("SELECT identificator FROM hot_water_system");'<select style="width: 175px" name="hot_water_system">';($row = mysql_fetch_array($result))
{
$pole1=$row['identificator'];"<option value='$row[identificator]'>$row[identificator]</option>";
}"</select>";
?></br>
<label>Система подачи холодной воды:</label><br />
<?php
$result = mysql_query("SELECT identificator FROM cold_water_system");'<select style="width: 175px" name="cold_water_system">';($row = mysql_fetch_array($result))
{
$pole1=$row['identificator'];"<option value='$row[identificator]'>$row[identificator]</option>";
}"</select>";
?></br>
<label>Жилая площадь:</label><br />