uAdmin Tutorial Part 10 - 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.
In this tutorial, we will use Bootstrap 4. For the tutorials, click here.
First of all, go to your project folder and select views.

Inside the views folder, create a new file named todo.html.

Inside the todo.html, create an HTML5 structure following the codes below and change the title from Document to Todo List.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Change the title from Document to Todo List -->
<title>Todo List</title>
</head>
<body>
</body>
</html>
Save the file. Run your application in the browser and see what happens.

The title bar is named as Todo List. Now inside the <body>, 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.
<div class="container-fluid">
<table class="table table-striped">
<!-- Todo Fields -->
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Category</th>
<th>Friend</th>
<th>Item</th>
<th>Target Date</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Save the file. Run your application in the browser and see what happens.

Nice! Now go back to your project folder then select templates.

Inside the templates folder, create a new folder named custom.

Inside the custom folder, create a new file named template.go.

In the next part, we will talk about establishing a connection to the template, setting the URL path name, and executing an HTML file.