Файл: Основы программирования на языке HTML (Секционирование содержания).pdf

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

Авторизация

Первое что видит пользователь подключаясь на сайт – страницу авторизации(рис. 3), в которой предлагается ввести логин и пароль. HTML-код этой страницы представлен в приложении на Листинге 2.

Рис.3 Авторизация

Как видно их исходного HTML-кода, для создания этой страницы использовался тег <table> (таблица) с двумя столбцами. Причем в верхнем и нижнем рядах ячейки объединены атрибутом colspan, а в середине ячейки сохранены. Схематически это можно показать следующим образом.

<td colspan=’2’>Авторизация</td>
<td>Логин:</td>	<input name='NAME'></input></td>
<td>Пароль:</td>	<input type='password' name='PASS'></input>
<td colspan=’2’><button type='submit'>LOGIN</button> </td>

Кнопка LOGIN имеет атрибут submit, что означает отправку данных формы на сервер. Открывающий тег формы имеет вид <form method='post' action='index.php'>, где мы используем метод POST для отправки данных на сервер(данные пойдут через массив браузера $_POST[‘имя_переменной’]). Таким образом, значения записанные в поля NAME и PASS будут получены на сервере в виде переменных $_POST['NAME'] и $_POST['PASS'].

Чтобы не углубляться в описание работы серверной части приложения, отмечу лишь что после проверки правильности введенных данных, сервер запомнит уникальный идентификатор сессии session_id() как авторизованный, и при дальнейших обращениях уже не будет запрашивать авторизацию, а сразу будет предоставлять доступ в основной веб-интерфейс приложения. В случае бездействия(таймаута) в течение 2х минут или более, идентификатор будет стерт, и т.о. потребуется повторная авторизация. При этом любое действие в веб-интерфейсе продлевает таймаут еще на 2 минуты.

Также хотелось бы обратить внимание на ссылку в заголовке html-кода:

Ссылка на файл, содержащий каскадные таблицы стилей. Его содержание представлено в приложении, в листинге 3.

Первый селектор body меняет цвет фона страницы на светло-голубой. Селектор table определяет границы таблицы как сплошную линию шириной 1 пиксель, а также выравнивает таблицу посередине страницы и задает фоновый цвет таблицы как светло-синий. Селекторы td и button определяют отступы от границы формы, а также для ячеек таблицы определен размер шрифта font-size.

Основной интерфейс

Как и в случае с окном авторизации используется таблица, для расположения элементов управления(Приложение – Листинг 3). Всего таблица состоит из 8 столбцов, однако, по строкам используя атрибут colspan и таблица, создается необходимым образом для размещения элементов управления.

Совокупность отступов и разлиновки(границ таблицы) реализованы через CSS (Приложение -- листинг 4).

Интерактивность приложения обеспечивается с помощью JavaScript. Полный текст приведен в Приложении, листинг 7. Изменение пользователем содержимого тегов <input> приводит к вызову обработчика прописанному для события onkeyup. Для каждого тега можно увидеть свой обработчик.

Поиск авторов и книг

Например, для поиска авторов по фамилиям пользователь будет набирать текст в поле

При вводе каждой новой буквы будет вызываться обработчик quickSearchAuthor(). Рассмотрим его подробнее

function quickSearchAuthor()
{
var fname = document.getElementById("firstName");
var lname = document.getElementById("lastName");
var mname = document.getElementById("middleName");
var list = document.getElementById("author_list");
$.post('actions.php',{ACTION:"GET_AUTHORS_BY_NAME", FName:fname.value,
LName:lname.value, MName:middleName.value}, function(data)
{
fillList(list, data, ["LastName", "FirstName", "MiddleName"]);
});
}

menu.js Фрагмент кода Листинг 5.

Переменные fname, lname и mname будут указателями на соответствующие элементы -- <input> с идентификаторами firstName, lastName, middleName.

Переменная list – указатель на список авторов <select> с идентификатором author_list.

Функция выполняет AJAX-запрос методом POST серверного скрипта actions.php, передавая ему по переменным $_POST[‘ACTION’], $_POST[‘FName’], $_POST[‘LName’], $_POST[’MName’] соответствующие значения.

Чтобы не углубляться в серверную часть работы приложения, не являющуюся предметом данной работы, я лишь кратко опишу этот процесс. На сервере будет выполнен MySQL запрос вида:

