edit

Example App

Add a BMI calculator page using Javascript

1. Open the main config file located at app/config/default/application.json

2. Find the menu section, for example:

"menu": {
    "main": [{
        "href": "/examples/examples",
        "title": "Examples"
    }, {
        "href": "/examples/markup",
        "title": "Mark-Up"
    } ...

Insert the following json code under main:

    {
        "href":"/examples/bmi",
        "title":"BMI"
    }

1. Open the routing config file located at /app/config/default/routes.json. We can see that sites located at / will be routed to the controller Index and sites located at /examples/ will be routed to the controller Example.

2. Open the controller Example located at /app/controllers/Examples.php

3. Add the following function inside the Examples class

1. Create a file called bmi.php under /app/views/examples/

2. Open the bmi.php and add the following code:

1. Create example.js under the folder /app/themes/hello/js/

2. Paste the following code to example.js

1. Save all changes, and open a web brower.

2. Go to localhost, click the BMI tab on the menu, and then you should see this.

Add a BMI calculator page using new route

1. Open the main config file located at /app/config/default/application.json

2. Find the menu section and insert the following code.

{
    "href":"/Calculator/bmi_version2",
    "title":"BMI"
}

1. Open the routing config file located at app/config/default/routes.json. Add a new rule to the route.

   ["Calculator/([a-zA-Z0-9_\-/]+)", "\app\controllers\Calculator"],
   

2. Then, we will need to create a new controller for the new route. To create a new controller, create Calculator.php under the folder /app/controllers/

3. Paste the following code inside Calculator.php

1. Create a view called bmi.php under /app/views/examples/

2. Open bmi.php and add the following code:

1. Create a file called bmi_post.php under /app/views/examples/

2. Open the bmi_post.php and add the following code:

1. Save all changes, and open the site in your web brower.

2. Click the BMI tab on the menu, and then you should see the following results.