Попрактикуетесь в PHP и Vue.js и напишете свою админку для лендингов, которую можно продавать заказчикам.
Модуль 1. Подготовка к работе.
Важно изучить этот модуль, чтобы понимать, какие виды админ-панелей существуют и почему нужно сделать свою: сколько денег это принесет и какие преимущества перед другими админками это даст.
Урок 1. Введение.
- Зачем лендингу нужна админка.
- Обзор популярных админок для статических сайтов: Textolite и Sitecake.
- Три причины разработать свою админку.
- Что такое SPA.
- Краткий обзор используемых технологий.
Урок 2. Настройка рабочего окружения.
- Node.JS, NPM, Gulp.
- Пишем современный JavaScript с использованием Babel.
- Веб сервер с поддержкой PHP OpenServer.
- Организация кода.
- PHP и Gulp.
Урок 3. Немного о PHP.
- Что такое PHP и зачем он нужен.
- Основы синтаксиса.
- Hello World на PHP.
- Пишем простейшее API.
- Разбираемся с Cross-origin resource sharing.
- Тестируем работу API с помощью программы Postman.
Урок 4. Vue.JS.
- Почему нам больше не нужен jQuery.
- Что такое Vue.
- Установка и Hello World.
- Обработка событий во Vue
- Двунаправленный биндинг данных.
Результат модуля: подготовленное к работе окружение, понимание разработки больших Single Page Application с использованием фреймворка Vue, начальные знания о разработке API на PHP.
Модуль 2. Разработка админки.
Урок 5. Этот загадочный iFrame.
- Как работает WYSIWYG редактор.
- Загружаем редактируемую страницу в iFrame.
- Глюки фреймов, которые браузеры вот уже много лет не могут побороть.
- Пишем собственную реализацию onload для фрейма.
- Перезагружаем содержимое фрейма правильно.
Урок 6. Редактирование произвольного текста на странице.
- HTML аттрибут contenteditable.
- Немного о DOM дереве.
- Поиск всех текстовых нод страницы.
Урок 7. Виртуальное DOM дерево.
- Баги из-за клиентских скриптов.
- Создаем виртуальное DOM дерево с отключенными скриптами.
- Синхронизация текстовых нод реального и виртуального дерева.
Урок 8. Генерация измененного HTML кода.
- Поиск внесенных правок.
- Обновление виртуального дерева.
- HEAD и DOCTYPE.
- Генерируем HTML.
Результат модуля: работающий редактор, который загружает страницу и позволяет ее редактировать, а затем генерирует код.
Модуль 3. Доделываем админку.
Урок 9. Облагораживаем редактор.
- Не бутстрапом единым - альтернативные CSS фреймворки.
- Верстаем сайдбар.
- Интерактив через Vue.
- Обрабатываем нажатие клавиш.
Урок 10. Сохранение внесенных правок.
- Пишем на PHP API для сохранения кода.
- Знакомство с JS библиотекой Axios.
- Отправляем обновленные исходники на сервер.
- Любуемся результатом.
Урок 11. Защищаем админку.
- Пишем на PHP API для авторизации.
- Верстаем окно ввода пароля.
- Клиент-серверное взаимодействие при авторизации.
- Настраиваем Apache для максимальной безопасности.
Урок 12. Дополнительные модули для админки.
- Делаем редактор META тегов.
- Автоматическое сохранение бэкапов на сервере.
- Восстановление из бекапа - функционал на клиенте.
Результат модуля: полноценная админка с функционалом не хуже чем у Textolite и некоторыми фишками которых там нет.