SELECT * FROM authors WHERE LastName LIKE '".$lname."%' AND FirstName LIKE '".$fname."%' AND MiddleName LIKE '".$mname."%' LIMIT 100"

Результат запроса будет сериализирован для передачи клиентскому браузеру:

язык PHP : echo json_encode(array_values($resp));

Браузер, получив ответ в переменную data, передаст управление функции fillList, которая, как следует из названия, заполнит список с идентификатором author_list соответствующими значениями:

function fillList(list, data, dataColumn)
{
list.innerHTML="";
var decoded = JSON.parse(data);
decoded.forEach(
function(elem)
{
var option = document.createElement("option");
if (Array.isArray(dataColumn))
{
option.text = elem[dataColumn[0]]+" "
+elem[dataColumn[1]]+" "
+elem[dataColumn[2]];
}
else
{
option.text = elem[dataColumn];
}
list.add(option);
});
}

menu.js Фрагмент кода Листинг 5.

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

Аналогичным образом выполняется выборка книг по конкретному автору. Для выбора конкретного автора, опять, используется элемент управления <select>:

<select id='author_list' size='20' style='width: 570px'

onchange='authorSelected(this)'></select>

При выборе автора, происходит событие onchange, вызывающее обработчик authorSelected(this), где аргумент this – указатель на вызывающий объект, в данном случае <select id=’author_list>:

function authorSelected(list)
{
var fio = list.value.split(" ");
var book_list = document.getElementById("book_list");
$.post('actions.php',{ACTION:"GET_BOOKS_BY_AUTHOR", LName:fio[0], FName:fio[1],
MName:fio[2]}, function(data)
{
bookListWithIds=JSON.parse(data);
fillList(book_list, data, "Title");
});
}

menu.js Фрагмент кода Листинг 5.

Обрабочтик разбивает ФИО автора на массив, используя в качестве разделителя символ пробела, определяет указатель на список книг book_list. Далее следует уже знакомый нам вызов AJAX серверного скрипта actions.php методом POST, с той лишь разницей, что теперь мы пересылаем не одну, а целых 3 переменных.

Код скрипта actions.php представлен в Листинге 6. Результатом его работы будет сериализированные даные, содержащие список книг конкретного автора, расположенные в переменной data.

Десериализируем данные с использованием JSON.parse() и заполняем ими список book_list, причем используя для этого тот же метод fillList что и для заполнения списка авторов. Разница здесь в том, что при заполнении списком авторов третий аргумент метода fillList представляет собой массив(Фамилия, Имя, Отчество), а при заполнении списка книг – массивом этот аргумент не явлется. Метод fillList проверяет это обстоятельство и действует соответственно.

Отметим что результат, возвращенный с сервера, будет сохранен в глобальной переменной bookListWithIds, для двльнейшего использования.

Выбор конкретной книги в списке обрабатывается функцией bookSelected(list), функционал котрой сводится к двум важным вещам –

отчистка элемента <div id=’d_link’>, где будет размещена ссылка на скачивание книги.
var dl = document.getElementById("d_link");
if (dl.innerHTML!="") dl.innerHTML="";
помещение в глобальную переменную selectedID индекса выделенного пользоватлеме элемента <select>:
1. selectedID = list.selectedIndex;

На последнем этапе, после выбора автора и книги, пользователь желает её скачать – для этого служит кнопка «Получить ссылку на скачивание»:

<button onclick='downloadBook()'>Получить ссылку на скачивание</button>

Обработчик downloadBook() имеет следующий вид:

function downloadBook()
{
$.post('actions.php',{ACTION:"DOWNLOAD_BOOK",
ID:bookListWithIds[selectedID]['BookID']},
function(data)
{
var dl = document.getElementById("d_link");
dl.innerHTML="<p><a href='"+data+"' download>СКАЧАТЬ</a>";
});
}

menu.js Фрагмент кода Листинг 5.

В данном случае на сервер отправляется ID книги, хранящийся в массиве bookListWithIds по индексу выбранному пользователем в списке <select> selectedID. Полученное имя файла записываем в элмент <div id=’d_link’>, оформляя как ссылку для скачивания <a href download>, кликнув по которой пользователь скачает нужную книгу.

На сервере по ID книги из базы данных извлекается информация о папке с именем архива и имени файла с книгой. Запускаем архиватор и извлекаем нужный файл в папку, доступную из интернета, в нашем случае – Apache24\htdocs.

