Ajax Tutorial For Beginners in Php

hello guys welcome to my new course as it's for beginners in this course I will teach you how does forget practically right and using the Alpha edge X with different ways before working on edge X we must know what is H X basically edge X is a set of web development techniques using many web technologies on the client side to get a cyclins web applications now the using edge X you can do that update a web page without reloading the page request data from a server after the page has loaded receive data from a server after the page has loaded send it to a server and a background right now the next thing we need to know how does work it how a Jex working so first of all you need to create an object of XML HTTP request and send a request using HTTP requests into server this server process HTTP request and create a response and send a pic send a data back to the browser and you will use JavaScript to get the data from server without refreshing of web page this is very simple process to working process in Ajax I will teach you practically how does work it I go to my core editor inside that have our folder named edge X in this folder here were two files one is HTML and second one is dot txt and the txt file I have are some text and inside the HTML file have a basic syntax of HTML I will use Ajax to display the this file text on the browser without reloading the page and I will teach you many other properties which used to display the data file without reloading the page ok guys so first of all you must be create a button to generate the event so I call the Virgin and enter the button and assign the ID like data then I call a script tag inside that you need to generate the event I call Jim event how you can do that just need to use document dot get element by ID and pass the data ID then you need to use dot add event listener inside that you need to use parentheses inside the parenthesis you need to pass two parameter the first one is when name second one is function name which we'll use with an Killick or any event for example I want to use on click event so I use single quotation and click then I use comma my fondest is my function name ok I will create function with the name of my father then I call function my font parentheses that day inside that I will just use to document or write to check the they went Viking are not okay said that and then open the browser or if at the page and call it sent the event is working fine okay now the next thing is inside this function I remove the document up get element by ID are so if document off white line first of all you need to create an object of XML HTTP request and assign the object and to variable then you will use variable to use XML HT request properties so I call there and call xhr this is a my variable name call new and call HTTP request parenthesis after creating your object then you will use this variable X HR to use the many properties after creating your object then I call console dot log and call xhr I will show you some properties some properties of xml httprequest set that and then open the browser refer the page and I press f12 this is a console schema I press button and as you can see HTTP request inside that however many properties like on board on unload on Lord and and many other properties and readies dead straightest time out and many other properties available in this video I will use on Lord property okay to display the text on the browser without reloading the page so I go to my code editor and I remove the console dot log and then I call property named xhr dot open tenant is inside that you need to pass the parameter the first one is which method you want to use I call get method and pass URL or page name I want to display that file text so the file text name is demo dot txt as you can see demo dot txt I want to display the text inside that demo dot txt file then the third is you need to use to you okay once you do that then you need to call xhr dot onload equal to function parentheses asleep directly inside there you need to check if your status is ok then display the text otherwise you can use else statement and this put anything else as you like so I will show you some I call 200 200 means okay and 4:04 means not found okay not fun and also for 0t is basically farther than era for error okay so inside this i call if statement and check this okay you can also use xh are throughout the status equal to 200 200 means okay the complete process is okay then I call document dot white and this is this dot response text response text if our complete request system I mean okay then I want to display the text which available in the demo dot txt file said that and then up in the browser if at the page first I click on OK I click it I can't see anything else one more thing we need to do after the xhr record you need to use ex h r dot cent parentheses and refresh it click on that as you can see guys okay and I go to back and click on that and I want to remove the I mean change the file extension ok and click to refresh send data and as you can see the error number is four zero four means not found okay not found right now you can also use else statement for example if this file is not available inside the xhr dot open then I want to display the message while I'll not forum please check your page and then save that and then open the browser if at the page I click on that ok this is a very simple way to use onload property ok I use sand text said that and then open the browser for the page right now I want to use the complete address of this process so I remove that and I call response you are said that and then open the browser for the page you get the complete address of this file localhost ejects demo dot txt okay if this file is not correct then you will see the problem okay but this is very simple there to use on Lord property inside the xmlhttprequest so I use and file name right you can also use the display text on the same page so in situation I will write there dear first I call there and assign the ID for example display okay then I want to display the text on the same page so I command that okay and I call document dot get element by ID parentheses clip brackets sorry prentices single conditions inside that you need to call display ID this ID right then you need to write or sign in a HTML and equal to X H our object now dot response text Terminator science add that and then open the browser I refer the page write the same page without refreshing a patch okay now once you do that then I will teach you on ready state change okay so I create another file first I set this file create another file and paste basically comment and I will teach you just a minute I call already dot HTML and I used basic syntax of HTML and I use already on ready state changes I call almighty state change it and the all ready state change have are basically in the numbers zero have artists not initialized number once our connection established never to request to receive number three processing requests and number four is request finished and response is ready in the on Lord have are basically two hundred right it means okay in the already have a number for to display the response okay how you can use already property so I'd copy the whole court okay the whole code the whole court and paste here and I remove the all load function right the same buttons and div and some function just called xhr open GERD demo dot txt right then I call xhr dot on ready state changes the guilt function parentheses this calibrated and said that you need to call if X H bar dot already okay hl2 4k 4 means request finished and response is ready and you need to call and sine and cos x h r dr. status equal to 200 then come into that if body and i want to display the text and this Sam page so I call inner HTML equal to x HR dot the response text light set that and of the browser and call localhost edge X already collect that nothing happened on this page just a minute okay Freddy's dead okay set that and open the browser for the page as you can see guys write the page text available on this page okay now what is different between all ready state change and the onload first we will discuss all so I've got a code editor and I go to unload file and first I comment that text response yeah and then before function on Lord like all console dot log and path xhr said that and open the browser and if at the page and press f12 and a price sent I clicked on the butt and then you are able to see very state number one right ready state number one I copied that and paste before check the status of xhr object and go to browser effect that and press send and the starting number is number one and directly jumped in the number four right in the heart property birth I go to my own ready state change and I go to Corey deter and I go to file like already and I call console dot log past extra charge this is the already file right copy that and test here two times the first is check deed already state status and before checking the status are ready state number I call console dot log okay go to and also I need to commit that okay basically I want to display the status press f12 and I press send data now the all ready state change have one number one about two number three number four it means those are series wise number in the series wise number have of in the number one have a server connection established number two request received number theory processing request number four is request finished and response is ready this is a difference between the on Lord and already in the onload have of only one number and directly jumped on number four okay in the already have of one two three four it means this will work I mean it will work with step by step number one number two number three number four this is the difference between already stirred change and also series wise okay guys so this is a very simple way to use already step change and there are many other properties available on the XH or object so I will teach you step by step how does like it okay guys so after using basic way to display the text on the browser without inflation a page using JavaScript right and also object of the xmlhttprequest now I will use jQuery to perform the another task that the help of jQuery and also PHP I will use jQuery and PHP so I need to download the boot step and also jQuery I will use bootstrap classes to design the registration form and I will use Ajax with the help of jQuery so we need to download library of jQuery so I'll go to my browser and search would step up in the first link and click to download and Dawa and select your location apart I select see some stocks Ajax inside that cell stored in the folder right-click it and extract the files delete that delete no I do not delete I just believe the files ok and I go to CSS folder I delete the all files without good step dot CSS file white two folders available CSS and J's now I need to download jQuery so I tried Jake URI okay just wipe jQuery and open the first link and click to download jQuery and download the compressed version because the compressed version size is a two-seamer okay I click on that open the all files right all files select all copy and go to code editor and inside the J's folder you need to create a file write the any name is you like I'll write JQ d digest as the court said that right close that now the next thing is go to the CSS folder and inside the CSS for the hewa bootie stepped out CSS file now we have successfully download the CSS file bootstrap CSS file and also JavaScript jQuery father now the next step is you need to create a PHP file so I go to new tab press ctrl as and by the file name index dot PHP and by the basic centers of I still write I write the registration we need to include the CSS file so I need to use link relation the forum name CSS inside that you need to do i do just about CSS okay now we need to include the jQuery dot JS file so I include JQ JS file source SRC jazz strong I'm in backslash jqe dog chess right this is a mod Jake available we need to include another file before entering another file you need to create a file so i will use jquery on the new file so you can write jQuery inside this file but I will use Jake Euler and other files so inside that GS folder I give it a file many urges I just write up my chest dot yes this is the blank GS while I will write jQuery code inside this file so I go to index dot PHP and inside there you need to use script SRC just for inside GS for have two files when JQ r GS and second Vanessa my JSTOR J's file right now we need to design the registration file so all right dear class container on their class roll inside that all you need to design call lg6 margin Archer inside that unit right there class card card title of this div you need to write to the class called body let's check it set that up in the browser right the localhost slugs edge X select input index dot PHP that is the form okay this is a very simple form I'll write the h4 signup form registration form neither sir and let's check it right and I use mmm okay I use Class D G dot that's white text center so that and refer that white parent our bottom three okay okay no need to design I will use a squeegee okay and I change the background-color mmm success granny's best I think [Applause] okay that's good okay I need to use margin-top file [Applause] okay and also I need to use margin to fire inside the cart okay now inside the cord body I will design the farm so I use form I do not assign the action okay and inside that you need to define the input and also you need to define the name for example I use name and I need to assign the ID it is very important but I think I will tell you are basically to use PHP right so I assign the name and I send a class arm control okay up that pass there and I change email and farm control and I need to use margin top bottom - one more thing we need to do is pattern submit and class obedient vici and success serve that open the browser for the page okay but we need to assign the margin important that's okay I will use another attribute like a place for a username copy that and paste it save that and open the browser effect eventually user name and our seniors are not ok guys this is our simple form and this is as complete puja step classes and basic way to design the registration form using bootstrap classes and also HTML now I will use this form to perform the different ask like display the data on the browser using PHP basically I do not assign our use to the Ajax or jQuery so I use simple action which action you want to assign on her for example we want to use PHP on this page you need to write hair sign are like the same filename okay I will use PHP like another page like process dot PHP I will create a process dot PHP page now you need to define the method which method you want to use there are two main methods first one is post second one is get first is a very important for security purpose and get is a not far secure okay so I use simple post this is a complete course available on my youtube channel you can watch complete that then you will understand PHP okay so I use action process dot PHP method post and I have assigned the name then and I will use this name and email to get that each input text field data and I am able to display that data on the browser so guys we need to clear this file processed our PHP copy that and press control and self process dot PHP file inside that you need to write basic syntax of PHP and I will use simple function if is set dollar underscore post I have used post method right then we need to define the name in the pattern and also we define that type diet is button okay and you need to define the name name is very important for getting a data form in protects field okay and then you will use them to display that record on the browser so I cope with that and go to PHP pester if anyone user click on the submit button then who will comment to them if body I mean the code will come into that if body and I use dollar and score username I clear a variable and I will get the record from first input that field the first input X P name is name and second and protected name is email this is the normal pH okay I have used normal PHP okay then I just write the echo statement and call your name is concatenation so on this variable okay ten minutes I'm copy depth passed to you our email is use that you know you are not and I use Co NPR take basically guys I have used simple PHP to get the data from and protect fields and display the record in the browser I do not use edge X J's JavaScript or jQuery far edge X or without refreshing a page I have only used PHP I just tell you how you can use PHP okay said that and open the browser for the page and I use Asif this is Maya okay just a minute okay I copied that sometimes the workroom providing the issue so I really go to Firefox okay guys sometimes I have first many problem on the Google Chrome so I use Firefox and I use same file localhost Ajax index dot PHP then you need to wait a couple of seconds to open that file on the browser okay just a minute let's check the game called process dot PHP okay processed or PHP method post mmm darlin I supposed everything is perfect okay that is okay this is a Firefox okay I use name Asif and you know email I use ml administered on one I teach you at Stockholm submit what happened what happened just a minute guys and my user name form control anything is prepared submit is a tyrannical post submit I use our statement last right I just write problem okay and browser just a minute what is problem now you guys I've been quorum I think something is wrong indexed or PHP okay everything is perfect just a minute I chickened guys it's just a minute okay guys okay I I removed that basically this is the type of the pattern I just write the name okay I just was sign the name of the button and I go to Google Chrome browser and if a dad and I use it's like him fine right the problem is I have assigned the type of the pattern okay so as you can see guys that your name is as if you were email as I said web developer hotmail.com it means I have received data from input text field and I have displayed I've seen the record and the browser with another page like processed or PHP this this time the file name is index dot PHP after submitting the pattern then you will redirect that another page with the name of processed our PHP right this is a very simple way to use PHP okay now I will use jQuery to get the record from first and second input text field without refreshing a page and the display the record and the browser using PHP it means I will use jQuery and PHP to display the record on the browser without refreshing a page okay no guys I will use a jex i mean i will use jQuery to get the record from input text field and I will use PHP to display the report on the browser so I put my index dot PHP file this is the normal form in each pitfall write a comment okay and I copy that and paste copy that and tester I write Ajax with PHP right and I comment that I comment that okay now the edge X with PHP I remove that I don't need that okay this is a simple form I also remove that remove that right I do not use name okay but you need to assign the ID you will get the record with the help of ID okay ID email ID user okay one more thing we need to do is I need to use tie protected and also you need to remove the summit better okay this is a very simple form type text text I use another text email button and you need to assign the ID with the in protect fields one and second okay once you do that then go to my GS dot J's file and first I use dollar sign and use document after that parenthesis you need to write that ready parenthesis function if our document is ready then come into the function body this is a function body inside the function body I will generate the event with on Killick okay first I check it okay I need to assign the ID width button okay BGM I just assigned the name bTW and okay now I go to my desktop J's file and I assign the dollar double quotation I have assigned the ID in the button so you need to write the high sign and butter name the butter name is ptn dot click if anyone user click on the pattern then come into the function like this okay what is problem and dollar button just a minute you just said that just to just a minute the 10 click function function okay if anyone user click on the button then I just check it okay I just check it Y key okay save that and then open the browser refer the page index dot PHP working okay it means jQuery is working fine okay so I will get the first and second and protect feels video and then I will assign the value in the variables and the JavaScript JQ you need to assign the value in the variable you need to write the cleaver well and assign the name for example assigning an user then use drawler parentheses and then double quotation hash sign the first input text field name the first input text field name is NaN and you need to use where parenthesis Terminator Sun I will show you guys just a minute so the user the first input text field name is user then anyone a user enter the value in the first input text field then the value will assign in the user variable so you need to use same process I use email that Val after getting the first and second in protect fields value and I and assign the value in the variables then you will use this variable and this variable to display the data on the browser let's trick I checked a lot your name is name and I use concatenation sign double quotation is based on cat initial sign double quotation you are MLS concatenation signed second variable let's check it said that and I use Asif Edmund a direct online educator your name is and your email is undefined what is the problem now okay you use high sign okay and use the dot well let's check it ID user okay anything is perfect gender name username said that and then open closer refer the page admin why I can't see the first and second and protect fields they turn the browser on the copy that just a minute there's to her but first debt and okay guys your name is our safety uh your email is a minute that online attitudes calm Ida fed that I assigned the as if I just ride the programmer paid main edit online matters.com submit your name is program like your analyzed Waianae TTS dot-com okay I do not use PHP I just use jQuery and HTML to get the record from HTML input text field and this fill out the record on the browser right this is very simple way to use jQuery now I want to use PHP ok I want to use PHP to the splatter of card on the browser without a refreshing the page so first of all you need to remove that right you need to get the first and second input text field record and assign the record in the variable then you need to use method which method you want to use I use dollar dot first identity you need to pass three parameter the first one is which file are part of the file for example I want to use PHP with process dot PHP file on this file okay ah I will send a request with this file so I need to use double quotation and the basically the file name process dot PHP then you need to use comma script rec edits in this clip record you need to pass two variables like first and second so I need to assign the name first I use for example name column then you need to define and assign this variable on it then you will use this name and the PHP to get the record it input text field okay so I use comma and the second one is email column I just write a new email this is a my name and assign this email okay now Turpin is you need to rewrite the function parenthesis is protected inside that you need to pass two parameters first one is no I just write the first parameter okay now the next thing I want to display their card and large first I use other then I will use HTML del to display their code on the same page okay so I call for example data this only this just fast this parameter then you need to go on the process dot PHP file and you don't need to use the this way okay you just get the name and email with the help of unit and you Emma okay and you will use echo statement to display the code okay so I go to my jQuery dot JS file are my JSTOR J's file and I use darkness core I mean if said dollar nesco post I have used post method as you can see first method and even user I mean the post method is active then coming to the slip decade and in this racket I call the I just write the button okay I use the first I check it guys just a minute okay I passed this variable man and I use our asset balance for post the second variable like this um up first right once you do that then remove that okay remove that just to call remove also dead just call columns to post name and underscore post you can also use the variable but I just use the talents compost and the dis name and also this man okay would you email said that and then open the browser and refresh the page and I click on the house if I had met her online attitude Stockholm as you can see guys your name is asif your email is admin edit online attitude stockholm right i referred that and i once again i use your email is sorry your name is programa you are email as admin editor at all and attitudes calm but I have seen the message like this ok I want to display the record in the same input text field I mean I'm I mean in the same page after this form ok I'll write the tail and assign the ID 5 number message ok and I go to my JS JS file inside the alert I use dollar and the hair sign message dot HTML okay and then you need to use the parentheses and pass this data this you could write any name on here and just a pass this a minute when I write serve that and first I assign the name I mean plus text white text sender okay save that and then open the drawers Arafat the page oh I need to remove the text white okay just a text center I'll write the first i refresh the page and I write the name programmer I click on submit okay your name is as if your email is programmer Asif now guys you have seen no page reload okay I okay programmer this is programmer your email as as if for example I remove D there is a process I remove that but just a [Music] okay just a moment I've heard that as you can see guys I do not refer the page I have used only Jake hurry to send the request in the process dot PHP page in the process dot PHP page I just checked the if is said it means the man and you email is active then come into the if body in the if body I have just called because they're meant to display the name input text field data and second I mean you email in protect field data on the browser in the jQuery I just get the data from first and second and protect field with the help of ID as you can see user ID user email right once you do that then you need to use the method dollar underscore post and first you need to assign the path I mean you need to send request I have sent requests with the processed or PHP page then you need to use a script record in this clip record you need to pass the parameters are assigned the name in the variables and assign the for example variable and the name okay then you need to use same name like name you email in the PHP to check the amputee fields and displayed record on the browser okay you can use another method like Ajax to perform the same method like I command first I commend that yeah just another comment that then I just called dollar dot Ajax parentheses inside that you need to you're right slip back yet inside the exclude record you need to pass the parameters for example I write type which type you want to use I use post comma right then which page you want to use and in which page to send request for example I want to send the request in process dot PHP page so I use URL : process for PHP page right comma then you need to pass the parameters like get the value from variables and assign the variable and the variables like I use data mr. : it's Libra get inside that you need to write any name for example I use you nan : and assign this variable the first import x-ray Li will get and assigned the value in the variable like username and I assigned this variable in the you name I will use you name and PHP to get the data from first input text field then I use comma use some process use any name I call UML holler and assign the email variable that's it comma then finally you need to write success if you're all condition is success then call this function and pass the parameter like data you can write any name inside that I'll call dollar dot dollar prentices homer and message-id this idea okay copy that pastor if our all condition is perfect then I want to use display the message in the vegetable patch finally I need to use trial minute asan serve that and open the browser refresh patch and while nan fiefdom Asif programmer at gmail or Chrome summit that the error is user line number five okay the email has been received but I can't see the user name let's see the line number five which patch okay okay one more thing we need to do guys I need to use process dot PHP page inside that we need to use change the username and email also so the username copy you Nam and go to this page and this page serve that and I think everything is perfect it should work fine is programmer at gmail.com hit enter as you can see guys without refreshing a page we have received username and email without refreshing the page right guys now finally I will use same process and store the data in the database without refreshing a patch right so first of all I need to go on local host PHP my admin' I will create a database and also table to store the record in the database just a minute to my skill yeah I go to databases I use um testing this is a my database named g8 I need to create a three-dose and testing Ajax damn right I think Ajax demo our table has created so I need to use another name like user underscore a card use a red card right mmm but first is ID second is user name that is user email the first is type integer second type integer or so watch out voucher type of friends second third and assign the ID number value of the line Argentina okay and finally I need to use okay guys so we have successfully my database and also table we need to use this database like a testing and user underscore a card table to store the record in the database without refreshing the page so first of all I go to this page inside that you need to write the connection okay I'll write my scale i underscore connect first I get a variable called MySQL I connect passed three parameters localhost root third one is blank this is a pass for the fourth one is you database name my database name is testing by ten minute a Sun then the next thing is you need to use cadet and by the Curie I call Curie variable and I use answer and to your travel name is user I think I check it guys just a minute use the recall this is a multiple name okay parentheses and said that you need to pass the columns the first column name is IDs second one is user ID check it guys just a minute username okay username third one is user email okay and use values parentheses single quotation inside that you need to use star get user balance core post you know I get the data from and protect field and assign the data and the user variable okay Emily Post okay sorry you a man right once you do that then you need to use this and this variable to store data caught in the variable in the database so I'll copy that and paste it comma use again Dover Homer copy that and paste it right terminal design then I use a result variable and call my skill iqe pass to Kara me the first one is your connection variable second one is your keyring then I call if our complete process is correct then I call result variable and come into the if body and display the message your record has been said okay at the why you need to pop that and past her please please check you're kidding I do not use an other method I just called the same chickadee we're like Ajax dolana's ejects and the same at that like post-process dot PHP and I use same process like the username I mean you name and assign the username value in that unit I called this unit and also UML to get the record from and protect field and assign the value in de username I'm a user and user email I passed this I mean those values those variable and the Acura variable to destroy the record in the database so let's check it guys first I decide that and I'll use safe for Rama at the road Chima dot-com hit enter your card has been set let's check it as you can see guys my ID number one username is acid using a user M el programa edema let's try again another call if I can I use common Connie Connie by I G mail.com hey turn sure your record has been said let's check it Tommy okay everything is perfect guys so this is a very simple way to use edge X to store the record in the database without refreshing a bit and I have used different way to use edge X using jQuery and mostly jQuery use in the PHP programming language so guys I hope you are understood that everything is jQuery and I hope you will do that everything step by step so thank you very much for watching please subscribe my channel for getting updates have a nice day guys

Channel: OnlineITtuts Tutorials

Views: 11,612

Keywords: Ajax Tutorial For Beginners in Php, ajax tutorial for beginners, ajax in php, ajax in jquery, OnlineITtuts Tutorials

Id: 72ki4oAah8g

Length: 66min 53sec (4013 seconds)

Published: Sun Aug 19 2018