Signing Up and Logging into a Website Using Ajax and jQuery · Signing Up and Logging into a...

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


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.



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:




myapp folder gets created as follows:

Creating database file:Inside settings.py file update following:




models.py:

forms.py:




Give following command in Terminal to proceed with database filecreation:




The Django admin interface:(CRUD)capable interface.

settings.pyINSTALL APPS contains django.contrib.admin, django.contrib.auth,and django.contrib.contenttypes.




The Django admin interface:





urls.py of mysite folder




without admin.autodiscover():




run server:

Browse it with:http://localhost:8002/admin




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.




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



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.



Signing Up

signup.html:

After Successful signup:



Signing Up

View.py for Signup:



Logging into a Website Using Ajax

Login Dialog Box:




search.html

Defining html form structure:




search.html

Adding function to open dialog:

On click of search button login form dialog will be opened.




search.html

jQuery dialog box with AJAX call:




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




views.py

function authenticating user:




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




SuccessfulLogin.html




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




Logout function in views.py




Try to open successfulLogin page without login or after logout:




views.py:

Never delete user instead mark them inactive

debugging information is exposed only if settings.py has DEBUG setto TRUE




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.




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.




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




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




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.




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.



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


Signing Up and Logging into a Website Using Ajax and jQuery · Signing Up and Logging into a...

Documents

Transcript of Signing Up and Logging into a Website Using Ajax and jQuery · Signing Up and Logging into a...