signing up and logging into a website using ajax and jquery · signing up and logging into a...
Post on 17-Mar-2020
5 Views
Preview:
TRANSCRIPT
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a WebsiteUsing Ajax and jQuery
Sanhita Subhash Patil
Fundamental Research GroupIIT Bombay
Sanhita Subhash Patil (IIT Bombay) 1 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Introduction
Ajax is way of using client side tehchnology to talk with serversidetechnology and perform partial page update.
jQuery, the most common JavaScript library,on the client side.
In this presentation, will learn to develope Ajax login using Django onthe server side and jQuery on the client side.
Sanhita Subhash Patil (IIT Bombay) 2 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
Creating Project:
mysite is any project name
Following project folder gets created
Creating application inside project:
Sanhita Subhash Patil (IIT Bombay) 3 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
myapp folder gets created as follows:
Creating database file:Inside settings.py file update following:
Sanhita Subhash Patil (IIT Bombay) 4 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
models.py:
forms.py:
Sanhita Subhash Patil (IIT Bombay) 5 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
Give following command in Terminal to proceed with database filecreation:
Sanhita Subhash Patil (IIT Bombay) 6 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
The Django admin interface:(CRUD)capable interface.
settings.pyINSTALL APPS contains django.contrib.admin, django.contrib.auth,and django.contrib.contenttypes.
Sanhita Subhash Patil (IIT Bombay) 7 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
The Django admin interface:
Sanhita Subhash Patil (IIT Bombay) 8 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
The Django admin interface:
urls.py of mysite folder
Sanhita Subhash Patil (IIT Bombay) 9 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
without admin.autodiscover():
Sanhita Subhash Patil (IIT Bombay) 10 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
run server:
Browse it with:http://localhost:8002/admin
Sanhita Subhash Patil (IIT Bombay) 11 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
The Django admin interface:
Sanhita Subhash Patil (IIT Bombay) 12 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
The Django admin interface:
Sanhita Subhash Patil (IIT Bombay) 13 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
The Django admin interface:
Sanhita Subhash Patil (IIT Bombay) 14 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
urls.py:
A URL pattern is simply the general form of a URLExample:http://localhost:8002/myapp/signup
url(r’^signup$’,views.signup,name=’signup’),
url(regex defining how to access page from url, function of theview,name=optional)
name is useful when multiple url patterns pointing to same viewfunction.
Sanhita Subhash Patil (IIT Bombay) 15 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
urls.py of myapp folder:
The ’r’ in front of each regular expression string is optional butrecommended. It tells Python that a string is raw that nothing in thestring should be escaped
Sanhita Subhash Patil (IIT Bombay) 16 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up
signup.html:
csrf:Cross-Site Request Forgery also known as a one-click attack
django will send a random key both in cookie, and form data.
Then, when users POSTs, it will check if two keys are identical.
Sanhita Subhash Patil (IIT Bombay) 17 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up
signup.html:
After Successful signup:
Sanhita Subhash Patil (IIT Bombay) 18 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up
View.py for Signup:
Sanhita Subhash Patil (IIT Bombay) 19 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
Login Dialog Box:
Sanhita Subhash Patil (IIT Bombay) 20 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
search.html
Defining html form structure:
Sanhita Subhash Patil (IIT Bombay) 21 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
search.html
Adding function to open dialog:
On click of search button login form dialog will be opened.
Sanhita Subhash Patil (IIT Bombay) 22 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
search.html
jQuery dialog box with AJAX call:
Sanhita Subhash Patil (IIT Bombay) 23 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
search.html:jQuery dialog box with AJAX call:
autoOpen is false because this dialog will open only after searchbutton click.
url: in the AJAX call is the url location where this data needs to besent.
success: What to do if data is successfully sent to the specified url, ismentioned inside function written after success:.
Sanhita Subhash Patil (IIT Bombay) 24 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
views.py
function authenticating user:
Sanhita Subhash Patil (IIT Bombay) 25 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
views.py function authenticating user:
If user has entered valid username and password: ReturnshttpResponse = Success to AJAX call in search.html page
Login = true is saved in session variable as:request.session[’login’]=’True’This session variable is deleted after logout.
If user has entered invalid username and password: ReturnshttpResponse = Fail to AJAX call in search.html page
Sanhita Subhash Patil (IIT Bombay) 26 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
SuccessfulLogin.html
Sanhita Subhash Patil (IIT Bombay) 27 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
views.py
Before opening page checks if user is logged in.
request.session[’login’]=’True’ is getting set while loggingIn insideprofile() function of views.py
Sanhita Subhash Patil (IIT Bombay) 28 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
Logout function in views.py
Sanhita Subhash Patil (IIT Bombay) 29 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Logging into a Website Using Ajax
Try to open successfulLogin page without login or after logout:
Sanhita Subhash Patil (IIT Bombay) 30 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
views.py:
Never delete user instead mark them inactive
debugging information is exposed only if settings.py has DEBUG setto TRUE
Sanhita Subhash Patil (IIT Bombay) 31 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
views.py:
In production, Ajax calls to this function should always use POSTrather than GET,For dubugging=GET should be used
Because GET request is sent via the URL string (appended to theURI with a question-mark as separator), which is visible whereasPOST request is encapsulated in the body of the HTTP request andcan’t be seen.
Sanhita Subhash Patil (IIT Bombay) 32 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
views.py:
If URL ishttp://127.0.0.1:8001/ajax/loginfor debugging add GET data at the end and manually ashttp://127.0.0.1:8001/ajax/login?login=sampassword=sam.
Sanhita Subhash Patil (IIT Bombay) 33 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
search:
Regular Expression:
split_query = re.split(ur’(?u)\W’, query)
strings like u’test’ to indicate a Unicode string(unify all the differentencoding schemes)
where query: is string needs to be searched
ur’(?u)\W’
splits query into words
Example:
import re
m = re.split(ur’(?u)\W’, ’Today is friday’)
print m
OUTPUT:[’Today’, ’is’, ’friday’]
Sanhita Subhash Patil (IIT Bombay) 34 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
views.py:
while u’’ in split_query:
split_query.remove(u’’)
removes extra spaces and gives only words
Example:
import re
split_query = re.split(ur’(?u)\W’, ’Today a is friday’)
while u’’ in split_query:
split_query.remove(u’’)
print split_query
OUTPUT:[’Today’, ’a’, ’is’, ’friday’]
Sanhita Subhash Patil (IIT Bombay) 35 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
search.html:reasons a user might not be treated as logged in:
No attempt has been made to log in
user has attempted to log in with an invalid account
log in to a valid account with wrong password
Correctly authenticated but is valid set to FALSE.
Sanhita Subhash Patil (IIT Bombay) 36 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
Signing Up and Logging into a Website Using Ajax
Authentication and logins using Django-Ajax as:
Clientside:jquery is used for creating Login dialog box
Serverside:Django framework powered by Python is used for writingall functionality like authentication,logout,etc.
AJAX call written within jQuery for login request without page reload.
Sanhita Subhash Patil (IIT Bombay) 37 / 38
Signing Up and Logging into a Website Using Ajax and jQuery Fundamental Research Group,IIT Bombay
References I
Jonathan Hayward.Django JavaScript Integration: Ajax and JQuery.URL:http://www.it.iitb.ac.in/arndg/brain2013/sites/default/files/Packt.Django.JavaScript.Integration.AJAX.And.JQuery.Develop.AJAX.Applications.Using.Django.And.JQuery.Jan.2011.ISBN.1849510342.pdf
https://docs.djangoproject.com
Sanhita Subhash Patil (IIT Bombay) 38 / 38
top related