Сериализировать в данном случае одно название файла нет необходимости, поэтому через echo передаем его браузеру как есть.

public static function DownloadBook($id)
{
$req = "SELECT * FROM books WHERE BookID='".$id."'";
$resp=DBase::Request($req);
$folder = $resp[0]['Folder'];
$file = $resp[0]['FileName'].".fb2";
$arch = 'D:\\fb2.Flibusta.Net\\'.$folder;
$cmd = "C:\\7Zip\\7z.exe e ".$arch." -oc:\\Apache24\\htdocs\\ ".$file." -r >nul";
$null=system($cmd, $ret);
echo($file);
}

actions.php Фрагмент кода Листинг 6

С этим фрагментом связана одна сложность. По какой-то причине, консольный вывод результата работы 7z.exe, попадает в буфер echo() поэтому необходимо либо принудительно отчищать его, либо, как в данном случае, направлять консольный вывод в nul.

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

ЗАКЛЮЧЕНИЕ

Таким образом, проведенная работа демонстрирует освоение автором основ HTML, а также основ смежных технологий(CSS, JavaScript, PHP, MySQL), необходимых для построения полнофункциональных веб-сайтов и веб-приложений. Продемонстрированы основы концепции разработки веб-приложения на всех этапах – дизайн пользовательского интерфейса, серверные скрипты, клиент-серверное взаимодействие.

Библиография

Печатные издания

Лыткина, Е.А. Основы языка HTML : учебное пособие / Е.А. Лыткина, А.Г. Глотова ; Министерство образования и науки Российской Федерации, Федеральное государственное автономное образовательное учреждение высшего профессионального образования Северный (Арктический) федеральный университет им. М.В. Ломоносова. - Архангельск : САФУ, 2014. 104 стр.

П. Храмцов, С. Брик, А. Русак, А. Сурин. / Применение каскадных таблиц стилей (CSS) : курс - 2-е изд., исправ. - Москва : Национальный Открытый Университет «ИНТУИТ», 2016. - 82 с. : ил. - (Основы информационных технологий). 512 стр.

Никсон Р. / Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е изд. — СПб.: Питер, 2016 С.41 изд. — СПб.: Питер, 2016 768 стр.

Ресурсы в сети Интернет

Основные элементы // Веб-документация MDN: сайт. 2016. 7 авг.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element#Основные_элементы

(дата обращения: 23.10.2018)

HTML5 Reference / Basic Templates// Консорциум W3: сайт. 2010. 9 авг.

URL:// https://dev.w3.org/html5/html-author/#basic-templates (дата обращения: 23.10.2018)

Doctype // Веб-документация MDN: сайт. 2018. 8 фев.

URL:// https://developer.mozilla.org/ru/docs/Словарь/Doctype/ (дата обращения: 23.10.2018)

<html> // Веб-документация MDN: сайт. 2015. 29 апр.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/html (дата обращения: 23.10.2018)

Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

(Дата обращения: 23.10.2018)

<body> // Веб-документация MDN: сайт. 2017. 13 мар.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 23.10.2018)

Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

(Дата обращения: 23.10.2018)

Метаданные документа // Веб-документация MDN: сайт. 2016. авг.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element#Метаданные_документа

(дата обращения: 23.10.2018)

Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

(Дата обращения: 23.10.2018)

Яндекс Помощь // Яндекс Вебмастер// Использование мета-тегов и других HTML

URL:// https://yandex.ru/support/webmaster/controlling-robot/html.html

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/link (дата обращения: 23.10.2018)

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/style (дата обращения: 23.10.2018)

<title> // Веб-документация MDN: сайт. 2018. 2 апр.

Смотрите также файлы

Игра как метод воспитания (Теории обучения и воспитания).pdf

СОСТАВ НЕЗАКОННОГО ПРЕДПРИНИМАТЕЛЬСТВА.pdf

Распределение осужденных к лишению свободы по исправительным учреждениям.pdf

Оборотные активы предприятия (ООО «МЕЛЬНИЦА»).pdf

Управление формированием прибыли на предприятии.pdf

Файл: Основы программирования на языке HTML (Секционирование содержания).pdf

ЗАКЛЮЧЕНИЕ

Библиография

Смотрите также файлы

Информация

Списки файлов

Дополнительно