30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Home Programming Mobile Blog Reviews Tutorials Contact Submit Code Log In Register

Python - Django Simple CRUD With Ajax

About 8 results (0.16 seconds)

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 1/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Building A Web App With Python - Check it now

Ad uk.ask.com/Lots_of_results/Visit_us ▼
Find Building A Web App With Python now. Check out essential info on Ask.com

Visit Website

Learning Django And Python - Search Learning Django And Python

Ad www.zapmeta.ws/Search/Now ▼
Find Learning Django And Python. Check Out 1000+ Results from Across the Web. Wiki, News &
More. 100+ Million Visitors. The Complete Overview. Web, Images & Video. Trusted by Millions.
Information 24/7. Types: pdf, doc, ppt, xls, txt.
Search & Find Now · Find More · Multi Search · Related Info
Visit Website

PHP Bericht-Generator - Web Development Tool

Ad www.scriptcase.net/ ▼  +1 800-925-0609
Schnelle Entwicklung vonAnwendungen Formulare, Berichte, Diagramme, PDF. Save Time. Increase
Productivity. Fast and Intuitive. Quick Web Development. Increase Profits. Types: Forms, Grids,
Reports, Charts, Dashboards, Login, Menu.
Download
Samples
Features
Overview

Visit Website

Python - Django Simple CRUD With Ajax | Free Source Code ...
https://www.sourcecodester.com/.../python/.../python-django-simple-crud- ajax.html
Nov 7, 2017 ... Learn how to create a Simple CRUD in Django using Ajax. A web framework is a set of components that helps you to develop websites
faster ...

Python: Simple CRUD Application Using SQLite - Part 2 | Free ...

https://www.sourcecodester.com/.../python/.../python-simple-crud-application -using-sqlite-part-2.html

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 2/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Apr 26, 2017 ... In this tutorial we will create a Simple CRUD ( Update, Delete) Application using Python/SQLite. In my previous tutorial we already
tackle the ...

Python - Simple CRUD With Django Framework | Free Source Code ...
https://www.sourcecodester.com/.../python/.../python-simple-crud-django- framework.html
Aug 24, 2017 ... In this tutorial we will create a Simple CRUD With Django Framework. Django is an advanced Web framework written in Python that
makes use ...

Python - How To Use DataTables With Django | Free Source Code ...
https://www.sourcecodester.com/.../python/.../python-how-use-datatables- django.html
Aug 8, 2017 ... In this tutorial we will try to use jQuery DataTables With Django Web Framework. Django is an ... It is a highly flexible tool,that is easy
to use and convinient. Here is the ..... CRUD Operation using PHP/MySQLi and AJAX/jQuery.

Easy and Simple Like/Unlike using AJAX/jQuery | Free Source Code ...
https://www.sourcecodester.com/.../easy-and-simple-likeunlike-using- ajaxjquery.html
Sep 2, 2017 ... In this tutorial, I'm going to show you how to create a simple like/unlike using AJAX/JQuery. The purpose of using ajax/jquery is that you
won't ...

Online Hotel Reservation System | Free Source Code & Tutorials

https://www.sourcecodester.com/.../online-hotel-reservation-system.html
Nov 9, 2011 ... In this source code you can learn on how create an online reservation system with online payment.

Hospital Management System | Free Source Code & Tutorials

https://www.sourcecodester.com/.../hospital-management-system.html
Jun 12, 2015 ... It is a full well developed system that can be used in any hospital. ... codes for my project on hospital management system in Visual
Basic.

Fingerprint Scanner/Reader using Digital Persona | Free Source ...

https://www.sourcecodester.com/...basic/.../fingerprint-scannerreader-using- digital-persona.html

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 3/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Oct 22, 2011 ... Visual Basic ... i had already download the program but i encounter an error in ..... CRUD Operation using PHP/MySQLi and AJAX/jQuery.

pow ered by Custom Search

Python - Django Simple CRUD With Ajax

Submitted by: razormist
Tuesday, November 7, 2017 - 16:22
Language: Python
Visitors have accessed this post 1957 times.

Tweet Share Like 208K

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 4/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

In this tutorial we will create a Simple CRUD Using Ajax. A web framework is a set of components that helps you to develop websites faster and easier. Django makes
developers life convenient and productive framework to all. So let's now do the coding...

Getting Started
First you will have to download & install the Python IDLE's, here's the link for the Integrated Development And Learning Environment for Python
https://www.python.org/downloads/.

After Python IDLE's is installed, open the command prompt then type "pip install Django", and hit enter.

Creating the App

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 5/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

