Попрактикуетесь в 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 и некоторыми фишками которых там нет.
Программа курса
Модуль 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 и некоторыми фишками которых там нет.
Скрытое содержимое могут видеть только пользователи групп(ы): VIP