ПРОГРАМУВАННЯ ДЛЯ ВЕБ

Збірник завдань

Найпростіші консольні застосування

Hello, world! Написати сценарій, який виводить на екран статичний текст (“Hello,
world!”).

Максимальний елемент. Написати на Node.js функцію, яка приймає як аргумент

масив та повертає максимальний елемент цього масиву. Вправу виконати в двох
варіантах:
- у процедурному стилі на основі ітеративного циклу for;
- у функціональному стилі з використанням функції Array.reduce()

Сортування рядків
Написати на Node.js функцію, яка приймає рядок як параметр та повертає рядок, в
якому всі символи вхідного рядка відсортовані. Проілюструвати роботу цієї функції

Екстремальний інкремент
Знайти мінімальне значення змінної x, для якої інструкція

console.log((x++)<x);

виводить на екран false.

Нетранзитивні порівняння
Навести приклад таких числових змінних x, y,z, що x==y дорівнює true, y==z
дорівнює true, але x==z дорівнює false.

Кращі за посередність. Написати на Node.js функцію, яка приймає як аргумент

масив цілих чисел та повертає суму елементів масиву, що перевищують його середнє
арифметичне.

Сортування масивів. Написати на Node.js функцію, яка приймає як аргумент масив

цілих чисел та повертає масив, який складається з тих самих чисел, але відсортованих за
спаданням значень. Початковий масив при цьому змінитися не повинен.

Підрахунок символів. Написати на Node.js функцію, яка приймає як аргумент рядок

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

Вилучення елемента. Написати на Node.js програму, яка для деякого масиву

порівнює час виконання функцій shift() та pop(). Використати пакет performance-now

Найпростіші клієнт-серверні застосування

Привіт від сервера

Написати простий сервер, який запускається на певному порті та при зверненні до
нього передає браузерові статичний текст
 Відображення сторінки
Написати простий сервер, який запускається на певному порті та при зверненні до
нього передає браузерові деяку HTML-сторінку

Привітання клієнтові
Написати клієнт-серверне застосування, яке за допомогою форми отримує від
клієнта його ім'я та виводить цьому клієнтові привітання.
На основі виконання цієї вправи:
- показати, як можна передати дані до сервера, не використовуючи форму;
- проілюструвати, що може трапитися, якщо користувач введе в полі введення теги
розмітки, які не будуть належним чином оброблені.
Серверну частину реалізувати на Node.js.

Базові формати даних

Читання та запис
У текстовому файлі записано кілька слів, розділених пробілами. Написати консольне
застосування, яке зчитує файл, виводить його вміст на екран та додає до файлу нове слово.

Підключення JSON
Дано JSON-файл messages.json

{
"welcome":"You are welcome",
"reject":"Go away, please"
}

і програму simplejson.js:

let messages=require("./messages.json");
console.log(messages.welcome);

Модифікувати цю програму так, щоб вона виводила всі властивості об’єкта

messages, отриманого з JSON-файлу.

JSON-серіалізація
У консольній програмі створити масив об’єктів. Кожний об’єкт описує деяку
особистість, зокрема її прізвище та вік.
Написати код, який серіалізує цей масив на диску у JSON-форматі, а після цього
створює копію масиву шляхом десеріалізації та для цієї копії виводить на екран назви та
значення властивості для всіх об’єктів у форматі

Властивість_1: Значення_1
Властивість_2: Значення_2
----------------------------------------------------------
Властивість_1: Значення_1
Властивість_2: Значення_2

При цьому ні кількість властивостей для кожного об’єкта, ні назви властивостей

заздалегідь невідомі
 Робот-шпигун
Написати програму, яка зчитує код ресурсу за заданим URL та зберігає його в
локальному файлі.

Шаблонізатори

Відображення колекції. В серверній програмі зберігається масив; кожний елемент

цього масиву є об’єктом, що описує деяку книжку, зокрема містить дані про автора, назву
та рік видання. Забезпечити відображення цієї інформації в браузері з використанням
Twig, Pug або іншого шаблонізатору в наступному вигляді:

Бази даних
Вибірка з бази. Реорганізувати вправу «Відображення колекції» так, щоб
інформація про об’єкти, що мають бути відображені на сторінці, зберігалися в MongoDB.

Поштова розсилка
Поштовий бот
Написати програму, яка надсилає електронного листа за вказаною адресою.

