Transcript for:
Django, jQuery, and Ajax Applications

okay start next share the screen is it visible this screen yes sir okay thank you yeah so we will uh start with what has happened so far and then see what in store for today so if you just recall from the first day itself we have started with the what is full stack and why we need those things and then even though a lot of different Stacks are available like M mean and other things lamp and other things we have preferred Jango and the mvt architecture mvt stands for model view and templates I think in the last four days we have been discussing on what to write in the views what to write in the templates what to write in the models okay so those has been the discussion uh as I told views.py and all the views what you write there should be a corresponding mapping recorded in the urls.py because ultimately end user accesses URL he can't directly call the function he has to go through URL and URL will have a mapping of views and uh URLs and then uh for HTML and CSS we have used a Django template system where all your HTML files the presentation data will go to the templates folder and if any decoration portion is there that is done through CSS will be kept inside static folder all the basics we have been discussing so far and from one template we can derive another templates which is called as template inheritance and last two sessions maybe on the models we have discussed which is the back end which is basically a table and database in your dbms we have used MySQL any dbms can be used for that matter and uh rather than writing the code completely for the some of the tables where backend data entry has to be done is better that prefer admin interface it helps it automatically generates all the required web pages it supports cred operations it helps you to create users give access permissions to the users make them into groups and many other flexibilities it provides and to speed up the coding we have used two additional options yesterday that is if your task is to display a list of data from your table we have used a generic Class View and again in that list specific detail you want me generic detail view likewise uh create view can be used delete can be used update can be used for any table that can be directly used and uh if your Forum exactly matches with the model better don't write complete code take the help of model forms and rapidly you can develop that particular particularly registrations and other things transactions where you your data will directly fit to the model better to use model forms rather than completely writing the code all these are to save the time for coding all these are to rapidly develop the applications bring the application quickly to the market these features have been provided and also programmers Buton is reduced otherwise this whole website development or web application development is a monotonous process people will get bored developing the same thing again and again and again that factor Jango has catched and some patterns it has introduced okay some patterns in the coding it has exploited and it is trying to give it and at the end of the session yesterday we have discussed on how to export our data in the database or the table into the CSV format comma separated values as well as PDF portable document format and for PDF we have used a package called report lab for CSV built-in CSV package is there these things has been demonstrated so far this should cover at least four modules of the syllabus as well we coming to the last juncture today and that is Introduction to Ajax technology what is that and why it is called as an overlay technology why Ajax is called as overlaid it is overlaid on many other Technologies like HTML xhtml XML Json briefly we will discuss them and then we will see how a jQuery framework in JavaScript is very much useful to speed up the coding you can use ra JavaScript also but that there is a library called as jQuery and if you use that a lot of things is automated already you can directly use it okay so even on the client client side even the JavaScript part library is available called as jqu and we will see finally how to integrate these three pieces Ajax ji and J first we will discuss separately Ajax separately I will discuss jQuery separately I will discuss then I will try to integrate those Ajax and jQuery with the Jango with the Jango and already we have developed two applications if you consider the second program I think where we have done student enrollment to the course that page was already done but that was done without Ajax today the same program we will repeat it with Ajax with Ajax how to make sure that two pages will not be there single page will be there and the result comes on the same page earlier what was happening was the result was coming in a different page you are given one page where you have to select the student and course click submit and then result was coming in a new page now instead of giving a new page to the result in the same page itself we will try to put the result so that you need not keep moving with the pages and it will faster also that is called single page insertion next concept is that only single Pages people should not keep on moving to different pages whatever they want put it in the same page try to bring it in the same page okay single page view I think we have written a program for like in that itself courses will be displayed you select the course and then click submit all the students registered to the course was displayed but in a new page now that display will bring it to the same page the same page where you are providing input there itself output will come earlier input page was different output page was different for input itself one page was there once user click submit output page was coming now with Ajax and with jQuery and other things we will see that both input and output comes in the same page two separate pages are not there single page is sufficient that we will do with the technology called as ax okay now before I could start the Ajax technology this is the okay if possible I don't think time will be there in case if I get time I will discuss on cookies as well as sessions we'll see it optional it is okay to understand this jQuery ajax and other things I think all of us are using Gmail now when you have opened the Gmail inbox suppose the new email comes whether automatically that page will be refreshed or we have to refresh the the page while you are opening the Inbox and suppose a new email comes then that page will be automatically updated if you have observed it the page is automatically updated one need not keep refreshing the page to see new emails inbox counter gets incremented and the new emails automatically come there so that page will be always there and the page is doing something behind the scene it is not a static page it is doing some background work every time it is is trying to find out any new emails are there if if there is a new email it will bring it so you are not going to login again or you are not going to again refresh the page Without You refreshing the page once you open your Gmail inbox for example I show you here this is my Gmail this will be the Gmail suppose some new email comes automatically this page will be updated one need not keep refreshing maybe it takes little time but it will be automatically updated even the inbox counter will be changed if any new email comes now this is Ajax used by Google in Gmail that is single page is displayed and behind the scene JavaScript or jQuery will be asking again and again any new email is there if new email is there that will update this page you need not refresh the page within that page only you'll be getting the new contents second example is our Google search you see the Google search Search google.com here moment I type AJ sorry automatically the suggestions are coming automatically the things are coming popping up here again the page is not refreshed I will not type one character and refresh the page I'm typing my characters that is caught by JavaScript and it is asking give me the relevant suggestions from the server partial update it is called partial update so so whenever matching suggestions are there it will load it it is changing it so user does not know all these things user thinks that there's a single page whenever he types automatically something is coming but behind the scenes what is happening is this page there is a JavaScript waiting for you whenever you type it will catch it and try to ask the server any new data is available or what is relevant data this technology is aex where the single page be there and based on your events JavaScript will become active and it will get the new data so this Google Search is again the product of Google also uses ax to get the suggestions because if I change it if I go for python new suggestion comes whichever topic I type that suggestion will come one need not nobody will store all the suggestions in your browser is coming from the server but who is operating who is getting from server I have not pressed any button also I'm not submitting the form also I'm typing my characters are caught by JavaScript and it is sending to the server behind the scen there is a JavaScript working okay whether it is Google search or Gmail okay or even Google Maps Maps you might know first you will display some map you will Zoom you will get some other uh locations if you zoom you'll get further uh streets and other details locations as you keep on zooming new locations will come so normally what Google will do is it will only fetch one sort of map as the user zooms that is a event user will keep zooming that is an event it will JavaScript will go on fetching the new contents new maps or new locations the entire page will not be refreshed only that portion will be updated but if you take our vtu example see for example I show that also results. vtu.ac.in and if you click uh something some example here you have to type and then click submit then a new page will come that is not ax if the result comes in the same page then you are not refreshing the page you're trying to get the result in the same page there Ajax technology will be used okay so one thing you should get cleared now what is Ajax and what is not Ajax Ajax will never allow you to refresh the page so whatever you are doing whatever events typing selecting zooming Mouse change whatever you are doing that will be caught by JavaScript and it will be working behind the scene to get some new data to the page to the same page new data will be applied whichever page you are right now there itself new data will be applied whether it is Gmail or whether it is Google or whether it is a Maps or any other goog if that is there then there is a if that is not there normally traditionally what happens first generation of websites this website itself vtu result you type the usn you type the capture press submit new page comes that is normal that is the first generation website no but if the result comes in the same page without refreshing the page then there is an aex that is second generation Web Two okay without Ajax is called Web one first generation of web with Ajax it is called as web second Web 2.0 or second generation of web and today most of the sites are packed with Ajax because they want to make their websites very responsive they don't want to make users keep on visiting multiple Pages because they will forget which page they actually started they want to in the same page itself whatever they want they should get it it's like you sitting in a place and getting order whatever you want you are not going to those locations and getting it ordering everything at online you want a product you order you want a food your item you order whatever you want you will order here itself you want to pay some Bill you will do here itself sitting at your place only or doing everything that is Ajax actually behind the scen all these who is actually helping us to get Ajax is the JavaScript and one library in JavaScript which is helping is jQuery even though without jQuery also we can do it but it helps you to code quickly and coding is much easy to read if it is jqu RA JavaScript also we can do but that will take a lot of coding it is simplified with jQuery the syntax is simplified okay so this is the websites because till now whatever I have discussed all the web pages what we have done was web one that was there was no objects you were pressing the button and the new page was coming today we will change it we will try to see that pages are not refreshed if you do something it reflects in the same page okay for that I will try to take help of Aja Ajax technology next we have to go further what is a full form Aja stands for ajx stands for asynchronous JavaScript and XM asynchronous JavaScript and XML let me discuss the scenario with a diagram here the word file okay I just increase this yeah let me take a shape here how the interaction starts actually this is browser user actually starts with the browser type the URL whichever URL it might be normally what happens is with ax I'm talking about without ax okay it goes directly to the server HTTP request HTTP respond that's all now whenever user does some interaction it goes to the next layer and that layer is Javascript that means uh the users request I take this is going through going to JavaScript fine next what JavaScript is actually going to do we will see that JavaScript actually calls with the server there is a server web server Jango web server or Apache web server or any other web server you know it is web server who is interacting with web server not the browser it is the JavaScript so insert okay some connector I use connector is not compulsory but the shape of connector don't bother just connection is there you OB understood okay so browser did some interaction but that was caught by JavaScript and JavaScript forwarded to web server now at this time browser need not wait for the result browser can continue with the normal operations earlier when browser submitted the request to the server the entire browser page is suspended and it has to wait for the result from the server now it is not like that it's like you write an exam and you continue your normal day-to-day business result will come someday that is called asynchronous the things happen at the same time it is synchronous need not be write your exam some other day result will come or some point result will come okay here also browser has submit the request and sometime result will come some point who is taking care JavaScript will take care you need not bother you continue with your other operations now what happens is server will execute all the programs will be executed ultimately some result will come that result is sent back to again JavaScript I'll take that that result is sent back by server to the Java JavaScript and JavaScript renders that result to browser like this is it clear so this is the first one we will indicate the colors this is the second phase some other color this is third and this is last okay so four different uh things that has happened change right four different operations so JavaScript is taking care here JavaScript is communicating the web server and web server is sending back the result to the JavaScript now here JavaScript and web server communication how it happens it happens through a technology and that technology I'm going to write now what is a technology that technology is called as a asynchronous JavaScript and XML why it is called so because JavaScript is used to communicate with web server therefore it is Javascript why as synchronous because browser is not waiting for your result the result will come sometime later because it comes sometime later it is called asynchronous asynchronous JavaScript and the format of result given by web server it can be either XML or Json if XML is used it is called as a synon JavaScript with XML the result format will not be HTML it will be XML okay the result given by web server will be typically XML the result that comes Ajax is a technology through which JavaScript and web server communicate the result given by web server back to JavaScript is not HTML it is XML okay therefore it is called as a synchronous JavaScript with XML this is a technology where JavaScript gets a prominence the workload is also divided browser need not or the HTML need not do everything HTML can depend on JavaScript which will take care of all these things HTML will keep Qui and only focus on presentation the event handling communication and other things will be taken care by the JavaScript engine not by the browser directly this is the workflow of Ajax right and here they have used one term called as partial page updates there is a reason because see if you take this as the complete web page you take this itself as a complete web page only if this portion is updated you'll submit something and suppose the result comes here the entire page remains same only this portion is updated then that is called as partial page update initially one page will come in that page some content is updated in that page only some content is updated or somewhere result will come that is known as partial page update because the entire page is not refreshed entire page is not updated in that page some portion is updated it is called as partial page update and Ajax provides this partial page updates only some portion of your HTML can be changed output HTML can be changed we'll realize that as programs also okay now what are the key features this Ajax belongs to the second generation of web first generation is what we did till today and what you have been seeing in many of your websites you are given a page you are asked to submit you get a new page means that is first generation if something is happening in the same page means it is second generation that is how you can categorize whenever you visit your website okay whether it is belonging to web one or web two okay but if suppose I'm now going for web two what are the features that will be there first important feature is partial page update that is whenever a web page is displayed to me based on my actions or based on some other things that page will get updated not the entire page some portions of the page is updated which is called as partial page update how it is updated JavaScript gets communicated to server and from the server result it will update is it C JavaScript engine is there now this is a user Centric because it's more user responsive user interactive everybody likes this because if they click something happens there itself they need not wait for the next page and other things the result is happening there itself they feel that it is local even though reality is whenever you do something remote communication is happening result is coming it is getting updated but because of the speed of the technology user never realizes that there is something going behind the scene everything is happening locally and uh this actually has led to the effective social networking Pages you might have seen somebody uploads a post you can click like automatically like account gets updated correct somebody has updated I mean uploaded their post or the reals they have uploaded something you go and click like there like count gets updated so that is how even the YouTube some video is displayed if you click like automatically counter gets updated one need not refresh the page to see the new count there itself it gets updated that is where more participation of the user will be there if they feel that it is happening so quickly people will start more participating of course lot of information can be easily shared with the second generation powered by Ajax okay so what is happening ultimately who is responsible for all these things is Javascript and JavaScript actually uses uh protocol now earlier if you recall again we have to go back to our old first day class which we did two people communicate in our web there web browser with web server which protocol is used between web browser and we server HTTP HTTP correct and I think think you can recall uh what is this channel called as browser to server what do you call this as communication correct HTTP request and the other way browser server back to browser is called HTTP response response correct now the same scenario but one person is getting added you without a yeah this is without a next is with objects let copy what is getting added here plus who is there who is extra required in a and even at this end what is required JavaScript now no longer it is HTT request it will be ex XML HTTP request XML HTTP response that's all there's a change with TX of course another layer is added for you uh another layer is added and what is that layer JavaScript so with the JavaScript what happens here is the HTTP request now is called as XML HTTP request and the HTTP response will now be called as XML HTTP response okay that is the difference between with Ajax and without Ajax is it clear normal HTP request response was there in web one also this is actually one more way of saying this this is our first generation and if you are using Ajax in your website it is going to be called as second generation website okay you're using Second Generation website then instead of HTTP request you will have XML HTTP request likewise the other way will be XML HTTP response yes is it C to this so we will now proceed further one second yeah now we'll see what are the different XML HTTP request methods that can be executed XML HTTP request methods are executed inside JavaScript so what are those methods suppose a request was sent and you want to cancel there is an abart method this is for request then suppose response has come you want to see all the headers then get all response headers specific header you want to see means get response header the response headers means what all your HTTP headers like content type content length date uh agent so many things will come in HTTP request and response one can see that all the headers you want to watch means get all response headers specific header you want to see means get response header all these are JavaScript methods and you have to write the code inside JavaScript these things then there is a open method which allows you to connect to the URL uh where you have to tell which method post method or get method what is the URL whether you want asynchronous communication or not and what is the username and password suppose you're are logging from a system logging to the server what is the username and password so from JavaScript we can connect to the server using the open method using the open method you ra JavaScript how to communicate but later we will see we will never use rava JavaScript we'll take the help of the library called as Ajax without uh uh sorry Library called jQuery without jQuery how it can be done you can use these methods so you have sent a request you want to cancel it use aart request is sent you getting response if you want to see the headers of the response two options you can see all the response using get all response headers or specific header using get response header then you want to connect to the server means there is a method called open where the request method can be get or post the URL is the URL which you want to communicate asynchronous communication true or false username and password this will just open a connection after opening the connection you have to send the data for sending the data there is a send method so there are two steps actually you have to first get connected and then start communication recall TCP protocol connection oriented first you have to connect then you have to start sending data here also first you have to open a connection once connection is established people can start sending the data using the send method and if you want to change the header also there is an option while sending the request headers can be changed using set request header usually two things request and response will be there and uh through JavaScript we can uh start doing those things by using these methods so aart method get response headers and then opening a connection sending the data and changing the header all these things are possible through these methods again remember we will not use these methods because these are the raw JavaScript methods uh Gone of the days where ra JavaScript is used we switch to the library called jQuery it is much easier all these methods will not be required in that case this just a beginning and uh once a request is sent there are various States it can be possible once you make a request from JavaScript to the web server that is called as XML HTTP request XML HTTP request can be in various States can be in various States five states are there first is still not you connected means it is uninitialized only you have thought that you have to go and talk still you have not talk means it is uninitialized next when you start connecting it is open send is not called just open is called when you call send it is called as sent method and then when you are receiving the response it is called as receiving State when you're are receiving it okay and once everything is being received sometimes what happens completely you may not receive in chunks you will receive finally when everything all the chunks are received you enter into the loaded State suppose that you have requested an image that image entire image will not get downloaded immediately part part of the image will get downloaded that is called chunks so when it is in the process of receiving chunks we call it as receiving State once all the responses are completely received you enter loaded state so you are in totally five states JavaScript when it is communicating with the web server it is in five steps first it has started just to request it is preparing it is called uninitialized then it will connect to the server by calling open is called open State connection is there but data is not yet sent once you start sending the data by using send method you enter a state called as send then web server will also respond when you start receiving the responses it is receiving State as I told one stretch itself you will not receive the entire response it will come in chunks part by part you will get later once all the parts are received you enter the loaded State this is total communication between the JavaScript and the web server the total communication involves five states uninitialized open sent receiving and completed total five what are the responses you may get possibly text response may come and how to fetch that just use the property called response text if I just call response text I will be knowing what response the server has sent if it is XML response I should call response XML textual response has come it is response text TT if XML response has come it is response XML the data portion of the response suppose header you want to see that is also possible next status various status are possible see you request a server server May Fail there may be bug in the server you get internal server error or you have requested something from the server and server sees that that is not there you have requested a method and that method is not there for not for not found typical errors are possible when in the communication process not everything goes right there may be a fault at the server side server program itself may be wrong or the resource you are asking is not there it is moved or something then how to communicate that for that there is an option called status if the status is okay if the status is okay and if the status code is 200 status value is okay and the code is number is 200 everything has gone fine then you can proceed by collecting your response using response text or response XML but something has gone wrong server error is there or the client error is there or the input error is there or the method is not there then every time you get errors how to know which error has come you have to look into status and status code of status text status will contain the code actually and a short description will be there in status text a simple example everything goes fine means status is 200 status text is okay if there is some server error program error means status is 500 uh status text is Ser internal server error some error at the server if I get 41 as a code then that status says that forbidden you are not authorized to ask it there will be some requests where only few people are entertained so you are not authorized forbidden you can't access the resource forbidden is the status text and the code is 41 44 page is not available that is the text and the code is 44 like that lot of Errors may be possible even 31 is there where client errors are there client is not capable to hold the answer okay server is sending something and client does not know how to handle it that is also an error client is not capable likewise whatever is there whatever communication happens you may either get the proper response if you get proper response you can use response text or response XML otherwise you should look into status and Status text to know what went wrong what went wrong this is about the XML onage Ajax is not a single technology it is called as a overlay technology to give that analogy people say that speech is an overlay function now one question is there which organ gives speech actually which organ generates speech the human body I'm speaking something here that means which organ is helping me to speak mouth mouth Yes mouth hello lens which one which one okay fine see here uh different things are possible like whether tongue is helping or whether lungs are helping or whether brain is working who is actually helping to speak is a question I give three options okay I just reframe my question which organ whether tongue helps me to speech or whether the brain helps me to switch or the lungs help me to switch speak tgan is finally responsible for speech or other than these three any other organiz this is little trial because problem is see if you take tongue its main function is different is for swallowing and it is for other purpose it is there brain has its own different functions and lungs for basically the breathing and other things but ultimately all these three are required for speech all the three are required so speech there is no primary organ that has been designed which is for speech only nobody designed any primary organ that is only responsible for speech it's actually depending on the various other organs you want to get finally a speech uh it is the effort of the three different organs we can say tongue will help us or brain will help us or the lungs will help us okay different arkans are going to help us in making a speech like that a Jax nobody there is no specific technology it is actually a collection of Technologies people say Ajax technology or Ajax framework which is actually helping us to get partial page update or second generation web fine but Ajax is not a single technology it is basically depending on collection of Technologies and it is an overl thing because it is depending on those Technologies whose primary purpose was different primary purpose HTML primary purpose is presentation XML primary presentation is data primary purpose is sharing data Json primary purpose is sharing data and JavaScript primary purpose is some event and but all these have been combined together now all these technologies have been combined together and given in the name called as a so a like a speech is an overlay function because not any particular organ is responsible for swich all these organs are responsible and their primary functions were different here also there are many technologies that is making up and finally giving the name called as ax so I'll just go through those things is was asking the same thing which organ produces a speech lung tongue lungs brain it's basically overlay answer because all the speech finally comes with all these three organs it is overlay on all the three all the three are required It's a combination effort actually and Ajax is also same thing it is also an overlay technology because it depends on various simple Technologies which are the simple technology I'll just write it down first so Ajax is like a speech we can say Ajax like speech is overlay overlay on what on various Technologies what are the various technologies that is making up a jaxs one may be HTML or xhtml that is one thing for presentation their primary function presentation but that is used in Ajax also XML primary purpose is data transfer or data representation now it is used in Ajax also and computor for XML computor for XML is Json JavaScript object notation it's a competitor another way of sharing the data data can be represented in two ways either XML or Json fine then JavaScript particularly I'll be taking one specific Library called as J JavaScript is a very big thing in that specific library is J all these technology if you add together their efforts being add together make projects we are able to achieve the concept of projects we able to achieve the concept of projects all the four presentation one person we have taken and data transfer data presentation one event handling somebody all these efforts together which are like our brain lungs and other things finally give speech all these finally give AXS and helps us to realize Aja technology even though uh in details are there I'll just quick discuss these Technologies and only important things I will tell here itself what are they I think all of you know HTML and xhtml HTML any full form what was HTML hyper text markup language yeah and designed for and that is extensible product language correct so two different ways but actually xhtml ultimately was being removed and HTML 5 when it came xtml has lost its prominence but earlier post syllabus also they have kept it and earlier Technologies people were using xhtml what is the difference is even though both finally goal is same I have to create a web page I want to present my information paragraph I want to do tables I want to create uh forms I want to create HTML is much rule based and it will check all the taxs are closed or not upper case lower case is different so many things it will take care and it will provide a kind of standard while writing this HTML is non-standard there are many people who will forget to close the tax there are many people who will use upper case and lower case with Will they will not do properly okay and there are many people who wrongly type the tax nothing is being detected in HTML even whatever mistakes you do browser will always ignore it browser never reports that this is the error then user has to keep on checking what has happened and it is completely non-standard there is no standard while uh you know writing it every people write in their own way to bring some standardization xhtml was introduced so that people will close the tax properly they will see that upper case and lower case is properly done nesting is properly done okay lot of things was being checked actually and browser was reporting error if you have not done that it was reporting error and web pages are not displayed with xhtml but with HTML none of the error is checked whatever possible R will try to display that's all so kind of standard introduced that later uh that extension. xhtml became very much tedious people because there are already many pages with extension not HTML so later HTML 5 included this concept of HTML and was introduced fine then for data we have two languages called XML and Json let me quickly tell the difference here HTML versus XML what is the difference major anybody knows both are languages markup languages only mean tag will be used what is the difference between the HTML and the XML of course full form is different hypertext markup language extensible markup language what is the basic conceptual difference between why HTML is used and why XML is used okay that is fine that is in xhtml closing tag basically is for the xhtml any basic difference why it is used actually in that context whether both of them are use it for presentation itself presentation of the data I got some data to present whether I can use either HTML or XML okay see with respect to data if you take what is the difference HTML says that I will take the job of presenting the data how effectively I have to present I will do that image you want to present me paragraph you want to present me D you want to present me I will take help of sty sheet also and colorfully I will try to display that all the displaying aspects I'm going to take that HTML will do or transferring the data anything see I'll just take a small example yeah that's okay xhtml is fine now I'm moving to the next one XML correct it is xhtml HTML that's fine what you told is correct next stage is XML XML and Json because one technology for presentation we have accepted either I will go for HTML or fine next technology what I want is for representing my data or sharing my data I want Suppose there is a data for book some library book you take textbook I want to represent the book data normally what are the fields that will come for a book want to represent a book what are the different aspects of the fields of the book so every textbook has I think uh ISBN is there and uh author is there publisher is there price is there uh Edition is there like that so how to represent in XML so my task here is the data in the question is book now let us write to represent book using XML how to do that book user t see how I'm writing it the tag book it is user defined tag HTML says only use predefined Tag in HTML you can't use the TXS you want you have to use the predefined collection of TXS but here I can use whichever tag I like and I'm going to use a tag called book in that which are the fields ISBN some data I give i1 close it properly closing is compulsory and next thing is title of the book from T1 author of the book yeah publisher of the book sorry publisher properly to close it and finally close the book this is for representing one book one textbook okay so I included ISBN title author publisher many other details can be included like price number of pages uh whether it is a low price Edition or not addition number all those things can be included but I have restricted to this information this is how to represent my data in the XM language because web server has to return XML uh to the JavaScript and this is the format of XML then JavaScript will have parsers that will try to fetch out the data data the data is is i1 which is Isn P1 what is it title what is a author what is p publish that JavaScript will extract but you have to first give XML format output this is one way of representing another Lang is there that is called Json represent same book using Json and if you're asking what is the full form of Json JavaScript object notation JavaScript object notation how to represent it okay so for any item you're representing it becomes a dictionary so one book means one dictionary which are the fields inside the dictionary ISB no tags No Tag language no angular brackets we are going to use the JavaScript kind of a syntax so the flower bracket indicates dictionary dictionary is for one object every object is represented by a dictionary so one book object is there so one uh data I'm going to enter so ISBN I 001 because it is a string comma next title P1 author a string you double quotes publisher P this is one notation now can you tell me which will consume l space whether XML or Java Json this is the Json equivalent of the XML I written both are representing book itself earlier I wrote it using XML using the tag language earlier next I represented using Json that is the JavaScript notation which notation consumes less space whether the Json or the XML presentation is not visible it is visible okay okay so first I showed you XML then I showed you Json correct now can you tell me which will consume less space less space Json Json that is the advantage of Json also it is lightweight you consume less space that unnecessary the tag and angular brackets and the verbos description what you're giving verbosity is avoided and lighter space is consumed Advantage is if the space consumed is lesser what you will give to the JavaScript server will give to JavaScript that Network bandwidth is reduced because ultimately this XML or Json you have to create it and give it to the JavaScript over the network server has to create it and give it to the JavaScript over the network so when I'm talking about or thinking about Network for me Json is better because Json consumes less space XML will consume more space only one book I have written 100 books are there suppose there are 100 books equivalent for 100 books in Json it will be taking much much less space complete less space is consumed by Json now tell me another thing which is more understandable whether XML or Json anybody can read and understand book information is there yes which is is in more readable format more readable format correct okay so readability is also there readability is there and space compactness is also there right because of these reasons we prefer the Json notation today all the vendors they provide two types of outputs you go to Google Map also Google Map as an API and if you want to use it they will provide you in two formats result in XML they will provide and Json also they will provide whichever language you want you can use it okay ja you you have to write a JavaScript that will catch it and then give to the browser all the maps today they are depending on this Ajax technology where they will uh ask the map server and map server returns in either two formats e e okay sorry there was a disconnectivity I just got connected in the internet okay uh I'll share the screen again there are some issue with the internet okay okay uh I was talking about two technologies XML and Json for presentation we have uh HTML and Xs ML and for data we have the Json and XML now I will take up another aspect called as Dom you know the full form of Dom that is another thing we will discuss now because ultimately the jQuery will modify the Dom itself object model yes exactly document object model we will try to write it we'll take an example and uh write Dom for that suppose uh I'll write a very simple web page I'll increase the font also yeah is it visible yes sir yes okay okay so paragraph first paragraph second paragraph and one small table just one row table TR TD so very small uh HTML file every HTML or XML has a Dom that you remember first any HTML page or any XML page has a Dom and even Json has a Dom document object model now how to write the Dom for this what I should write actually the question is write the Dom for this what is that I'm going to write with a full form and other things we have discussed what actually is Dom document object model is what we told what I have to write actually for a given HTML page or a given XML page write Dom means what actually is it a tree structure sir yeah tree structure has to be WR exactly very good tree structure has to be written now can you tell me which is a root node here we will start constructing the tree HTML HTML exactly so we will start this HTML now how many children it will have only one correct body so I will take up this so I'm constructing Dom here and the only children for HTM or only child for HTML is body now how many children for body tag three three exactly two paragraph one table exactly exactly so I will do that three children two paragraphs and uh one this thing e e spe hello hello is it yeah is it audible now yes a yeah sorry there was again some Network issue I see uh I think I have to share the screen you are presenting is it visible this tree what I'm drawing yes sir okay okay so I was talking there are three childrens and two paragraphs and one more is table okay now for the first paragraph any more children for the first paragraph no sir no so just there's a text called as first paragraph then there's a text for this for the table I think one child is there PR correct so table has TR and uh this TR has TD one more like this okay so this completes the Dom this is called Dom actually right ultimately jQuery operates on the Dom itself it will try to access the node it will try to get their children see if it is a tree lot of things we can access you can access the children you can access the parent you can access the siblings you can follow the root path many other things are possible that is being done with the Dom programming that is done the jQuery or Java JavaScript sorry fine next we'll proceed further this is the things and there are three types of Dom uh for all document types we have core Dom if you're writing a Dom for XML it is called as XML Dom if you're writing the Doom which I wrote right now for the HTML it is HTML D okay now we will go to a language called as jQuery which is actually us it for it's a JavaScript library and it helps us to manipulate the Dom access the Dom and also it supports ajs that is the reason we use jQuery it is a lightweight module it is very fast okay raw JavaScript will be very slow so they use a library called as jQuery and as the their what we can say quote itself indicates write less do more you have to write lesser code and it will do a lot of things okay I have three sample programs also I will discuss there what is that more and other things we are doing and things like HTML document traval man uh even animation is there event handling is there document uh traversal can be done document manipulation can be done and even handling can be done animations can be done and even ultimately Ajax can be done with the library called as jQuery it is a library built on the top of JavaScript use the library and your programming becomes lesser and you can do all these things uh any particular element you want to change means Dom manipulation any particular element you want to access means do Dom traversal and uh any animations you want to do means it is possible okay so many things are possible somebody clicks a button you can catch it somebody types something you can catch it somebody selects something you can catch it somebody just moves the mouse you can catch it all these are called as event handling any type of event handling can be caught by jQuery and we can provide appropriate actions suppose you trying to develop a Google search itself so first thing that you should do is when somebody types something you should catch it that is J then you have to send it to the server you have to use ax you have to get a response and the response should be displayed again which is Dom you have to display the response on the same page which is Dom okay all these things J is used there are two ways you can use it either one internet URL is there you can include in every page whichever HTML page you want to use jQuery there you can use that URL or the other way if you don't want to use the URL because in that case the students will be requiring internet again to run their programs they would require internet you can use a local one also I have already downloaded it we can use it I'll just show it just a simple JS file it is jav F not this sorry see there is one file called jquery.min.js okay okay uh you can use this file I will share it in the WhatsApp also this we can use in our programs say for example where I have to save this is I was working in a folder called fdp correct so go to e Drive fdp in that go to the app ap3 only will use again in that uh I think static is not there just create a folder called static and inside static you have to put it see any CSS or any JavaScript if you want to do you have to put that file inside static folder so that jQuery file which is required because as a library we require that file we require that package we are putting it inside static folder you don't want this you can directly write the internet URL actually URL is there show that URL also this is the URL can use this URL and you can do it so next topic would be jQuery selectors I think rather than showing this I will directly go to some sample programs which help you to understand all these things you can come back and see that later okay so I think before break we'll do one two programs and then move on to the break we'll develop very simple uh arithmetic expression evaluation like a plus b a minus B simple expression not complicated like a plus b into C by D like that only two one operator two oponents simple expression user will type the expression in the text box and he will press submit the answer should come in the same page that is the problem I'm trying to solve okay so evaluate a simple arithmetic expression using jQuery the concept is simple user we have to develop a HTML page in which you have to provide a text box on submit button user will type the expression that expression after submitting we have to catch and we have to produce the result uh see the mechanism that is being adopted open the visual studio again open the folder which we were working open folder uh what is that folder fdp this is the folder now where will be the HTML page HTML page will be inside the folder templates so let us create a template expression. HTML where you start typing your HTML page required HTML page expression a textb box has to be given what is the tag for text box input type equals text and if this text box has to be accessed by jQuery you have to give ID that is very important not name if the text box has to be accessed in the jQuery it has to be given as ID for any element you want to access in jQuery provide ID to that element that is the basic thing you should know okay any HTML element if you want to access it in the jQuery provide the ID to that element here expression is a text box input type equals text what is the ID T1 okay then give a line break then let us create a button what is that button simple button input uh type equals button again it has to be accessible means ID is equal to like expression button any name you can give you you can give B1 also then value calculate the caption button caption a very simple HTML page I have created where on expression text box some button is there right how to access the HTML from the Django can I directly type uh need to create a view and render this HTML sir uh yes so that is what has to be done so we have to go to views and then we have to go to views Define expression request return render what is that name exp HTM now is this sufficient or one more thing I have to do to get the output which is other file I wrote template I wrote view what else I have to do modify URLs yeah that is one compulsory urls so from ap3 use ex and how to access that yes okay now uh to run the server again python manage.py run server and then to access it second 1271 Ur 8,000 SL exp expression I can give now say for example 5 + 6 calculate nothing is working because still code is not written now the code has to be written using J I want addition ultimately addition should happen if I give five into six multiplication should happen that logic will be written with what is known as jQuery and somewhere here itself I will display the result that is I'll create a placeholder for the result go back to your HTML again exp okay here uh by the side of this I'll write span ID is equal to result so have created one small space here where the result is going to come but result will not come automatically you need the help of jqu so for getting jQuery what are the things we have to do fine we'll start now script include the jQuery in your HTML how to include it already have copied a file I think inside static jQuery mean.js how to access that source is equal to within this percentage static what is the file name jQuery do min.js okay and close the tag you you have to place your jQuery MJS file inside static folder and access that in the HTML using this tag just like you doing with style sheets you are keeping your style sheet inside static and then accessing it using the link tag here there is a script tag and whenever you are using sorry whenever you are using static make sure that write like this load static don't forget this otherwise it is not accessible static keybord will not be recognized okay load static fine JavaScript is included now let us write our JavaScript program which takes jQuery functionalities to start any jQuery or to start with the method dollar dollar actually is a shortcut for jQuery and dollar should work only when the web page is completely loaded the jQuery action should start only after the web page is loaded not before the web page should be properly loaded first to recognize the loading event we have something called dollar of document. ready dollar document ready means the web page is completely loaded now which button click we have to track exp button so ID of the button is exp button any ID is given you have to access using hash just like you doing in stylesheets any element you are accessing using hash any ID elements in jQuery also dollar of hash exp button hash exp means the Su buttons ID is exp button when that is clicked what should happen you should access the value of the text box how to get the value of the text box dollar of t1. Val any textbox value you can access by calling Val method and how to access the text box dollar of hash with ID what is the ID of the text box T1 now remove this you have an expression with you say 5 + 6 is there assume that user will give in a proper format 5 space plus Space six how you will do calculation with this any idea 5 + 6 we are able to access but from that we have to get 11 how to WR the code for that there is one function called expr Sir expr okay so I will try that uh result is equal topr of XPR we'll check that so now again go to the things refresh 5 + 6 let us see it says that expr is not a function any other function it reports an error exp is not a JavaScript function we have to write JavaScript not python any other function like just try otherwise I'll write a code for that file + 6 11 eval is there eval function which helps us to evaluate 5 into six 30 answer is coming here itself I'm not refreshing the page only this portion is changing correct when I click submit button or this calculate button only this portion is changing this is called partial page update this is called partial page upate and who is doing this it is being done by J quy jqu is helping us to do this partial page update it is catching our data it is evaluating and it is producing a result and that result is coming there now just tell me whether any server was involved in this program any web server was required for this program no server was not used actually because everything happened on the client side itself on the client side itself uh everything happened that is 5 + 6 30 in the same page only no server was required to say it is 30 client side itself found out the answer okay so like that we can access so whenever you are using jQuery the first thing you have to do is include the script tag if you are using Django if you using I'm very much emphasizing if you using Django inside the static folder you keep this file which I will send you in WhatsApp I downloaded it jquery.min.js if you don't want to use this internet URL is there you can give that also but that requires your system should have internet to run the things then write a script tag and then start all your actions only after the web page is loaded so all the programs will have this thing in common dollar of document. ready function right and then these things okay I think we'll get better with the next program so next program is again please create a HTML file where you have to create five check boxes and five checkboxes represent five different programming languages and one button will also be there you can select whichever programming language you want that is one thing and then click the button what that button should display how many languages were selected how many check boxes were actually checked or actually selected that it should tell how many checkboxes were selected now to start this first of all before e e sorry lot of disconnectivity okay did you see the question that was given just show it again we need to create five checkboxes and those five check boxes represent five different programming languages and if somebody selects those checkboxes and then clicks button it should display how many languages were selected okay now what I was talking talking was before was uh let us go to the template folder and I have created a file called CB box. HTML how do we create a checkbox in HTML what is a tager for creating checkboxes input type is equal to checkbox Sir yeah correct so input type is equal to checkbox let us give some name to that uh what is this I will write it as a program python I'll just complete this program and then move on to take a break and then discuss aex so first is python second language PHP third Ruby fourth is Julia fth C++ okay five checkboxes have been created and uh put a line break have a button input type equals button ID is equal to B1 Account button CNT B some name value counter count so is it clear so we have created Five checkboxes with the count button fine now how to use jQuery what is the first thing we have to do script tag source is equal to is in static therefore static jQuery do dates close the script next write the script tag again dollar document. ready which represents the page is completely loaded and when somebody has clicked the button what we have to do so we'll start counter as zero and then dollar of input checkbox not like this input typing equals checkbox consider that element input type is equal to checkbox then for each checkbox for each checkbox find out whether it is clicked or not not like this if it is checked somebody have checked the checkbox count Plus+ we Traverse through all the checkboxes we'll Traverse through all the check boxes whichever checkbox is checked count Plus+ that count should come to the answer not other where it should come we'll create a Dom for that that is we'll create a space for that paragraph ID is equal to answer parag so if you want to write something to the paragraph in jQuery what you have to do is dollar of hash answer you should not use value to use HTML HTML of C see something you want to write to the paragraph tag or D tag or span tag you have to use HTML text box if you are accessing me you have to use Val function Val so we are first starting counter as zero going through all checkboxes whichever checkbox was selected we make count Plus+ the total result we are storing it in the answer answer HTML what is answer answer is the paragraph whose ID is answer is paragraph now the box is created and then how to do that go to views Define cbox return return render C box. HTML and in the URLs the path has to be created this is the part now let us try to access this page C box so five languages are there python PHP Ruby Julia C++ I will select a couple of languages PHP and C++ there is some error in count dollar is not defined what is missing there is very important thing what I missed there was before HTML I had to write something then I'm using static what I should write percentage load static load static I missed it okay refresh Now power is not defined so okay NOP and C++ count is 2 I'll select python count becomes three I will select C++ count again becomes two so again I'm not refreshing the page the answer is coming there itself okay and that is what jQuery is helping us right so two programs we have seen one is a simple calculator program the expression evaluation program the other one is the counting checkboxes both were handled in the jQuery okay whenever you're using jQuery you have to include the script tag which gives the path of jQuery and then inside the script you have to write dollar document ready and then whichever button is pressed that event and other actions so any button event can be caught any change event can be caught lot of options are there in jQuery one can go through that that itself is a big topic J quaries here just I have taken button click okay that example uh if you see the code what I have taken was first dollar document ready in all programs it will be there that reprs the page is completely loaded your action will only start after the page is loaded this is compulsory as it is you have to write it next which button CNT button what is CNT button the button which we included whose ID is that if somebody clicks it this will get triggered this code what we will do we'll go through all check boxes find who has checked it make it Plus+ and then display again while displaying if it is a text box you have to use value if it is a par if is a header if it is a d you have to use HTML HTM so normally we'll use HTML Val will be used if you're reading something from text box normally for reading from text box we use well and for placing the result to the paragraph or other things we use htl so I think we'll take a break now and then the last part I will discuss on Ax how to use it the programs which we have done the last two programs which we have done sorry the student uh course enrollment that is one thing and searching the courses the program is already there I'll try to modify the program with Ajax I'll show you without Ajax and with a same two programs searching courses and student enrolement to a course that program already done with without aex I'll show that first same programs I will keep I'll not make much change only in HTML I'll make change so that it becomes a and so that result comes in the same page and we will not have a separate output page or output window will so that we will do for that definitely we need the help of Ajax how we can use Ajax inside jQuery that we will discuss in the next part a small 45 minutes I think to dat do that okay you'll see that we take a break now come back at 11:50 sorry for the disconnec that is going on I try to correct the Internet by the time let just e e e e e e e e e e e e e e e e e e e e e e e welcome back uh we will take up the claster session here I will very much focus on that uh program that is we have a program which was done already with without a we'll see with a how the same program can be done I'll discuss that what is that program other things first I will share the screen again fine so I think uh this is the question which has been already solved uh is it visible develop a registration page for the student enrollment I think in the initial stages we have done this right student enrollment which we have done for the particular course but that was done without Ajax now the program is to be done with Ajax is it clear so that is first program second program is also which was done already a Search application where list of courses will be displayed you have to select a course click submit all the students enrolled to that course should be display again that is already done I will again just rediscussed ax in a single page two pages should not be there the same page the output should come so these two programs we will try to solve now with ax because the program almost remains same except the HTML portion which has to be ritten the view function will not change the python portion is not going to change only the change will be with respect to HTML only HTML code we have to concentrate right so first we will see what was that code which was already written and then we will see what changes to be done okay let us go back to the this thing here if you go to the URLs there was a URL called as regist ation what r r if I give that SL R I was getting this if you remember student names along with the course names and if I click enroll it was getting enrolled so for example sham da if I click enroll student already enrolled in the next page it is coming not in the same page now I have to go back I'll give GT enroll successfully of course this is working but the problem is it is uh uh submitting and it is going to second page now I want to do the same activity same thing in a single page so that that enrolled successfully or already enrolled should come in this page itself here itself that message should come not in the next page the message should come in the same page where you are giving the input in the same page that output should come that we will try with Ajax okay now this code is without Ajax of course to use Ajax I will take the help of J okay now you see this uh path registration the function name is R where is that go to the Views sorry go to the Views uh we have R in that there are two cases post after submitting what should happen before submitting what should happen before submitting we will fetch all the students and courses send it to the HTML file HTML file will take care of displaying it and then asking the user to submit and on submitting these actions happen so after submitting what happens we are not bothered that we will keep it as it is but before submitting Ajax can be introduced Ajax will be introduced before submitting that is in this portion we have to take the changes that is in the HTML we have to make the changes now we will do one thing we will start from the URLs itself uh sorry views itself sorry we'll copy the code as it is complete code R code I will copy clone it and Sr or r AJ I will do that is registration with ax r AJ post submission nothing changes I will keep it as it is no change before submitting this is also same get all the students get all the courses fine but not r. HTM I will take R aj. HTM R aj. HTM is it clear so one view was there I have kept it as it is uh r view was there I renamed to r AJ post submission I will not change anything because that I cannot control with ax but prior submission I can control with ax so in the else part I'm changing my HTML file earlier HTML file was r. HTML now I will create a new file re AJ which will be powered with ax and okay which was not there earlier so that means uh go to the code again where is the r. HTML it is here uh do one thing go to templates create a new file the name of the new file is re aj. HPM whatever code is there in R you simply copy it first because bulk of the code is same copy it as it is to R A same thing uh form method csrf token and then load all the students load all the courses submit button now here you have to make a change don't use the submit button use the normal button first change is input type is equal to button second change don't use name sir we require idid if you want want to access them inside jQuery you have to use ID not the name so I'll use ID also ID is equal to yes name now from server for server name is required while accessing in server this is required while accessing in client ID will be used the HTML data what you sorry text box data what you are entering if the text box has to be accessible in the server we have to use the name we have to give name to that but if the same text box has to be accessible in the jQuery or JavaScript you have to give ID okay so ID for student name same thing ID for course ID for the poost now let us start writing the jQuery as usual you have to first include the tag of the jQuery script source is equal to percentage static jQuery min.js and this okay so this is included and uh don't forget you should also include that what is the tag you want to use static load static then script tag okay dollar off as usual dollar of document. ready now which is the button enroll is the button gives some ID to that ID is equal to e button when somebody clicks the enroll button how to track that dollar of hash e button hash is required hash says that you are accessing something ID and what is the ID e button when that button is clicked click get the data what user has entered what subject you selected what course selected how to get that Val the subject name sorry student name indicates the student that is being selected course name indicates the course being selected how to get the data in jqu dollar C why idal ID C we have got student data and course data then how to use there is a buil-in function called dollar. dollar is a function where you have to give aary as the input the format is like that dollar. Ajax is a function so using Ajax in jQuery how to do it okay why we are to use first thing I'll write why it is used ajx used in jQuery to communicate with web server I want something to be done with the server so some action should happen here I will take the selections what they have done and that should get registered in the back end therefore I have to communicate with the server so for that I'm using Ajax fine to use the Ajax in J query the function name is dollar. Ajax it's a function inside the function you have to give a dictionary and what should be there in the dictionary so many things like what is the method type is it get or post what is the URL web server you are communicating what is the URL what is the data what you're passing and on success what to be done there is a call back success happens what should happen one function will be there if error happens what should be done if success happens what should be done we'll register the call backs okay and they will be called so here with that knowledge dollar. ax and what is there in the dictionary type method is post URL is what is the URL it is not/ enroll we have to call which one go to the view what was that R I think go to the URLs yeah it is re e we will use the same thing not r r AJ correct so this should be r aent that is the URL and then student name course name along with that you have to pass one more data and that is very important for security purpose csrf Middle where we have to pass and what is that value csrf token we to pass the CSR like this that is required for security this has to be passed otherwise it will not be accepted and on success I'm getting the response here you can uh put the response in the some place which is the place un successful whatever the answer should come let us put it here let us put a span tag ID is equal to answer where my response I'm going to store how to do that dollar of Ash answer dot HTML data can give data or it is better you can give response Excel on success you will get a response that response you put it onto the S tag up the same page these are the changes first change is you should make your submit as normal button give ID for everything so student Name ID is there course ID is there and this ID is there and then once somebody clicks the button get the student get the course call the through Ajax contact your web server through ax and pass the student name course name and the csrf and if it is sucessful whatever response server will give you store it in the span tag that ish this is R HTML I think HTML is over views is over yes what else is remaining is URLs so include that AJ and create a path for that not okay so same thing which we have done earlier without Ajax now we should be able to do with Ajax so what I should call now the URL I should not call R I should call r AJ same output but now inside jQuery will be running okay so if I call enroll there is some internal server error sorry one uh Small Change what it is suggesting is go back to the T aj. HTML while giving the path here you should give slash at the end post method requires slash at the end and in the URLs also take care I think it is already one slash was missing or be done csrf token is missing I think I give the token you can't send the data it is saying csrf middle to me check what is the actual name of the yes student already entered suppose I select some other course student enrolled successfully same page all the other things are as it is only this page small update is going earlier it was going to the new page and you have to press back to come come back to the input now input and output in the same page that is done with the courtesy of aex and who is supporting aex the jqu library J JavaScript library through which this concept was possible I think another question was there where you were asked to search something given a list of courses if the course is selected uh it should display the students enroll to the course we will first check back what we have done earlier with without Ajax without Ajax what we have done let us go to the URLs again in that courses search was there okay course search URL was there it was going to a view called as course search and in that view course search what was there again two cases first we were getting all courses and then forward into courses. HTML HTML was displaying it in the dropdown and then asking us to submit and on submission this action was happening and we were getting which students are enrolled and that enrollment information was fored to another page called as selected students. HTML so select students only the details of the student was coming the name and us and even the semester just to show you again what was happening what was the path course underscore search so the list of courses you can select this is one thing and if I click search it was coming but the output was coming in a separate page ideally what I want is I want the output here itself below itself I don't want to go to the new page and then come back I click this output is coming but it is coming in a new P this is what happens with the first generation website which is not having now let us try to bring the same output in this page itself taking the help of Ajax and jQuery ajax and jQuery if they help Jango can produce the out on the same page how it is done or how it will be done we have to do it now take it one by one what is that we have to start is starting point was course search. HTML we will do one thing uh sorry starting point views there is a view called as for search I'll will copy The View as it is as I did earlier with registration I'll do the same uh technique with for searching copy this and uh for searching with Ajax for searching with Ajax I will take post submission code will not change even if you might have observed during registration also post submission actions are same so I will not bother about what happens during post but when HTML is displayed I have to change it to write a new HTML file for search AJ because now in that HTML I have to put jQuery and a concept okay so uh the HTML which I already written was for search I had to create uh new HTML and what is the name for search aj. HTML for search aj. HTML go to course search for search aent right and here I have to make the changes so that Ajax is included and jqu is also used okay changes we shall do one by one uh wherever name is used also use ID without ID you cannot access inside jQuery so for jQuery I will take ID is equal to C name then let it be other things as it is and instead of submit button I take the normal button because submit as a default action I don't want that so I will take a normal button it is very a common practice that submit buttons will not be used normal buttons will be used in the Ajax framework because submit button used the default submit action now start including your a sorry first query how to include jQuery script Source what is the file do you remember percentage static jQuery do JS okay what this close the tag so jQuery is loaded again what is required on the top of the HTML tag remember if I have to use static what I have to include here in a couple of programs we have done that we have included something on the top of HTML typ so what is that you to include percentage load static correct this is compuls then start your JavaScript dollar of document. ready second doar of document Now search button button do click when somebody clicks the search button get the course you has selected and then forward your request to which URL for search is there it is for search AIT go to the Views again what is the new name for search ax okay for searchs and give another slash at the end trading slash course name along with that you have to give one more csrf middleware token which will take the token value buil-in token value what is that csrf underscore Tok esrf token along with whatever data you pass to the server always in Django it is required that you also have to pass CSR so that cross side scripting is avoided security is rendered so whether with Ajax or without ax csrf is compulsory so the data was force along with that csrm now it will go there and you will get a response from the server where you have to display the response so keep some holding for that place for that so I keep a place here what is the place span ID is equal to result and then dollar of hash result and whatever response comes you store there okay so the changes we did with the existing HTML file was wherever name was there we also put ID and uh submit button was changed normal button and then then clicking somebody will select the course and click the button so click get the course here selected by using well and then call the US Aja to communicate with the server how to do that URL for search a type is post pass the data along with passing your normal data you should also pass a middleware token and then whatever result that comes up you store it in the result placeholder your Capital span let us see this one now of course you have to do one more change we have changed the views with a new method called for search ajs corresponding HTML input file has been changed as po search AJ but one more thing that need to be changed is the urls.py what is that in include a course search a course search was already there but now that is powered with ax for search ax and let us create a path for accessing it how to access it's not recognizing so path for search objects for search objects let us give this copy this in our uh browser it already was there now with Ajax it is same HTML it looks like but inside it has Ajax if I click search the result is coming in the same page earlier the result was coming in a new page now the result is coming in the same page any course for that matter geted with no students out there no students enrolled that's all right so one need not visit to the next page this is much faster much responsive and only this portion is updated that is what I was calling partial page update the whole page that table portion span portion is updated the other portions are still remaining same user can still give additional inputs only the output portion is a span and that is changing according to the servers response whichever student students it is rendering us that students are getting filed so the same programs which you do in the first or second experiment will be have to repeat it but with a with a how to get it much responsive and much faster this was the things we did so I think to summarize we have discussed two specific programs after the break one was uh making students register to a course of course earlier it was done but now it was being done with ax so we have only changed the HTML and in that HTML whever name was there we also included the ID attribute and the reason for including ID attribute is that ID will be access only accessible in jQuery jQuery we can only access the ID and to use jQuery we have included the URL I think uh this is the line that includes the URL any HTML you can open we have done two HTML today if I take registration objects this is the line that indicates the inclusion of jqu URL so where I J in folder sta okay and then writing the logic always the common irrespective of the HTML you use is dollar already and then button click event and then this is the adj portion the complete thing is J inside that a portion is this where you are communicating with your web server and Security will never compromise even with a also we will use this is required csrf csrf has to be pass this is about the demonstration of ads this is the last module what have in your syllabus doing this as a ipcc course handling the Ajax jqu Technologies what I discussed today XML xhtml Json all those things Dom everything you have it's a recap of all the Technologies along with that we have the Ajax communication programs okay jQuery in bread to complete bre we can discuss that is a big chapter but I have only Cil to the usage of the jQuery how to use symbol how to use the dollar document ready small examples we have Tak click example also two sample lab programs we have I mean two sample programs we have done to get acquainted with jqu one is the expression evaluation and the other was counting the check boxes just to get into the environment of jqu and other things but later just jQuery is not sufficient we to extend the capability of jQuery with a and that was the other programs and still time is there I'll take another 10 minutes or 15 minutes and another topic which I thought of doing it some time is there and that is cookies does anybody know what is a cookie in the web browsers people store cookies is one very useful Concept in web designing our websites almost yeah please recently accessed data so where it is stor actually cookies on customer device correct that is in the browser okay in the browser itself we store it right today almost all website providers store cookies take Gmail itself Gmail stores lot of cookies and if you clear the cookies again you have to relogin so all your login information uh not password actually the login that is whether he has to Auto login or not all those things will be stored by Gmail and any shopping websites you take e-commerce websites like Amazon or the eBay or snap deal or anything for that matter everybody depend on cookies they want to store the customer information and they want to also identify the customers why Commerce uses it because uh the they want want to identify who is our regular customer who is the visiting customer again and again they want to identify and the powerful means is cookies it helps to build customer profiling it helps to make customer specific marketing and other things okay and to speed up some applications also cookies are required cookies can be used okay I will take a one simple programming example today and that would be like how many times you have visited the web page think that counter will be there in almost all websites how many times you have visited the website for that or how many times the web page is visited not you anybody how many times the page is visited that information we can store in the cookie at least from that machine how many times it is visited we can store in a cookie we can display that you are the first time visitor or you are visited 10 times you visited 20 times that we can display using cookies now what happens if cookie is not used or why cookie was required for the server we will see just a little Theory see our server is stateless mean server does not have any memory it does not remember any of your transaction even though with the same server you're doing millions of transactions still you are a new customer server do not have the capability intentionally they have taken away memory from the server because if server memorizes it may bias people may use that and try to bias the working so for security reasons intentionally server is made stateless it never remembers any state any state it never remembers any state any request response will never be remembered by the server then how to identify the customers how to identify the remaining things they take the help of cookies so cookie is an information that is stored in the browser okay and even you just open my website here lot of cookies are already there you go to the Chrome it is specific to browser means the cookies in the Chrome browser will not be there in the Firefox browser it will not be there in the edge browser they're all browser specific there is nothing like cookie common to browsers cookies are browser specific browsers can completely control the cookies browsers can delete the cookies everything is possible like if I go to this browser and then click on settings there is something called privacy and security here you can see cookies third party cookies and see all data you can see the lot of cookies that has been created in my system each and every time you browse something cookie will be created because almost all the providers service providers they s cookies in your system so that they can recognize you next nobody wants uh to be left out with this CI everybody wants to profile everybody wants to be smart so they use cookies every website almost storing lot of cookies and you can control it say for example there was an option here what is that block third party block third party means nobody can store cookies in you okay if you want to have a very private communication and you want do want nobody to store anything in your system particularly to use this option if you're browsing in some other centers bring Center or somewhere else okay if you block it no cookies will be stored in your system that you can do it's not that server will force it we can control it in the browser also by stopping it okay not only that suppose a cookie is displayed you can just delete it and just delete this then that cookie is lost and when I'm browsing that website it becomes a new website to me it will not recognize who I was what I did earlier how many pages I have read earlier in this website actually all those data was stored in the cookie now it is gone I visited that website I've done something I've read some papers I read some data I spent some half an hour in that website all those things I have done everything was recorded now that I have deleted it assumes that I'm a fresh visitor even though I've already visited it cannot tell it depends on cookies and cookie is a mixed blessing because it can be compromised also therefore there is always a debate whether to use a cookie or not fine so a concept that is there in almost all website development now we will take a very simple thing that is in Jango how to use it that's all because cookie concept is there in almost all Technologies take PHP or Java JavaScript or anything any stack you use everybody should support cook everybody supports cookies now the question would be how to show the cookies here so I'll not go in depth about what are cookies and that is a part of the computer networks or other courses where you study that I'll only show you how to create that very simple example uh what is that how many times you have visited the web page is it your first visit is it your 10th visit I want to try that I want to store in your so let the views directly then uh I will take an example called cookie demo as it is okay now here I have to first check whether my information is there in the cookie or not what does a cookie contain okay before that a cookie contains following you're telling cookie it is not like a biscuit it has got some important information I can show here itself in the this is a cookie to click this so many cookies are there what does it contain it contains location it contains the name it contains the expiry time lot of data is there about a cookie okay so I'll just write it down what does a cookie contain every cookie which is stored in the browser stored in the browser contains following what are the name value the name may be visit value may be one value may be five the name of the cookie is visit in our exam like that they want to store your email so email is the name and the actual email ID what you are giving is value along with that maximum age that is how long the cookie should be there what is the expiry time so your cookie have stored in your system but how long when it should be deleted automatically that is AG if I give age as 10 years 10 years it will be there in the usually it is given in terms of seconds suppose the cookie has to be stored for two days and what is the age two days I have to store how many hours per day 24 how many minutes per hour 60 and how many seconds per minute 60 this much is the value of the maximum AG if you give this much two days cookie will be there in your system that is the maximum ede and many other details are there at least three is sufficient every cookies will have a name value and AG maximum AG now here we have to first check whether cookie was created or not how to check that if value is there in a buil-in object called request. cookies an array is there which contains all the cookies in the system there is one array called as request. cookies it will contain all the cookies created request. cookies so if value is there sorry not value what is a visit if it is there means it is already recorded it's already recorded then what we have to do get the previous value how to get the previous value uh previous visit value is count is equal to request. cookies of visit increment the counter increment the counter maybe it will be in the string format you have to convert it into integer and then add it it will be in string usually stored as a string you have to convert it into integer and then send it in the HTTP response what is that response you have visited so many times along with that you have to update your cookie how to update the cookie request do cookies of visit is equal to count cookies have to be updated because next time the counter should do this for user it will be displayed you visited so many times but as you should also be changing the cookie value for changing the cookie value this is the code now all these things will happen when you have already visited the web page suppose you are visiting for first time what code I have to write I'll write down as it is first and then see which portion I have return since you are visiting for the first time there is no question of previous value delete it and the count starts with one count starts with one update your cookie and then actually uh this is not the way correct way there is a method itself set cookie what is the name of the cookie is it is the value count what is the a you want you can give two d 2 into into 16 into 6 request. set to call set cook by just setting the value it will not work you call the function set C so if that visit is Cookie is already created it will tell the current number of times visited times otherwise one time fter time and even right you you're visiting first time is it first time so we are checking whether it is already there in the cookie if it is there the exact current counter otherwise first time so the name of the thing was cookie demo now to use that access that go to URLs write down the function cookie demo now to call that okay now let us browse and check whether cookie is really getting created and giving us the results this also here I have let me demonstrate cook set cookie is not there setor one second I'll just check the function name correctly creation function put changing function check response not request sorry a small change order also you should not do like this create the response first and in that response you have to send back the cookie to the browser okay so first create the response and on the response you have to set the cook here also this was wrong ookie never exists in the request State it comes in the response state so create your response as usual along with that call the function respon at Cook where the name of the cookie is visit the value current value CNT and expiry time now we did not give an important function what was that return response return return response so you are visiting first time so whether cookie was created I will go to settings and what is that wec is Local Host what is it 127 120 701 three cookies are created here itself application go to application cookie you can see that there is a cookie called visit so where it is present actually uh to first go to what is that developer tools go to developer Tools in that application if it is not visible you have to just click this and select it in that application you can find Cookie is there when cookie is created called a visit the values are there here and many other details related to the cookie is there okay now suppose I refresh this automatically the cookie value is Chang into two ke values change into two like that it keeps changing if you want you can uh edit this and just delete I think delete the cookie then it again starts first time completely controlled by browser okay all the key detail should be available in browser we can access it using developer tools can see the C and it helps us to identify whether you are visiting first time second time third time fourth time and based on that if you are doing some business you can give some uh discount and other things based on the users visit frequency whether is a returning customer or whether he's a first customer or what Gap he took for returning many customer profiling can be done with this cookie with the information that is stored in the cookie so while creating cookie in Django what was that required was we should use a it should be done at the response level this one and how to do that first we have to check whether the cookie was already created if it is already created get the existing counter add one to that and then create a response and then set the cookie or modify the cookie likewise this cookie will stay for two days as indicated 2 into 24 into 60 into 60 means that the lifetime of the cookie is two days stay for two days one additional thing that can Incorporated using cookies so totally uh to summarize today's discussion in a nutshell we take up to finalize today's summary what we have done we discussed the following points today the first one was need of Ajax full form of Ajax as synchronous JavaScript and XML and why it is required what is that without it with it and also we have introduced what is known as Web 2.0 second generation of the web okay after that we have discussed various Ajax is an overlay technology just like our speecher Ajax is a overlay technology it does not depend on one organ it depends on many things which were the many Technologies a depended on one combo was HTML xhtml mainly for presentation okay so first that that is required they have to call aex so first HTML or xhtml is required and for data transfer and data representation we have two options XML and J this is for data representation and transfer technology required for that compact lightweight is J okay third technology which uh we use it was Dom Dom was document object model you need to Traverse the Dom you need to manipulate the Dom you have to go for event anding and other things then we have used a powerful Library uh in that called as JavaScript technology or JavaScript language actually uh library is J it is powerful fast has lot of options it can track all types of events can fire ax it has an integrated support with AXS all those things and jQuery can be used as a standalone Library like which I have downloaded and we have used it in or can use a URL also next third thing is we worked on some sample jQuery programs so I think we worked on two program specifically one was uh expression evaluation using jQuery and uh second one was the there were checkboxes representing programming languages we needed to count how many checkboxes the user has clicked for that we have written a program using J then we discussed on what is known as jQuery with Ajax so for the two lab programs we have discussed one was on the course uh student enrollment to the course and course searching both we have done redone same program we have REM modified HTML was modified so that it is powered with ax and so that the result was coming in the same page therefore they can be called as single page application see both the examples as I demonstrated uh the result was coming the same page both the enrollment of the course as well as searching of the course so we can call them as single page applications so we have developed single page applications and finally as a last hit bit I also introduced how to use cookies with Jango also some powerful capabilities of cookie and how browser can completely manipulate and browser can control the cookies and why it is required because of the statelessness of the server cookies are very much important for all the website developers track the users okay this was what uh today's flow happened so I think that is the end of our journey with this fdp I try to cover many things even though lot of portions are there try to cover as much as possible with all the lab programs being done so I think we'll have a formal feedback by 1:00 I think so ran is there has gone They will announce it so they will give you a feedback uh for now kindly I request all the participants to fill up that and later again come back at 1:00 same link 1:00 uh we can uh you can even stay also you can come at 1:00 we will uh have a formal uh feedback sorry what is it valid and today's as usual the materials recording and uh the presentation everything I will share okay and for assignments you have time till Sunday so Sunday evening up to say for example Sunday 6 p.m. later we will evaluate and uh we have a plan that Monday everything we want to distribute the as usual certificates also as well as who has one and other things all the information so kindly stay in the WhatsApp group don't go out of exit now itself okay please stay till Monday once all the process is over later we can exit from the group we will also come out of the group okay that we can do it okay this much I had any specific doubts you have now before I can wind up uh sir along with that can you provide some uh learning resources yeah sure uh textbooks are there prescribed textbooks are also there I will give that as well as some links also I will give definitely and Sir uh one question I had we have used MySQL connection database connection why you did not prefer sqlite which is by default in Django sqlite does not have powerful relational features like myp does not support all the relational capabilities okay okay but instead you could have used post SQL it is similar to this okay and Sir is there any provision for no SQL databases like mongod also yeah but the thing is we cannot use the same setting for if you want to use no SQL you have to take rest API for that another technology is there called jongo jungo is there which is is for that no SQL kind of things okay sir okay thank you sir thank you thank you sir you said about the cookies yeah server is not going to be having a memory storage for the all these kind of a log records okay and it will be the cookies are dependent upon the certain browsers exactly my simple question is whether the cookie is going to be uh noting that how many number of the times the particular URL or it is only the uh uh some other these things yes exactly your question is correct here it is only noting down from that machine how many times it was visited that's all it is not the global counter visited the particular URL or visited the uh the internet no no particular URL particular URL okay yes and for Global counters we have another thing called sessions we can use session and we can track it okay sir okay okay yeah thank you sir thank you okay thank you one and all and we'll again come back meet again at 1 1 p.m. so now I'll stop this tracking I told is just for our documentation okay we'll meet again I'll just close this meeting now thank you thank you sir oh thank you thank you yeah feedback URL is shared please uh give that also in the WhatsApp it will be shared in case you miss here you can get it in WhatsApp