Lists on the main page, linking to the certain direction ! {{% Django %}}
In this Chapter, we're going to learn about making lists on the page and link to the certain pages.
you can see when you click the list, it's going to the room/1 , room/2, room/3
GO to views.py and let me make some lists !
rooms = [
{'id': 1, 'name': 'Head'},
{'id': 2, 'name': 'Face'},
{'id': 3, 'name': 'Neck'},
]
we're going to use room.html. That's why I named "rooms" here
So we want to be able to render this data out inside of the template.
def home(request):
context = {'rooms': rooms}
return render(request, 'base/home.html', context)
we can add in as many as we want and 'rooms' we specify how we want to address it in the template and then :rooms we specify what we're passing in.
Going to home.html
{% extends 'main.html' %}
{% block content %}
<h1>Home Template</h1>
<div>
<div>
{% for room in rooms%}
<div>
<h5>{{room.id}} -- <a href="/room/{{room.id}}">{{room.name}}</a></h5>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
<div> I created this for main page.
{% for room in rooms%}s two curly braces and creating for loop
the difference between Python and Django, we need to close the function {% endfor %}
Variables can be passed in with two curly braces {{room.id}} do room so we're getting the room object on each iteration and dot id and then do two hyphen -- and then we want to pass in the room name {{room.name}}
Run the server
you see the lists on the page.
Now we have all templates in the same folder, In the future we would have different apps that handle different parts of our website and what I like to do here is create a templates folder that represents every single template that is going to be available throughout the application or is not specific to a part of our app here. In this case main is going to be available everywhere in our application and so is the navbar. Home and Room are going to be specific to the main app.
so we're creating new folder inside of main, named templates and making another folder named main inside of templates. (it has to be named whatever your app is called if your app something else, make sure you have the app name which is base templates and then inside of templates a folder with your app name in this case main.
(if your app name is "star", star-templates-star)
So we're going to move "room.html", "home.html" into the folder we just created !
Now, Let's say we want to make hyperlink for our lists so that user can get to the specific direction by clicking the lists.
1. Head
2. Face
3. Neck
what we can do is pass in a dynamic value! Going to main - urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name="home"),
path('room/<str:pk>/', views.room, name="room")
]
dynamic value,,, <> two angle brackets and we're saying str string and pk for Primary key. (str can be int or slug,, whatever you want but a lot of people do str)
now inside of view, we need to pass in another parameter,
def home(request):
context = {'rooms': rooms}
return render(request, 'main/home.html', context)
def room(request, pk):
room = None
for i in rooms:
if i['id'] == int(pk):
room = i
context = {'room': room}
return render(request, 'main/room.html', context)
Since we moved home.html & room.html into main-templates-main folder, we say main slash home.html main/home.html and main/room.html
in home.html we create href path <h5>{{room.id}} -- <a href="/room/{{room.id}}">{{room.name}}</a></h5>
room = None first go to it, it's not going to have a room,
we're going to loop through the rooms value so we'll for i in rooms: so that list of objects or dictionaries. and if i['id'] == int(pk): means we're checking all the ids, whatever id matches that primary key that's in the url we're just going to go ahead, find it and we're just going to say room = i then what we can do is simply set a context dictionary so we'll do context = {'room': room}
now go to room.html we create "<h1>{{room.name}}</h1>" the template we can access it this way that's going be the h1 tag.
Let's run the server again;
The reason we added "name" in urls.py is.... when you want to change urls, it's so annoying if you need to change url at every pages. so.. if you want to make changes. go to home.html
home.html <a href="/room/{{room.id}}">{{room.name}}</a></h5>
you can change the link.. {% url ' ' %}
<a href="{% url 'room' room.id %}">{{room.name}}</a></h5>
like this .. you don't need to change every url path inside urls.py
