In this lesson we will be creating the control there page hit the Red Square to stop the process go
to server P Why file here we created the index page so we will be adding on the controller page let's
set the decorator at Mark app dot root slash controller slash now we defined the controller function
return render template followed by controller HDMI all now go to the Template folder and right click
choose new and click on HD AML file set the name to controller and hit OK.
You can see the HDMI all has been created under the template folder in these two HCM l files there will
be common codes so we will be creating a layout HDMI nail file where we can gather all the common layouts
of the pages right click on the index HDMI all file and select copy right click on the templates folder
and choose Paste change the name of the file to layout and hit ok you can see that the layout HDMI all
file has been created and the content is exactly the same this layout HDL will become the base layout
for the pages we'll set the indexed HDMI all fault to load the layout and we will only change the contents.
First I want you to make sure you are using layout HDMI all delete the content part and the content
part right.
Curly braces followed by the percentage mark then a space block content space percentage mark and close
the curly braces.
Next open another curly braces.
The percentage marks space and block space and percentage mark and close the curly braces.
Now let's open index HDMI.
Here we will delete the top part of the HD UML file and leave the content part.
Once you've deleted go to the top and write curly braces.
Percentage mark extends layout HMO percentage mark and close curly braces.
Next set.
Curly braces.
Percentage Mark Block content percentage mark and close curly braces.
By setting this block content the content in the index H2 AML will be overwritten onto the site.
Lastly we need to set another Crowley braces with percentage mark and block percentage mark and close
the curly braces.
I want you to run this script again to see if the page has been successfully created.
As we run the process we can see that the page is exactly the same as we made earlier.
Hit the red square to stop the process.
Now let's go on and finish making the controller page.
First we need to copy some parts from the index HDMI and copy the curly braces and go onto the controller
HDMI Alpha.
Delete all the script in the controller HDMI URL and paste the curly braces that we just copied.
Also go back to the index AGM now to copy that and block and paste it on the bottom of the controller
age GMO.
We will be writing under the block content let's start with style said the controller box with text
aligned to center next right div class equals controller box.
Now close the div tag
followed by h1 tag.
Remote control once you've finished writing the script run the script and make sure what you've created.
As we run the process click on the link which will take us to the top page.
Click on controller showing on the bottom of the site as you hit controller.
You will see a site with the words remote controller on the top.
The header will be the same as the top page withdrawn world on the top.
Next to the home button once you click on the home button we are able to go back to the top page.
We've successfully created some pages using the layout HDMI out in our next lesson.
We will be adding some functions to the controller HMO.
So see you there.