Колекції
Серійні карти
Створити колекцію Map з кількома парами ключ-значення. Серіалізувати її в JSON-
файл. Далі створити копію колекції шляхом десеріалізації та вивести її вміст на екран.

Асинхронне програмування

Поспішне виведення
Виправити помилку в коді

let fs=require("fs");
let s=undefined;
fs.readFile("test.txt", "utf8",
function(error,data){
if(error) throw error;
s=data;
 });
console.log(s);

Шлях до асинхронності
Дано код

"use strict";
//Basic function

function foo(x){
return x*2;
}

let r=foo(5);
console.log(r);

Реорганізувати цей код так, щоб функція foo стала асинхронною (з модифікатором
async), але так, щоб вираз x*2 продовжував обчислюватися синхронно. Вправу
виконати в двох варіантах:
- без явного використання промісів та await;
- з використанням await.

Геть await!
Дано клієнт-серверний застосунок.
Сервер запускається на порту 7777 і при зверненні до нього відправляє клієнтові
деякий рядок. Його код має вигляд:

let http = require('http');

let express = require('express');

const PORT=7777;

let server=express();
server.listen(PORT);
console.log(`Server is running on port ${PORT}`);

server.use(express.static(__dirname));

server.get('/', function(req, res){

res.send("Ready to serve");
});

Клієнтська програма - це консольне застосування, яка звертається до сервера і

виводить отриманий рядок на екран. Її код має вигляд:

"use strict";
const fetch = require('node-fetch');
const url='http://127.0.0.1:7777/';

const getData = async url => {

 try {
const response = await fetch(url);
let res = await response.text();
console.log(res);
return res;
} catch (error) {
console.log(error);
}
};

getData(url);

Переробити клієнтський код так, щоб використовувалися не await, а then.

Обгортка в проміс
З метою затримки виконання програми на 5 с був написаний код

"use strict";
const waittime=5000;

setTimeout(
()=>{
console.log("Operation finished");
}
,waittime);
console.log("Program finished");

Але він працює не так, як очікувалося - виводиться

Program finished
Operation finished

Переробити програму так, щоб дійсно забезпечувалася затримка виконання всієї

програми на 5 с. При цьому уникати callback hell. Вправу виконати в двох варіантах:
- з використанням промісів;
- з використанням await.

Проміс-читач
Написати функцію, яка приймає ім’я файлу та повертає проміс, призначений для
зчитування цього файлу. Має використовуватися функція асинхронного читання
readFile. Проміс має використовуватися в явному вигляді (без async-await).
Використати цю функцію в основній програмі. У випадку успішного читання програма
повинна виводити на екран вміст файлу, у випадку помилки виводити на екран, що при
читанні файлу з таким іменем сталася помилка.

Вторгнення у вічність
Дано код

"use strict";
function doOperation(){
console.log("I want to be performed!");
}
 setTimeout(doOperation,0);

//Eternal loop
for (let k=0;; k++) {
if (k%1000000000==0) {
console.log(k);
}
}

Реорганізувати нескінченний цикл після коментаря //Eternal loop так, щоб він
зберіг свою функціональність, але щоб callback міг бути виконаний.

JavaScript у браузері

Прості клієнтські сценарії

Виведення повідомлення. Написати JavaScript-сценарій, який виводить

користувачеві деяке повідомлення, а після натискання на Ok продовжує роботу та
виводить основний вміст сторінки.

Діалогове вікно. Написати JavaScript-сценарій, який виводить користувачеві

діалогове вікно з пропозицією ввести число, поки введене число не буде коректним. Після
цього сценарій має вивести вікно, в якому повідомляється про квадрат цього числа.

Об’єктна модель документа

Додавання вузла. Дані елементи

<div>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<hr/>
<div>
<p>Eleven</p>
<p>Twelve</p>
</div>

Написати код на клієнтському Java Script, який при натисканні на кнопку Add додає
до першого елементу div елемент p з вмістом Four. Використати можливості DOM.

Комунікації
Дані з сервера
Написати веб-сторінку, яка при натисканні на кнопку звертається до сервера з
використанням XMLHttpRequest або fetch та забезпечує формування контенту на основі
отриманих даних.

AJAX
Простий AJAX
Дана сторінка

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX client</title>
</head>
<body onLoad="getData();">
Content:
<br/>
<div id="content">

</div>
<script type="text/javascript">

