1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
Slide 1
------------
Title Slide
**Creating an Interface to view the Blog**
Slide 2
--------------
**Learning Objectives**
In this tutorial, we will learn to;
- Create a new view with custom queries
- Create an interface to view all blogs and articles
Slide 3 [00:11 | 00:31]
---------------
**System Requirements**
- Ubuntu 16.10
- Python 3.5 or higher version
- python3.4-venv
Slide 4 [00:11 | 00:42]
---------------
**Pre-requisites**
In order to follow this tutorial, you need to know;
- how to create models in django
- how to write django queries
- how to create templates
- how to write views
- If not, see the relevant django tutorial on http://spoken-tutorial.org
Slide 5:
----------------
**Create a new View**
- Modify the blog/views.py, modify the get_blogs view to display the Blog List of a particular user in a template
def get_blogs(request, user):
user_object = User.object.get(username=user)
blogs = Blog.objects.filter(creator=user_object)
context = {'blogs': blogs}
return render(request, 'blog/index.html', context)
Slide 6:
---------------------
**Modify the blogs template**
- Modify the template created previously, located at ```/blog/templates/blog/blogs.html``` to look like below
{% if blogs %}
<ul>
{% for blog in blogs %}
<li>{{ blog.name}}</li>
<ul>
{% for article in blog.article_set %}
<li>{{ article.title }}</li>
{% endfor %}
</ul>
{% endfor %}
</ul>
{% else %}
<p>No Blogs are available.</p>
{% endif %}
Slide 7:
---------------------
**Modify the URLs**
- Modify the urls located in the ```myproject``` folder
# /myproject/urls.py
from django.conf.urls import include, url
from django.contrib import admin
from blog import urls
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^blog/$', blog.urls) # Change this line
]
- Modify the urls located in the ```blogs``` folder
# /blogs/urls.py
from django.conf.urls import patterns, url
from blog import urls
urlpatterns = [
url(r'^(?P<username>\w+)/list/$', views.get_blogs, name='blogs')
]
Slide 8
-----------------------
**Test the new view**
- Activate the virtual environment
- Run the Django test server using the command *python manage.py runserver*
- Open the web browser and go to http://127.0.0.1:8000/blog/<username>/list
- Use the username created in Tutorial 3
Demonstration
-----------------------
*Note to Narrator: Demonstrate the new view in the browser to the viewer*
Slide 9
-----------------------
**Add a view to Display Articles**
- Modify the blog/views.py and add a new view to display a list of all the articles of a blog
def article(request, article_id):
articles = Article.objects.get(id=article_id)
context = {'article': article}
return render(request, 'blog/article.html', context)
Slide 10a:
---------------------
**Create a new template to display articles**
- Create a template ```article.html``` at ```/blog/templates/blog/article.html``` to look like below
{% if article %}
<h1>{{ article.blog.name }}</h1>
<h2>Article Title: {{ article.title}}</h2>
<p><b><u>Created:</u></b> {{ article.created_on }}<p>
<p>
{{ article.body}}
</p>
{% else %}
<p>No Articles are available for this blog.</p>
{% endif %}
Slide 10b:
-------------------
**Modify the blog template**
- We need to add a link to each article in the blog list page ```/blog/templates/blog/blogs.html``` so that a user can view an articles
{% if blogs %}
<ul>
{% for blog in blogs %}
<li>{{ blog.name}}</li>
<ul>
{% for article in blog.article_set %}
<li><a href='/blog/article/{{ article.id }}'>{{ article.title }}</a></li> /* Change this line here */
{% endfor %}
</ul>
{% endfor %}
</ul>
{% else %}
<p>No Blogs are available.</p>
{% endif %}
Slide 11
-------------------------
**Add URLs for articles_list**
- We need to add a new URL in ```/blogs/urls.py``` which will point to the articles_list view.
- When selecting a particular blog the URL should look like ```localhost:8000/blog/<blog_id>/articles```
- The URLs should be well designed so that the application is readable and easy to debug
- The views requires information such as the blog ID which needs to be passed using the URL
- This is called a GET request
- Modify the urls located in ```blog``` folder
# /blogs/urls.py
from django.conf.urls import patterns, url
from blog import urls
urlpatterns = [
url(r'^(?P<username>\w+)/list/$', views.get_blogs, name='blogs')
url(r'^article/(?P<article_id>[0-9]+)$', views.article, name='article')
]
Slide 12
-----------------------
**Test the new view**
- Activate the virtual environment
- Run the Django test server using the command *python manage.py runserver*
- Open the web browser and go to http://127.0.0.1:8000/blog/<username>/list
- Use the username created in Tutorial 3
- Now click on any one of the articles;
- You will be redirected to the new view and template that you just created.
Demonstration
-----------------------
*Note to Narrator: Demonstrate the new view in the browser to the viewer*
|
