diff options
Diffstat (limited to 'tutorial_7_django_forms/slides.md')
| -rw-r--r-- | tutorial_7_django_forms/slides.md | 231 |
1 files changed, 231 insertions, 0 deletions
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 |