Outline for script 7 django forms

2 files changed, 231 insertions, 204 deletions

diff --git a/tutorial_7_creating_blog_list_interface/slides.md b/tutorial_7_creating_blog_list_interface/slides.md
deleted file mode 100644
index ccd5ca9..0000000
--- a/tutorial_7_creating_blog_list_interface/slides.md
+++ /dev/null
@@ -1,204 +0,0 @@
-Slide 1 [00:08 | 00:08]
-------------
-Title Slide
-**Creating an Interface to view the Blog**
-
-Slide 2 [00:12 | 00:20]
---------------
-
-**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_7_django_forms/slides.md b/tutorial_7_django_forms/slides.md
new file mode 100644
index 0000000..977eb07
--- /dev/null
+++ b/tutorial_7_django_forms/slides.md
@@ -0,0 +1,231 @@
+Slide 1
+------------
+Title Slide
+**Creating Forms in Django**
+
+Slide 2
+--------------
+
+**Learning Objectives**
+
+In this tutorial, we will learn to;
+  - Create a Django form
+  - Create a views to handle form submission
+
+Slide 3
+---------------
+
+**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 user to do things like;
+    - enter text
+    - select options
+    - manipulate objects or controls, and so on,
+- Send data to the server
+
+Slide 5
+----------------
+
+**Django Forms**
+
+- Django provides inbuilt libraries to help you build forms easily
+
+
+Demonstration
+----------------
+** Creating form using html to add blog**
+
+ - templates/add_blog.html
+
+        <form action="" method="POST">
+            {% csrf_token %}
+            <label for="name">Blog name: </label>
+            <input id="name" type="text" name="name">
+            <input type="submit" value="Add Blog">
+        </form>
+
+ -  views.py to add blog
+
+        def add_blog(request):
+            if request.method == 'POST':
+                name = request.POST.get('name')
+                Blog.objects.create(name=name)
+                return HttpResponse("Blog created")
+            return render(request, 'add_blog.html')
+
+ - blog/urls.py
+
+        path('blog/add/', views.add_blog, name='add_blog'),
+
+Demonstration
+----------------
+
+**Creating a Django Form**
+
+ - Create a file forms.py in the ```blog``` and add the code
+
+        from django import forms
+
+        class BlogForm(forms.Form):
+            name = forms.CharField(label='name', max_length=100)
+
+ - views.py
+
+        from blog.forms import BlogForm
+
+        def add_blog(request):
+            if request.method == 'POST':
+                form = BlogForm(request.POST)
+                if form.is_valid():
+                    name = form.cleaned_data.get('name')
+                    Blog.objects.create(name=name)
+                    return HttpResponse("Blog created")
+            context = {'form': BlogForm()}
+            return render(request, 'add_blog.html', context)
+
+ - templates/add_blog.html
+
+        <form action="" method="POST">
+            {% csrf_token %}
+            {{ form }}
+            <input type="submit" value="Add Blog">
+        </form>
+
+Demonstration
+----------------
+
+**Creating a Django Form from models **
+
+- Create a file forms.py in the ```blog``` and add the code
+
+      from blog.models import Blog, Article
+
+      class BlogForm(forms.ModelForm):
+          class Meta:
+              model = Blog
+              fields = ['name']
+        
+      class ArticleForm(forms.ModelForm):
+          class Meta:
+              model = Article
+              fields = ['title', 'body', 'draft']
+
+(For script creator: given article form and view as well, as an additional content, can be used if required.)
+
+ - views.py
+
+        from blog.forms import BlogForm
+
+        def add_blog(request):
+            if request.method == 'POST':
+                form = BlogForm(request.POST)
+                if form.is_valid():
+                    form.save() 
+                    return HttpResponse("Blog created")
+            context = {'form': BlogForm()}
+            return render(request, 'add_blog.html', context)
+
+Demonstration
+----------------
+
+**Edit view **
+
+- Let's 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 add_blog(request, blog_id=None):
+      """
+      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 == 'POST':
+              form = BlogForm(request.POST, instance=blog)
+              if form.is_valid():
+                  form.save()
+                  return HttpResponse("Blog created")
+          blog_form = BlogForm(instance=blog)
+          context = {'form': blog_form, 'blog': blog}
+          return render(request, 'add_blog.html', context)
+                  
+**Template for the view**
+
+- In ```add_blog.html``` add following
+
+        <html>
+        <body>
+        {% if form %}
+            <form action="/blogs/add_blog/{{ blog.id }}" method="post">
+                {% csrf_token %}
+                    {{ form }}
+                <input type="submit" value="Submit" />
+            </form>
+        {% endif %}
+        </body>
+        </html>
+
+Modify the urls located in the blogs folder
+
+    # /blogs/urls.py
+        path('blog/add/<int:blog_id>/', views.add_blog, name='add_blog'),
+
+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/add_blogs/'>Add New Blog</a></h2>
+    {% if blogs %}
+         .
+         .
+        <ul>
+        {% for blog in blogs %}
+            <li>{{ blog.name}} <a href='/blog/add_blogs/{{ blog.id }}'>[Edit]</a></li>
+        {% endfor %}
+         .
+         .
+        </ul>
+    {% else %}
+        <p>No Blogs are available.</p>
+    {% endif %}
+    </body>
+    </html>
+
+ *** With this we come to the end of the tutorial***
+ ----------------------------------------------------
+ *** Add concluding slides and assignment***
+
+
+(For script creator)
+-------------------
+**After every edit in the code the demonstration can be shown by visting the url**
+
+For demonstration:
+
+- 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/blogs/add_blog/
+- For edit http://127.0.0.1:8000/blogs/add_blog/1/
+
+- Submit form
+- In django admin interface we can show the new object created