diff options
Diffstat (limited to 'tutorial_8_better_UI/slides.md')
| -rw-r--r-- | tutorial_8_better_UI/slides.md | 195 |
1 files changed, 52 insertions, 143 deletions
diff --git a/tutorial_8_better_UI/slides.md b/tutorial_8_better_UI/slides.md index 94bc0de..17dc45e 100644 --- a/tutorial_8_better_UI/slides.md +++ b/tutorial_8_better_UI/slides.md @@ -1,7 +1,7 @@ Slide 1 ------------ Title Slide -**Creating an Interface to view the Blog** +**Using CSS and JavaScript in Django** Slide 2 -------------- @@ -9,8 +9,8 @@ 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 + - Add CSS and JavaScript files + - Use them with the App Slide 3 [00:11 | 00:31] --------------- @@ -26,176 +26,85 @@ 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** +**Static Files** -- Modify the blog/views.py, modify the get_blogs view to display the Blog List of a particular user in a template + - CSS, JavaScript or Image files are referred as Static Files + - Conventionally they are stored in static folder + - Django will look for static files in the app static folder - 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: +Demonstration: --------------------- -**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: ---------------------- +**Create a folder static in blogs directory** -**Modify the URLs** + mkdir static -- Modify the urls located in the ```myproject``` folder +- Create blog folder inside static - # /myproject/urls.py - from django.conf.urls import include, url - from django.contrib import admin - from blog import urls + cd static + mkdir blog - urlpatterns = [ - url(r'^admin/', admin.site.urls), - url(r'^blog/$', blog.urls) # Change this line - ] +- Create a base CSS file inside blog -- Modify the urls located in the ```blogs``` folder + cd blog + gedit blogs.css & - # /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 ------------------------ +Demonstration: +--------------------- +**Add class to ul tag in blogs.html template** -**Test the new view** + <ul class="number"> -- 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 + +**Writing CSS in blogs.css** + + ul.number { + list-style-type:upper-roman; + } + + +Demonstration: ----------------------- + - Visit http://localhost:8000/blogs/get_blogs/ + + - In output, we will see Roman Letters before a blog -*Note to Narrator: Demonstrate the new view in the browser to the viewer* -Slide 9 +Demonstration: ----------------------- -**Add a view to Display Articles** +**Create welcome.js in static/blog/ and add the below code** + + function greet() { + alert("Welcome to the blog app!"); + } -- Modify the blog/views.py and add a new view to display a list of all the articles of a blog +**Modify blogs.html template as below** - def article(request, article_id): - articles = Article.objects.get(id=article_id) - context = {'article': article} - return render(request, 'blog/article.html', context) + <script src="{% static 'blog/welcome.js' %}"></script> + <body onload="greet()"> -Slide 10a: +Demonstration: --------------------- -**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 ------------------------ +**Show Output** -**Test the new view** + - Visit http://localhost:8000/blogs/get_blogs/ + - Refresh the page -- 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 ------------------------ + Output + + - We will see the alert dialog popped up! + +For script writer: Can create two folders as css and js to separate out css and js files in a directory. +Also showing an image can be shown here if time permits or else can be give as a slide or an assignment -*Note to Narrator: Demonstrate the new view in the browser to the viewer* +**Concluding Slides** |