uAdmin Tutorial Part 12 - Introduction to HTML Template
=======================================================
In this part, we will discuss about designing a table in HTML and setting up a template file.
Before you proceed, make sure you have at least the basic knowledge of HTML. If you are not familiar with HTML, we advise you to go over `W3Schools`_.
.. _W3Schools: https://www.w3schools.com/
In this tutorial, we will use `Bootstrap 5`_.
.. _Bootstrap 5: https://getbootstrap.com/
First of all, go to your project folder and select templates.
.. image:: assets/templatesfolderhighlighted.png
:align: center
|
Inside the templates folder, create a new file named **todo.html**.
.. image:: assets/todohtmlcreate.png
:align: center
|
Inside the todo.html, create an HTML5 structure following the codes below and change the title from Document to Todo List.
.. code-block:: html
Todo List
Save the file. Run your application in the browser and see what happens.
.. image:: assets/todolisthtmltitle.png
:align: center
|
The title bar is named as Todo List. Now inside the **** tag, create a table header following the code structure below. You can choose which class of Bootstrap table that you want to display in your application. In this tutorial, we will use table-striped.
.. code-block:: html
Name
Description
Category
Friend
Item
Target Date
Progress
Save the file. Run your application in the browser and see what happens.
.. image:: assets/todolisthtmlheader.png
|
Nice! Now go back to your project folder then select views.
.. image:: assets/viewsfolderhighlighted.png
:align: center
|
Inside the views folder, create a new file named **view.go**.
.. image:: assets/viewgofile.png
|
Click `here`_ to view our progress so far.
In the `next part`_, we will talk about establishing a connection to the HTTP Handler, setting the URL path name, and executing an HTML file.
.. _here: https://uadmin-docs.readthedocs.io/en/latest/tutorial/full_code/part12.html
.. _next part: https://uadmin-docs.readthedocs.io/en/latest/tutorial/part13.html
.. toctree::
:maxdepth: 1
full_code/part12