Django Mysql Insert Data Using Jquery Ajax

Django Mysql Insert Data Using Jquery Ajax

Bootstrap 5

https://getbootstrap.com/docs/5.0/getting-started/introduction/

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js

Register App myapp and

Connect to MySQL Database

devproject/settings.py

 
//devproject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp', #add myapp
]
    
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

Create Model

 
//myapp/models.py
from django.db import models
 
# Create your models here.
class Member(models.Model):
    firstname = models.CharField(max_length=50)
    lastname = models.CharField(max_length=50)
    address = models.CharField(max_length=50)
    username = models.CharField(max_length=50)
  
    class Meta:  
        db_table = "blog_member"

Make Migrations
Run the commands below to make migrations:
python manage.py makemigrations
python manage.py migrate
C:\django\devproject>python manage.py makemigrations
C:\django\devproject>python manage.py migrate

Creating View
myapp/views.py

 
//myapp/views.py
from django.shortcuts import render, redirect
from myapp.models import Member
 
# Create your views here.
def index(request):
    members = Member.objects.all()
    return render(request, 'index.html', {'members': members})
 
def insert(request):
    member = Member(firstname=request.POST['firstname'], lastname=request.POST['lastname'], address=request.POST['address'], username=request.POST['username'])
    member.save()
    return redirect('/')

Template myapp/templates/index.html

 
//myapp/templates/index.html
{% extends 'base.html' %}
{% block body %}

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addnew">
      Add New
    </button>

    <!-- Modal -->
    <div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="addnewLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addnewLabel">New Member</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form class="" method="post">
              {% csrf_token %}
              <div class="form-inline">
                  <label>UserName</label>
                  <input type="text" id="username" name="username" class="form-control"/>
              </div>
              <div class="form-inline">
                  <label>Firstname</label>
                  <input type="text" id="firstname" name="firstname" class="form-control"/>
                  <label>Lastname</label>
                  <input type="text" id="lastname" name="lastname" class="form-control"/>
              </div>
              <div class="form-group">
                  <label>Address</label>
                  <input type="text" id="address" name="address" class="form-control"/>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="submit">Submit</button>
          </form>
          </div>
        </div>
      </div>
    </div>

    <hr style="border-top:1px solid #000; clear:both;"/>
    <table class="table table-bordered">
        <thead class="alert-warning">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            {% for member in members %}
            <tr>
                <td>{{ member.firstname }}</td>
                <td>{{ member.lastname }}</td>
                <td>{{ member.address  }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

myapp/templates/base.html

//myapp/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="{% static 'js/script.js' %}"></script>
</head>
<body>
  <div class="container">
  <header>
    <h1>Django Mysql Insert Data Using Jquery Ajax</h1>
  </header>
  <hr>
  <main>
    {% block body %}
    {% endblock %}
  </main>
  <hr>
  </div>
</body>
</html>

myapp/static/js/script.js

//myapp/static/js/script.js
$(document).ready(function(){
    $('#submit').on('click', function(){
        $firstname = $('#firstname').val();
        $lastname = $('#lastname').val();
        $address = $('#address').val();
        $username = $('#username').val();
  
        if($firstname == "" || $lastname == "" || $address == "" || $username == ""){
            alert("Please complete field");
        }else{
            $.ajax({
                type: "POST",
                url: "insert/",
                data:{
                    firstname: $firstname,
                    lastname: $lastname,
                    address: $address,
                    username: $username,
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function(){
                    alert('Save Data');
                    $('#firstname').val('');
                    $('#lastname').val('');
                    $('#address').val('');
                    $('#username').val('');
                    window.location = "/";
                }
            });
        }
    });
});

URL
devproject/urls.py

//devproject/urls.py
from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
    path('insert/',views.insert, name='insert'),
]

Run : C:\django\devproject>python manage.py runserver