4.6 Form

To represent database-table data in Python objects, Django uses an intuitive system: A model class represents a database table, and an instance of that class represents a particular record in the database table.

To create an object, instantiate it using keyword arguments to the model class, then call save() to save it to the database. In this case, you can create an object of the model by opening Django shell with python manage.py shell, which will be explained in 4.9 Admin:

p = Post(author='xxx', title='xxx', text='xxx', created_date = 'xxx', published_date = `xxx`)
p.save()

This performs an INSERT SQL statement behind the scenes. Django doesn’t hit the database until you explicitly call save(). Alternatively, you can add a new post through logging in the admin page as well.

However, only the developer can initiate this process, and for any user that wants to create a post on their own through the front-end (web page), we have to define forms for the user to fill in and submit. It is done by two steps: (1) Forms definition in forms.py, and it is referred by template HTML file using {{form.as_p}}.

Definition of forms

class PostForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = ('author', 'title', 'text',)  # who posted it, the title and the text
        # By using these attributes, the author, title and text defined in Post, will automatically produce a form, when
        #form.as_p is required
        # the line above inherits from the model Post and present it as a form, and we want author, title and text to be
        # in the form

        widgets = {
            'title': forms.TextInput(attrs={'class': 'textinputclass'}), # 'textinputclass' this is css class
            'text': forms.Textarea(attrs={'class': 'editable medium-editor-textarea postcontent'}) # it contains 3 css classes

        }  # however, we can comment widgets area, and the form can still be displayed (maybe not as pretty as using CSS)

forms.ModelForm is Django generic class that creates a form to instantiate an object of the model. We inherit this class and define our own form for posts. First of all, the Meta class provides information connecting the model to the form. First, we specify that Post is the model we want to create a form for. Then we define the field that we want to expose to the user to create, and then we specify the style of title and text text area using widgets and use CSS to attach a style. It is almost the same as the Comment:

class CommentForm(forms.ModelForm):

    class Meta:
        model = Comment
        fields =('author', 'text')

        widgets = {
            'author': forms.TextInput(attrs={'class': 'textinputclass'}),  # widget connects css file
            'text': forms.Textarea(attrs={'class': 'editable medium-editor-textarea'})
        }

Referred as {{form.as_p}}

Let's recap the flow of how a form is created when a user click New Post in the home page. First, the hyper reference of New Post is defined in base.html:

 <a href="{% url 'post_new' %}" >New Post</a>  <!--# go to this url (by matching the template)-->

which refers to the tag of an URL, which we can, like always, find in urls.py:

url(r'^post/new/$',views.CreatePostView.as_view(), name='post_new'),  # new post view

This called CreatePostView in views.py:

class CreatePostView(LoginRequiredMixin,CreateView): # This function searches for post_form page!
    # you cannot create a post unless logged in
    login_url = '/login/'
    redirect_field_name = 'blog/post_detail.html'  # save the new post, and it redirects to post_detail page

    form_class = PostForm  # This creates a new PostForm, and PostForm already specifies which fields we need to create
    model = Post

The line form_class = PostForm specifies how the post is created, it is created by inserting a form for the user to fill in. The form needs a template HTML to display to the user, and in this case, since we define the name of the form as PostForm, Django will look for the template HTML called post_form automatically:

{% extends 'blog/base.html' %}

{% block content %}
    <h1>New post</h1>

    <form method="POST" class="post-form">
    {% csrf_token %}
    {{form.as_p}}  <!-- how does this part unfolds as author, title and text? -->
        <!-- 1. this triggers post/new url 2. Go to CreatePostView, where it creates a new PostForm 3. PostForm has author, title and text, and it will
        display them out 4. and it redirect to post_detail of that post, defined in CreatePostView-->
    <button type="submit" class="save btn btn-default">Save</button>
    </form>

    <script>var editor = new MediumEditor('.editable');</script>  <!-- This is the medium editor we use to set up to get that style in input textbox-->

{% endblock %}

So in this template, we can see that the user will submit information to the server via a POST method. {% csrf_token %} is used for security validation, and the form is inserted using {{form.as_p}}, and we attach a 'Save' button to submit the form to the server, and this is how we create an object of the model we defined through a web page.