Python - Django Simple CRUD With Ajax - Free Source Code & Tutorials

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
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
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
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
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

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
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'âdmin/', 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.
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'êdit/(?P<id>\d+)$', views.edit, name='edit'),
9. url(r'êdit/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.
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()
31.
32.
33. def delete(request, id):
34. member = Member.objects.get(id=id)
35. member.delete()
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):
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',
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,
49. },
51. window.location = '/';
52. alert('Updated!');
53. }
54. });
55. }
56.
57. });
58.
59. $(document).on('click', '.delete', function(){
60. $id = $(this).attr('name');
61. $.ajax({
62. url: 'delete/' + $id,
63. type: 'POST',
64. data: {
66. },
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,
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>
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 %}
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 }}"/>
7. <label>Firstname</label>
8. <input type="text" id="firstname" value="{{ member.firstname }}" required="required"/>
9. </div>
11. <label>Lastname</label>
12. <input type="text" id="lastname" value="{{ member.lastname }}" required="required"/>
13. </div>
15. <button type="button" id="update" class="btn btn-sm btn-warning">Update</button>
16. </div>
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!!!
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.
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.
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
Share Your Source Code or Thesis
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
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++
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

Python - Django Simple CRUD With Ajax - Free Source Code & Tutorials

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Python - Django Simple CRUD With Ajax - Free Source Code & Tutorials

Uploaded by

Copyright:

Available Formats

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

Python - Django Simple CRUD With Ajax

About 8 results (0.16 seconds)

Building A Web App With Python - Check it now

Learning Django And Python - Search Learning Django And Python

PHP Bericht-Generator - Web Development Tool

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

Online Hotel Reservation System | Free Source Code & Tutorials

Hospital Management System | Free Source Code & Tutorials

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

pow ered by Custom Search

Python - Django Simple CRUD With Ajax

Tweet Share Like 208K

Creating the App

Running The Server

Here is the image of python web server:

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

Creating The Website

Setting up The URL

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

It will be look like this:

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

1. from django.shortcuts import redirect

Creating The Path For The Pages

1. from django.conf.urls import url

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

1. from django.shortcuts import render, redirect

Creating The Models

1. from django.db import models

Registering The App To The Server

It will be like this:

Creating The Ajax Script

Creating The Mark up Language

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

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

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

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

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

Migrating The App To The Server

Tweet Like 49 Share

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

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

0 Comments Sort by Oldest

Facebook Comments Plugin

Add new comment

Text format Filtered HTML More information about text formats

I'm not a robot

Share Your Source Code or Thesis

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

Popular Source Code (Today)

Inventory Management System

Random Source Code

Create Dynamic Tables In SQL SERVER

Receive Free Updates

Enter your email address:

Subscribe Delivered by FeedBurner

Like Page Learn More

Be the first of your friends to like this

Data Structures in C++

Learn Object Oriented Programming in C++