After django is set we will now create the web app. While your in the command prompt cd to the directory you want to save the app, then type "django-admin startproject
server" and hit enter. A new folder will be created on the directory named 'server'.

Running The Server

After creating the project, cd to the newly created directory, then type "manage.py runserver" and hit enter to start the server running. The "manage.py" is a command of
django-admin that utilize the administrative tasks of python web framework.

Here is the image of python web server:

Note: Type '127.0.0.1:8000' in the url browser to view the server.

When there is code changes in the server just (ctrl + C) to command prompt to stop the server from running, then start again to avoid errors

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 6/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Creating The Website

This time will now create the web app to display the web. First locate the directory of the app via command prompt cd, then type "manage.py startapp crud" and hit enter. A
new directory will be created named "crud".

Setting up The URL

This time will now create a url address to connect the app to the server. First go to server directory, then open urls.py via Python IDLE's or any text editor. Then import
"include" module beside the url module and then import additional module to make a redirect url to your site "from . import views". After that copy/paste the code below inside
the urlpatterns.

1. url(r'^$', views.index_redirect, name='index_redirect'),

2. url(r'^crud/', include('crud.urls')),

It will be look like this:

1. from django.conf.urls import url, include

2. from django.contrib import admin
3. from . import views
4.
5. urlpatterns = [
6. url(r'^$', views.index_redirect, name='index_redirect'),
7. url(r'^crud/', include('crud.urls')),
8. url(r'^admin/', admin.site.urls),
9. ]

Then after that create a views that will catch the redirect url. To do that create a file "views.py" inside the server directory then copy/paste the code below.

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 7/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

1. from django.shortcuts import redirect

2.
3. def index_redirect(request):
4. return redirect('/crud/')

Creating The Path For The Pages

Now that we are all set we will now create a path for the web pages. All you have to do first is to go to crud directory, then copy/paste the code below and save it as 'urls.py'
The file name must be urls.py or else there will be an error in the code.

1. from django.conf.urls import url

2. from . import views
3.
4. urlpatterns = [
5. url(r'^$', views.index, name='index'),
6. url(r'^create$', views.create, name='create'),
7. url(r'^read$', views.read, name='read'),
8. url(r'^edit/(?P<id>\d+)$', views.edit, name='edit'),
9. url(r'^edit/update/(?P<id>\d+)$', views.update, name='update'),
10. url(r'^delete/(?P<id>\d+)$', views.delete, name='delete'),
11. ]

Creating A Static
This time we will create a directory that store an external file. First go to the crud directory then create a directory called "static", after that create a sub directory called
"crud". You'll notice that it is the same as your main app directory name to assure the absolute link. This is where you import the css, js, etc directory.

For the bootstrap framework you get it from here http://getbootstrap.com/.

To get the jQuery framework download it here https://jquery.com/.

Creating The Views

The views contains the interface of the website. This is where you assign the html code for rendering it to django framework and contains a methods that call a specific
functions. To do that open the views.py, the copy/paste the code below.

1. from django.shortcuts import render, redirect

2. from .models import Member
3.
4. # Create your views here.
https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 8/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials
5. def index(request):
6. return render(request, 'crud/index.html')
7.
8.
9. def create(request):
10. member = Member(firstname=request.POST['firstname'], lastname=request.POST['lastname'])
11. member.save()
12. return redirect('/')
13.
14. def read(request):
15. members = Member.objects.all()
16. context = {'members': members}
17. return render(request, 'crud/result.html', context)
18.
19. def edit(request, id):
20. members = Member.objects.get(id=id)
21. context = {'member': members}
22. return render(request, 'crud/edit.html', context)
23.
24.
25. def update(request, id):
26. member = Member.objects.get(id=id)
27. member.firstname = request.POST['firstname']
28. member.lastname = request.POST['lastname']
29. member.save()
30. return redirect('/crud/')
31.
32.
33. def delete(request, id):
34. member = Member.objects.get(id=id)
35. member.delete()
36. return redirect('/crud/')

Creating The Models

Now that we're done with the views we will then create a models. Models is module that will store the database information to django. To do that locate and go to crud
directory, then open the "models.py" after that copy/paste the code.

1. from django.db import models

2.
3. # Create your models here.
4.
5. class Member(models.Model):
https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 9/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials
6. firstname = models.CharField(max_length=40)
7. lastname = models.CharField(max_length=40)
8.
9. def __str__(self):
10. return self.firstname + " " + self.lastname

Registering The App To The Server