function treatData(content) {
let elem=document.getElementById("content");
elem.innerHTML='';
for (let item of content) {
elem.innerHTML+="<p><strong>"+item+"</strong></p>";
}

function getData() {
let url="/data";
fetch(url).
then(response=>response.json()).
then(res=>treatData(res));
}

</script>
</body>
</html>

На бекенді:

let http = require('http');

let express = require('express');

let server=express();
server.listen(8888);
console.log('Server is running on port 8888');

server.use(express.static(__dirname));

let arr=[];
let i=0;
function add(){
if (++i>200) process.exit();
arr.push(i);
console.log(arr);
}

setInterval(add,5000);

server.get('/', function(req, res){

res.sendFile(__dirname+"/ajaxclient.html");
});

server.get('/data', function(req, res){

console.log("Got request");
res.send(JSON.stringify(arr));
});

Модифікувати сторінку так, щоб дані оновлювалися з сервера через кожну 1 с.

Використання WebWorkers

Браузерний паралелізм
Написати веб-сторінку, яка має наступний вигляд:

та забезпечує наступну функціональність:

 Кнопка Запустити Worker запускає в браузері паралельний процес (Web
Worker), який збільшує значення лічильника; це значення з певною періодичністю має
оновлюватися на сторінці.
Кнопка Зупинити Worker зупиняє процес.
Кнопка Перевірка інтерфейсу забезпечує виведення вікна з повідомленням.

Фреймворки та бібліотеки
Елементарний React
Написати сторінку, яка забезпечує виведення статичного тексту з використанням
React

Реактивний об’єкт
У серверній програмі зберігається об’єкт, який містить дані про деякий автомобіль
(зокрема, про його марку та колір). Написати сторінку, яка при натисканні на кнопку
звертається до сервера, отримує від нього ці дані в JSON-форматі та забезпечує
відображення у вигляді

Для відображення використати React.

Незнайомий об’єкт
За допомогою React відобразити всі назви і значення властивостей деякого об’єкта,
якщо ці назви та значення заздалегідь невідомі.
Вказівка: скористатися Object.keys() та map()

Реактивна колекція
У базі даних зберігається інформація про деякі книжки. Написати клієнт-серверне
застосування зі сторінкою, яка при натисканні на кнопку забезпечує виведення цієї
інформації в наступному вигляді:
 Використати React. Для відображення окремої книжки створити компонент; на
сторінці використати відповідний елемент Book.

Використання Vue
У базі даних зберігається інформація про деякі книжки. Написати клієнт-серверне
застосування зі сторінкою, яка при натисканні на кнопку забезпечує виведення цієї
інформації в наступному вигляді:
 Використати Vue. Для відображення окремої книжки створити компонент; на
сторінці використати відповідний елемент Book.

Сценарії на PHP

Привітання клієнтові
Написати клієнт-серверне застосування, яке за допомогою форми отримує від
клієнта його ім'я та виводить цьому клієнтові привітання.
На основі виконання цієї вправи:
- показати, як можна передати дані до сервера, не використовуючи форму;
- проілюструвати, що може трапитися, якщо користувач введе в полі введення теги
розмітки, які не будуть належним чином оброблені.
Серверну частину реалізувати на PHP.

Контроль знань
Написати сценарій, який проводить міні-тест: задає запитання з кількома варіантами
відповідей, після натискання кнопки дані відсилаються на сервер. У випадку правильної
відповіді має з’явитися повідомлення “Відповідь вірна”, а у випадку неправильної – “
Відповідь невірна ”. Використати радіокнопки. Форма має залишатися на екрані і після
відповіді сервера.

Хто та звідки
Написати веб-застосування, яке виводить на екран IP-адресу клієнта, а також адресу
сайта, з якого був здійснений перехід. Якщо такого сайту немає, повинно бути виведено
відповідне повідомлення

Редактор статей
На сервері зберігається декілька текстових ресурсів ("статей"). Написати сценарій,
який формує сторінку, яка для кожної статті містить два лінки: один дозволяє перейти до
неї в режимі читання, а інший – відредагувати за допомогою форми

Перегляд і виконання
Написати простий сценарій А, який виводить певний текст. Написати інший РНР-
сценарій, який може виводити код сценарію А, або ж результати його роботи. В режимі
виведення результатів роботи повинно виводитися гіпертекстове посилання, яке дозволяє
перейти в режим виведення коду, і навпаки – в режимі виведення коду повинно
виводитися гіпертекстове посилання, яке дозволяє перейти до режиму виведення
результатів роботи. Конкретна назва сценарію А передається у запиті від форми або
вводиться прямим набором в URL

Зворотний порядок
Написати сценарій, який зчитує текстовий файл та формує інший файл, в якому всі
слова початкового файлу розташовані в зворотному порядку (наприклад, текст "хочу
вчитися" повинен перетворитися на "вчитися хочу"). Для цього написати функцію, яка
приймає рядок та аргумент та повертає рядок, в якому всі символи вхідного рядка
розташовані в зворотному порядку

Сортування масивів
У текстовому файлі міститься інформація про зарплати співробітників деякої
компанії. Дані про кожного співробітника записані в окремому рядку у вигляді
"Прізвище-Зарплата"; роздільником виступає дефіс. Написати РНР-сценарій, який в
залежності від значення керуючої змінної виводить список співробітників, відсортований
за зростанням зарплати або за її спаданням. Значення керуючої змінної передається у
запиті від форми або вводиться прямим набором в URL.

Регулярний калькулятор
Написати консольне застосування, яке реалізує простий калькулятор: вводить з клавіатури
простий арифметичний вираз з двома операндами, що має вигляд, подібний до 3 + 5 (або
5*6) та виводить на екран його значення. Пробіли між операндами та знаками
арифметичних операцій можуть бути як присутніми, так і відсутніми. Використати
регулярні вирази. Програма має контролювати коректність введення. Функцію eval
та подібні до неї можливості не використовувати

Об’єктні риси PHP

Простий клас
Cтворити Value Object, який інкапсулює інформацію про окремий запис у блозі.
Передбачити, зокрема, орієнтацію на двомовність, короткий і повний вміст, а також дві
категорії записів – важливі та ординарні. Проілюструвати використання цього класу.

Сутності в Smarty
Для деякого екземпляру класу з вправи “Простий клас” відобразити інформацію про його
поля засобами Smarty.

Універсальний клас
Написати клас, який описує деяку сутність в ситуації, коли її властивості, і відповідно –
поля класу заздалегідь невідомі. Клас має забезпечувати засоби для отримання значення
конкретної властивості та для встановлення властивості в нове значення. Стандартні
засоби для підтримки динамічних властивостей (методи __get() та __set() не
використовувати.

Перший крок до DAO

Створити основу для DAO – на першому етапі записи блогу зберігаються в готовому
вигляді в масиві. Передбачити як мінімум методи для:
- ініціалізації масиву;
- отримання всіх записів блогу;
- отримання записів за заданим ID;
- отримання записів за заданим набором ID;
- отримання записів з певної категорії;
- додавання нового запису;
- вилучення запису за ID;
- оновлення запису.

DAO та база даних

Реорганізувати DAO, отримане у вправі “Перший крок до DAO”, для взаємодії з MySQL

Сеанси

Лічильник відвідувань
На сервері здійснена спроба організувати підрахунок кількості відвідувань, для цього був
написаний сценарій
let express = require('express');
let fs=require("fs");

let server=express();
server.listen(8888);
console.log('Server is running on port 8888');
const fName="counter.txt";

server.use(express.static(__dirname));

server.get('/', function(req, res){

console.log("Client connected");
let c=fs.readFileSync(fName);
c++;
console.log("There were "+c+" connections from dear
clients");
fs.writeFileSync(fName,c);
res.send("This page has been visited "+c+" times");
});

Але вона має проблему: кількість відвідувань змінюється при кожному перевантаженні
сторінки.
Реорганізувати сценарій так, щоб кількість відвідувань залишалася незмінною протягом
сесії.

Контрольні вправи до самостійної роботи (можливі зміни, про які буде оголошено
додатково)

Пошук анаграм
Набором анаграм називається набір слів, які складаються з однакових літер, але ці літери
стоять в різному порядку (напр., автор-товар-тавро; літо-тіло, кума-мука-умка).
Написати консольне застосування, яке знаходить у словнику деякої гіпотетичної мови всі
набори анаграм та виводить їх на екран.
Анаграми повинні формуватися в програмі у вигляді асоціативного масиву.
Виведення має бути форматованим. Мають виводитися лише набори анаграм, які
складаються з 2 та більше слів; кожний набір має виводитися в окремому рядку у вигляді

автор – товар – тавро

Написати та використовувати допоміжну функцію сортування рядка. Вона приймає рядок

як аргумент та повертає відсортований рядок, в якому всі символи вхідного рядка
розташовані за алфавітом.
Слова словника мають читатися з зовнішнього текстового файлу.
Вправу виконати як консольне застосування Node.js.

аворт ->[автор, товар, тавро]

RESTful-сервіс
У базі даних зберігаються деякі інформаційні одиниці (книжки, статті тощо). Написати
сервіс, який забезпечує стандартні CRUD-операції (отримання всіх записів, отримання
запису за ID, додавання, оновлення та видалення записів). Доступ до бази даних
забезпечувати на основі принципів DAO.
Сервіс організувати на основі принципів REST. Сервіс має здійснювати передачу
інформації у форматі JSON. Передбачити можливість тестування сервісу за допомогою
Postman.
Крім реалізації стандартних операцій CRUD, реалізувати бізнес-логіку, яка виходить за
межі цих операцій.
База даних - MongoDB або MySQL (на вибір).
Сервіс реалізувати на основі Node.js та Express.

Робота з CSV
У текстовому файлі зберігається інформація про оцінки студентів з деяких
дисциплін у вигляді

100;15;71
12;100;99
…

кожному студентові відповідає окремий рядок.

Написати клієнт-серверне застосування, яке забезпечує відображення цієї інформації
в табличному вигляді; має бути гіпертекстове посилання, яке забезпечує сортування за
зростанням або за спаданням середнього рейтингу.
При отриманні запиту від клієнта серверна програма має зчитувати CSV-файл та
формувати масив об’єктів з відповідними властивостями.
Для відображення використати шаблонізатор (Twig, Pug і т.п.), а також Twitter
Bootstrap. Сервер має бути реалізований на основі Node.js та Express.

Пособник спамера
Створити базу даних електронних адрес з як мінімум наступною інформацією: прізвище,
ім'я та по батькові та електронна адреса. Написати на Node.js клієнт-серверний
застосунок, який забезпечує розсилку електронних листів за цими адресами.
Користувачеві має бути наданий веб-інтерфейс, який забезпечує відображення переліку
адрес у відсортованому вигляді, а також надає можливість вибрати текст повідомлення з
деякого заздаледь заданого набору повідомлень або ввести свій текст.
Написати також веб-інтерфейс, який забезпечує керування списком розсилки: додавання
нових адрес та редагування і вилучення існуючих.
Адреси мають зберігатися в базі даних (MongoDB або MySQL).
Для відображення використати Twitter Bootstrap.
Сервер має бути реалізований на основі Node.js та Express.

Товстий клієнт
Реорганізувати вправу “RESTful-сервіс” так, щоб доступ до сервісу міг здійснювався за
допомогою браузера. Забезпечити клієнтський інтерфейс для перегляду сторінок, а також
інтерфейс адміністратора. Залишити можливість тестування сервісу через Postman.
Браузерний скрипт на основі JS має отримує від сервера наявну інформацію у вигляді
JSON-даних та забезпечує форматоване відображення цих даних на веб-сторінці. Для
відображення інформаційних одиниць використати React або Vue.
Реалізувати AJAX: після додавання нової інформації за допомогою
адміністративного інтерфейсу сторінка перегляду має оновлюватися без явної
ініціації з боку користувача.
Серверна частина має бути реалізована на Node.js та Express.
Подбати про належне розділення архітектурних рівнів, належну підтримку сеансів, а
також про достатній рівень захисту від несанкціонованого доступу та від можливих атак.
Для відображення використати Twitter Bootstrap.

Крутий сайт

Створити сайт, кожна сторінка якого побудована на основі наступного макету:

Відображення реалізувати на основі Twitter Bootstrap та одного з шаблонізаторів.

Повинні бути реалізовані окремі шаблони для меню та основного контенту, які
підключаються до основного шаблону. Активний розділ меню повинен бути
відповідним чином виділений.
Пункти меню реалізувати за допомогою циклу в шаблоні.
На сторінках ГОЛОВНА та ПРО НАС повинна відображатися деяка статична
інформація (ГОЛОВНА була вище, ПРО НАС може мати вигляд, подібний до такого):
 На сторінці ТРЕНІНГИ повинен відображатися перелік тренінгів, які зберігаються в
базі даних - назва та короткий рекламний слоган:

При натисканні на лінк (або кнопку) Детальніше… повинен відображатися більш

детальний опис обраного тренінгу.
Виведення тренінгів (як в короткій, так і в повній формі) забезпечити на основі
шаблонізаторів або клієнтських фреймворків Vue чи React (на вибір).
Сайт повинен бути двомовним і підтримувати українську та англійську версії.
Відповідно до цього, мають бути версії сторінок різними мовами.
Реєстраційна форма має надавати можливість користувачеві заповнити заявку. Якщо
поля імені або прізвища не заповнені, повинно виводитися повідомлення “Поле з
прізвищем або іменем не повинні бути пустим”. Якщо електронна пошта є
некоректною, має виводитися повідомлення “Введена пошта є некоректною”.
Якщо номер телефону не відповідає потрібному формату, має виводитися повідомлення
“Неправильний формат телефону”. Для перевірки формату телефону
рекомендується використати регулярні вирази. Якщо пустий текст заявки, має виводитися
повідомлення “Текст заявки не може бути пустим”.
Контроль правильності заповнення форми та виведення повідомлень повинні
здійснюватися засобами клієнтського JavaScript. Якщо форма заповнена
неправильно, дані на сервер відправлятися не повинні!
Адміністратор повинен мати можливість встановити режим, який вимагає
стандартного підтвердження електронної пошти на основі листа користувачеві. Цей
режим встановлюється в конфігураційному файлі. В цьому режимі користувачеві має
виводитися відповідне повідомлення. В разі підтвердження користувачеві надсилається
лист про прийняття його заявки.
Якщо ж режим підтвердження не встановлено, повідомлення про успішне прийняття
заявки має виводитися зразу (при цьому сторінка сайту теж має відображатися).
Заявки мають зберігатися в базі даних (на вибір - MySQL або MongoDB).
Адміністратору має бути наданий окремий інтерфейс для перегляду та вилучення
заявок, а також для додавання нових тренінгів.
Серверну частину реалізувати на основі Node.js та Express.
Назва сайту (в даному прикладі Круті тренінги), його доменне ім’я (в даному
прикладі cooltraining.com.ua), назва файлу з зображенням для основної сторінки,
колір меню, пункти меню та режим підтвердження мають читатися з конфігураційного
файлу (за замовченням config.json).
За бажанням студента та погодженням з викладачем конкретна предметна область
(тренінги) може бути замінена на іншу (книги, товари тощо), але зі збереженням усіх
інших вимог.

Рефакторинг – стандартне розділення архітектурних рівнів

Дано сторінку, яка відображає деякий книжковий каталог; для кожної книги
відображається її автор, назва та рік видання. При цьому книжки, видані після 2010 року,
повинні відображатися жирним шрифтом. Використовується PHP:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251">
<title> No template page </title>
</head>
<body bgcolor="white">
<center>
<font color="green">
<h1>BOOK CATALOGUE</h1>
</font>
</center>
<br/><br/>
<?php
class Book {
public $author;
public $title;
public $year;
function __construct($author, $title, $year) {
$this->author=$author;
$this->title=$title;
$this->year=$year;
}
}

$books = array(
new Book("Ivanov","Addicted to murders",2018),
new Book("Petrov","The art of web programming",1901),
new Book("Sidorov","How to cheat",1515)
);

foreach ($books as $book) {

if ($book->year>2010) echo "<b>";
echo $book->author.' - '.$book->title.' - '.$book->year.'<br/>';
if ($book->year>2010) echo "</b>";

?>

</body>
</html>

Цей код відображається наступним чином:

Завдання:
Показати недоліки наведеного рішення. Реорганізувати його в наступних напрямках:
- уникати deprecated-тегів (зокрема, <font>); оформлення сторінки здійснювати на основі
таблиць стилів;
- повністю відокремити рівень представлення від бізнес-логіки – зокрема, на сторінці, яка
призначена для відображення, не повинно бути PHP-коду; для такого відокремлення
використати Smarty або Twig;
- дані про книжки зберігати в базі даних MySQL в таблиці books;
- відокремити бізнес-логіку від рівня даних на основі DAO та VO; всі звернення до даних
повинні здійснюватися лише через DAO; повинна здійснюватися нелінива ініціалізація
DAO, тобто при кожному зверненні всі дані з бази даних повинні завантажуватися в DAO;
в класі DAO мають бути функції ініціалізації даних та отримання всіх книжок.

Бонус. Реалізувати варіант цієї вправи на Laravel.