Merge branch 'tutorial9'

2 files changed, 384 insertions, 0 deletions

diff --git a/tutorial_8_django_forms/slides.md b/tutorial_8_django_forms/slides.md
new file mode 100644
index 0000000..38311dc
--- /dev/null
+++ b/tutorial_8_django_forms/slides.md
@@ -0,0 +1,215 @@
+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.
diff --git a/tutorial_9_create_login/slides.md b/tutorial_9_create_login/slides.md
new file mode 100644
index 0000000..c91be08
--- /dev/null
+++ b/tutorial_9_create_login/slides.md
@@ -0,0 +1,169 @@
+Slide 1
+------------
+Title Slide
+**Django Authentication**
+
+Slide 2
+--------------
+
+**Learning Objectives**
+
+In this tutorial, we will learn to;
+  - Create login functionality
+  - Using django built-in login and logout functions
+
+Slide 3
+---------------
+
+**System Requirements**
+  - Ubuntu 16.10
+  - Python 3.5 or higher version
+  - python3.4-venv
+
+Slide 4:
+----------------
+
+**Introduction**
+
+- Let us use our knowledge of forms and templates to create a login system for our blog application
+- We will use Django's inbuilt authentication system for this.
+
+Demonstration
+----------------
+
+**Modify the urls.py**
+
+- Modify the urls.py file located in the ```myproject``` folder
+
+
+      from django.conf.urls import include, url
+      from django.contrib import admin
+      from blog import views
+      from django.contrib.auth import views as auth_views # Add this import
+
+
+      urlpatterns = [
+          url(r'^admin/', admin.site.urls),
+          url(r'^blogs/$', include('blogs.urls')),
+          url(r'^login/$', auth_views.login, {'template_name': 'login.html'}), # Add this line
+      ]
+
+Demonstration
+------------------
+
+**Create a new template*
+
+- Create a template ```login.html``` at ```/blog/templates/blog/login.html``` to look like below
+
+        <html>
+        <body>
+            <form method="post" action="{% url 'django.contrib.auth.views.login' %}">
+                {% csrf_token %}
+                <p class="bs-component">
+                    <table>
+                        <tr>
+                            <td>{{ form.username.label_tag }}</td>
+                            <td>{{ form.username }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ form.password.label_tag }}</td>
+                            <td>{{ form.password }}</td>
+                        </tr>
+                    </table>
+                </p>
+                <p class="bs-component">
+                    <center>
+                        <input class="btn btn-success btn-sm" type="submit" value="login" />
+                    </center>
+                </p>
+                <input type="hidden" name="next" value="{{ next }}" />
+            </form>
+        </body>
+        </html>
+
+Demonstration
+------------------
+
+**Add a new form**
+
+- We will now add a login form to the ```forms.py``` file located in ```blog``` folder
+- Add the following code to the file;
+
+      from django.contrib.auth.forms import AuthenticationForm 
+      from django import forms
+
+      class LoginForm(AuthenticationForm):
+          username = forms.CharField(label="Username", max_length=30, 
+                                   widget=forms.TextInput(attrs={'name': 'username'}))
+          password = forms.CharField(label="Password", max_length=30, 
+                                   widget=forms.TextInput(attrs={'name': 'password'}))
+
+
+Demonstration
+--------------------
+
+**Add the form to the URL configuration**
+
+- We will now add the form that we just created to the URL configuration of ```/login``` URL
+
+      # myproject/urls.py
+
+      from django.conf.urls import include, url
+      from django.contrib import admin
+      from blog import views
+      from django.contrib.auth import views as auth_views
+      from blog.forms import LoginForm
+
+      urlpatterns = [
+          url(r'^admin/', admin.site.urls),
+          url(r'^blogs/$', include('blogs.urls')),
+          url(r'^login/$', auth_views.login, {'template_name': 'login.html', 'authentication_form': LoginForm}}), # Add this variable 'authentication_form'
+      ]
+
+Demonstration
+--------------------
+
+**Modifying the views**
+
+- You will have to add this line ```@login_required(login_url="login/")``` above all the function in the ```views.py```
+- This is called a decorator.
+- It is a special function and a built-in feature in django that allows you to verify if the current session of the User is authenticated.
+- In case the user is not logged in / authenticated, the user is redirected to the link specified in the variable ```login_url```
+
+Example:
+
+      # blog/views.py
+
+      @login_required(login_url="login/")
+      def get_blogs(request, username):
+          ...
+
+Demonstration
+---------------------
+
+**Add logout url**
+
+- Modify the ```urls.py``` located in 
+
+      # myproject/urls.py
+
+      from django.conf.urls import include, url
+      from django.contrib import admin
+      from blog import views
+      from django.contrib.auth import views as auth_views
+      from blog.forms import LoginForm
+
+      urlpatterns = [
+          url(r'^admin/', admin.site.urls),
+          url(r'^blogs/$', include('blogs.urls')),
+          url(r'^login/$', auth_views.login, {'template_name': 'login.html', 'authentication_form': LoginForm}}),
+          url(r'^logout/$', auth_views.logout, {'next_page': '/login'}), # Add this line
+      ]
+      
+Demonstration
+---------------------
+
+- Add a link to the ```/logout``` url to the templates
+
+**Concluding and Assignment Slides**
+