Now that we created the interface we will now then register the app to the server. To do that go to the server directory, then open "settings.py" via Python IDLE's or any text
editor. Then copy/paste this script inside the INSTALLED_APP variables 'crud'.

It will be like this:

1. INSTALLED_APPS = [
2. 'crud',
3. 'django.contrib.admin',
4. 'django.contrib.auth',
5. 'django.contrib.contenttypes',
6. 'django.contrib.sessions',
7. 'django.contrib.messages',
8. 'django.contrib.staticfiles',
9. ]

Creating The Ajax Script

Now then we will create the ajax script that we will be implementing in Django. First thing to do is simply go to crud directory then go to 'static/crud' select "js" and create a
file called "script.js", and after that copy/paste the code below.

1. $(document).ready(function(){
2. if($('#result') != null){
3. Read();
4. }
5. $('#create').on('click', function(){
6. $firstname = $('#firstname').val();
7. $lastname = $('#lastname').val();
8.
9. if($firstname == "" || $lastname == ""){
10. alert("Please complete the required field");
11. }else{
12. $.ajax({
13. url: 'create',

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 10/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials
14. type: 'POST',
15. data: {
16. firstname: $firstname,
17. lastname: $lastname,
18. csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
19. },
20. success: function(){
21. Read();
22. $('#firstname').val('');
23. $('#lastname').val('');
24. }
25. });
26. }
27. });
28.
29. $(document).on('click', '.edit', function(){
30. $id = $(this).attr('name');
31. window.location = "edit/" + $id;
32. });
33.
34. $('#update').on('click', function(){
35. $firstname = $('#firstname').val();
36. $lastname = $('#lastname').val();
37.
38. if($firstname == "" || $lastname == ""){
39. alert("Please complete the required field");
40. }else{
41. $id = $('#member_id').val();
42. $.ajax({
43. url: 'update/' + $id,
44. type: 'POST',
45. data: {
46. firstname: $firstname,
47. lastname: $lastname,
48. csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
49. },
50. success: function(){
51. window.location = '/';
52. alert('Updated!');
53. }
54. });
55. }
56.
57. });

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 11/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials
58.
59. $(document).on('click', '.delete', function(){
60. $id = $(this).attr('name');
61. $.ajax({
62. url: 'delete/' + $id,
63. type: 'POST',
64. data: {
65. csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
66. },
67. success: function(){
68. Read();
69. alert("Deleted!");
70. }
71. });
72. });
73.
74. });
75.
76. function Read(){
77. $.ajax({
78. url: 'read',
79. type: 'POST',
80. async: false,
81. data:{
82. res: 1,
83. csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
84. },
85. success: function(response){
86. $('#result').html(response);
87. }
88. });
89. }

Creating The Mark up Language

Now we will create the html interface for the django framework. First go to crud directory, then create a directory called "templates" and create a sub directory on it called
crud.

base.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 12/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials
4. {% load static %}
5. <link rel="stylesheet" type="text/css" href="{% static 'crud/css/bootstrap.css' %}"/>
6. <meta charset="UTF-8" name="viewport" content="width=device-width"/>
7. </head>
8. <body>
9. <nav class="navbar navbar-default">
10. <div class="container-fluid">
11. <a class="navbar-brand" href="<a href="https://sourcecodester.com">Sourcecodester</a>
12. " rel="nofollow">https://sourcecodester.com">Sourcecodester</a>
13. </a> </div>
14. </nav>
15. <div class="col-md-3"></div>
16. <div class="col-md-6 well">
17. <h3 class="text-primary">Python - Django Simple CRUD With Ajax</h3>
18. <hr style="border-top:1px dotted #ccc;"/>
19. {% block body %}
20.
21. {% endblock %}
22. </div>
23. </body>
24. <script src="{% static 'crud/js/jquery-3.2.1.js'%}"></script>
25. <script src="{% static 'crud/js/script.js' %}"></script>
26. </html>

Save it as "base.html" inside the crud directory "sub directory of templates".

index.html

1. {% extends 'crud/base.html' %}
2. {% block body %}
3. <form class="form-inline">
4. {% csrf_token %}
5. <div class="form-group">
6. <label>Firstname</label>
7. <input type="text" id="firstname" class="form-control" style="width:30%;" required="required"/>
8. <label>Lastname</label>
9. <input type="text" id="lastname" class="form-control" style="width:30%;" required="required"/>
10. <button type="button" id="create" class="btn btn-sm btn-primary">Create</button>
11. </div>
12. </form>
13. <br />
14. <div id="result">
15. </div>
16. {% endblock %}

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 13/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Save it as "index.html" inside the crud directory "sub directory of templates".

