Всем привет, в этой статье мы в учебных целях сделаем простейший минималистичный шаблон для блога, с хранением постов в json файлах.

Для начала создадим файл index.php с базовым каркасом html документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>тут будет title</title>
    <meta name="description" content="тут будет description">
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>

<h1>Hello</h1>

</body>
</html>

Запустим команду php -S 127.0.0.1:2222 для того, чтобы запустить наш скрипт на порту 2222 и перейдя в браузере на нужный url увидим результат работы данного скрипта

Делаем простой шаблон блога c выводом данных из JSON

Получаем тестовые данные по API

Для того, чтобы не дублировать код много раз, созда

вая себе лишние неудобства, мы будем выводить тестовые данные, полученные по API и сохраненные в файл json на нашем сервере

Для этого мы воспользуемся сервисом https://jsonplaceholder.typicode.com/ GET метод /posts должен нам вернуть 100 постов, давайте это проверим

Создадим файл import.php

<?php

function testImport() {
    $url = "https://jsonplaceholder.typicode.com/posts";
    echo  file_get_contents($url);
}

testImport();

Тут мы объявляем функцию testImport, которая сделает запрос за указанный URL и выведет ответ на экран.

Запустим в консоли код из этого файла php -f import.php

Нам пришли данные в виде строки формата JSON.

Сначала функцией json_decode сделаем из этой строки массив данных, удалим элемент userId, снова закодируем данные в JSON и сохраним к себе на сервер.

Зачем мы удаляем userId? В шаблоне мы нигде не будем выводить эти данные и плюс это дополнительная возможность рассмотреть еще пару функций php.

В итоге наш import.php примет следующий вид

<?php
function testImport() {
$url = "https://jsonplaceholder.typicode.com/posts";
$response = file_get_contents($url);
$posts = json_decode($response,1);

// Пробегаемся по массиву и в каждом элементе массива удаляем userId
$posts = array_map(function ($el) {
unset($el['userId']);
return $el;
}, $posts);

// Кодируем массив в json
$json = json_encode($posts);

//Записываем на диск
file_put_contents('data.json', $json);

}

testImport();

После запуска данного кода мы увидим, что в папке появился файл data,json с нужными нам данными. Теперь мы можем удалить файл import.php и приступить к верстке

Верстка для блога и вывод данных

В начале index.php заведем массив для хранения постов, и запишем данные с нашего файла

<?php
$posts = json_decode(file_get_contents('data.json'), 1);
?>

Внутри тега body создадим div с классом container, внутри которого будем проходить по массиву, и для каждого созлавать div с классом post, и выводить заголовок в теге h2 и текст в теге p

<div class="container">
<?php
foreach ($posts as $post):
?>
<div class="post">
<h2><?=$post['title'] ?></h2>
<p><?=$post['body']?></p>
</div>
<?php
endforeach;
?>
</div>

Результат выполнения данного кода

100 постов это слишком много для одной страницы, поэтому ограничимся 10

<?php
$posts = json_decode(file_get_contents('data.json'), 1);
$posts = array_slice($posts,0,10);
?>

Готово, теперь поработаем с css классами

.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.post {
border: 1px solid #ccc;
margin-bottom: 20px;
-webkit-box-shadow: 11px 10px 8px 0 rgba(34, 60, 80, 0.47);
-moz-box-shadow: 11px 10px 8px 0 rgba(34, 60, 80, 0.47);
box-shadow: 11px 10px 8px 0 rgba(34, 60, 80, 0.47);
padding: 10px 40px;
}
.post p {
font-size: 1.4em;
letter-spacing: 1px;
line-height: 31px;
text-align: justify;
}
.post h2 {
margin: 0;
}