Общая постановка задачи
Ежегодно в филиале РГППУ г. Нижнего Тагила проводится международный конкурс компьютерной графики. В этом году было принято решение о разработке встраиваемого модуля, предназначенного для хранения и обработки on-line заявок участников.
Разработку встраиваемого модуля стоит поделить на несколько этапов.
Этап 1. Создание базы данных для хранения и учёта заявок.
Этап 2. Создание формы для реализации приёма заявки.
Этап 3. Создание формы для вывода информации.
В основе разработки базы данных лежит определение её структуры. База данных должна быть нормализованной, а автоматизация реализована с помощью организации связей между таблицами. На этом этапе необходимо учесть, что все таблицы должны соотноситься только с одной темой, а каждое поле должно соответствовать заполняемым данным. Кроме того, важно определить первичные ключевые поля с автоматически заполняемыми значениями. При этом должны быть выбраны место расположения базы данных с подходящей системой управления.
Для разработки формы следует определить её конструкцию с указанием многократно используемых объектов. Установить переменные, способы их передачи и подключаемые функции. Также должна быть создана основа формы на языке HTML.
Формы должна иметь возможность быть встроенными в сайт международного конкурса компьютерной графики. Следовательно, для решения данной задачи необходимо подключить стилевые таблицы, специальным файлом, соответствующие графическому оформлению сайта. Формы должны передавать в базу данных информацию посредствам языка PHP. Схема работы модуля представлена на рисунке 1.
Рис. 1. Диаграмма работы модуля
Решение поставленной задачи
Этап 1. Разработка базы данных
Сама база данных имеет имя Zaiavki и состоит из четырёх таблиц, связанных между собой.
Рис. 2. Схема базы данных
Первая таблица хранит в себе сведения об участнике конкурса и именуется Users. Она включает: id – уникальный идентификатор каждого заявителя, fio – фамилия имя отчество участника конкурса, uz – название учебного заведения, spec – специальность на которой обучается участник, kurs – курс на котором обучается участник, ruk – фамилия имя отчество руководителя, fak – факультет, date – дата и время приёма заявки.
Вторая таблица содержит информацию о работах участника конкурса под названием Rab. Поля: id – идентификатор каждой работы, id_us – идентификатор автора работы, nom – номинация, nr – название работы, file – путь и измененное имя загруженного файла.
Третья таблица содержит данные об учебном заведении под названием Uch_uz. Поля: id – идентификатор каждого учебного заведения, name_uz – название учебного заведения, city – город, adress – адрес учебного заведения, fkl – факультет.
Четвертая таблица содержит данные о руководителе имеет наименование Main_ruk. Поля: id – идентификатор каждого руководителя, name_r – фамилия имя отчество руководителя, dol – должность, n_uz – название учебного заведения, email – электронная почта руководителя, tel – контактный телефон.
В каждой таблице поля id – это ключевые поля с автоматическим заполнением и типом integer. Поле date для корректной передачи имеет тип datatime. Все остальные поля имеют тип varchar с длиной 255 символов и со сравнением кодировки utf8_unicode_ci.
Этап 2. Разработка формы заявки
Форма подачи заявки участника состоит из HTML-основы, PHP- кода и jQuery-кода. Оформление и некоторые особенности задаются каскадными стилевыми таблицами.
HTML-основа состоит из: текстовых полей для заполнения (input type="text"), поля с выпадающим списком для выбора номинации (select), поля выбора файла для загрузки файла на сервер (input type="file"), элемента checkbox для соглашения с политикой конфиденциальности сайта, ссылок на пользовательское соглашение и на политику конфиденциальности (a href), а также кнопки для отправки формы (input type="submit").
Для возможности оправки файла на сервер и сведений в базу данных форма должно иметь тип enctype="multipart/form-data" и метод передачи method="post" [3].
Рассмотрим фрагмент кода, представленный в листинге 1.
Листинг 1
<form name="register" action="zaia.php" method="post" enctype="multipart/form-data">
<p><label> Номинация<br>
<select name="nom" class="input" id="nom" ><option value="Цифровое фото">Цифровое фото</option><option value="Коллаж/Фотомонтаж">Коллаж/Фотомонтаж</option>... </select></label></p>
<p><label> Название работы<br>
<input type="text" name="nr" value="" size="20" class="input" id="nr" onkeyup="checkParams()" value="" autocomplete="on"></label></p>
...
<p><label> Загрузите файл <input type="file" name="image" class="button" /></label></p>
<p>(подерживаются форматы jpg,png,gif,bmp,jpeg,tiff)</p>
<hr align="center" width="500" size="2" />
<p><a href="https/... </a></p>
<p><a href="https://..."> Политика конфиденциальности </a></p>
<p><label> Согласен с политикой конфиденциальности сайта <input type="checkbox" name="check" id="check" value="1" required></label></p>
...
<input type="submit" name="register» id="submit" value="Отправить" disabled />
autocomplete="on" – элемент автозаполнения включен
onkeyup="checkParams()" – элемент для запуска jQuery – кода.
Вид формы представлен на рисунке 4.
Рис. 3. Вид формы заявки
Изначально кнопка отправки отключена (disabled). Такая особенность задействована для реализации jq-скрипта, который проверяет заполненность всех полей, и CSS-кода, который проверяет соглашение заполняющего с политикой конфиденциальности [2]. Это исключает возможность отправки неполной формы. Если все поля заполнены корректно, то кнопка становится доступной.
Рассмотрим CSS-код, представленный в листинге 2.
Листинг 2
<style type="text/css">
form:invalid input[type="submit"] {opacity: 0.25;}
</style>
Данный код позволяет сделать кнопку прозрачной.
Рассмотрим фрагмент кода jQuery.
Листинг 3
<script>
function checkParams() {
var fio = $('#fio').val();
var email = $('#email').val();
...
if(fio.length != 0 && email.length != 0 && …) {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', 'disabled');}}</script>
Данный код проверяет длину, заранее определенных переменных, которые соотносятся с текстовыми полями. Если все поля заполнены корректно, то выключается атрибут disabled на кнопке отправки формы.
PHP-код обрабатывает форму путем подключения к базе данных, созданием SQL-запросов и отправки переименованного файла на сервер [4].
В начале инициализируем файл connection.php для подключения к базе данных и определим нужные переменные, предаваемые методом POST [5].
Листинг 4
<?php require_once("scripts/connection.php");?>
<?php
if(isset($_POST["register"])){
$fio = htmlspecialchars(trim($_POST['fio']));
$email = htmlspecialchars (trim($_POST['email']));
Далее выполняем запросы к таблицам подключенной базы данных и загружаем файл на сервер, с предварительной проверкой расширения и переименованием.
Листинг 5
$sql = "INSERT INTO users (fio, uz, spec, kurs, ruk, fak, date) VALUES ('$fio', '$uz', '$spec', '$kurs','$ruk', '$fak', NOW())";
$result=mysqli_query($con, $sql);
. . .
$filetypes = array('.jpg','.JPG','.Jpg','.gif','.GIF','.Gif','.bmp','.BMP','.Bmp','.png','.PNG','.Png','TIFF','Tiff','tiff','JPEG','Jpeg','jpeg');
$upload = 'images/';
$filename = $['image']['name'];
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);
if(!in_array($ext,$filetypes))
die ('<script>window.location.href = "error1.html"</script>');
if(move_uploaded_file($['image']['tmp_name'],$upload.uniqid('file_').$ext))
. . .
$file='images/'.uniqid('file_'.$ext);
. . .
Переменная $filetypes хранит в себе массив с возможными расширениями, загружаемых файлов. Далее идет проверка расширения загружаемого файла. Если расширение неравно одному из значений массива соединение приостанавливается и осуществляется переход на страницу ошибки. Если с расширением все в порядке, то имя файла заменятся на сгенерированное с помощью функции uniqid.
Функция move_uploaded_file перемещает переименованный файл в заданную директорию.
Этап 3. Создание формы для вывода информации
В данной форме будет осуществляться поиск участников по их именам. Для этого будет динамически генерироваться таблица с возможными значениями.
Рассмотрим HTML-код формы.
Листинг 5
<form name="form" id="form" action="names.php" method="post" style="margin:0px">
<label>Введите часть имени<input type="text" name="fio" value=""size="32" style="width:100%" /></label>
<label><input type="submit" name="names" value="Найти" /> </label>
<label><input type="button" value="На главную" onClick='location.href="https://ntgspigraf.000webhostapp.com"'></label>
Форма состоит из одного текстового поля и кнопок «Найти» и «На главную».
Листинг 6
$fio = htmlspecialchars(trim($_POST['fio']));
if(!empty($fio)){
$sql="SELECT fio,uz,fak,spec,city,ruk
FROM users, uch_z
where users.uz=uch_z.name_uz AND fio like '%" . mysqli_escape_string($con,$fio) . "%'
GROUP BY fio";
Первоначально определим переменную $fio, которая будет означать Ф.И.О. участника конкурса.
SELECT определяет имена столбцов, подключаемых к выборке из базы данных.
FROM определяет таблицы, подключаемые к выборке.
WHERE задает ограничение на строки табличного выражения из предложения.
like – это оператор SQL устанавливающий соответствие символьной строки с шаблоном.
mysqli_escape_string($con,$fio) – это функция используется для создания допустимых в SQL строк, которые можно использовать в SQL выражениях. Заданная строка кодируется в экранированную SQL строку, используя текущий набор символов подключения.
GROUP BY объединяет ряды, имеющие одинаковое свойство с применением агрегатных функций.
В дальнейшем нам нужно создать заголовок таблицы и саму, динамически заполняемую, таблицу.
Рассмотрим фрагмент PHP-кода заголовка таблицы.
Листинг 7
echo '<thead>';
echo '<tr>';
echo '<th>Ф.И.О.</th>';
echo '<th>Город</th>';
echo '<th>Учебное заведение</th>';
echo '<th>Специальность</th>';
echo '<th>Факультет</th>';
echo '<th>Руководитель</th>';
echo '</tr>';
echo '</thead>';
Тем самым будет создано шесть заголовков столбцов.
Рассмотрим фрагмент PHP-кода вывода табличных данных.
Листинг 8
while($data = mysqli_fetch_array($result))
{ echo '<tr>';
echo '<td>' . $data['fio'] . '</td>';
echo '<td>' . $data['city'] . '</td>';
echo '<td>' . $data['uz'] . '</td>';
echo '<td>' . $data['spec'] . '</td>';
echo '<td>' . $data['fak'] . '</td>';
echo '<td>' . $data['ruk'] . '</td>';
echo '</tr>';}
else{echo'Записи о таком пользователе нет. Попробуйте изменить запрос';}} else {
echo "Введите часть фио!";}}
Заполнение таблицы из базы данных производится циклом while ($data = mysqli_fetch_array($result)) [1].
Где mysqli_fetch_array – функция которая выбирает одну строку из результирующего набора и помещает ее в ассоциативный массив. Данный цикл будет выполняться до тех пор, пока в базе есть данные удовлетворяющие запросу $result.
Рис. 4. Страница поиска по имени
Рис. 5. Создаваемая таблица
Вывод
Реализуемые формы позволяют производить системный учёт заявок участников их работ, руководителей и учебных заведений. Эти формы и базу данных можно встроить в сайт или же разместить на стороннем хостинге. При их работке были использованы скриптовый язык PHP для отправки сведений в базу данных, JavaScript – для обеспечения интерактивности разрабатываемых компонентов, CSS – для оформления внешнего вида форм, jQuery – для создания обработчиков событий. В процессе разработки также необходимо учитывать, что встраиваемый модуль будет располагаться на сайте конкурса графики, поэтому его внешний вид должен соответствовать дизайну сайта.
Библиографическая ссылка
Лобашов А.И., Бужинская Н.В. РАЗРАБОТКА ВСТРАИВАЕМОГО МОДУЛЯ УЧЕТА ЗАЯВОК УЧАСТНИКОВ КОНКУРСА ГРАФИКИ НА ОСНОВЕ ВЕБ-ТЕХНОЛОГИЙ // Международный студенческий научный вестник. – 2019. – № 1. ;URL: https://eduherald.ru/ru/article/view?id=19566 (дата обращения: 21.11.2024).