result.html

1. <table class="table table-bordered">

2. <thead class="alert-success">
3. <tr>
4. <th>Firstname</th>
5. <th>Lastname</th>
6. <th>Action</th>
7. </tr>
8. </thead>
9. <tbody>
10. {% for member in members %}
11. <tr>
12. <td>{{ member.firstname }}</td>
13. <td>{{ member.lastname }}</td>
14. <td><center><a class="btn btn-sm btn-warning edit" name="{{ member.id }}">Edit</a> <a class="btn btn-sm btn-danger delet
15. </tr>
16. {% endfor %}
17. </tbody>
18. </table>

Save it as "result.html" inside the crud directory "sub directory of templates".

edit.html

1. {% extends 'crud/base.html' %}
2. {% block body %}
3. <form>
4. {% csrf_token %}
5. <input type="hidden" id="member_id" value="{{ member.id }}"/>
6. <div class="form-group">
7. <label>Firstname</label>
8. <input type="text" id="firstname" value="{{ member.firstname }}" required="required"/>
9. </div>
10. <div class="form-group">
11. <label>Lastname</label>
12. <input type="text" id="lastname" value="{{ member.lastname }}" required="required"/>
13. </div>
14. <div class="form-group">
15. <button type="button" id="update" class="btn btn-sm btn-warning">Update</button>
16. </div>
https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 14/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials
17. </form>
18. {% endblock %}

Save it as "edit.html" inside the crud directory "sub directory of templates".

Migrating The App To The Server

Now that we're done in setting up all the necessary needed, we will now then make a migration and migrate the app to the server. To do that open the command prompt then
cd to the "server" directory, then type "manage.py makemigrations" and hit enter. After that type again "manage.py migrate" then hit enter.

There you have it we successfully created a Simple CRUD using Ajax. I hope that this simple tutorial help you for what you are looking for. For more updates and tutorials
just kindly visit this site. Enjoy Coding!!!

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 15/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Download Code

Tweet Like 49 Share

Like 208K people like this. Be the first of your friends.

1957 reads
Tags: Django Pytohn AJAX jQuery

Article by razormist
razormist has submitted 442 source code / articles.

If you like this post, you can follow SourceCodester on Twitter.

Subscribe to SourceCodester feed via RSS or EMAIL to receive instant updates.

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 16/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

0 Comments Sort by Oldest

Add a comment...

Facebook Comments Plugin

Add new comment

Your name

Subject

Comment *

Text format Filtered HTML More information about text formats

Web page addresses and e-mail addresses turn into links automatically.
You may insert videos with [video:URL]
Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>,
<mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
Lines and paragraphs break automatically.

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 17/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
CAPTCHA

I'm not a robot

reCAPTCHA
Privacy - Terms

Save Preview

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 18/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Share Your Source Code or Thesis

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 19/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Do you have source code, articles, tutorials or thesis to

share? Submit it here by clicking the link below

Submit now...

Popular Source Code (Today)

Inventory Management System

Python: Simple Login Application
Point of Sales System
PHP - Simple Force Download File
Point of Sale System (POS) using PHP
Rks E-commerce Complete PHP Project
Employee Management System
Sales and Inventory System for Grocery Store
Android - Simple Quiz App
PHP/MySQLi CRUD Operation with Bootstrap/Modal

Random Source Code

Create Dynamic Tables In SQL SERVER

Online Telecom System
How to Create a Clock in Visual Basic
Over weight or Under weight Program in C
Saving encrypted picture
Voting Per email Address using PHP/MySQL and jquery
Online Video Player:Share Your Videos with the World
School Management System
Dealing with Message Box in Visual FoxPro
CBT Exam

Receive Free Updates

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 20/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Enter your email address:

Subscribe Delivered by FeedBurner

What is RSS

Follow @sourcecodester

Connect on Facebook

I Am Programmer - S…
208,679 likes

Like Page Learn More

Be the first of your friends to like this

Book navigation

Android Tutorial

C# Tutorial

CodeIgniter Tutorial

CSS Tutorial

Data Structures in C++

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 21/22
30/03/2019 Python - Django Simple CRUD With Ajax | Free Source Code & Tutorials

Fundamentals of C Language

Java Tutorial

Learn C in 15 Days

Learn Object Oriented Programming in C++

Object Oriented Programming in C++

PHP Tutorial

SQL Tutorial

Visual Basic Tutorial

https://www.sourcecodester.com/tutorials/python/11762/python-django-simple-crud-ajax.html 22/22