Программирование [Александр Никитин] Админка на Vue.js + php (2019)

[Moderator]

Автор: Александр Никитин

Название: Админка на Vue.js + php (2019)

Попрактикуетесь в 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 и некоторыми фишками которых там нет.

 

Подробнее:

Ссылки и информация для скачивания: