<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="yandex-verification" content="303a8b78865d9e22" />
    <title>Шаг 16: JSON-API ответ</title>
    <link rel="icon" type="image/png" href="i.png">
    <style>
        :root { --bg: #f8f9fa; --panel: #ffffff; --accent: #8c6dd1; --text: #2b2b3b; --code-bg: #1e1e2e; --code-text: #d4d4d4; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
        .container { max-width: 900px; margin: 0 auto; }
        .nav-bar { margin-bottom: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
        .step-link { padding: 8px 16px; border-radius: 6px; text-decoration: none; color: var(--text); background: #e9e9f1; cursor: pointer; }
        .step-link.active { background: var(--accent); color: white; }
        .section { background: var(--panel); padding: 24px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 24px; }
        h1, h2, h3 { color: var(--text); }
        pre { background: var(--code-bg); color: var(--code-text); padding: 16px; border-radius: 8px; overflow-x: auto; font-family: monospace; }
        code { font-family: monospace; }
        .result-box { background: #fff8e1; padding: 16px; border-left: 4px solid #ff9800; border-radius: 4px; margin-top: 16px; font-size: 1.05rem; }
        form { display: flex; gap: 8px; max-width: 320px; }
        input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 8px 16px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
<div class="container">
    <h1>🐘 PHP: книга по шагам (Полный курс)</h1>

    <nav class="nav-bar">
                    <a href="?step=1" class="step-link ">
                Шаг 1:  1: Переменные и вывод            </a>
                    <a href="?step=2" class="step-link ">
                Шаг 2:  2: Условия (if/else)            </a>
                    <a href="?step=3" class="step-link ">
                Шаг 3:  3: Циклы (foreach)            </a>
                    <a href="?step=4" class="step-link ">
                Шаг 4:  4: Функции            </a>
                    <a href="?step=5" class="step-link ">
                Шаг 5:  5: Массивы и вывод списка            </a>
                    <a href="?step=6" class="step-link ">
                Шаг 6:  6: Работа с формой (POST)            </a>
                    <a href="?step=7" class="step-link ">
                Шаг 7:  7: PDO и безопасный запрос к БД            </a>
                    <a href="?step=8" class="step-link ">
                Шаг 8:  8: Работа с датой и временем            </a>
                    <a href="?step=9" class="step-link ">
                Шаг 9:  9: Работа с файлами            </a>
                    <a href="?step=10" class="step-link ">
                Шаг 10:  10: JSON и API-подобные данные            </a>
                    <a href="?step=11" class="step-link ">
                Шаг 11:  11: Функции и форматирование цен            </a>
                    <a href="?step=12" class="step-link ">
                Шаг 12:  12: Валидация формы            </a>
                    <a href="?step=13" class="step-link ">
                Шаг 13:  13: Логирование в файл            </a>
                    <a href="?step=14" class="step-link ">
                Шаг 14:  14: Безопасный SELECT через PDO            </a>
                    <a href="?step=15" class="step-link ">
                Шаг 15:  15: Сессии и авторизация            </a>
                    <a href="?step=16" class="step-link ">
                Шаг 16:  16: JSON-API ответ            </a>
                    <a href="?step=17" class="step-link ">
                Шаг 17:  17: ООП (Классы и объекты)            </a>
                    <a href="?step=18" class="step-link ">
                Шаг 18:  18: Итоговый мини-проект (Список курсов)            </a>
            </nav>

    <section class="section">
        <h2>Шаг 16: JSON-API ответ</h2>
        <p>header(&quot;Content-Type: application/json&quot;) говорит браузеру, что мы отдаем JSON. json_encode() превращает массив в строку JSON.</p>
    </section>

    <section class="section">
        <h3>Код для этого шага (только PHP)</h3>
        <pre><code>$data = [&quot;course&quot; =&gt; &quot;PHP для начинающих&quot;, &quot;price&quot; =&gt; 5900, &quot;lessons&quot; =&gt; [&quot;Введение&quot;, &quot;Переменные&quot;, &quot;Условия&quot;]]; header(&quot;Content-Type: application/json; charset=utf-8&quot;); echo json_encode($data, JSON_UNESCAPED_UNICODE);</code></pre>
    </section>

            <section class="section">
            <h3>Результат выполнения</h3>
            <div class="result-box">
                {"course":"PHP для начинающих","price":5900,"lessons":["Введение","Переменные","Условия"]}            </div>
        </section>
    
    </div>
</body>
</html>
