How to insert data in MySQL database from an HTML form using Django

Theory of Computation
In this article, you will learn how to insert a contact form data to a MySQL database using Django. Django is a free, open-source Python based framework. It enables fast development of any type of web applications. Like other programming languages, it can easily connect with a database. Django opens a connection to the database when it first makes a database query. It keeps this connection open and reuses it in subsequent requests. Here, we have explained the insertion process in detail. For this, we have created an HTML template file that contains a 'Contact' form.
For creating a new Django project, open your terminal window and activate the virtual environment. If you want to know more about how to install and activate the virtual environment, you can look at this article Install Virtual Environment. The following command creates a new Django project 'contactform' and an application 'contact'.
(env) c:\python37\Scripts\projects>django-admin startproject contactform

(env) c:\python37\Scripts\projects>cd contactform

(env) c:\python37\Scripts\projects\contactform>django-admin startapp contact
You can see a folder on your current project containing the django files named 'contactform'.
Suppose we have a MySQL database name 'employee'. For connecting to MySQL with Django, we will have to do database configuration changes in 'settings.py'. Make sure to replace 'NAME', 'USER', 'PASSWORD' and 'HOST' with your database configurations.
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'employee',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'"
         }   
    }
}
The Model helps to map the fields to the database. It represents a database table. To do this, look for the file 'models.py' in your app folder and place the following code. It has five fields - cid, fullname, email, contact, message.
from django.db import models

class ContactForm(models.Model):
    fullname= models.CharField(max_length=100)
    email= models.EmailField()
    contact= models.CharField(max_length=50)
    message= models.CharField(max_length=200)

The ModelForm is required to collect the form data. So, we have created a ModelForm 'forms.py' in the app directory, whose fields are taken from the database table.
from django import forms
from .models import ContactForm

class FormContactForm(forms.ModelForm):
    class Meta:
        model= ContactForm
        fields= ["fullname", "email", "contact", "message"]

We have placed the following code in 'views.py'. It takes the data that the user has entered into the contect form fields and insert the data into a database. The 'form.save()' method is responsible for saving the form data to the database.
from django.shortcuts import render
from .forms import FormContactForm

def showform(request):
    form= FormContactForm(request.POST or None)
    if form.is_valid():
        form.save()
  
    context= {'form': form }
        
    return render(request, 'contactform.html', context)

Next, we should have a user interface where user can submit a form. So, we have created an HTML template file 'contactform.html'.
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Django Contact Form</title>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
</head>  
<body>  
<form method="POST" class="post-form" action="#">  
{% csrf_token %}  
<div class="container">  
<div class="form-group">
	<label for="fullname" class="control-label col-sm-2">Full Name</label>
	<div class="col-sm-10">
	<input type="text" name="fullname" value=""/>
	</div>
</div> 
<div class="form-group">
	<label for="email" class="control-label col-sm-2">Email</label>
	<div class="col-sm-10">
	<input type="text" name="email" value=""/>
	</div>
</div> 
<div class="form-group">
	<label for="contact" class="control-label col-sm-2">Contact</label>
	<div class="col-sm-10">
	<input type="text" name="contact" value=""/>
	</div>
</div> 
<div class="form-group">
	<label for="message" class="control-label col-sm-2">Message</label>
	<div class="col-sm-10">
	<input type="text" name="message" value=""/>
	</div>
</div> 
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button> 
</div>
</div> 
</form>  
</body>  
</html> 
At last, we have added a path to the route page to the particular link.
from django.contrib import admin
from django.urls import path
from contact import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('showform', views.showform),
]

Jan 3
Stateful vs Stateless
A Stateful application recalls explicit subtleties of a client like profile, inclinations, and client activities...

A Stateful application recalls explicit subtleties of a client like profile, inclinations, and client activities...

Dec 29
Best programming language to learn in 2021
In this article, we have mentioned the analyzed results of the best programming language for 2021...

In this article, we have mentioned the analyzed results of the best programming language for 2021...

Dec 20
How is Python best for mobile app development?
Python has a set of useful Libraries and Packages that minimize the use of code...

Python has a set of useful Libraries and Packages that minimize the use of code...

July 18
Learn all about Emoji
In this article, we have mentioned all about emojis. It's invention, world emoji day, emojicode programming language and much more...

In this article, we have mentioned all about emojis. It's invention, world emoji day, emojicode programming language and much more...

Jan 10
Data Science Recruitment of Freshers
In this article, we have mentioned about the recruitment of data science. Data Science is a buzz for every technician...

In this article, we have mentioned about the recruitment of data science. Data Science is a buzz for every technician...






eTutorialsPoint©Copyright 2016-2022. All Rights Reserved.