Update script ouline

2 files changed, 204 insertions, 215 deletions

diff --git a/tutorial_8_better_UI/slides.md b/tutorial_8_better_UI/slides.md
new file mode 100644
index 0000000..d54619d
--- /dev/null
+++ b/tutorial_8_better_UI/slides.md
@@ -0,0 +1,204 @@
+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
+
+    # /blog/templates/blog/blogs.html
+    {% 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
+
+    # /blog/templates/blog/article.html
+    {% 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 so that a user can view an articles
+
+   # /blog/templates/blog/blogs.html
+    {% 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*
diff --git a/tutorial_8_django_forms/slides.md b/tutorial_8_django_forms/slides.md
deleted file mode 100644
index 38311dc..0000000
--- a/tutorial_8_django_forms/slides.md
+++ /dev/null
@@ -1,215 +0,0 @@
-Slide 1 [00:08 | 00:08]
-------------
-Title Slide
-**Creating Forms to edit the Blog**
-
-Slide 2 [00:12 | 00:20]
---------------
-
-**Learning Objectives**
-
-In this tutorial, we will learn to;
-  - Create a new form
-  - Create a new view to handle form submission
-
-Slide 3 [00:11 | 00:31]
----------------
-
-**System Requirements**
-  - Ubuntu 16.10
-  - Python 3.5 or higher version
-  - python3.4-venv
-
-Slide 4:
-----------------
-
-**What is a Form?**
-
-- In HTML, a form is a collection of elements inside <form>...</form>
-- Allow a visitor to do things like;
-    - enter text
-    - select options
-    - manipulate objects or controls, and so on,
-- Send information back to the server
-
-Slide 5
-----------------
-
-**Django Forms**
-
-- Django provides inbuilt libraries to help you build forms easily
-
-
-Slide 6
------------------
-
-**What is POST Request**
-
-- A form is what the user sees when the application is storing new *or* updating/deleting existing data on a server,
-- In the backend this storage, updation or deletion is done using a POST request
-- A POST request method requests that a web server accept the data enclosed in the body of the request message
-
-Slide 7
-----------------
-
-**Creating a New Form for Blogs**
-
-- Create a forms.py in the ```blog``` and add the code
-
-      class BlogForm(ModelForm):
-          class Meta:
-              model = Blog
-              fields = ['name', 'created_on']
-        
-      class ArticleForm(ModelForm):
-          class Meta:
-              model = Article
-              fields = ['created_on', 'title', 'body', 'draft']
-
-Slide 8
-----------------
-
-**Adding a new view to handle the form**
-
-- Let's add a new view to add a new blog or edit an existing blog
-- To do this add the following code to the ```views.py``` in the ```blog```directory
-
-      from django.http import HttpResponse, HttpResponseNotFound
-      from .forms import BlogForm, ArticleForm
-
-      def edit_blog(request, blog_id):
-      """
-      This view adds a new or edits an existing blog
-      """
-          if blog_id:
-              blog = Blog.objects.get(id=blog_id)
-          else:
-              blog = Blog()
-          if request.method == 'GET':
-              blog_form = BlogForm(instance=blog)
-              context = {'form': blog_form, 'blog': blog}
-              return render(request, 'blog/blog_form.html', context)
-          elif request.method == 'POST':
-              form = BlogForm(request.POST, instance=blog)
-              if form.is_valid():
-                  form.save()
-                  return redirect('index')
-              else:
-                  return redirect('edit_blog')
-                  
-      def edit_article(request, blog_id, article_id):
-      """
-      This view adds a new or edits an existing article
-      """
-          blog = Blog.objects.get(id=blog_id)
-          if article_id:
-              article = Article.objects.get(id=article_id)
-          else:
-              article = Article(blog=blog)
-          if request.method == 'GET':
-              article_form = ArticleForm(instance=article)
-              context = {'form': article_form, 'article': article}
-              return render(request, 'blog/article_form.html', context)
-          elif request.method == 'POST':
-              if article == None:
-                  form = ArticleForm(request.POST, instance=article)
-              else:
-                  form = ArticleForm(instance=article)
-              if form.is_valid():
-                  form.save()
-                  return redirect('index')
-              else:
-                  return redirect('edit_article')
-
-Slide 8
------------------
-
-**Creating a Template for the view**
-
-- Create a template ```edit_blog.html``` at ```/blog/templates/blog/edit_blog.html``` to look like below
-
-        <html>
-        <body>
-        {% if form %}
-            <form action="/blog/edit_blogs/{{ blog.id }}" method="post">
-                {% csrf_token %}
-                    {{ form }}
-                <input type="submit" value="Submit" />
-            </form>
-        {% endif %}
-        </body>
-        </html>
-        
-- Create a template ```edit_article.html``` at ```/blog/templates/blog/edit_article.html``` to look like below
-
-        <html>
-        <body>
-        {% if form %}
-            <form action="/blog/edit_articles/{{ blog.id }}/{{ article.id}}" method="post">
-                {% csrf_token %}
-                    {{ form }}
-                <input type="submit" value="Submit" />
-            </form>
-        {% endif %}
-        </body>
-        </html>
-
-Slide 9
------------------
-
-**Add URLs for editing blogs and articles**
-
-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'),
-        url(r'^/edit_blogs/(?P<blog_id>\d+)/$', views.edit_blogs, name='edit_blogs'),
-        url(r'^/edit_articles/(?P<blog_id>\d+)/(?P<article_id>\d+)$', views.edit_articles, name='edit_articles')
-    ]
-
-Slide 10:
------------------
-
-**Edit Templates to add new URL redirect**
-
-- Edit the ```blogs.html``` as follows;
-
-   # /blog/templates/blog/blogs.html
-    
-    <html>
-    <body>
-    <h2><a href='/blog/edit_blogs/'>Add New Blog</a></h2>
-    {% if blogs %}
-        <h2><a href='/blog/edit_articles/'>Add New Article</a></h2>
-        <ul>
-        {% for blog in blogs %}
-            <li>{{ blog.name}} <a href='/blog/edit_blogs/{{ blog.id }}'>[Edit]</a></li>
-                <ul>
-                {% for article in blog.article_set %}
-                    <li><a href='/blog/article/{{ article.id }}'>{{ article.title }}</a> <a href='blog/edit_article/{{ blog.id}}/{{ article.id }}'>[Edit]</a></li>
-                {% endfor %}
-                </ul>
-        {% endfor %}
-        </ul>
-    {% else %}
-        <p>No Blogs are available.</p>
-    {% endif %}
-    </body>
-    </html>
-
-
-Slide 11
------------------
-
-**Testing the new view and form**
-
-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/edit_blog/1
-- You will be taken to the new view with the form.