MTV — DJANGO

So ,the MTV here stands for Model-Template-View, all of which we have covered till now in Django. Initially, we worked with templates by returning them with the help of render() in our views.py. Then we worked with our admin panel where we registered our models. Now we have to connect all these dots together and produce a product. So, today we will be using the data available in our models in our HTML with the help of template tagging. Then we will be returning this HTML in our views with the help of a template. Finally, little bit of CSS will be applied in order to have a pleasing appearance. Commençons !!

Okay, so let us start by creating a view for our page. If you remember, we used a dictionary (key-value pair) for inserting the data into our HTML. Here also we will be using the same concept but instead of assigning a single string/value, we will be assigning a list to each key. The first key will have the list of names sorted by their roll numbers and the other list will have values sorted by their names (which is the primary key of first list). We can sort and put the values into a list by using order_by method as shown:

list_name = Model.objects.order_by(‘field_name’)

So, after our lists are ready we can assign them to our keys. Now we can return our template with the help of render(). Everything discussed above is shown below:

The name of our html file is first_app.html.

We are basically creating a table with details of all the students where the details are captured from our models. These details are then inserted into our table with the help of our dictionary. In our HTML, we have to use template tagging for some conditions, so we have to use {% condition %}. We are first checking the validity of our list (using the same key), if it is available we are defining the headers for our table. Then for all the available objects in our list, we have to store the roll number, first name and the last name in each row. Template tagging is little bit different from standard python as we have to finish “if” and “for” conditions as shown:

{% endfor %}

{% endif %}

All the above mentioned steps are shown below:

The same set of steps are performed for the marks_info model and a header is declared for the page. Now our page would look like this:

The marks are displayed as per the name of the student, you can cross check, if you want. But the display is not proper and hence needs some adjustment. For this, we have to declare a div block along with float attribute. Float will decide the position of our table from the side borders, hence in order to have both the tables side by side, we have use div as:

<div style=”float: left”>

Now we can see the changes in our page:

We can now have a proper display using our spreadsheet. We are providing a border to each cell by removing the doubling of border by using border-collapse attribute like:

table{
border-collapse: collapse;
}

The rest of the attributes are defined below:

After necessary steps are done to use our static files in Django, we are ready with our final product page with details of all the students available !

Now it looks pretty good and I am very much satisfied. That’s all for today, we will be working with forms in Django in coming blogs which is similar to our Models, we will talk about it later. You can find the github link for the project files below. Stay safe and keep coding…

ashish-sharma-260696/MTV-DJANGO

Thank you for reading, if you liked the article please click on the clap button and show your support. You can clap more than once, just keep pressing the icon!!!