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*