Создание сайта с помощью фреймворка HLEB. Часть 8. Ресурсы проекта

(!) Примеры и описание для более новой версии фреймворка HLEB2 могут отличаться от приведенных в тексте.

Подходит к завершению поэтапное создание демонстрационного сайта на PHP фреймворке HLEB. В этой части будут подключены файлы JS и CSS к проекту. Они уже были назначены ранее, теперь их нужно создать по образцу.

Ресурсы

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

Файл CSS /public/css/main.css

    body {
    font-family: Verdana, Arial, serif;
    padding: 15px 10px;
}
a {
    padding-right: 10px;
    color: #d27d11;
}
button {
    cursor: pointer;
    font-size: 25px;
    color: blueviolet;
}

Файл JS /public/js/main.js

function addLikeForUser() {
    let xhr = new XMLHttpRequest();
    /*  Это синхронный запрос, нам больше и не нужно   */
    xhr.open('POST', '/likes/add/', false);
    /* Получение токена для CSRF-защиты запроса  */
    const params = "_token=" + document.querySelector('meta[name="csrf_tocken"]').getAttribute('content');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    try {
        xhr.send(params);
        if (xhr.status != 200) {
            alert(`Ошибка ${xhr.status}: ${xhr.statusText}`);
        } else {
            /* Преобразование полученных данных */
            let data = JSON.parse(xhr.responseText);
            /* Обновление количества лайков на странице */
            document.getElementById('NumberOfLikes').innerText = data.count;
        }
    } catch(err) {
        alert("Не получилось выполнить запрос");
    }
}

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

Скачать все файлы урока в ZIP-архиве

Предыдущая статья

В начало

Продолжение. Часть 9