1. Home
  2. Docs
  3. Simpods MVC
  4. Tutorials
  5. Lessons
  6. SIMPODS MVC – MVC QUICK DEMO

SIMPODS MVC – MVC QUICK DEMO

Learning Outcomes

  • Name-based rule: Controllers, JavaScript, CSS and Ajax files with the same path and name as the view file will be auto-loaded. For example, if your template is named something.php, then name your controller, JavaScript, CSS, Ajax files to be something.php, something.js, something.css, and something.php respectively for them to be auto-loaded. Note that this rule doesn’t apply to model classes.

  • How to use Simpods MVC at the frontend.
  • How to use Simpods MVC at the Backend

Pre-installed Simpods components

1.0 Simpods MVC 2.0.1 dashboard

How to Use Simpods MVC at the Frontend

Template (view) created from the sample

2.1 Create a “projects” template from the sample

Create a page with the projects template

2.2 Create a page with the “projects” template

Activate the frontend controller inspector

3.1 Activate the frontend controller inspector

Frontend controller inspector

3.2 Frontend controller inspector

Create a frontend controller

4.1 Create a frontend controller

Frontend controller loaded

4.2 Frontend controller loaded

Frontend CSS with the same template name

5.1 Template CSS – change font-size

Template CSS affects frontend

5.2 Only applies to the template

Template JavaScript affects frontend

6.1 Template JS – add an alert

Template JS affects frontend

6.2 Only applies to the template

Code Snippet for Controller:
Copy to Clipboard
Add a button with "call-ajax" class

7.1 Add a button with “call-ajax” class 

Frontend JavaScript for ajax

7.2 Frontend JavaScript for Ajax

Localise variables: frontend

7.3 Localise variables: frontend controller

Frontend ajax works

7.4 Frontend Ajax works

Frontend model class

8.1 Create a frontend model class

Controller fetch data from model

8.2 Controller fetch data from model

Render the data out at the frontend

8.3 Print out data from controller

Data flow: model - controller - view

8.4 Data flow: model – controller – view

How to Use Simpods MVC at the Backend

Activate the backend controller inspector

9.1 Activate the backend controller inspector

Page controller not found

9.2 Page controller not found

Create a backend controller

9.3 Create a backend controller

Backend controller loaded

9.4 Backend controller loaded

Create a backend JavaScript file

10.1 Create a backend JavaScript file

Backend JavaScript auto-loaded

10.2 Backend JavaScript auto-loaded

Create a backend CSS file

10.3 Create a backend CSS file

Backend CSS loaded

10.4 Backend CSS loaded

Backend model class

11.1 Create a backend model class

Add functions for a meta box

11.2 Add methods for a meta box

Create an class instance in controller

11.3 Create an class instance in controller

Added a meta box

11.4 Added a meta box

JavaScript for the meta box

12.1 JavaScript for the meta box

Create a backend ajax file

12.2 Create a backend ajax file

Backend localise variables

12.3 Backend localise variables

Backend trigger Ajax

12.4 Backend trigger Ajax