Django Follow Up Form

Django Follow Up Form

ian's photo
ian
·

7 min read

Hello , In this article we are going to create a form that a user can submit a data by filling a form through the front end then the admin can view the data submitted throuh the admin interface, Print the data in different formats.

Lets define a problem here, Students did exams,exams marked and the results released by the school, Some students are not staisfied with the results, The student affected files a case aginst the results,The administration hence comes up a solution by creating a form that users can fill in their details and their problems, the problems include missing marks,stray units,missing units etc..

There are many ways of doing this but here django is going to give us a better solution

Lets start

1) create the project and app


C:\Users\LENOVO\Desktop\follow>django-admin startproject followup

C:\Users\LENOVO\Desktop\follow>cd followup

C:\Users\LENOVO\Desktop\follow\followup>python manage.py startapp myapp

C:\Users\LENOVO\Desktop\follow\followup>

2 . Configure your urls, views and templates Check on this simple django set up setup

3)Lets define our models - Fields and the data structures

In our case we are buiding a form that capture the Student data i.e the name, admmision number and the issue and a short message.

Lest go


from django.db import models
class Contact(models.Model):


    name = models.CharField(max_length = 200)
    admision = models.EmailField()
    issue = models.CharField(max_length = 200)
    subject = models.TextField()

    def __str__(self):
        return self.name

Then run migrate and make migrations command in the CLI to create your tables from the models 


C:\Users\LENOVO\Desktop\follow\followup>python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK

C:\Users\LENOVO\Desktop\follow\followup>python manage.py makemigrations
Migrations for 'myapp':
  myapp\migrations\0001_initial.py
    - Create model Contact

Now the tables are created as you can see in the mogrations folder

4 . Regiter your models in the admin site (admin.py file), then create a super use(admin)


from django.contrib import admin

from . models import Contact

admin.site.register(Contact)



#create a super user

C:\Users\LENOVO\Desktop\follow\followup>python manage.py createsuperuser

Username (leave blank to use 'lenovo'): ***
Email address:***
Password:
Password (again):
Superuser created successfully.

C:\Users\LENOVO\Desktop\follow\followup>python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, myapp, sessions
Running migrations:
  Applying myapp.0001_initial... OK

start the server and go to the admin site


C:\Users\LENOVO\Desktop\follow\followup>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
January 06, 2021 - 09:24:04
Django version 3.0.3, using settings 'followup.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

#type the following in the url to access the admin site

http://127.0.0.1:8000/admin

you shoud see somthing like this

Screenshot (129).png

5 . Define our views

In our views we have 

from django.shortcuts import render

from . models import Contact

from django.contrib import messages



def index(request):

    contact = Contact()
    post = Contact.objects.all()




    if request.method =="POST":


        name = request.POST.get('name')
        admision = request.POST.get('admision')
        issue = request.POST.get('issue')
        subject = request.POST.get('subject')


        contact.name=name
        contact.admision=admision
        contact.issue=issue
        contact.subject=subject

        contact.save()

        messages.success(request , 'Submitted Succesfully ')




    return render( request , 'index.html', {"post": post } )

Then our template folder in index.html file your created should have the following, i have used bootsrap here for the form

<!DOCTYPE html>
<html>
<head>
    <title>form</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>

    <div class="text-center" style="margin-top: 50px;">

        {% if messages %}

             {% for message in messages %}

             <div class="alert alert-success font"><b> {{ message }} </b></div>

             {% endfor %}

          {% endif %}
</div>





 <!--contact Form Starts Here -->
    <div class="subscribe-form" id="contact">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="section-heading">
              <div class="line-dec"></div>
              <h1>CONTACT </h1>
            </div>
          </div>
          <div class="col-md-8 offset-md-2">
            <div class="main-content">
              <p><u> please fill the form</p></u>
              <div class="container">
                <form method="post">

  {%  csrf_token %}

  <div class="form-group">
    <label for="exampleFormControlInput1">Name</label>


    <input name="name"  class="form-control" id="exampleFormControlInput1" placeholder="please enter your name" required="" >
  </div>

  <div class="form-group">
    <label for="exampleFormControlInput1">Admision</label>
    <input name="admision"  class="form-control" id="exampleFormControlInput1" placeholder="please enter your addmision number" required="" >
  </div>




   <div class="form-group">
    <label for="exampleFormControlInput1">issue</label>
    <input name="issue" class="form-control" id="exampleFormControlInput1" placeholder="please state your issue i.e missing mark,stray unit,missing unit" required="" >
  </div>


  <div class="form-group">
    <label for="exampleFormControlTextarea1">Subject</label>
    <textarea name="subject" class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="please leave your message i.e subject affected" ></textarea>
  </div>

  <center><input class="btn btn-primary" type="submit" value="Submit"></center>
</form>
</div>




</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- contact Form Ends Here -->




</body>
</html>

refresh the http://127.0.0.1:8000/ url in the adress

should look like this and after filling the form a pop us succces message sholud show

Screenshot (130).png

Go to the admin interface and see if the information filled is saved under the contact section .

THERE YOU GO NOW

written by Ian

DjangoPythonformsDeveloperBootstrap