Ajax in JavaScript and JQuery, with PHP | Usman Raoof | Skillshare

Ajax in JavaScript and JQuery, with PHP

Usman Raoof

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 8m)
    • 1. Introduction

    • 2. Ajax intro

    • 3. Setting Up Xampp And Notepad

    • 4. How ajax works

    • 5. Ajax Get Method In JavaScript

    • 6. Ajax Post Method In JavaScript

    • 7. Ajax Get Method In Jquery

    • 8. Ajax Method In Jquery

    • 9. Setting Up Chat Layout

    • 10. Creating database and making connection

    • 11. Saving the chat Message in the database

    • 12. Updating the chat

    • 13. Final words


About This Class

This AJAX course will teach you what AJAX is and how to start using it with PHP to create excellent web applications like a chat system.

AJAX is all around us, just type something in the GOOGLE search bar and you will automatically see words appear in the input, that's the AJAX.

If you really want to make web applications better and interactive for the users then you really need to learn ajax.

we'll create a chat application in the last section of the course.

Ajax makes you work asynchronously, asynchronously means without page reload. Let me share the actual definition of AJAX here:

"The method of exchanging data with a server, and updating parts of a web page - without reloading the entire page"

Now you got the idea about ajax, it's time to jump in the course and learn it.!


1. Introduction: Hello. I'm really honored that you're in roared in my course. My name is small and I'm your instructor in this course. Now let's go to the modules off this course. So you will get the idea of what we'll be doing in this course. In the first video, I will give you the induction about the Ajax. What is Ajax? And when it was invented. And then in the next lecture, we will set up the northern plus plus an example. Prospers is the editor. We write our court in the note Parent and exam is the local host. We will need the local host toe work with Ajax and PHP. The first module is Ajax in Javascript. In this model, I recover everything about the Ajax in Java. Skip and we will get the idea how to work with the objects in Javascript. So I will get and post matter separately in the JAMA Strip. In the second module, I will teach you the Ajax in J Coury. I will cover get method, post method and Ajax method and I will explain everything. Okay, third section is the important section off this course because in this section we will get a military application from start to finish. Okay, we will first set up the layout. Then we will clear the database and connect our application with the database. And then we will save the messages, update the chair and everything. Okay? And we will do this from scratch. OK, so you will get the idea how injects works discharge application and basically the demonstration off what you have learned in the previous videos. Okay, so you will get the idea, and you can make your reversed level chair system. Okay. This is just a literal or military application, Lord, our first level jed application. So we will get started in the next video. Okay. Staying with what drink Haven't seen in the next few. 2. Ajax intro: Hello. First of all, I want to introduce you with Ajax. Ajax is a method off exchanging better or sending better or receiving data from the server without a page refresh. Okay. For example, like you see your facebook that give you an example here? Well, well, like opposed our government or opposed this page does not refresh our real or Okay, this is done. A synchronously isn't Grozny means with our Pedrie fresh are in the background that Merida comment here, I'm gonna write. Uh, yes, right. And I'm gonna breast Andrew and see bid does not refresh. Okay, Like you already know that in JavaScript there's a different method off Ajax Air in J coury . They're different method off Ajax. Okay, So I will explain both in javascript and degree and at the end of scores, we will create a simple chair application using this index technique in decree Indyk, Yuri, we used get and post methods, and there's also, um, 1/3 car objects. We can use post crest or get request in this Ajax method. But if you want to just use get matter, you can use, get, get function. And if you want to use post requires you can just use post post method. Okay? I mean, it's been all these in details. So what is the difference between post request and get request? When you want to retrieve some data from the server, issues get request. But when you want to send that out of the server Usu's post request further. But you want to send the form values that for the sign up process. Okay. You want to send the formalities for the sign up process to the pH before? Okay, Then you will use post matter because we want to send for some letter to the server. Okay, there spare Portsmouth individuals. And if you just want to get some data from the server can use, get okay. You can also use post to get data from server, but mostly get is used to get data from the server. And if you are descended at which there were opposed to quest is Jews. So I hope, you know, understand what is different than post and get and what is rejects. Actually, ejects was introduced in 2005 and now it is widely jute, and almost every reptile use this technology to make their webpages more interactive and more awesome. So that English watching I'm see you in the next year where we've been set up over nipple plus plus an example. We need exam example the local host. We need local host or local server work with Ajax and PHP. Otherwise, without doubts over, we cannot work with a Jackson en PHP. Nothing gets watching. I'm seeing the next view. 3. Setting Up Xampp And Notepad: Hello. In this for you, we will set up northward plus plus an exam in north. Replace Presley will write our court. We were using a replica, as as our editor, and we will use exempt as over host. We need host toe work with injection. PHP. It's no nurse downward. Both of these sort fares, right? No Bad blast, Lis. Oops, That's better, Hung. Okay, we call the first link people download. No. Okay. Don't read wherever you want. And after downloading install it. I have already installed it. No, no, it's cool for exam. Deacon. First link it is. Three wears off fair, you know, only to pay for this software. Some of you guys may already have the software, but for those of you who don't have this software, I just want toe It is sort of demonstrate how to download and install it. If you are on Lennox, you can use this. You can use this link to download, And if you are wrong, who was ex Oh, are making towards you can use this example, Kor. Okay, so now I'm wondering. Knows I'm really can exam for Windows girl Bilic here down 4321 seconds. Okay. Don't noted wherever you want and offer downloading it. Install it whenever you want to install it. I haven't started in in need. Rife no means exam. And now look for Stu docks. Here it is. Extra does when you open issue dogs. There will be a lot of files in there. You you need to remove all these files. We don't need those files. Okay, Remove all of the find. Basically, those files provide the interface to the exam. And we don't need that. You just need to remove all those files and I get it out of websites. So I put all of those actually in this my daughter's forgers to make it clean again. Now, here, I'm gonna create, afford er, and in this folder, even save all over files and Tennessee injects tutorials. Okay, so now, uh, go back. And for example, troll here. Nobody called it. And I have already started first to services, but we'll stop this, okay? When you open this, you sort like this, OK? And then click on first here, start. And then on the second start, you to start both of these services, but second services, we we don't need second service right now. We will create database in the last section were required a shared application. But you can start both of these services. The main stories that we need is a party. No. After starting these services, what you need to do, go to local host. Who's That's Andrew. Okay. When you press enter used to see this The folder that we created is here Ajax tutorials. But there is nothing in this folder right now because we have no refuted any file yet. So in this video, you have learned how we can down range to honor purpose. Pass an exam. And the next section, the first section off this course is Ajax in jealousy. Well, I will explain Ajax injure, strip every single line off court, every teacher what every line off court does. I will explain in detail and you will learn everything above the Ajax. Okay. About the objects in JavaScript. Okay. And in the and in the second section, stagnation is about ejects injury, and I will explain everything that is in the J coury about Ajax. Okay, so fingers of watching this video and make sure that your exam is set up and no weapons place is also set up Two fingers watching it with you in the next for you. 4. How ajax works: hello before writing the gold and want you to understand how rejects Burg's. Okay, then we send Ajax request to the server. It goes through the fourth straits. OK, there are four states that occurred during the process. Then what does not send any request to the server and rejects? We're not Ajax defying or we're not using Ajax than the state will be Zero. That means request is not initiated. We're not sending any quest, but when we descended, Quest does zero ST James 21 And that means server connection established. This means that we're sending the requested server. Okay, then this one state to minister to that means request received on the server. Okay. And then this stared genius to treat. That means the crest is getting processed on the server. And then this third stared genius to fort. And that means request finished responses ready. That means everything is done on the server and responses. Getting ready to get back on the page. Okay. For the problem or on Facebook, I'm gonna like a post when I don't not like on like that means the reddest rated zero banning click like Sarah Connection established, then requests received on the other file their process like and then processing happens. And then fourth request finished and sport is ready and like happened. Okay, so these are the fourth States and what state we need. We need Fourth state. Okay. Fourth state means everything is done. Everything is ready. Okay. Request is finished in response is ready. We need to have fourth State. Okay, Now they're stuck. More status there. Two kinds of status. One is 200 seconds. 40 to 400 means. OK, that means everything is done. No problem found and everything is done without any problem. And second is for the before. They're mean spirited. Not fun for the You are sending request. Do the file process dot PHP and dad file does not exist. Their file does not exist. Them What status we will get. We will get 43 or four status. So what state is do we want? We've born who 100 status and what registered we want. We want understeer, Toby four. Just You need to keep in mind that we wanted to stay to before and we want status to be 200 . Okay. I hope you guys know understand how this works. So now let's right the court, Open your northward. Plus plus and let me quickly make the edge. Human structure. Oops. I'm gonna see if this save it in the local host that the directly we just created in the previous tutorial, it docks id excretory ALS. I'm gonna write in next. Not being be okay. No. Had big nobody. Look at your title. Dag, You can write Joe stripping had attacked Do, but I'm writing this in the body bag. 5. Ajax Get Method In JavaScript: Okay. The first thing that we need to do is create an object. XML http request a similar actually request object is need to be created. So what that object does that object sent The requested server is synchronously a synchronously means in the bag or without Pedrie fresh without pay dealer. So we need that object. Without that object, we cannot run ejects. Okay, so no next year that object I'm gonna see xml. No big deal. You can name it whatever you like. Your ex m mental age, GDP request. Make sure you spell it right. Unrevised will not work if you spend it from make sure I spell it. Exactly what I didn't hear. Ok, everything will do will be through this object. We will be using this object. Okay? We were using this objects function and we're using this through of the process. Okay, so the first thing get of new to do here is open the connection with the server, open the connection of the server. We used open method that is in this object. So I'm gonna write XML extra minute or B j dot open. Now we're gonna open the connection with the server. This open method takes three parameters. First parameter is the method. Like I said in the previous video that there are two kinds of methods get imposed. Explain What is the difference? We didn't get imports. OK, in this video, I will get mattered. And in the next video, we will use both methods whose method is a little bit different than get method. Okay, so next right, get plus parameters. The method second perimeter, this server file were rewarded. Turned the data. Now there's no file. We have Mr Worse, Another scoop, recreate a file. We're gonna create a PS before because we will processing this through the PHP. So I'm gonna write little bit. Be it be and we will just go. Hello? Er okay, let's see if this I'm gonna save it here and I'm gonna see process door if you can name it . Whatever you like. Okay, so this is our several file so less provided you really that it's process don t be the two parameters and also tasted parameters. And third parameter is is a bullion Either it is true or false. So if you want the request to be a single owners that in background. That is the ace in groaners request. If you want that, we just put through okay. If you don't want it to be asynchronous if you don't want to be in the background If you want to pay to reload, then you can put forth. But we don't want that. Okay, Okay. Now, next thing is we need to check the state off the system running project the state. What is this the process State. Okay. Like like explained in the start of the video data. Five kinds of state first is this second is this and all through at all of these are the stairs, so we will check what it disturbs. Okay, what state we want. We want there to be four. Okay, Now we need right. Except metal will be dear dot Earn ready it. Jim is going to let me write this. That I will explain what it is. A little dinner. Okay. What this means this means whenever the steered changes run this function what sturgeons mean? I explained it a lot of times. Starting is mean When the zero sturgeon is 21 and dust and then And when one student to event this tree and when distant for whenever the the stairs change run dysfunction whenever the street changes, Run this function. Okay, What we want to do in dysfunction, we just want this day to be four. So right, if condition if the state is equal forward and status is equal to 200 then then we will do what I wouldn't want to do. OK, so just we want to check the status four. And status is 200 Like I said earlier. Okay. Oops. What is this little movie? Okay. No, let's right. If thermal, we'll always use this object. Okay, this subject dot Ready? I stayed equally calls four and note realistic for these data's not stairs Equally quotes 200 were on the street is to be 200. That means everything is done. Okay, okay. Everything is done without any problem. Then why didn't want you? I'm just let me clear off if we will, uh, we wouldn't save that response. Will save response. Checked this productive, or you can also use alert alert this prospect loners. Peter, do you? And I'm gonna give it an I d. We're gonna see these birds. Okay? well targeted idea And we will see if this points text in this response. Dave. Okay, let me explain this again. This means everything is done. We're saying that if everything is done responses and from the server and sport is grieved and everything is OK, then what to do? Just save the text that we're getting from server indistinct. Okay, so now let's see if this industry going around that woman not get Ellemann by I really were targeting that I d Miss o. T. And that is the sports. Okay, Don't you know it's humanly we used in our html who write something in this. Okay, so what? We're gonna right? A great response text that we will get from the server and we will and we get their response tax to using the spores. Next, attribute off the XML object. Similar. No object that we created this This right here, ok dot It's birth next. Okay, this is this most text that we're getting from this server case. The server is this Find and dispose text is Hello world. Okay. Now, the last thing we need to do here is send digressed to the server. Okay? We just open the connection and we just Jack, if directs years are change is not the last thing is actually sending question server. Okay, that is done by using this scent method off this XML objects we were right. Maximal OBY gyn dot Sir. Okay. Now, for example, in post method, when we certain values to the server like I said we use posed for sending the values police server, we will send We'll right, all those values here in these fantasies. Okay, Now you're using the get methods were not sending anywhere is because get matter is not used to send very few server. Okay, so now open your girl, go to your local hose, and then there should be hell over on the page. Okay, Celestic see hell over. We're getting this hell over from this process dot PHP. Okay. Now, for example, you've warned the crest to be done when we click on a button, you can do that. That is very simple. What? You need to do it. Just put this all score in a function and we will run that function when user, at least on the Britain first, Let's get a bottom. Let me put some space. I noticed you don't pretend I'm gonna see and good I but and then I'm gonna say on Lake because we want that vengeance that leaks on this button. We want fire off a function. We will put this in a function. And it was I'm gonna write. Ah, send ejects. Okay, so let's give value to this, but I'm gonna say send Ajax request. Okay, No less straight dysfunction. I'm gonna be this. So it should be the same here, this right function. 6. Ajax Post Method In JavaScript: Hello. No, to use post method, we just need to add two more things to discord and everything will be the same. Just need to add two more things. First is the request header. And second is the values that we want to send to the server. And we will write those values. Bring these two Prentice's. Okay. First we need to serve their cultures. That's question the matter to post, you know, we're using the first letter. No. Said the request headers after the open method. What you just typed xml o b g dot said request headroom, and it takes two parameters. Let me ride the parameters, and then I will explain what this does. Okay, first is gone. 10 die. And second is what content is and that is application forward slash Ex liberal. You full well, you are an going Okay, So what set Request header does? Actually, it is saying that we're sending some debtor to the server whenever data is transferred from one computer to another computer from client to December or from server to decline there always headers that directly directly know that we're sending the data. Okay, So the same things here we need to settle because header and request header dance that we're sending some sort off data to this server. So what type of data we're sending? What is the content? Five or more times that of worsening listening. You are encoded data. You are encoded. Data means we're sending the values in the neural. I hope, you know, understand what request Header does. So let's right the urine coded values here. And then we read the court received those values on this PHP page. Okay, so now I'm gonna send some values. I'm gonna turn my name. You concerned? Any value, your world in asylum process, you will send all the values first name, last name, password, email, image, name and everything. Okay, in the sign up process. But we're not making any sign of processing the agents here. I'm just sending some example values to just give you an example or just going already how this works. I'm turning name, and I'm sending my email. I'm just writing our dummy email where gmail dot com and just to various For now, we use end to separate values again. We're sending this value and we're sending this value. Okay? these two values separately are sending to this page. OK, so now let's receive these values on this PHP pitch. I'm gonna move this now, As you know, we use post super global array for post method. Okay, because we're using the post Mata Nui. Were you supposed to Global array in the PHP? If you guys are familiar with the BHP, and you know what it is, But if you don't just follow what I'm gonna write in here, moderate echo. God, we will echo those values in the beach in the index dot PHP ages. I'm gonna write, uh, my name, and then I'm gonna couldn't get near the name that we're getting from that page. We used dark, dark notation getting here. Okay? Nbsp name. Make sure it is. This is the same in here. Okay, Otherwise, it will not receive. And second is email again and number, Lissy and my and and now I'm gonna go get near to the email in the post super global variable even. Okay, so no less desk if this is working or not. So now, when? Every bleak in here. So they just request I should see my name and email. I'm gonna take care this and there's awesome. It says my name's Messman. And my email is a busy jimmy dot com that we're just sending on this page. Okay, so let me revise it. So, you guys, for you understand how this is working. First thing we need to do is open the connection. Both forget metal and post method. Okay. Now, for post method, you also need to provide quest headers. Okay, And question me directly settled question whenever we want to send that every server. But if you're using, get method in get matter, we do not send it out to the server. You can You don't need to do set, request header because we're only receiving that are firmly so we're get method. Okay, then you need to check. What is the state rejected? What is this stage you need to lose honor this change function. Okay, Own ministry Jane function will run whenever state will be changed. And stairs are from 0 to 4 there. Five states but actress tears are for okay because you lost your state means little knitting is going on. Everything is idle or systems idle. You can say there are four main stairs. Okay. 12344 men stairs. And you can also say five stairs, but zero sometimes doesn't called. Okay, so, Del, if registered physical four and Stericycle 200 that means where everything is done. This bullet is getting back from the server and then send the data. This is we're losing their This is weird when you to send it off first and then we check if everything done. But this is the way we writer, this is the way. Ah, it is invented You need to send after checking for this date. OK, you can say that you're working in loop. It is checking. Stared down into sending the data, then interesting extraordinaire descending. They're not there, so you can see it works. Okay, so I hope you guys know Understand how this works But if you still I still don't know how this is working And if you're getting error, then don't very just the center discussion and every replied to you as soon as possible. You can also check for the server file If this fund exists corner and you just can't check for the status for little for and this year it is 404 You can say that. Oops. Server file. Not phone. Or you can say server is not fun. We're working. Or you can stay. Somebody is respond to you also is not responding. Cry again. You do whatever you want to say to the user. Just need to check if I'm writing these Teoh. So you guys fully understand how everything works? Checked us equally quotes 404 That means fire does not found. Then what commute to do? We just like need toe. I'm gonna go police. I'm gonna baste it here and then I'm gonna see we're not because it doesn't exist. Then disposed text doesn't make sense. It will not be received Calls for the database. We will just right. Oops instead of her not firm. So no Next check. I'm gonna refresh. This server currently exists against District. Several currently exist and everything is going OK, but now I'm going to leave their file. I'm gonna go to my HD Dogs Index editorial. This is the server file. Now I'm gonna delete this and then we will see what? What it will say, OK, just religion. No other fresh No. Let's check what it will see. Groups that were not fun. So hopefully you guys understand how the status works and everything works get posed and all that, so Ah, yes. So thank you for watching. I would see you in the next videos. 7. Ajax Get Method In Jquery: Hello. Now you guys are master in objects in Javascript. And indeed, in this section we're gonna use Ajax inject Curie. But first, we need to download the Jake, Yuri and Lincoln to the space. So we can you, Jake Torrie in our webpage. So I'm gonna open up ground and I'm gonna read jiggery u conn degree first thing that you see, really going down, Lord victory and you condone learn from these links any off this link. But I'm not going down order. I'm gonna directly link it to this to this decree library. A 1,000,000 copies. You can do the same. But if you want to work off line if you want to work with bakery off land without using the Internet, you can download it so you will not need Internet. But I'm not downloading it. I'm just making this simple, and I'm gonna copy this link I'm gonna link through this year. Okay? Typescript sores. I'm gonna give this source, but if you downloaded, you can give the source where you save it. Okay? Okay. Now we have successfully linked the decree library. We never Ah file. Now, let's use jiggery. Okay. There. Three Ajax methods in J coury 1st 1 is get 2nd 1 is posed and third is Ajax. Okay? The name of the matter is Ajax. Okay, get method is used to send get request to the server Bulls metal uses impose met supposed to go to the server and ejects is used. We can use post or get requests in the rejects any of the request move or Ajax is a totally different methods. Okay, We can use any off the get or post in the agents method in this Really don't forget matter who you can use get matter to get the response from the server And you can also send the data using get mattered. But like I said, it's not reliable O r. It's not good if you send it out using get requests because get is basically built to receive the data from its ever not to send If you are descended on the server, use post OK, do not just get OK. So now let's use get method use get better, just right dollar dot you get And in the parentheses it takes two parameters. First parameter is the file em our several fire lame that is processed door PH. B. And second peremptory takes the function that will run When? When server gives us responds. Okay, When we get God disposed, dysfunction will execute. Okay. Okay. Now dysfunction takes true parameters. OK, first parameter is the debtor there. They're contained. Dispose that we get from the server. And second parameter its success. Success parameter tells us that if the request is successfully executed or processes successfully finished or not, first is data and second is success. Okay? Success tells us if the process executed successfully alone. It's depressed and successfully or not. Okay, we don't need this actually access variable, but as it takes to parameter, you need to write this. But if you only read one planter will also vote that way. Okay, So, uh, the president BHP I'm gonna act cool. Well, it's clear. Ah, hello. These is it is birth from the there. Okay. And here we're gonna target this, and we're gonna save the text in this Dave again. All we need to do is just put dollar inject. We would are good elements using this donor function. Okay. His birds. Oops. Make sure you spell that right. And when it's a dog text. You can also use HTML function if you if you like. But I'm gonna use text and data that I couldn't be in the response that we will get from it server and explain it. Is this ok? Everything is done. Get Method is complete. This is the get metal. Okay. Ah, it's good Local host and open up over website destroyers. I'm gonna clicks and just rest and see what happens. It is Hello this response from the server So get a method working great. In the next year we will talk about post maternity will send some values to the server It is the second perimeter. If you want to send the various been server, it is the second parameter here Here we send the values believe server again It is the second parameter. We will do that in the next video when we will use both methods. Okay. The dangers of watching of issue in the next video 9. Ajax Method In Jquery: Hello. In this video, we're talking about a very important injects function injury. The name of the function is Ajax. Do you dysfunction this right dollar dark injects right parentheses and inside princes do curly braces and again for seven calling. But in these in these Duke of the braces right over inject school. OK, so the first parameter that it takes are the first attribute that you need to write is the general You're eloquent means the address off our server file. Okay, that this process would be if you're in the right process. BHP, The second attributes that we need to write is OK, make sure you write the comma here nor descending call. Okay, The second perimeter takes his def type. I basically is the method that you that we want full the monetary reward visuals in the eject that they're true unfermented. And if you already know gettin post, I'm gonna use post Get get Matter is very easy and get matter. You don't eat roots. Send the data to a server. You can send the data using get, but that's not you Can. I already told me that's not reliable or good or efficient. So I'm gonna use post and I'm gonna send some data today. Serve while they're prompter, is the data that we want to send to the server. Okay, so I'm gonna send my name and email and and email equal Do ABC at Yuning Not okay, but these do believes that ever descend to the server The worst peremptory is the success in success. We write a fortune and their function. Excuse when with guard this most from the server inside dependencies you need right available which contains the response from the server. I'm gonna write response, but you can write anything you want. This is just a very bad name. We'll get this months in this variable. Ok, after getting response, I want to print their response in this response. They've already to do it destroyed with this death. You wanted to know how to do it could lose the next. There is Bones. Okay. And the President Ph B. Everything is same. Like in the biggest view by the post matter really got the name and email area. We're gonna put that out. OK, so let's check if it works or not. Um a refreshing. I'm, like, extended its request and you see it is working Awesome. But it's working. OK, Ok, so now you guys know how to work with the ejects using get post and agents mattered. And you guys know how to work with the ejects in Roger was killed or in your JavaScript that was in the first section. Okay, for number You want to use the get method and you want to center values using get matter That is very easy. You concerned the values but values it is okay, it is good and it is best practice if you certainly using the post. Okay. If you want to send using get you just need Genji's get and hair You just did to James Super global get look up Be based here the girls So let's refreshes and Jake how it is fish See, it is the same but it is not. You can see it's not a fission And I heard that it is hackable and hackers can have you had this kind of method This get method can be hacked, okay? And this is not efficient. It is good if you've posed for sending the dirt of the server. Okay, so the tangles of watching this video. And this Ajax method is very important. And this method is widely used and get and post method that I taught you in the previous two videos are not. My real issues get this Subject matter is widely used, and you can use any get or post Mattern in it. Okay. Was knowing guys watching you in the next video In the next section, we will cleared the A mini chair. You can say a miniature application where users will be able tow send the message received the message. Okay, we will use this thesis. Ajax matter the same injects method in that chair. So tangos watching habits you in the next for you. 10. Setting Up Chat Layout: Hello. In this section of tutorials, we're going to create a military application in this video, we're gonna be a delay out, or we're gonna setting up the layers off over replication. So I'm gonna move this response, Dave on. Let's move this to okay, um, gave you would only offer rapper and inside raper inside wrapper next area and ah de Vere. All the messages will appear and a scent butter and that Britain will be used to send messages to the other user. Okay, I'm gonna get a day, but I'm gonna give it an idea off messages were all the yard will appear. OK, Okay. So, uh, you can clear a text video or you can clear just Ah, yes. Turn input field where users will enter the chat. It depends on you. It's up to you what we want to do. Uh, and we'll get only input in a book I'm gonna go to and a chair. Okay. And project is okay. On and decks No, let's get a but die. But then we'll give you send on also give it an I d. But I write i d in here. Send read again, again and Ah, it Give it on the Candler on. I'm gonna say we're gonna use the same function here. Certain a ejects. Okay, We don't need Desailly on this because we're not adding in And you went listeners. They're stable, Donated directly using on clicking right hander Right here. Okay, so everything sort of we just need to give it a little bit off style. I want to refresh this. Okay? It is a look. Cool. Somebody our style, uh, before the head. Or you can write anywhere you want the gun, right? Who had bagged number directed in the body tank. Okay, you can also write this in external Stein, shoot. Okay, so first fall, I'm gonna start Good the rapper and I'm going to give a convict off. Ah, her pick falls on. I'm gonna give with the marginal little pig, But also, it will be in the center. Oops. It will be in the center again. Let me give it the minimum height, minimum height, them. Right. So it has some must have some minimum height, so I don't want to disappear. Okay. 500 pixels and I run a big grown big group cooler. Be white because I'm gonna change the color of body. So loneliest pricing starts to body. Ah, body for body. You have some marginal and bedding. I'm gonna make murder and spreading zero. And I'm gonna gonna give it a banking on good lor on a dark background color. Okay, so let me refresh and check. Okay, Good. Okay. No place in stars driver messages gives. Okay, I'm gonna give it a picked off, uh, full of peace falls over rapper apposite to 700. I wanted to have it off 600 larger pixels until one larger. I want to have some margin from top promoted to collide with the great with the top off the wrapper. So, uh, 50 will be nice. Okay? And let's give it a Badru off. Uh, one big soul. Go learn a light border and nothing you would at a minimum height, even height off, uh, lunatics, tools that check house going her schooling? Yeah, looking good. But the problem is more Jim is not working correctly, and Magic Worsley issue in the margin margin margin is actually we should give the padding to the rapper. Turned off instead of margin to the messages. Dave. So Let's do it. Parenting. Get pixels. Okay. Okay. Now it's good. Our messages will appear in this box right here. Okay, so no other supply some style. Do this of Ah, input field and send button. I'm gonna wrap both of these. You know, Dave going to do with an I d. Of, uh, input rep? Er, my bad Cree is lower. Okay, Input Ripper. Leslie, Would this give it some style to input? Rapper? Okay, You want It's weird to leave the B 600 pixels like over messages. Dave and I wanted to be in the center, just like our It's like over methodist pixels. It's not cold. Okay, so there s check it is in the center. Now. The leave is here. Okay. Never seen the central. So now it has to give some over in book and place them started your burden. The idea of our input is enter chet. Okay, so I'm gonna don't get it in here. The writ off the Dave outside the these inputs that input rapper have 600 pistols. Wait. I want over input field to have it off. Five 100 pixels. 100 pixels off the bottle. Okay, one hospitalized thing. That is too much. What about 70? 70 pixels off over. But okay, How about, uh, 24 40 pixels is do much bird earlier. Strict hurts. Looks is doing much, I think. Yeah, Mr. Do you see, Senator, But really before let's give it a fending off groups. Uh, not cool. Hell, about 25 pixels. No, it didn't look good. Toe be identity will work. No, it looks good. No less. A place style over symbol. I moved its I d Ah, I forgot that when you really need to apply this style. So let's give them ready. Uh, celled. Vicky end. Okay, Okay. I'm gonna give it the vert 60. This is really boring work. Adding style is really boring work. No, no, uh, let's make a little bit more. Don't worry to sleep. Those see if fit stays in position. Hopes low 66. Yeah, 66 works, but on, zoom out a little go down, but that's OK. I don't think that's the problem. Actually, the course is not about styling. It's about making you understand how age Excellent. So I'm not spending a lot of work to make this more If you shouldn't. Okay, so let's give it some height. 25 pixels. Good. Just under a bit more. You 30. Yeah, I know. It is cool, huh? You want to play some style on it? Uh, there's a place in style only. Okay. Just maybe for bold me, The full family, through the homer, Like this phone. And it is cool and bursting with big growth. But color toe some dark color, that is 333 Okay, we're seeing gonna do light. That's the code is her Looks not cool. So let's, uh that's unity border. No, it looks a little bit good. Okay, So we will continue this in the next video against the tangles watching. Ever see in the next video? 11. Creating database and making connection: hello in this video will create our gal abyss where we will save hours, Jack. Messages. Okay, let me increase the minimum height off. Other messages, def. It is. It looks too small. Okay, uh, messages, Dave. Minimum height. Let's make it 400. There's a check. Yeah. Now it looks good. We will see. We will. Ah, we will update this deal. Whatever a new message will arrive. OK, so now let's create the database database. Go to look closed forwards left BHP my ad mean good databases and write the names database . Um, your chat. Okay. Here is awarded a beast here. Jet. Okay, I'm gonna get your table. I'm gonna see, uh, messages. Number of columns we need only do Okay, I'm gonna write I d and I'm gonna make it. Are doing cream in every message. Will have an idea. Okay, on the second is the message. Okay. Second is the message. First Desiree in second is the message. But you can get more fears like a name and date when message when user message, someone, someone, and you can also make other feels. But this is just the demonstration off the job application some. I'm just making it very simple. I'm just making too fears idea air message. But you can make it more reverse if you like. Okay, I'm gonna give the dreaded off, uh next gonna save it messages. Okay, so now, uh, next connect our application or our pages with with the database. Okay, good across. Is that BHP and right, My SQL I underscore. Connect. Going to provide it three parameters. First is the horse, which is local host. The second parameter is the user name off the server bitches route. Peremptory is the password. And the password is there's no password on my server. Some keeping this empty. It also take the fourth printer. My SQL. I underscored tactics four parameter. But if you're using only my skull connect, that will take you only see parameters Must must my school. I connected four parameters. The 4th 1 is the name of the database, which is jet. Okay, so I'm saving this. I'm I'm saving this collection in a variable gone because because we will need this variable when we would be saving the data in the database. Okay. So now we have successfully connected over of a processor PHP or our silver foil with our local host and we have successfully created our database. So now, uh, no. We will start writing our ejects and we will We will take the text that will be entered in the next area. Okay. Okay. So now expiry available. Very. We will see if the text that is coming from the input feel OK, Some good. A very, very, very political too Jet. Next is he could do the name off off the name off. Our input field is under jet or the idea of over number feel is entered yet. Make sure you learn this before the ICTY intra jet Northville. Well, function contains the value that is in their checkbook. So no, we will send this jet text to the process that yet be and we will process the text and saved this text in the database. And then we will update the messages. Dave, whenever a new message arrival object messages. David, the new content. Okay, so we will continue in the next video sitting there watching everything in the next few 12. Saving the chat Message in the database: Hello. Now let's send this value or this jet next. Whoever President Be it beforehand. Reject these. Uh okay, So when this button will big league send sen burdened with big league, this function will run. And this data, the data that is in the jet text will be sent to the president. PHP. OK, so now let's write the attribute. The 1st 1 that I have brought you in the previous videos. The 1st 1 is the euro. Okay, you were a farmer. Several file. That is for us to start the GHB. And second is the type. And we're gonna write your post because we're sending the data to serve. Okay, 3rd 1 is the that other. We want work. You listen. And that is the jet. That's okay. I'm gonna write a jet. Is it? Will do. I'm gonna go get near the jet next. You gonna copy this? I'm gonna miss you here. Okay, so our chair variable will have the all jet text. There is a real entering the chat box. Okay, The fourth parameter is the success, that response that actually we will get from the server, and that is we're gonna run a function. I'm gonna see the storms. We don't actually need this success because we're not gonna see to the user that your message six your messages. We send our their messages, save our blah, blah or anything else. We just want to see if the data in the database and we don't more do it Done something to the user. Okay, We just want to update the messages. Dave, we will use an other agents request, and we will, and that it just request will update the messages do after every two seconds. Okay, that rejects request represent after every two seconds. Okay. And after every two seconds or after every one second, the messages do will be updated. This suggests Greste is only used to save the data in the database. Okay, so I hope your understanding what I'm saying, OK, but if you are not, then delivery. I'm gonna write another day. Just guess and then you will understand what I'm saying. Okay? No. First not saved a Jetta in the data bees. This data that we're getting something for you. Okay, we're sending the chat. OK? Uh, yeah, I'm going right. If he's that dollar underscore pulls yet. That means if we're getting the jet, OK, This right here. Uh, this one. Okay. You're getting the gentle ever gonna do. I'm gonna get a pretty bow and I'm gonna see Jered Message Girl I'm gonna ready my SQL I underscore. Really scared fruit just to make it secure again. Used to make the just to make obscure And I don't want it to be hacked by some other morning Toby reward any malicious scored in the intro field That's where it is used to make the They're obscure. Okay, my skill really escape string the first primaries, the connection that is gone. The second parameter is our jack message. Okay. And that is donor under school posed jet. Ok, okay, So now what we're gonna do, we're gonna save the jet message inside the database or going to do is just make a curie. Okay, But first we will, Jack, if the input field is empty or not. Okay. You can do that in the JavaScript here. Vulnerable if the input fields empty. Nothing is there and recently sold. Stand with your border. Send the data. OK, You can do that in here again, and you're gonna also mood. They're in here. Okay, I'm gonna write if yet message equally because empty. Then do this as the days. But you can do this only in one. You can say in only one control stripped. You're just by writing. If Germany is not equal to everything, then saved in the database. Okay? First you need right, Arcuri. Okay, I'm gonna do this in live online. I'm gonna see my S U I underscore. Curie First parameter is the connection that is gone and think second parameter is the jury and that that is insert. And what is the name off our table? The name of our table is messages. Okay. You need to read the name for a table. That these messages, certain messages. What we want to send we want to send our jack message and the feel of everyone to send is his message. OK, insert into messages message. Okay. And values the value is jack message dollar Jack Jared, Message. Okay, but this in apostrophes are in single commas off single courts, north and commerce. Other insert into messages. The name of one field is the message value. Is this OK? So now let's just this. If it works or not, this should work. Is ingrown asleep without Pedrie fresh? I type here and the next year in. And then it must have been a little bit. So I'm gonna say this is a jet message for lower strict in your service. See, this is a chat message that's working. Awesome. So event Lee menus. Next. Understand? We've want to make this empty Okay? Like Facebook does. OK, and then what we water do we want to update our messages do and short message hair again and believed the message from this important books. So now let's make this functionality first. Go to over next door pH b. And when you're there, click on this button. What? We're gonna do 100 run the agents request, and after running the ages dressed, we're gonna make that feel empty, Okay? Or you can do that in hair before sending the ages. Rick Welts. Okay, so what we're gonna do open Ah Gerrard input That is in Projet gen No. Then Okay, so now it's just this up when a right hello. These in a manure? Yeah. Message phone. See, It becomes empty. So now only thing is remaining is updating the message. Okay, I'm reading the method you, Dave, and that we will do in the next video and the next viewers. The very important video off this job application. The 10 years of watching haven't seen in the next video. 13. Updating the chat: Hello. It's time to update the messages. Okay. And show all the messages in the messages. Death. We will do that by making an other ejects method. Okay. And that Ajax request would be stand after every one second or two. Second or half second. It depends on your It's up to you how much time you want. So now let's make another adjustment. I'm gonna copy this so we will not need toe right this again, and I'm gonna be so I'm gonna baste it right here. Okay? Right above this. No, uh, I'm gonna greet a function. Keep it inside the function. I'm gonna say dead gen We'll run dysfunction, upgrade jet function after every half. Second or one second. I will run after every month. Second. Okay. So I'm gonna send the value off. Jed, just chat update. So when I get up quickly received on the president to get beat up dirty messages do so dispose that. Well, we will be getting would be saved in our messages, Dave. Okay. We want update our messages stiff. So we need target ever messages game. Right. Uh, messages reject its correctly or done messages, but the dog html or you can write next When Gregory split. Okay? Now run dysfunction after every two second, we will use that interval function. That interval function is used. Repeat the court after the time that we provide, it would be two seconds, Three seconds Any time that you provide. Okay, so we're gonna use that function. Said in Cooler, it takes two Prem. Her first is the function and inside dysfunction we're ready. Chord that we want to execute. So I want to make the ejects request off everyone. Second at in one second, there are 1000 milliseconds. Okay, Reaper, White times in milliseconds. In here, I'm going to write a just request. And that is in this aperture that we're already doing this disgrace, that we just need to write dysfunction. Okay. After every one second, this function will be called and this agent request understand? And this rejects request will update Our message is David Electors Chad. Okay, so now let's, uh let's right. The BSP called for this jet update, so I'm gonna see if you said better underscore boost yet That magic it is Jet update. OK, get a bit. Then what we're gonna do? We're gonna fetch the jet and save the jet in the messages. We are absolutely messages you can say. OK, now let's first mega Curie. Okay. I would messages looking like all from messages that's gonna curie connection. And the jury? No, we're gonna fetch the data to fit all the data we need to you divide you. Okay? And I'm gonna see, uh, get that Will do. My I still Fitch, this is my skin. I bet in their schools really here, we need blood. The one agreeable and second we need, Right, my sq. And I understood. Sock, my skill assault means my skin I associative array because you want the better to be in as you see you do every. Okay, so now we want to get the message. Is jack messages? I'm gonna right, Jack messages he called toe. Get that. The name of the variable here get bigger. And the name off the field in the database is a message and rejected his message. You are not Uh yes, it is a message. Okay, now we're successfully getting the data. It's time to go digital. They go. Jack message years. Okay? No, I would want to warn the jet messages do mess up, so I'm gonna concurred. Minute break back or do break tanks. Okay, so now let's check this out. If it's working correctly or not, that will check eyes, everything okay or not in a school. One thing that you need to do here is, uh, whatever you do it, it's not important. But you need to do that. Otherwise the crest would not be sent to the server. Okay, It is important, but sometimes it works without sending the value. Okay, but here, you need to send a venue. Okay? The project is everything is flying here. Everything looks good. It's known it's over. Let's just over application. Refresh this. So I'm gonna say jealousy. Hello of the how are you? Send the object Holds books, See? Hello, Ali. How are you know Elizabeth Bligh? Let's say Ali is on a different computer. Rambler open Firefox. Let's Elise on the Firefox on another computer. Aaron Small is on this computer on girl. Okay. No host. Okay. In this tutorials, okay. At least good at replying. He's gonna see Yeah. Ready. Um, fine. What about you? No. Let's who descend. See messages? Seyval boat side. You can make it more fast by decreasing the time here, but given mind, it will slow down your page. Okay. Your application will become fast, but you're Ph will slow down Western by sending a lot of the request in short time. Okay, that's where it comes. So you can make it 500 if you make it zero or 200 off 100 that would be so. First, even your application will not, Lord. Okay, so, maximum, you need to keep its 500. Okay, so that's your fresh both off these this? No, no, just this again. Okay, so now this man is but a reply. Do let me read the name. So you see who is who? When do birdie hose during those jury's going. Get back there. What is going? See, it is fast. Know what is going to play? See messages. So you gonna both sides. So I hope you guys know. Understand how agents work, boot your ass Kipen degree and how we conclude that their application This is not a romance , Jared. Application. This is just a demonstration. So you guys So you guys understand how it just works? This is basically called The objects pulling again this way are starting. Intervals is called Ajax, pulling it's exporting technique exiting graceful watching. 14. Final words: Hello. So now you are a master in ejects and you know how to work with Ajax in both javascript and jiggery. If you have any problem or if you find any problem anywhere using objects in javascript. Jake, just contact me or under discussion. I replied to your discussion, Espen, as possible. I am not Are irresponsible Instructor who doesn't care for his students. I'm level of them. Okay, I care for the students. And I already replied to my students to just under discussion and will get to you as soon as possible. And I hope you really enjoy discourse. And I'm really thankful that you took this course and and now I'm reading for your feedback . Okay, If you really like this course you can recommend this goes to others and I'm reading for your feedback. If you If you really enjoyed this course, you can leave a five star ratings again. Thank you guys for watching and thank you for taking discourse. And I will see you in my next course. Okay. Thank you.