Administrator on Vue.js + php

Practice in PHP and Vue.js and write your own admin panel for landing pages, which you can sell to customers.

Module 1. Preparing for work.

It is important to study this module in order to understand what types of admin panels exist and why you need to make your own: how much money it will bring and what advantages it will give over other admin panels.

Lesson 1. Introduction.

• Why does a landing page need an admin panel.
• 
  
• Overview of popular admin panels for static sites: Textolite and Sitecake.
• 
  
• Three reasons to develop your own admin panel.
• 
  
• What is SPA.
• 
  
• Brief overview of the technologies used.< /li>

Lesson 2. Setting up a working environment.

• Node.JS, NPM, Gulp.
• 
  
• We write modern JavaScript using Babel.
• 
  
• Web server with support for PHP OpenServer.
• 
  
• Code organization.
• 
  
• PHP and Gulp.

Lesson 3. A little about PHP.

• What is PHP and why is it needed?
• 
  
• Syntax basics.
• 
  
• Hello World in PHP.
• 
  
• Writing a simple API.
• 
  
• Understanding Cross-origin resource sharing.
• 
  
• Testing the API using the Postman program

Lesson 4. Vue.JS.

• Why we don’t need jQuery anymore.
• 
  
• < /li>
• What is Vue.
• 
  
• Installation and Hello World.
• 
  
• Event Handling in Vue
• 
  
• Bidirectional data binding.

Module result: a ready-to-use environment, understanding of developing large Single Page Applications using the Vue framework, basic knowledge of API development in PHP.

Module 2. Development of the admin panel.

Lesson 5. This mysterious iFrame.

• How the WYSIWYG editor works.
• 
  
• Load the edited page into an iFrame.
• 
  
• Frame glitches that browsers have not been able to overcome for many years .
• 
  
• Write our own onload implementation for the frame.
• 
  
• Reload the contents of the frame correctly.

Lesson 6. Editing free text on a page.

• HTML attribute contenteditable.
• 
  
• A little about the DOM tree.
• 
  
• Search for all text nodes of the page.

Lesson 7. Virtual DOM tree.

• < li>Bugs due to client scripts.
• 
  
• Creating a virtual DOM tree with scripts disabled.
• 
  
• Synchronizing text nodes of the real and virtual trees

Lesson 8. Generating modified HTML code.

• Searching for changes made.
• 
  
• Updating the virtual tree.
• 
  
• HEAD and DOCTYPE.
• 
  
• Generating HTML.

< p>Module result: a working editor that loads the page and allows you to edit it, and then generates code.Module 3. Finishing the admin panel.

Lesson 9. Improving the editor.

• Not with bootstrap alone - alternative CSS frameworks.
• 
  
• Laying out the sidebar.
• 
  
• Interactive via Vue.
• 
  
• Processing key presses.

Lesson 10. Saving edits.

• Write in PHP API to save code.
• 
  
• Introduction to the Axios JS library.
• 
  
• Send updated sources to the server.
• 
  
• Admire the result.

Lesson 11. Protecting the admin panel.

• We write in PHP API for authorization.
• 
  
• We create a password entry window.
• 
  
• Client- server interaction during authorization.
• 
  
• Configuring Apache for maximum security.

Lesson 12. Additional modules for the admin panel.

• Creating a META tag editor.
• 
  
• Automatic saving of backups on the server.
• 
  
• Restoring from a backup - functionality on the client.

The result of the module: a full-fledged admin panel with functionality no worse than Textolite and some features that are not there.