Dynamic JavaScript Master Class AJAX JSON Simple APIs | Laurence Svekis | Skillshare

Dynamic JavaScript Master Class AJAX JSON Simple APIs

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
43 Lessons (4h 21m)
    • 1. JSONAPI

      2:48
    • 2. 1 Introduction to AJAX and JSON course

      5:10
    • 3. 2 Course Setup Resources

      4:20
    • 4. 3 Introduction to AJAX and JSON

      5:35
    • 5. 5 How JavaScript Objects Work

      7:41
    • 6. 7 Introduction to Object Arrays

      4:42
    • 7. 9 Looping Through Object Array Values

      6:57
    • 8. 11 Solution to Challenge Create Loop

      4:25
    • 9. 13 JSON Parse into JavaScript Objects

      6:07
    • 10. 14 AJAX Connect to file XMLHttpRequest

      6:37
    • 11. 15 Load external File content into JavaScript

      6:15
    • 12. 16 Creating JavaScript Object with from external JSON Data

      5:46
    • 13. 18 AJAX Challenge

      2:36
    • 14. 19 HTTP Request Values explained in detail

      6:15
    • 15. 21 Create PHP server File to receive and callback response data

      10:15
    • 16. 22 Send data via AJAX to Server

      5:59
    • 17. 24 Get Post values output to user

      3:14
    • 18. 25 Setup MySQL database phpmyadmin

      3:37
    • 19. 27 Insert Data into MySQL database from AJAX

      9:32
    • 20. 28 Server data response as JSON

      10:51
    • 21. 30 Simple jQuery file loading

      5:30
    • 22. 32 jQuery Get request retrieve file data

      4:19
    • 23. 33 Get JSON data

      4:04
    • 24. 35 Post Data to Server jQuery AJAX

      11:29
    • 25. 36 Post data using AJAX to MySQL database

      7:37
    • 26. 38 AJAX method in jQuery

      9:51
    • 27. 40 jQuery AJAX options

      4:45
    • 28. 41 Clean up JavaScript Tips Tweaks

      5:13
    • 29. 43 Use PHP to output MySQL data from a database in JSON format

      8:11
    • 30. 45 getJSON to get Database content

      2:52
    • 31. 46 List database contents on webpage

      6:57
    • 32. 47 Code Tweak and options

      3:45
    • 33. 49 Add jQuery Event Listener

      3:17
    • 34. 50 Post AJAX with jQuery on click event

      10:08
    • 35. 51 Setup data for AJAX post

      7:52
    • 36. 53 Update database sync with HTML elements

      4:27
    • 37. 55 Add content to the Database

      7:37
    • 38. 57 Update Code prep for Delete

      5:23
    • 39. 58 Clean up Code use jQuery This

      7:03
    • 40. 59 Create Server Delete query from Database

      2:32
    • 41. 61 Post AJAX to php delete

      3:35
    • 42. 62 Update Styling CSS for project

      9:03
    • 43. 63 Course Summary

      6:56

About This Class

Dynamic JavaScript Master Class AJAX JSON Simple APIs
Learn how to use AJAX to send data to your web server and get response data back to output in your web applciation

Create amazing interactive dynamic applications that can synchronise data between your database and your front end html code.

The content within this course is Unique which you won't find anywhere else. We show you how to build a custom project within this course that connect HTML interactions with Database content.
Prerequisites for this course : Basic Coding knowledge, HTML, JavaScript (DOM) and jQuery. This is a fast paced course around making front end connections to back end code.

The course is focused around creating AJAX calls with JavaScript code. Please note the below topics are covered.

JavaScript Objects
JSON
AJAX GET and POST in JavaScript
AJAX get(), getJSON(), post(), ajax() in jQuery
MySQL and phpmyadmin connections and queries to perform SELECT, DELETE, UPDATE, INSERT
PHP to connect to a database, conditional statements, variables
CSS to create form content styling
JSON and AJAX together provide web developers incredible opportunities to integrate external data seamlessly into web applications.

JSON is and excellent format for data, its human readable and flexible enough to be converted from strings to usable JavaScript objects .

AJAX is the perfect solution for creating connections between data and web user interactions. You can upload your web page with reloading the page, providing a seamless experience for your web visitors. AJAX gives you the ability to request and receive data from servers and external files. All of this is done after your web page loads and the content is already visible to the web users. You can also use AJAX to send data to a server.

Taking data from the front end sending it to the server opens the door to unlimited opportunities to connect that data to databases and a whole lot more.

This course provides a step by step guide for getting to know JSON and AJAX. Combing these together can help you develop better user experiences and more opportunities for data manipulation within your JavaScript code.

Provided within the course

code samples and examples
Resource used within this course so you too can follow along
Source Code and challenge exercises
HD quality video
Professional instructor with over 18 years of industry experience
everything you need is included
Learn the basics of JavaScript objects, how they work within your code. Expand on the object with object arrays and multi-objects arrays. Loop through the objects and parse out JSON data.

Explore how you can use AJAX to retrieve external content, including database content, html web files, and JSON data. Adding AJAX to web applications creates endless possibilities. This course also includes multiple ways to connect from JavaScript methods to jQuery.

See how your can connect PHP code to supercharge your web applications. Insert data into your database, update a database, and delete content from a database all from the front-end via AJAX.

AJAX is in demand, and learning how to utilise AJAX together with JSON and PHP will set you apart. I'm here to help you learn and ready to answer any questions you may have.

Transcripts

1. JSONAPI: Jason and Ajax together provide Web developers incredible opportunities to integrate external data seamlessly into wet application. Jason is an excellent format for data. It's human, readable and flexible enough to be converted from strings to useful JavaScript objects. Ajax is the perfect solution for creating connections between data and Web user interactions. Upload content from your Web page without even reloading your page and providing a seamless user experience for your Web visitors. Ajax gives you the ability to request and receive data from servers and external files. All of this is done after your Web page loads, and the content is already visible to the Web users. You can use Ajax to send data to your server. Taking data from the front end and sending it over to the server opens up the door toe. Unlimited opportunities to connect that data to data bases and a whole lot more. This course provides step by step guide for getting to know Jason and Ajax. Combining these together can help you develop better user experiences and more opportunities for datum. It manipulation within your JavaScript court provided within this course our code samples and examples resources that are used within the course so you two can follow along with source court and the lessons source code is provided as well as we've got several challenges within the course toe. Help you learn better. HD quality video and instructor With over 18 years of industry Web development experience, Everything you need is included. Learn the basics of JavaScript, objects, how they work within your code and expand on the object with object Aries and multiple objects. Arrays loop through the objects. Parcel that Jason Data and utilize it within your JavaScript. Exploring how you, too can use a jocks to retrieve external content, including database content, HTML Web pages and Jason Data. Adding Ajax to Web applications creates endless possibilities. This course also includes multiple ways to connect from JavaScript methods. To Jake, we're see how you, too can create PHP cord to supercharge your Web applications. Insert data into databases. Update. Databases Delete content from a databases, all from the front end. Via a jives. Ajax is in demand and learning how to utilize Ajax together with Jason and PHP will set you apart. I'm here to help you learn and ready to answer any questions you may have. So when you're ready, let's get started creating some amazing applications together 2. 1 Introduction to AJAX and JSON course: welcome to our course on working with Jason and Ajax to create dynamic JavaScript. My name is Lawrence, and I'm gonna be your instructor for this course. I'm so excited to have this opportunity to present this amazing technology to you today. So within this course, we're going to be covering off how to work with Jason Those air javascript objects. And I'm gonna be showing you how to create JavaScript objects, how to work with objects, how to work with object to raise, and then how to add in additional multiple values, multiple objects and object. Teres also how toe loop through those objects and output that content, parse over Jason content into JavaScript and utilize it. Utilize them as objects within your JavaScript code, and then we're going to get to Ajax. So Ajax is an amazing technology that allows us to load content from external files loaded into our javascript and then utilize it within our web application, all without page reloads. And this provides a really seem less opportunity and a seamless integration for your Web users to be able to interact with the whole bunch of content data. And this is a no ideal situation to pull in data from your database and output it within your HTML code, all done seamlessly via Ajax. Now we're gonna build out Ajax and show you how to create some Ajax calls to our PHP codes . This is some back end code that we're going to be able to interact with, and we're also gonna be building out connections into a database. So we're setting up a PHP Myatt Men database, and we're gonna be connecting to it from the phone and code as well. So some of the projects that we're gonna be working on within this course are gonna be pulling in Jason objects, utilizing them within JavaScript, also filling out forms, forum data and posting at via Ajax into our PHP database. So when I go into the database now and if I refresh it, I've got my eun items that I've just added in from my Web form here within my HTML code, I've also got several different ways of doing this connections. So I'm gonna be showing you how to connect it via JavaScript. There's going to be several different technologies that we're going to be looking at in several different ways. How we can introduce Ajax into our Web applications. First of all, we're going to be looking at how we can create Ajax calls with JavaScript. And then we're gonna be introducing Ajax calls with Jay Query in Jake Worry. We're going to be looking at how we can load files and there's a number of different methods available in J query that we can utilize to do our Ajax calls. So we're gonna be looking at all of these different ways, including pulling in Jason data directly as an object within our Jack Java script. We're also gonna be looking at how we can post data to the server using J query Ajax and how we can connect our Ajax Teoh are my secret database and a whole lot more. So it's quite a lot of information that we're gonna be covering off here in the different sections. And we're also gonna be looking at building out a project from scratch, and this project is gonna gives the body. So I've got a simple of it over here, and it's going to give us the ability to sink our database content to our front end and actually interact with it. So see here that once I check someone my content here I can load my content in my database and to see that these values turnout checked. I can also delete out different items here from my database. And when I read Russia, they're going to get the lead it out here, asshole. And also, lastly, I can add in new people new items into my database and this is all done for the front end with no page reload using utilising J, Corey and Ajax together to send this information over to data peace and be able to pick that up and use it within a back end with options. This is the project are going to be building out within the course. And there's a lot of really cool functionality here that will be going over. So I'm really excited to have this opportunity percent this amazing course to you with all of this great content. And remember again that all of the source code is included so you two can work along the course content, creating your own versions of the applications, starting with the source code and interacting with Jason files and using Ajax craze to pull in that data into your JavaScript. So all of this and a whole lot more, let's begin creating some amazing applications with Ajax, Jason J. Query and PHP. 3. 2 Course Setup Resources: in this lesson. I want to go over the different resources that I'm gonna be using throughout the course in order to provide Ajax Jason data being returned from the server as well as database interaction. So right now I've got brackets open. So this is the editor that I'm gonna be using and as well. I've also got a chrome browser open, and I'm gonna be using brackets as my main editor. This is a free open source text editor for Web design and Web development provided by Adobe . And you can get it out brackets dot io And of course, you can also use your own favorite browser or editor s a little, depending on what you're familiar with and what you're comfortable with. So if you do want to try something else out either is always brackets io, which is a free download. Another resource of it could be using within this course. So you notice that I do have local host open here and it is actually going to my main index page. And I'm also opening up at local host ford slash PHP Myatt men, because we will need a database within this course in order to retrieve that data, add data into the database and be able to update that data into the database. So we'll need to be able to set up a database. And what I'm utilizing for this is an application called Zampa, which is available at Apache friends dot org's available for download in Windows Linux OS X . Now, of course, if you already do have a local machine set up, if you're setting up a database in a different format as well, so you can utilize your own applications. But if you are looking for exactly what I'm gonna be using within this course, I am gonna be using example. I do have it running in the background. I've got the Apache that my sequel services up and running. So all you have to do is, once you do, the install you'll have to do is open up the panel hit Start it Start and you're ready. Teoh start interacting with some PHP code. It's always a good idea to just to make sure that it is up and running, so just write a simple PHP echo eso. Echo is used to output content so echo. Welcome to learning Ajax Jason Plus plus plus will actually output this line of code over here, so we don't see that PHP syntax. And if you don't have PHP running, you're actually going to see the PHP syntax there. So this is just a quick way to see and check to see if you got pH be up and running. And, of course, go over to the pH local host PHP Mayan men just to make sure that you do have that database access. Now, I know there's a number of different ways to access databases. My sequel databases. Eso You're free to access it however you want. This is just a sample off what I'm gonna be using within the course in order to illustrate the data coming in and sending data back and forth from the local machine. Also, I'm going to be using my Jason. So my Jason dot com This is a place where we can store Jason files online, access them. It also acts as a validator for Jason Data, so we can put in some Jason data and interact with it. So this is gonna be used to demonstrate interaction with Jason files pulling that information back into our local Web browser and actually interacting with it and seeing that data. So this is what we're going to using my Jason dot com. And this is just simply a storage place for Jason Data on line. So typically, if you do have a Web server, you could just go ahead and use your own Web server and center Jason Data back. And, of course, if you're using your own Web server, you do have the flexibility of out putting that Jason file and not Jason data from your database and making it more dynamic and interactive. So in the next lesson, I'm gonna start introducing you to the topics that we're gonna be covering off within this course, including going over a brief introduction to Jason and then at brief introduction to Ajax and just a no overview of how they work and how we're gonna be implementing them within this project. So that's coming up in the next lesson 4. 3 Introduction to AJAX and JSON: this lesson. I want to introduce you to Jason and give you a quick overview of how we're gonna be using Jason Data via Ajax sending that information over to the server, retrieving that information and then also sending a response back from the server. And these technologies are ideal. They really work well together. And you're going to see a lot of Web applications and websites using these in combination with each other. So Jason essentially is JavaScript object notation. So it's an open standard format that's amore readable format to transmit text and data information instead of using something like XML, which is a little bit harder to read. And initially, if you go over and if you see a comparison of a Jason file in XML file, you're gonna really see the difference. Because down here we do have a sample of a Jason file, and just by looking at it, you can make sense of the data that's contained within it. So you can see that this is a person. This is some information about a person. We've got age address. So it is a really readable, nice output format that we can look at and we can actually understand what's contained within that data. So Jason, files have an extension of J s at J S. O N said short for Jason. And when we look at this data so I can just simply copy this over and we're going to go over to my Jason storage here, just make sure that I got everything. And once we save it, we can see that the actual output of that Jason file is gonna be more compressed. So it's a men ified version. This is the output of it, and it is still rarely readable, not as readable once we once we've broken it down into the separate lines, but it is still very manageable and readable. So if you are looking at that Jason Data, it really just doesn't make sense as you parse through it. And I would put that content into your Web application. So another technology that we're gonna be using within this course is Ajax. And what Ajax does is it allows us to send and retrieve data into our Web applications so into our Web page dynamically. And this basically means that we can send over using javascript to send an Ajax call, and we don't have to do a page reload. So this is a really big, big improvement over page refreshes. When we do a call over to the server, or if we need some dynamic input and dynamic data, then we don't need to reload the page so, typically previously Before. If you're not using a jocks call and you want to get some data from your server, so maybe a PHP server you want to see these outputs. You need to reload the page and pick up that information dynamically and render it out into the HTML of your Web application. So with Ajax, the saves us all the trouble, and we can just do an Ajax call. We've got a sample of one over here where it's sending data over to Ajax. Send a jack stash data dot PHP. So is getting information from their sending that over. It's doing a call over, and it's retrieving that text that it's actually being sent back. So this is this is what Ajax conduce. We're also going to be using the J. Cory version of Ajax, so this is a much more simplified version, so I know that this initially it looks like there's quite a lot of lines of code here and with Jake Worry much like everything with G Query, they really do simplify making Ajax calls. And a lot of Web developers prefer Just if you've got a lot of Ajax calls that you need to make, then they bring in the G query library simply just for the Ajax calls. So it's a really powerful way to get and retrieve data. And as we can see here that this is essentially doing the same thing. Eso are sending data PHP and we've got all of these lines of code simplified in just a few lines of code, with Bakery doing the exact same thing. Another technology that we're gonna be touching on is PHP. So we're gonna be using PHP as our server and code to retrieve that Jason Data because you do in order to make it dynamic and to send information over and have something happened with that information, we do need a server end, and this is where PHP is gonna come in. Because PHP is an ideal way to interact and retrieve that information, do something with information that sent over into our database, update it and send back some response back to that Ajax call. And in the next lesson, we're gonna be creating some JavaScript objects were to start by creating JavaScript objects, showing you how they work also then transforming those into Jason Files and Jason Data. And then we're gonna look at interacting with that data Ajax. And then we're also going to look at PHP and the database interactions, so all of this is coming up in the next sets of lessons. 5. 5 How JavaScript Objects Work: in this lesson, we're gonna introduce you to what a javascript object is and how to create them. So first of all, we need a way to actually output are content into our Web browser so that we can visualize and see that content being output. So from our JavaScript, we need a way to add it into our Web browser visually. So this is where I'm going to create a couple dibs here and these dibs air gonna be acting as essentially just containers for HTML code or HTML outputs from our JavaScript. So we just got one, and I'm gonna create a 2nd 1 there in case we want to add in two different outputs. And now let's open up our script and certain first, we're gonna hook them up with JavaScript so that we can access them as objects or values within our JavaScript. And we're going to do this via the dawn. So that's document get element by i d. And then pick up that that elements name. So that's put one. And this is a nascent neat way that we cannot we can see and we can just hook up our HTML elements with JavaScript and now we can simply do on output one to inner HTML, and then we can equal that to hello world or whatever we want in orderto put that into our Web browser and makeup visual. So now let's go over and create some space over here and create our JavaScript objects. Now there's a number of different ways a number of different data types in JavaScript, toe hold information and one of the ways so that we can hold multiple values is an array. Scenery is different than an object because an object has paired values, whereas an array GIs has a sequence of values, and so we set him up essentially the same way. So I've got my values over here that I'm setting, and we do the same thing for an object so this will actually contain our object information . And then we can utilize and call over to my object and pull back that data utilizing those paired values. So let's take a look at this and see we can actually create a different on object in a number of different ways, so all we need to do to create an object we just need to specify with these curly brackets . And if we've got our data already, so this will initialize that object. And if we've got our data already that's ready to use, then we can actually input it here within our object. And as I did say that they are paired values. So they've got a name separated by a colon for the value. So if I've got an object that has first name and has a value of Mike, then we can put that now and utilize that within our JavaScript. And the really nice thing about objects is that we can hold a whole bunch of information so we can old hold multiple values. Format is the same way as any other data type. So if we had our first name, last name, and then if we need it a numeric value, we can just do without the brackets so we can put in a numeric value, Let's say 30. So now we've got our object, and we can output that information, and I'm gonna quickly use console and show you all of that information that's contained within the object. And this Now it gets output within the browser. So we don't actually see anything change yet. We're going to go over to the console. We see that within the console there, we've got our object and we've got aged, first name and last name. So now, if we want to actually access this information and utilize it within our JavaScript is gonna be really easy to do. So all we need to do is select that object and now, in order to access the first name So this is already contained within an object. And notice that over here within the console, we don't have any of the quotes around it. So that's an interesting part of it, because that just means that this is all contained within the my object. And these names that were using within these paired values are now the way that we can also access that object information. So if I go back out and if I refresh it, we see that we are actually getting that object information. We've got the object information over here as well, and we're out putting it, and we've got access to information that's contained within the object. Now, we also have a second way to output data and If you're familiar with the rays in javascript , then you've probably seen that. So I'm gonna just output that data into that second output div their output element. And we want to output that first name value again. But there's actually another format that we can use and there really is a reason for having different things. Different formats. There are actually use cases for utilizing this one as opposed to this one, because noticed that here we're still quoting around it. So this gives us the ability to actually to do something dynamically. So first of all, let's just refresh it, and we see that we've got that output. So the first name is there the last name. And you can see that even if I change this than refresh And now we've got the last name. So we're out putting it in two different formats. And one of the really neat things is that now we can do this dynamically. So let's say, for instance, I have a variable. I have it called name and maybe have updated it dynamically, somehow or something like that. And I've got a value of name. So now what I can do is, I can concoct innate this together, and I could do something like name because this is holding the value of just the name, the name, name with the upper case there. And now when I combined last and name, then I get the object, the variable name here, the name in the object as last name. So let's try the suit and see how that works it. So when we refresh it, we see it's the exact same thing. And this is where we can start creating some dynamics and something really interesting happening here when we're open that object information. So let's say, for instance, I had one or something like that and had another last name, too. I can increments them dynamically, and I can pull back all of those values. So this is the format that you would use if you were creating these the's value names dynamically. But if you're just using the default value names that you don't have to worry about doing it within this type of format and a much more readable format is just doing the object name , plus the value name and just separating the moat by a period so the next lesson, I'm gonna show you how, if we have more than one set of values here, how we can work with object arrays, so that's coming up in the next lesson. 6. 7 Introduction to Object Arrays: in the previous lesson, we saw how we can create a data object, and we saw that this data object we can call it back into our Web project. So this lesson we're gonna take this one step further and have on a rate of data objects is essentially a J son array of information that we can output in utilize within our JavaScript. So typically, when you've got a list of people, you might have more than one person. So we're going to create a new object here called people, and we're going to create an array and put all of the's objects that we originally had within this array of objects. So I need to also include that quote there. So now I'm set, and I can create multiple store multiple items within this array. I need to create that square bracket there to close that off and all of the contents within here. This is where my array object information is going to be held, and all we need to do is comma separated out. So, for instance, if I have a second person that's available within my object, Cherie and I want to make access to that second person. So I'm gonna given that create another second person, John, and give a name John Jones, and changes a to 40. And there we can close off that object and we need to cover one more one more curly bracket in order to close off that entire set of data. So now we've got a more complex object when I go out, and if I refresh it, we see we've got an object to Ray. We've got people and then within people, we have two separate objects because we have two items within their so age First name, last name, and then we have the second person as well. So right now, we're not able to call it within that same format that we used earlier because we need to specify what object it is and which one that we're looking for. So the two different four months that we can use is weaken do people. And we can also specify people over here as well and specify the last name so we can do it within the same format. But there's one thing that's missing here. And when we look at our array, we noticed that There's two items in the rate, so we're not actually specifying which item we're looking for within the array quite yet. So this is where we need to specify that I could create a variable here for maybe just call it by and we'll give it a value of zero. So within here I can specify that I want to access the array item pie, and then I can also do that down here as well and be more specific with the one that I'm trying to access. So now when I refresh it, we're getting that first person. If I want to get the second person, I can update that variable and get that sex second person's information and similar to what we just did over here. I can add that value of high into here as well, and this way we can return back both of those items so we can have. I can duplicate this out and we can return back the first person and we can return back the second person simply by updating that variable. So let's try that out to gloat to our browser, and we should actually create some additional where I can add these in a swell. Just add the plus sign so that we can add in these values into our output. Go back, you'd hear and refresh it. So there we've got the person's name the 1st 1 and the first name again added in the 2nd 1 in the 2nd 1 So the second item within that object ary And this is how we can begin to build out our Jason data because we can begin to utilize this information in a nice output format that weaken loop through, and we can output all of that information. So the next lesson I'm gonna show you how we can actually loop through this eso we're gonna use the looping functionality instead of setting these variables and these values statically, we're gonna create it dynamically, and we're gonna loop through ah, set of object information, object to ray information, and it put that whole within our display area. So that's coming up in the next lesson. 7. 9 Looping Through Object Array Values: the previous lesson, we saw how we can add additional additional items within our object, Toray. So we've got a second set of first name, last name, age and so on. So we can even go a few steps further here and we can add additional objects here that within our object ary So if we want to add a 2nd 1 here, so under people and maybe we've also got some additional information that we want to hold here. We can do that as well, so we don't always list the list. Um, under people, we can also have places or something like that. So I'm gonna add a 2nd 1 here, so places and this is gonna be another set off of data information here completely separated out from the 1st 1 So I need to just, uh, create so places location, and we can call to this within that same object. So whenever we're calling to that object, we can hold multiple sets of information here. So do location of Toronto and just thinking other ones, maybe latitude, longitude. Not exactly sure what our latitude is. But maybe let's just take a guess there and longitude, so this is latitude longitude off a location and let's just add in a second place as well and we could just short not clean that up a little bit. And maybe we'll just have another city here and we just add in some data there. So now when I go out here, if I refresh it So now I've got to object. Eso I've got to a raise here to a raise within my objects, but I've got to objects within that object as well. So I've got people and not information places in all of this information. And just by accessing not one variable here that my object I can have access to any one of these now. Previously we saw that we can put it as a value of I here, and we saw that there's different ways to output this content. So doing it this way is probably not the most efficient way to do it, especially if we continue to grow out the amount of data that we have here. So this really isn't gonna work well, so we need to come up with a better way to actually loop through all of this information and output it and be able to consume it within our JavaScript. So let's take a look at the code and up, make an update to it. And I'm also not gonna continue to do it within both formats because I think that we get the idea here that there's different ways to output that content. Eso this way is if your value is more dynamic, you can do it within this type of format. But if you've got, like a static name, then then this is probably the most readable and easiest weight I would put that. So what I'm gonna do is I'm just going to remove out all of this stuff here, and we're gonna create a loop looping through and out, putting all of that information. So let's set up a loop for this. So it is to do a simple for loop were used the variable I and said it to start at zero. So any array here is going to start at zero, so we have to belong to different items. They're 0101 So you could potentially also have multiple different items here. So depending on what values you want to look at in which values you want a loop through. You can either loop through the people and the places and then do another loop there through all the different a ray objects contained within people and then all the ones contained within places. Or you could specify that you want to do my object people and loop through all the values that are available there. So maybe let's take that as our example that we're gonna work with. And we need to specify the my object and for this instance, we're going to do people. So we're gonna loop through all the my object people. So these two entries here and we can specify get the length. So by default, we've got that length lest it here within our right hand side here. So we've got the length there too, so we can use that object information to do to get the length That's the value there. And then we just need to increment I. And now we've created our loop. So we're gonna loop through all the available information here within my object people, and we can just simply I would put it into our display area. So we can do something like output one inter html ands. What we can do is we're just going to the plus equals s O that this way we can continue to add in information here, add to what's here, people list. And also, I'm gonna put a line break there so that we have a nice, neat people list that gets listed out there. And now we just need to call back that information. So we are looping through its our value of I is gonna be dynamic, and it's gonna be changing. So let's create that string value here that we want to update our inner HTML with. So maybe we want to start with a line break and then we want a list out and I'd in my object and its people. So we need to specify that same object information that we've got over here, and then now we specify I because this is a dynamic value of ID that's gonna be incremental ing within the loop. And now we can specify the first name, and we can also do something like this. So I'm gonna put a space here and here we can list out the last name. So it's gonna list first name. It's gonna list last name, and it's gonna add that into the output field. So let's try the suit. Now. Take a look at this. Refresh it. So we've got our people list. We've got Mike Jones. John Jones. So all getting listed out there. So the challenge for this lesson is that now we've created a list for the people. Now we need to create a list for the places. So I want you to take a look at the source code, try it out for yourself and see if you can list out the places as a challenge exercise. So do the same thing that we did literally with the people list. But list out the places, maybe in another role or element here, just below 8. 11 Solution to Challenge Create Loop: in the previous lesson, we saw how we can create loops through all the various object information here and looped through object. Teres pulled out all of that information and utilize it as an output within our HTML elements. So we left it out as a challenge at the end of that lesson to do the same thing for the places. So I've created code pen over here at Court Pen I O. And this is essentially where we left off with last lesson. We've got all of those outputs. Everything is set up and ready to go. So let's do the same thing and create a loop through for all the different places. The first thing I want to do, maybe just tidy this up a little bit. So it's more readable and save it so that this is the state that you're coming in and you can work with this, try it out and check it out for yourself. So ideally we could we could do it in two formats here. We could just do it within this loop over here because we only have two places. We have two people and we could do it within the same loop. So this is technically it would work. But what if we added in more people or we added in more places than we wouldn't get all of the data? And we did say We want to get all of the data. So ideally, the best way to do this is actually to create a second loop and this loop Winstead looping through people, it would loop through the places, information that places object here. And we could loop through all the places, stuff here and places stuff here and then just simply update this to be output to. And now we need to specify the location. So let's update this as well. Now it's out putting the locations. We see that over here on the right hand side, and maybe we can do something where we've got our latitude and longitude and update this one as well. And this is again depending on how you want it. I would put this information. It's up to you how you want to form out it and how you want it to make it look as we're putting it out here. But I wanted to update this and put it as latitude here, so update that a lot and lastly, update this too long and there we've got all of our output and this is the best way to do it. Because this way, it gives us actually some additional flexibility in those outputs where we can utilize both sets of information here within both those objects and pull out that information properly in able to view it And even if our information changes. So let's say there's a 2nd 1 over here, and so maybe there's another city and I'm just picking something off the top of my head here to get some additional information. We see that the code doesn't break. It still works. We still get all of that. I would put that we wanted to see within our display area. So that's how you solve that. And you create that object information listing it all out. So the next lesson we're gonna look at this Jason information, actually as a Jason file and bring that into our javascript and utilize that information. So you're gonna find that there's a number of different ways to work with Jason Data. Bring it into your JavaScript. So this is going to be another way to access that data, and we're gonna keep it still within that same format as an object. So it's not gonna be exactly a Jason file. It's still going to be an object within JavaScript. So there is a difference when we are looking at that data because if it's specified as an object within JavaScript, we need to define it as a variable. We have to give it a value here that we can use it. Whereas if we're got a Jason filed and we're pulling it into our JavaScript, the format is going to be different because that's gonna be actually Jason Data file, that we're gonna be pulled pulling and utilizing it. So there is a difference between that, and we're gonna be going over that in the upcoming lesson. 9. 13 JSON Parse into JavaScript Objects: in the previous lesson, we looked at how we can loop through Honore object and get out all of those values through a loop. So I did say that there are different ways that we can pull this information into our website and utilize this information. So one of them is to just loop through and linked to a JavaScript file and pull it in as a JavaScript value. So we can actually copy this, and this is actually properly date formatted within Jason. So you can see that if I go over to something like my Jason And if I say that, then what it does is it actually creates a Jason file and we can actually see this information being output as Jason format. Now, if we want to utilize this, we have a number of different ways. Teoh access it within JavaScript so we can call it in as my object as an object file. But we can also hold all of this information as a string value so we could do that by typically putting quotes around it. So just a single quotes around it and save that. But the problem initially here is that we actually have all of the spacing. And if we've got a JavaScript string, then JavaScript actual doesn't know what to do with all this spacing. So, ideally, if you want to use it as an actual string value and parse it eight, we would have to take the same information and same data and keep it all within one format . So now when I go over to my Web browser and if I refresh it, we can see that we're actually putting in the consul that string value but were not able to read through the length because it's not treated as an object, because now it's a strength. So we do have a built in function within JavaScript in order to parse out a string, and four met it as Jason. So I did say there's a number of different ways to work with Jason and information, So this is one of them. So sometimes when you get your Jason information and if it's passed through a string value , you need to break it apart and recreate it as a separate object. So I'm gonna rename this as one, and I'm gonna create a brand new one, a brand you container here. I called my object, and what I'm gonna do is I'm gonna do Jason and parse through the my object value. So this is again, remember, this is now a string value because it quoted around it, I removed at all of that spacing, and I can loop through all of that information. And I got a console log. I thought my object one so we can see what the difference is. So now when I go back out here and refresh it so we see that coming in as a string value, we get access to all this information and because it is formatted properly and ready to be used as a jace on file, we can parse it through Jason Parse, and we can turn it back into an object. And we can utilize it the same way that we were doing earlier when it was an object array. So we can bring it back into an object to ray transform a string into an object, Torri. And this is a really useful function within javascript because you are going to find that there are some cases where this information gets passed over as a string, and you do need to break it apart, parse it in as a jace on file. So I did say that Well, you know, you could bring in a file, you could create a brand new file. You could do something like this, uh, and we could link out to a brand new file. Soldiers creates script and source, and from here, I'll call it Jason. But this isn't really a Jace on file, so because it's a javascript file, it's a Js file because we're still treating it as just linking out to another external JavaScript file and just create a brand new one pace that data in there. So this is gonna be the same thing. All we're doing is linking over to a JavaScript file giving this as Jason bring back my sidebar here and go back into what we were looking at earlier where we've gotten our index . So now all I've done is linked out source Jason. And when I refresh it, we should still have all of that same information because we're pulling in that Jason information in a JavaScript file and we're parsing through it and we're out putting it. And so on. So this, uh, this way works. But it's actually not ideal because we ultimately wanna have a way to actually pull in this data and have it already formatted as Jason and then be able toe loop it in to our source code here into our JavaScript. So although this way works, there is a better way. And that is using Ajax. So using an Ajax call within your JavaScript pulling in that Jason information and then out putting it and utilizing it within your JavaScript code. So that's ideally what we want to do, and we want to make it seem less we don't want to have any page reloads. We don't want to use our server and code to output all of this Jason information dynamically and then access it via JavaScript. We want to simply be able to use javascript strictly JavaScript in order to call over to wherever our Jason file is sitting. And this makes it very dynamic because we don't necessarily need tohave it. Sitting within our own local machine, we can call out to a Jason file online, and that's what we were looking at earlier when we were looking at that my Jason dot com So we ideally want to be able to call out to this URL and pull in this information. And then what we're gonna look at further is that if we do have control over the Jason output from our server side script, we can really make things dynamic and really make things come toe life using Ajax and passing over Jason Data. So all of this is coming up within the next settle essence. 10. 14 AJAX Connect to file XMLHttpRequest: the previous lessons we looked at Jason Data. We saw that we can utilize Jason Data, and it was a really good format to use to pull out that information in the Jason file and utilize it within our JavaScript. The problem was that we had toe always if want to pull it in from an external source, we could use a javascript source file. We could use GS, but it wasn't really ideal. We have to parse through it and it doesn't really make it very user friendly. And especially for creating content dynamically. We wanna have a really good way of out putting that content in utilizing it. So this is where Ajax comes in and Ajax really is the way to bring that data into your JavaScript code and actually utilize it so you can loop through it. You conform out it, you can do stuff with it and output it within your browser. So let's take a look at Ajax. So the number of different technologies that you can use with Ajax so Ajax doesn't really necessarily need toe only work with javascript or with or or with ah Jason file, you can utilize Ajax in a number of different ways where you can just pull in some simple file information into your website on a whole lot more. So let's take a look at creating a simple Ajax request to an external file and pulled in that information. And Ajax really does provide so much flexibility. And Web developers love Ajax. It gives you the ability were two requests data to receive data and even to send data back to to a Web server to another page on all of this is done in the background without having to reload pages. And this is really, really huge that we don't wanna have to reload pages because of the fact that reloading pages doesn't provide a good user experience. So let's set this up and create some We're Ajax any Jack's call into a Web file. So first thing that we want to do with Ajax is we want to set up a request, and essentially what we're doing is where setting up some kind of request within our source code here to connect to an external file somewhere else were not within that current page. Do something with that information and pull that information back into a JavaScript code where we can process it and we can update page content and do whatever we want to do. So here is where we're gonna set up Ajax. And maybe the first smile that would just call to is this Jason file and pull that back into our our JavaScript within Ajax. So first of what I do is set up a variable. So this is gonna be a container essentially for the http request. So we need to set up a new and this is it's it's ah, built in method within javascript. It was called XML, and I know that we're looking at GE son, but it is called XML because you can actually pull in XML files as well and so on. So the idea here is that actually doesn't matter what type of file you're pulling in. The call is still the same and it's an eight XML request and it's each TTP request, so it allows us to get back essentially a JavaScript object from an external file. So this is opening this up, setting this up now it's ready to go, and this is our main container for this request. So right now, this simple request contains. Now it's an object. So if we refresh it, we see we've got all of this information loaded in from the H XML. Http request. And then this is what we're gonna use. We're going to send responses were checked, the ready state and a whole lot more. So essentially, once you set up that object, you've got access to all of this information. And another thing I usually like to do is I like to set up a girl so that this way, I can keep that separated out and have the file said, I'm calling in Aiken dynamically change them and so on. And I don't have to really do a whole lot within the http request. So the next thing that we need to do with this is we need to set up to open up, and we need to specify what we're doing, the method and then also the URL on and whether we're doing on a sink and you sink call. So we need to specify we're going to specify it as a get request, and we're gonna link to the u R l that we've got above you can also copy and paste this in there as well. But I just find it's a lot neater to do it this way, and we are doing an asynchronous requests, so this is going to be true. And once we've set that up, we're ready to send that information over. And now let's take a look at this. So take a quick look at what we've got in the console here, and once we refresh this, you're going to see that this information is going to change. So now when we've actually connected with the file we see that are ready status for our status is 200. And these are important things to note because this means that we've got a sex successful connection to that response. You, Earl, the information is there. We even see that response text. So this is actually the information that we've got sitting within that file. And this is really interesting because just within making these few lines of code, we can pull back the information contained within that file, and now we can utilize that information within a JavaScript object. So all of this is ready to go, and in the next lesson. We're gonna look at how we can make sure that we've got a connection. That it's the status is okay. It's the ready state eso We do need to make checks for that because you don't want your JavaScript code to break in case the file isn't found and so on. So we do need to create a conditional statement to check if ready status. Their status is okay. And then we can go toe, look to pick up that response information. So I'm gonna show you how to do that in the upcoming lesson. 11. 15 Load external File content into JavaScript: the previous lesson, we saw how we can set up on http request. Pull back that information and just open up a file and check if it's there. So we can do this actually also for an external file if you want to as well. So if I wanted to update this girl And this is why I like to keep these You Earl separate Because now, if I go over to here and if I refresh it, we can see that we're actually getting access to that file information. And we could potentially do something like where we've got our output one inner html and set that too. Because now, look, when we look in our consul here, we've got that content within the object. We could do something like this and let's just take a quick look at this. So we've got a response that's coming back. So now it's just simply refresh that and we'll see what happens here. So now we've got our our response text, but we actually don't see anything getting output there. And this is, uh this is one of the problems here that we don't have anything being output there. So we can refresh it, and we see that it's contained within this object. But we can't access it. And that's because we've gotta look for the ready state change, because remember again that the way the Javascript works is we run through the cold here. But all of this is gonna be happening at a later point here. So maybe we can put it here later on here and see if that pulls in. And we still don't have access to that object information even though it's contained here. We don't have that object information. And looking at how JavaScript is rendering this out, we need to make sure that we've actually loaded the file content before we try to output that response information. So let's take a look at this and see how we can check to see if our ready state changes. And we noticed that we've got a value here on Ready State and it's set to know. But if ready state changes, then if we fire off a function whenever this ready stretch state changes, then we know that we've got our file because before what had happened is that are ready. ST was initially zero. Now are ready status for So there has been a change on the ready state. It just happens really, really quickly. So let's set that up where we've got our HR. So their HR object and we're gonna be listening for on ready state change. And essentially, this is a function that's going to get called whenever the ready state changes. And this is exactly what we want to look for because we know that this ready state changes . And then now we can see if we can output that response. Let's take a look at that. And we see that now because we're actually waiting for that. Ready, state to change. We can output our information and we've got it all posted there. So this is essentially how we can start out putting our Ajax are content to the Ajax and pulling it into our javascript. Now, one of the things that I did mention earlier is that we should ideally listen and make sure that the status is 200 the ready status for because we want to be double check. We want to be super sure that the current ready state, once a change, is that it actually comes up as the file is there. So this is where we add in this. So as you probably know, that this could be used as the current object information. So whenever the ready status changing so it's taken the properties of H. R. And it just translating them into this eso We're gonna listen to this ready state and make sure that you could do upper case that there on, we're gonna look make sure that ready State is equal to four and also just as a second double check. We're going to make sure that this status and we're gonna make sure that this status is equal to 200. And this we're gonna make sure that this is all happening before we try to fire off the contents here and output that content. So even though technically we didn't really do anything different here, this is just, um, or surefire way to get that content through. And because we want output that content as HTML, we could use the response from the HTML side. But if we want to actually output it as text, which we do, we might as well use response text and that will make sure that we're only getting the text content back. Pop over to the page, refresh it. And yes, we don't see anything different, but we've got all of our conditions here making sure that we're checking to see if the ready step changes before we try to out put some content. So this side. So in case we had actually, I got to get rid of this one, too, because we don't actually need that anymore. So in case I'm going to the long wrong you are, l or whatever. We don't actually break our JavaScript. We don't see that we've got anything that's breaking our JavaScript. Although we do get a consul message here that we're not able to find it. But we're not breaking are asynchronous are ready. State is four, but we've got a status of zero because we're not successfully connected. So that's why it's important to make sure that we've got both of these set and ready to go . And also make sure that you got the right. You Earl in there. So the next lesson we're gonna look at how we can parse through that data. So what we had looked at earlier and how we can utilize this information within our JavaScript and out put it on to our page, loading in an external file into our JavaScript and utilizing that data via Ajax and Jason out put it in a visual format to our Web users. 12. 16 Creating JavaScript Object with from external JSON Data: So in the previous lesson, we looked at how we can get our response text output it within our JavaScript page and it although it's eight synchronously you the Ajax and we actually have a really seamless flow of this content. So the use air coming in here actually is never going to know that this content is coming from an external file. So what I've done is just to illustrate, so we're pulling in text. But if you want to pull in html file, we could potentially pull in. Some HTML content as well have created a simple output. Html formatted h one tags around it. So let's try to pull this and and see what happens. So going over here and change that path there, the girl to output html. So now when I refresh it, we see we've got hello world and it's in full format with the each one tax. So even though we're still pulling in response text when it actually outputs it within our HTML, we see because we've got that HTML formatting. It's not out putting it as a string value. It's just out putting it as that full HTML value. So that's an important thing to consider. And also, if you are pulling it in as just the response text, it would be the same thing. You could pull that in as well. So that is how you can potentially pull in. HTML files whatever type of flowers you want. But the focus of this course was actually to pull in Jason Data because this is probably one of the most used formats that we use Ajax for. And Jason gives us the ability to communicate back and forth between different files and different Web pages and transmit data, pull in data and so on. So this is what we want to focus on. So let's transfer this back and re do this back to that initial output page here that's located on the Web. And we've got our information sitting over here, and now we want to pull it into our Web page, our local Web page, and actually make use of that data. So we saw that we can pull it in using an Ajax call. And now let's take this one step further and let's parse through this data Well, first of all, let's just try to output this data as an object. So we're going to use that same variable that we did before, and we'll just call it my object and equal it to this response text. So you're probably thinking, OK, well, now that this is my object, I should just be ableto I would put it right, because it does come in. It looks like a Jason file and so on. So let me show you what it's gonna look like within the console. And for now, I'm just gonna leave this blank, save this, refresh it, and we see that what happens now is although we're getting that request in its within a string format. So going back to the previous lesson with Jason, what do we have to do when we get it in a string format? Because at this moment, we can't actually call over to my objects. We can't do something like my object. We can't do people and first name, and I know I'm saying we can't do it, but I'm just showing you that we can't really do it because the first name is not actually going to be picked up. It's a string value. We have no way of actually knowing all of these different values. It's not formatted in Jason. So this is where Parse Jason or Jason Parse comes in and gives us the ability Teoh change our data into a Jason object and interchange that interchange the format. So it's better resembles what we're looking for, the type of format that we're looking for. So let's just bracket around there, go back it and refresh it. And so it is pulling that in, and I think I probably have a problem here with the way that I'm pulling us through. So let me take a quick look at this and yeah, because I've got to multiple objects there within that Marie. So what do we have to do to pick the first object or the second object? We need to specify what item or what array item it's gonna be. So if we want toe to pick the 2nd 1 which is one because the race started zero, we need to do it within this type of format, and this gives us the ability to pull back the first name off that of the second person in the Jason file that's located at my my Jason dot com. Let's go back and look at that file and we see that we're scanning through. We're pulling all of this information into our JavaScript code and where specifically, we've parsed it into an object and we're picking up that first name value that's there and utilizing it and out putting it in to our web page. So that's what's happening here. And this is how you can create your own Ajax requests, pull in data and utilize it within your web page all a synchronously so you don't actually see it loading s. So this is how we accomplish that. So the next step is to maybe even send some data over to a server, pick up that data and make some use of that information, that data so that we're going to show you in the next lesson. And this is going to get a little bit more complicated because we're gonna need toe, have something on the server that's actually listening for whatever data were sending over and then sending back our response. So this is gonna be coming up in the next lesson. 13. 18 AJAX Challenge: in this lesson. I want to issue a challenge for you to be able to practice and work with what you've learned so far within this course. So working with Jason and Ajax data. So we can all we can do this all entirely online going over to code pen as well as utilizing the my my Jason website as well. So let's create a brand new pen here and update our source code that we had worked with earlier. So here we're just linking out to our Jason file, So I'm gonna copy. First of all, let's copy over the HTML going over to code pen, adding in that html. So just tidy that up a little bit and then just grabbing in this JavaScript went back to code pen, saving that, tidying it up as well. So now we've got access to all of this file and all of this information, so I'm gonna just simply save this at this point. Eso Now the challenge is for you to create your own geese on file linked to it and put it within the display area. So going over to a website. So if you don't access to you don't have access to a server, you can use my Jason. So go ahead, go over to my Jason, create your own Jason file and structure your own data and then pull that data in using an Ajax call, pull it into your Web page and output that content just like we did in the previous lesson . I would put that content into your Web page and do this all seamlessly. We've got all of the source code here so you could to can follow along and create your own version off on Ajax. Call pulling in data a synchronously into your Web content. And, of course, if you are working locally, you can use your own Web editor and all of this html CSS and JavaScript. All you need is a browser to run that so you can run that within your browser and also connect to an external Jason file. Or you could create your own Jason file so you could create you're foil my final Jason. Copy that same information or create that same information and load it into your Web page as well. So a number of different options for this challenge, So try it out for yourself, check it out and get to get to know one. Get familiar with making Ajax calls, pulling through that data and out putting that data into your HTML. 14. 19 HTTP Request Values explained in detail: in this lesson. I want to provide a quick overview of what we've done here within Jason and what all of these values here means within the XML. Http. Request so first of all, when we look at it, we've got on a board, so we are able to actually cancel an abort our request if we want to. So we've got a method contained within RJ query here that we can actually aboard it if we wanted to. So something happens. We can run a function to rip aboard it. We can also do things like we can open it. So this was open send so we could do something like if we didn't want to send it or whatever happens, we can do something like each are and fort and essentially this will abort that request that's being sent through eso All we have to do is aboard it and refresh it. And we fail within that sending of it and so on. So this one you could utilise if you need to and utilize it where you need to as well. So typically were using open we're using send we're using on Ready State. But we've also got some additional ones as well, where we can pick up those response headers and so on. So essentially on ready state fires off every time there's a state change the ready state. What that essentially means is it defines the current state of the Web page so we can do something like if we before we have a ready state of four, we can see if the ready state is is ready. We can see. So we've got a number of different options here for ready state. So this one is ready state for But we can also fire off different functions on different ready states. So what I mean by that is that if we've got a ready state off one so that basically means that zero means that it's not initialized one that it means that the request is set up so we could constant log that and I just put set up. And now when I refresh it, we see that set up fires off because it actually fires through all these different ready states. So that's the interesting part about it is that you only really see the ready state for because that means that we're connected, but and it means that it's completed, but actually fires through all these different ready states so we can see that there's a ready state to as well. And basically that means that it's been sent. So the request has been sent. And of course, there's a ready state three as well, eh? So we can see that it's being processed. So basically, we see that it's set up. We get all of that information. So the Ready State is currently it's It's one there and it's updates to four us. We've got sent and processed. So it works through all these different states, and it finally ends up on complete eso. That's the difference between the Ready states. And we did see a difference between response text response. You Earl essentially, response text sends it back as a string. We've got their status there. So if the actual status is 404 so we could actually do something like this if status is 404 So these air that the actual peach statuses. So if it's 404 that means not found and we'll just can't console log that out and do not found And then we could do something like else and so on and put all of this stuff in here wonder else so we could do something like this where it will fire off if the page isn't found. So if I did something like this, we could see that the pages have found. So even though we do throw that javascript air, we can still fire off. That not found for the ready states and for this status. And basically what happens here is that we've got not found fires off every time the ready state changes. So that's why we've got essentially three three occurrences of that firing off of the not found because it's first going to ready state change. That's going toe one. It's not found to not found three not found and so on. So the set up is there, so it goes to set up is done. And then 23 and four come up not found so that such just some different options that you can utilize if you need to within that Ajax request. So also, I did want to mention to that we had opened it as a get request. So if you're familiar with HTML. There is a difference between get and post for Post actually gives us the ability Thio more securely send data over through a post where, as a get request, isn't as secure. So if we're sending over actually input information and stuff that we want more of a secure option with that, we should send it via post. So if we change this to post, let's just see what happens here. So I need to also change this back to Ben's and refresh this and we see that what's happening here is that the Post is not found. And the reason that the Post is not found is because we're only accepting get requests here within this euro. So we're not able to post to this. U R l it were only simply able to get data were not able to post to it. And that's why, in the next lesson, we're gonna have to do some introduce some PHP code in order to create on end point that we can actually access, impose some information to. So that's what's coming up in the next lesson. So I did want to go through all of this and explain it so that you get a better overall idea of actually what's happening here within that http request so that next lesson we're gonna post over some data to the server and 15. 21 Create PHP server File to receive and callback response data: In the previous lesson, we saw how we can get information from a website using Ajax. And in this lesson, I'm gonna introduce you how we can actually post some information over to a server file and do something with that information on the server end and later on, within the course, I'm also gonna show you how we can connect that server end into a database so we can actually input data or input content, have the user input content on our web page. Send it over via JavaScript, Ajax call, send it over into a PHP file, all done a synchronously and added into a database and then send back a response. So that's gonna be a really cool, nice piece of functionality that we're gonna be looking at as we progress to the course. So, first of all, let's create a way for the user, the Web user, to come and input some information into our website. So I'm going to create a form, and I'm just going to give it a name of test form, and I should court around that as well. So I missed the first quote. There s oh, this is gonna be just some really simple HTML. I don't want to spend too much time creating HTML here. So first, and we just do some input fields so type equals text and give it a name. So this one is going to be for the first name and will keep with them. That seemed format where we had first name. We have last name in an age. So this is the information that we want to ideally collect within our database. So I'm going to give it the same I d. As the name. Close that off to a line break here and now we're gonna do last. And I think I could probably literally just copy this over to save some time. So instead of f name, it will be l name. And then lastly, we need one more for age. So instead of text, let's do HTML five. So do number, and this will be a judge and change the i d to age. So there we go. We've got a really simple form there, and, of course, for every form you need to have an input type. So I was gonna do input, tight equals button and value of the button is gonna be stand via Ajax. So that were very clear on what we want to do here. And I'm also gonna add in on click here. So whenever this this actually gets clicked, then we're going to submit the form, and we're going to submit it over to a function eso the function is gonna be post data, and we'll add that into our JavaScript closed that off, and now we can go over into our JavaScript. So whenever this gets sent, we can pick up the posting of that data within our web page. So let's go over to our JavaScript and create a function to post this data, and I've got a blank PHP file open here. So this is where we're actually going to retrieving that data. And for now, what we're gonna do is we're going to simply pick up the data that's being added into the Web form and submitted, and then just maybe output it here within that output area. So that's what we're gonna do for this first exercise, and then we're gonna get more complex with it as we progress. So just get rid of some of this excess spacing make it a little bit neater. And we've got our output container. They're all ready to go. So going back into our JavaScript. So the first thing that we need to do is set up our function here in order to retrieve back that click information. So the function is going to be function post data, and then within this function, we're gonna be able to pick up some information from the form itself. Eso We're going to just use some really street for JavaScript in order to do this. So first name, we're not gonna tie it into all of this. We're just gonna look for the values. There s o first name, get element by i d. So get element by i d. And we're gonna pick up that element. And the name Ellen is f name. And what we want to do is pick up that value and we just caught. So log out that value for now just to make sure that everything is set properly. So I didn't set a variable name there, so I do need to set a variable name, and this should actually be documents. I'm not sure what happened there. But so documents get element by knee by name value, and we're gonna just Consul log that. So let's refresh the page and see what's happening here. So now whenever I type in a value we see that gets put in the console, so that's all hooked up, right? And we can copy and paste over this so we can get those additional values. Now, of course, there's a number of different ways to do this. Some just doing it in a really simplified format because I don't want to spend too much time on going over all the different functionality here. And I want to get to you the Ajax part of it. So I know that's what you're all waiting for. So we're going to try to move along rather quickly through this, the dawn information here that we're picking up from our HTML elements. So now that we've we've picked up all of these values, I'm gonna create another variable, and I'm gonna call it just via rs toe hold are variable content, and now this is the information that we're going to be sending over to our Web server. So this is how it's gonna be formatted s So we're gonna do f name like that equals And then here is where we need to use our F name for first name there. So we're gonna pass over that value in there and next. So we've got the first name there within this string value. So the next one that we want to do is we're just gonna contaminate them together with the and And the next one is l name and we're gonna equal that. And that's gonna equal to the last names of a copy A little bit of this to save us some time. So I think that I called it first last. So I make just make a quick update on this, so that just makes more sense there. Whenever you're naming variables, try to make them s so that they're compatible. That just makes sense. So this one is age, and I think that we just called a peach as well within the JavaScript value. Eso Now we've set up our essentially are variable string. So just to make sure that we are picking up all this information and I'm also going to set some default values here, so I don't have to keep adding in these values over and over again every time I refresh the page eso One of the downsides of using JavaScript is that we always have to refresh the page. But once we start sending it over to the server, then you're going to notice that because we're not updating the JavaScript anymore. And we're just sending that information over to the server that we can pick that information up, update our PHP file, and we don't have to worry about refreshing the page. So that's what you show you later on coming up. So now when we refresh it, we send it over. We see that we've got this nicely formatted string notice. No spaces. It's come cat mated together, and it's exactly how you would expect it to be way you're sending over that request information when you're posting it over to the server. So now the server should be ready to pick up that information and utilize that information . So first of all, let's saw send those variables over. So make let's utilize what we were looking at before and just make some updates to the codes are Ajax code is essentially a lot of it is going to stay the same. Except now we've got some variables that were passing over and so on. So let's some let's do this first and pass over the variables here. So just that value that we've created over here, we're gonna actually should have all of this within that same function and get rid of that . Save that, clean it up a bit, get rid of some of that spacing that I've got here. So that's more readable. And we can take a look at this function. So now we've got one function as a whole. So anytime dysfunction fires off, this is when we're gonna send her. Ajax called. So let's let's just put some content here. So for PHP, we use echo toe output content. So just gonna right now will echo hello, and that will be it. And close off the PHP. So now whenever we go over to the PHP file were echoing out Hello. So let's show you that. So that's all we're doing. And so technically, if we're looking for a response text, we should just see Hello. Whenever we refresh it, send over the data and there is something wrong there that we're parsing through that text , So not exactly what we want to do quite yet. So I'm just gonna comment the suit, go back and refresh it. And now we see that we're doing the full trip around to the server we're sending over. Our variables were picking on. We've got a response back from the server. Eso Now we're all ready to start, you know, making use of these values and updating them, making them dynamic, send it over to the server, and the server can handle what we want to do with these values. So all of this is coming up in the next set of lessons, and we're going to get mawr into sending these Ajax calls and all the really amazing things that you can do with them. So that's all coming up. 16. 22 Send data via AJAX to Server: this lesson. I want to look closer at the PHP file, and we're gonna be doing some PHP coding within this within this course. And the PHP is gonna be just very simple, straightforward PHP where we're gonna be utilizing some of these values that are being passed from our index dot html page and utilizing them within PHP. And this is where we need to start when we want to start creating some dynamic functionality. With that data, we need to have a back end, some kind of back end languages. So of course you could use any one of the other back end languages, But for the instance of this course, we're gonna focus on PHP. So if you're not familiar with PHP, it's gonna be really straightforward basic level PHP. And I'm gonna explain through what each one of the lines accord for PHP is doing and how we're providing this functionality. So, first of all, we showed you how we can echo out content. So what we want to do is we actually want to pick up those values that are being passed. So notice that I placed the variable data that we had set up here that we're picking up from the forms in tow Variable called Via Rs. And we're sending that data over to the web page test dot PHP. So if we're sending that information over, that means that we can retrieve that information back as well. So let's take a look at this. And first of all, because we're still sending it as a get request, let's update this and pick up that information as get and notice that we set a bunch of variables here. So do you think that we're going to be able to pick up these variables, return them back? What do you think is gonna happen here when we try to pick up that get information? F name? Do you think we're going to get that first name or do you think we're going to get that whole string? So should we have been looking for another value and what value that is that we should be looking at? So let's just take a look and see what happens. So we remember we're sending over this value here first name, and we see that what we're getting over here is that we're not actually picking up F name in the test PHP. So this is definitely an issue here that we're not picking up that f name. So we need to make some adjustments and actually pick up these values that are being passed through. So that essentially means that we're not passing over this information properly within that within that Ajax request. So let's ah, let's make some updates here. Some adjustments, and I'm gonna show you some additional information here. So if we add in an input type and we're gonna add in a submit button here, and this is how you typically might send over some information to PHP. So we're going to just do action and post over this information to our test PHP file. It's allow. Let's refresh this. We've gotta submit button, we send it over. So we've got this string here. F name equals Mike l name because Smith, age 50. So we are picking that up. So what happens if we change this to post? So we changed our method and our method is post. And instead of get, we use post. So going back here, refreshing this submit, we see that we're posting that information over so it's actually didn't post it properly, So let's refresh that page. So now when we submit it, we're picking it up as a post. So that's all working. But when we're sending it via Ajax were not picking up that value that's being sent. So let's make some adjustments here. So I did say that we can open it as a guest. We can open it as post. So now let's refresh it. Send over the Ajax and we're still not picking up that F name. So it's still need to make some additional adjustments within that source code to make sure that we're actually sending over the proper information. And what we need to do is actually we need to encode that information as a URL encoded form information. So that's one of the things that we need to add in here, especially if we're getting some form data. It's going below our open. We're gonna add in an HR. So adding into that object, we're gonna set request header. We're going to set it as application. Http form Earl encoded. So we know what type of data the this PHP file can't be expecting. So let's try the site. Now again, refresh it. Send via Ajax. And now we see that we're actually getting that response back from the server. Maybe it will update this. So first name and it's gonna equal to info or whatever. We're posting over. And we see that now. Our response coming back from the server first name is equal to Mike. And if we submit it over, we actually see that we've got that same information. So now we're able to pass over that form information just us. We would with a normal submit with a post and were able to pick that up on the server end without any page refresh so and also send back information and actually utilize that response information within our web page. So this is some really good starting technology that we can begin to work with and really build this out, utilizing these Ajax requests, connecting it with our back end cord and then doing some really amazing functionality with that back end code. So I'm gonna show you more on this in the upcoming lesson 17. 24 Get Post values output to user: So let's make some tweaks and updates to the code that we've been working on earlier something include one, not another element here within our HTML. And essentially, this is gonna be for status so that we can get a better idea. Weaken, send some communication back to the Web user, as we're actually doing and making some processes here. So down here at the bottom, Actually, what I'm gonna do is I'm gonna just recreate this and this is gonna be your container for our status element so that now I can go to status and update the inner HTML. So because we are gonna be updating that status and me, we could do something with processing or something like that. So the user actually sees that something's happening when they press that button. So even though if our server is taking a long time to respond, the user's gonna have some indication of what's happening. And then afterwards, once we've picked up that response back from the server, we can add in that server text there within that response, and then here and we can just do parted in full. So now let's try the suit and I believe I forgot to save this one. So let's try the set again. So now we've got that we've got the response of added and let's see what's happening here that we're not giving status information so that it may be Just refresh, that's we've got our status there and for some reason it's not updating. So maybe status is not a good value to use. So maybe we just call it a status so that maybe I think I believe that was actually are reserved a reserve value, so I can't use status toe. Hold it. So let's try this again. So we see that the processing is rather quick. We've got the response back from the server output into our our HTML. So now we're ready to actually do something with the data that were retrieving so we could pick up all those pieces of information so post last name and notice that the formatting of here is gonna be the same format that we've sent it over here within the variables. So always keep that in mind that this is the way that we set up, and we we pick up that information on the server and as well. So now we've got all of these variables here that we can pick up and utilize, So just we actually didn't have to refresh it, because that was just a PHP update. But either way, we can see that now we've got added and just to show you So if we had something like that, now we see that the response is different with a page reload, and we can pull back that information from PHP. So the next lesson we're gonna look at how we can actually add this data into our database . So that's gonna be a really nice, cool effect that we can do and something that's really useful when it comes to working with Ajax calls and picking up that data on the server. And so it's coming up in the next lesson. 18. 25 Setup MySQL database phpmyadmin: So this lesson we're gonna open up and utilize our sequel database and this is gonna be pretty much just PHP code and how to insert data from variables from posted data into a database. So we're not gonna be doing much with our Ajax even though our original content is coming from the front end. This lesson is gonna be about back in code hooking up and setting up our database and getting it ready to retrieve information from our Ajax calls. So if you aren't using my sequel, you could simulate doing the same type of functionality within your other code within your other server and code, and utilize whatever database that you feel comfortable with as well. I'm gonna open up. I've got this installed on Zampa. So God Zampa running in the background, as I mentioned earlier example, is free program. It's really quick and easy to set up and install, and it's a great place that you can practice working with the front end and back in code and even create out databases and so on. So it's really functional, and it works really well when you're doing this type of practice when you're practicing PHP and my sequel Interactions Eso What it does is it actually comes with PHP. Mayan men already installed Ready to go eso added bonus So really easy to access. Might my PHP just goto local horse PHP Myatt men and go to databases. And from here you can set up a brand new database. So you just need to create a database name and with this name, then we're gonna be able to create create content into it, so test Or maybe I could just call it a jocks, So I'm gonna call it a jocks test. That's the database that I'm creating. So now we notice that over here on the left hand side and the menu, I've got Ajax test, so I'm gonna cheat a little bit here instead of creating the table, I'm gonna just query the table s Oh, this is just something that I can import the table as well and so on to build a table much quicker. I can do it within this type of format. So sequel create table eso is going to be a really simple table where I've got i d first age checked. So we're gonna be using that later on. So maybe I'm gonna update this to be last so that we get full table being created, all ready to go. So let's just hit. Go and take a look at our table. So now we've got this table. It's called names Weakens. Look, a structure on the table and we're already to start inserting first name, last name age into this table so we don't have anything inserted as of yet. And one nice note about PHP Myatt men, We can always see those sequel queries there. So these air really good to utilize to really try out and test it Different sequel queries You can even copy and paste them. Do them within PHP, my men copy and paste them into your PHP code as queries and then get that full functionality within your PHP code. So in the next lesson, I gonna be looking at how we can update content being sent from PHP connecting the database and updating that content within the database. So that's coming up in the next lesson. 19. 27 Insert Data into MySQL database from AJAX: in the previous lesson, I showed you how we can create a database within PHP. My admin. So this lesson. Now let's connect to that database s so we can prepare to start inserting our data into the database. So again, this is running on a local machine and your database settings. It might be different on your server. And, of course, your log ins and passwords. You need to set those up as well. So because this is, ah, local machine running on Zampa within the Samp server, I'm the connecting the connecting passwords are gonna be the same for you unless you've changed. Um, of course. So we're gonna create our brand new my sequel, I. So let's sequel Improved connection here. And then we're going to utilize this connection connection object in order to connect to the database and run our sequel Search Queries. So I'm on local hosts. That's the address. The location of my server, its root is gonna be the password. Where route is the user password, for example, is blank. And now we need to to specify the database that I've created. So I created one called Ajax test, so just put that in there now, and that's all you really need to do to set up your connection. So this is the initiation of the connection. And now one of the things that's always good to do when you're writing your PHP code is just to make sure that your connection is working. So we've got some cold here, Teoh, just to do a double check to make sure that we can query into it on a sure that that's working. So we'll just do a sequel here and set up another variable. So in PHP, we just set up variables within this type of format s Oh, this is just gonna be a simple query, and maybe we'll just do a select from names. That's what I said that PHP might have been is kind of neat, because we've got ability to just pick up those queries and just post them in there. Eso we're checking to see if we connects and were able to do our query, and if it comes back as true, then we know that we've got our connection, and if it comes back as false, then we know that we had a problem. So we had an error so we can right out that we had an error making that connection. And we can specify that what that query was, so that we have a better idea to troubleshoot that error on then. Also, we can maybe formatted a little bit better, and we can output that connection error out into our Web browser or in this case, we're gonna be able to see that if there's a connection air within our response text eso next. Let's just right over here. We're gonna create created entry. So even though we're not creating an entry quite yet, we're going to see that this response text I's gonna be coinciding with what we've just put into eso. We're gonna make sure that we can connect to our database and if everything connects properly. So we did have an error there that were not able to connect to names, so we did have a connection tap problem. But we were able to connect to our database. So let's take another quick look and see what's happened here. So I do have a table called names and I've got columns there I go back into PHP. My ad men and actually create some entries there. So we have first, last and age. So this is numeric and we'll just create an entry there. So now let's go back into our local host and we're still having an air connecting all from names. So what I wanted to do now is what we're gonna do is just comment the suit because this probably isn't the best way to check eso. I didn't want to really rewrite this query string, but in order to check to make sure if our server is connected and we've got our connection , if everything is working, we can specify using Con Ping and so on soaping functionality. And this will let us know if we've got a server connection and if or if it's feeling so we're just echo out connected. This is probably a better way to check to see if we're connected. So we see that we are connected because we noticed that previously when we were getting those errors that we weren't actually, we weren't actually seeing any kind of connection error, so it was connecting, but it actually wasn't submitting anything because the my sequel query was just selecting all from names and we weren't actually doing anything with that query. So now that we know that we've got our connection now we can go ahead and we can comment the suit because we don't really need to write this boat. And we can update our query to be inserting the values from our our post information. So let's go back over to the PHP Mayan men and let's do an insert. So we'll just do test test and some age information, and we can pick up all of that insert into names. That query string it had update this over here, and we don't need to worry about I d because this is automatically update. We're not gonna worry about checked or time stamp as of yet, and we're gonna update these values that we've got here. So the 1st 1 that we're gonna add in is the value for first. The 2nd 1 that we're gonna add in is the value for last and just add them in using the dot there and then here we're gonna add in a value for age. And now, if everything goes well, we should be able to insert information via the Ajax call So let's try to send that over in tow. The Ajax call. So it looks like we did still haven't air there, so there's still some additional formatting there that's sitting there. So I need to get rid of that going back in. I'm gonna make this wider so that we can see that full query string. Now, when we go over, we click it. We see we got created entry. So now we can try different values as well send over created entry. So And although we're not really seeing a lot of information there now, when we go and we browse, we see that we're actually inserting that information so we could do test 55. And we see that now when we refresh our database, were populating information into our database from our Ajax call from our front end. So we're doing all of this without any page reloads, and it is rather quick. Here s so you could rather quickly send some information over to your database populated over. So once you actually have it within JavaScript, you can manipulate that. We can update it and you can send whatever values want over and all it is is just the server is retreating this information, making a database connection and running that query screen that sequel string there. So it's inserting into names, which is the table name eso, the values that were inserting her first last and age. And then we've got our dynamic values that we've picked up from the post over here. So we've got first last and age. This is just our connection tests that we were looking at earlier where that just the plain query wasn't working. Although it wasn't returning an error, we still weren't able to. We still we didn't see anything created entry because it's not actually coming back as a creative entry. So even though no error. So this was the way to connect and check if our connection is working to the database, and once we know everything is connected, we don't have to worry about that anymore. And we could just simply send our sequel queries over. And if the query comes back true that we type entry created and if it comes back error than we can look further into the air, just like what we're doing earlier with the troubleshooting of that response information. So the next lesson we're gonna work on what information are treating back from the database so that we can actually see what I d. We're assigning to it in the database and so on. So that's going to be coming up in the next lesson. Soem or database work more PHP work and what we can retrieve back from the database and send that back to the user, send that back into our JavaScript and build it that functionality. So that's all coming up in the next set of lessons. 20. 28 Server data response as JSON: So because this course is about Jason and Ajax, I'm gonna show you how we can send back a J. Sohn formatted response instead of sending over these echoes. What we've been doing before and also probably a good idea, is to send back the idea of the entry that we've just created because now we've just got created entry. We're not really sure what country has been created and for a user experience, we don't really know that anything you is really created. We see entry created, and we don't see that anything is really dynamically changing. So the idea is here is to sent back that insert I d. So this is really easy to get. Once we've inserted information, we've got this object called insert I D that we can send back. And now, whenever I add in new entries, we see that we've got these entry ideas when I go over to the database. If I refresh it, I've got a whole bunch of these Mike Jones or Mike Smith that we've been entering in and we see that it coincides with the I D within that table. So I've got and created entry 18 coinciding with that one. So maybe I could do 19 or something like that. So now I know this one is gonna be 19. Go back over to here, Refresh it. And we see that now we've got 1919. So it is inserting, Retrieving, doc, that information dynamically. So now the next step is actually to format. Are content being sent back within a Jason format so that this way we can read it a lot easier when we retrieve it back in JavaScript. And we could actually do something with that information that we're sending back. So that's gonna be, um, interesting thing that we can do with our PHP code where we can set up, Essentially, we're going to create a blank array here. So we've got an array called A E R R. And all of this inserting is going to stay the same. But over here is where we're actually gonna change something. So let's set a r r and will create our own status values of status. And we're gonna equal it too created or something like that and just create a new line and maybe another one for I d or something like that. so that we know that we can retrieve back that I d And here we're going to do the same thing here where we're going to do an error. So we know that if we retrieved back an error, then we're gonna be expecting maybe a message so that error message and we can pick up that connection here just over here. So also maybe what we can do is really utilize Thies this array and we can build out an actual array of values here. So instead of having Teoh post them into within this type of format, let's build out a nice array with a set of values here so we can do a R r and instead of first will just conducting this to be first so that this is ah, a lot more readable, Uh, post first. And the good thing about doing it this way is this way. Were able to retrieve back and return back all of those values exactly as we're receiving them. So this one is gonna be last, so we'll always have these values and will have access to these values even in the response called back. And this is a Judge Selous Array is gonna hold all of our values, and we're going to send it back as a Jason response back to the server. So let's make some updates here, update the age. We can even go as far here. And if, um, we got a ping here, we can see connected and go to true and else we can do false so we can get a whole bunch of value in here. The reason I'm doing this is that s so we've got a whole bunch of variables that we can actually look at when we're out putting our Jason information so that that's pretty good. And now we've got on a rig with a bunch of content in there. So once we've inserted it, we've got connected. So we've got a lot of really good content. So let's try to send that information back into our JavaScript so we can echo out. And PHP has Jason encode Jason Decode. So we're actually encoding it as a Jason formatted data. So let's do it in this way, and we're just gonna echoed that array information. Let's go over here and try that it. So we see that now we get something that's rather familiar Where we've got this string that looks like our Jason. And now all we would need to do is parse that through, and we can actually utilize all of this response information. So let's go back over to here and we're gonna bring back our object. We're gonna take this par stuff through, and now we him see that we've got my object. So we're returning back information in here, so maybe at first what we'll do is we'll just console, log it. That object. So not gonna update the status quite yet, So let's send not over. But we need to refresh it because we updated the Jason and there we go. So we got in all of this information back as Jason formatted data within our response back from the server. And now what we can do is we can utilize it within our inner HTML so we can do something like status. And I know I shouldn't really be using that status. Eso maybe just do a quick update on that s so maybe not sending it as status. Or we could add in a variable to it. So we just call it X status instead, and maybe even here we could just do X status is error instead. So maybe that makes a little bit more sense. So we don't actually have to update it because this is all coming from the server. So now let's do X status and created plus at some space in there and do another plus, and we'll do the I D. That's being returned back. So my object i d. And the good thing about this is we have access to all of this information so we can even see what we sent over and what server did with it as well. We can see that it was connected and so on. So now let's go back out into our code. Refresh it, send it over and we see we've got created 24 created 25 this is a full trip around from our front end code, sending it over to our peach peep back end. The PHP backend picks up the Post Information connects to the database, inserts it into the database checks. If our databases connected, adds in some values and some messages, information sends it back via encoded Jason format and we again picked that up in our JavaScript code here into the each. Our response text eso were using that giving invariable of my object. And now within that response text, we're parsing it over from the string over into adjacent format. And now we can utilize all of that responded information that's coming back from the Ari. We can use the Liza as Java JavaScript objects and we can use them within our front end code in their inner HTML and so on so we can set them as variables values and utilize them anywhere in her code as we see necessary. And also we can Now we can add in some conditions. So if it didn't get inserted, or if we're getting an X status of created or error, if we get a X status of error, we can actually do something with it, adding in conditional statements and so on, we could potentially add in additional information something like a condition. And I know this probably isn't going to be really making a whole lot of sense in this scenario, but this is just to demonstrate that we can now utilize it as my object connected. And if my object is connected than we can update this as well and add into it so we can do good to state of and put a happy face there and a line break in front. And now let's check the state. So we got to refresh It s oh, we've got connect connect connected to database. And of course, we can utilize anyone of you Got a refreshing again. Eso We can utilize this in any type of format that just makes sense. We could add in conditions, Passover, Boolean values and a whole lot more. So now that we've looked at it connecting via javascript, there actually is a better way. And I know that going through javascript sometimes there's a lot of content here s o. Working with Jay Query makes things a lot easier. And I did say that G query is the optimal way to send Ajax requests from your front end. Eso This is what we're gonna look at in the upcoming section and we're going to really simplify this with G query and show you why J query is much more user friendly. Way to send Ajax request. So that's coming up in the next section. But it is important to understand that the background behind what's happening within the JavaScript is just this. What's what we've got within the code here that it is important to understand this, that this is how these requests are sent and G Query essentially just gives a different functionality and makes it easier to rate, so that's coming up in the next section. 21. 30 Simple jQuery file loading: this lesson, we're gonna introduce you to J. Korea and adding J coury into your projects. And to tell you the truth, whenever I'm looking to do a lot of Ajax calls, I always revert back to the J. Coury Library and within the next set of lessons, I'm gonna show you why. So opening up and adding J coury into your Web project is really easy to do, so you can go over and to Jake Worry and download the J. Corey Library and link to it locally. Or you can go over to a resource like Google, So developers dot google dot com and take the J Corey Cdn coffee. Paste it into your project. Make sure that you're pasting at right above your script content so that your script will actually have access to your J. Corey content. So all of this stuff that we've been doing earlier now we can really bring that into J coury and make it function a lot quicker, smoother and with less lines of code. So essentially, what Jay Corey does is it allows us to interact with the dawn or the document object model and gives us some built in methods built in within J query that allow for all of this functionality. So one of them that we're gonna be looking at right now is we're going to make sure that the document is loaded and this is to ensure that everything is ready to go when we start writing in R J Coury Code s Oh, this is just a default function that we always include to wrap around r J coury functionality. And this just ensures that the dawn has loaded essentially, the dom is what the browser bills out from your HTML source code. So it builds out all of these elements and builds it into what's known as the Dom the document object model. And this is the same thing that we were interacting with down here. What? We're interacting with the document within JavaScript. So J coury is javascript, but it's just more of a condensed job script library that you can utilize to create some functionality quicker. So what I'm gonna do refer now is I'm going to commentate all of this. And the reason I'm leaving this in is because I want to show you how we can have the exact same functionality with bakery with a whole lot less lines of code. So let's start out by actually creating a really simple gee Corey function where we're actually gonna load, load some content into one of the elements. So let's load some external file content so that output HTML content. Let's load this file via on each axe request and load it into output, and you're gonna be really amazed and blown away by how easy this is to do so. All I need to do is identify the element that I want to interact with with Jake Worry, and this is done in the same way as or same format or similar format to what we do with CSS . And one of the J Coury methods is load. So Lord loads data from a server and returns the HTML into the matched element. So basically, what that means is that I need to specify the file that I want a load and specify the element I want to load it into. And now let's go to our Web browser, and what do you think is gonna happen here? So if you said that it's gonna simply seamlessly load in the content from, I believe that was output each TML so output html. So if you said it's gonna load all of the HTML code from output dot html loaded into this element that we had specified that output one element and seamlessly prudence it within the Web page, you're correct. So it says you see is that and this is one of the greatest examples of Jake Worry because, really, what did we just do? We simplified connecting to that element, doing get element by I d inner html way. We cleared that up and also doing the Ajax call on loading that data. So all of these lines of code everything that we had down here, we could simplify and just load that content in directly into Jake. And this is again why J Query is really such a fast growing library, and it's used all over the place because of the ease of use and bringing in content within J. Coury. Now there's a number of different other methods to do Ajax calls because this one right now , although it loads the data really seamlessly and easily into our HTML element, it doesn't really give us a great opportunity to work with that content from the file. So we need to use some other G Corey methods, Ajax methods in order to accomplish this. So I'm gonna show you how to do those and introduce those in the upcoming lessons. And I promise you they're gonna be really easy, straightforward, And they're just gonna make a lot of sense when you begin to see how they can get utilized to bring content into your JavaScript and into your Web page and utilize all of that information So all of this is coming up in the next set of lessons. 22. 32 jQuery Get request retrieve file data: in the previous lesson, we looked at how easy it was to load some content into one of her HTML elements using J Query the J Query Method load. So also, we're gonna look at how we can do another method for Ajax. Call within this lesson and this is gonna be the get request. Essentially, what the get request does is this does similar format to what we're looking at down here in the earlier lessons of our JavaScript code, where we actually do a get request and we retrieved back some information now, in order to initiate get there is a specific method for that. So we specify it by dollar sign, and we do a period and then get so this is gonna let J. Cory know that this is the method that we want toe fire off, and essentially, we can see here within the brackets description. So this is an XML http request that same thing that we were doing earlier in javascript, but just it's just simplified eso we need to specify. We need some information here within the attributes here. So the first thing that we need to do is specify the string you, Earl. So the u r l of where we actually want toe make this request to. So I'm gonna actually copy out some content from here and reuse that over to here. And so we've got our u R l as just you, Earl the variable Earl. And we probably should update this because it's gonna be a get request. Eso we don't necessarily. We're not gonna be actually sending a post. We're gonna be sending a get eso. Let's make an update on this. And maybe we can actually utilize our Jason dot Js file for this one, so, Jason dot Js So it's gonna make a request over to this file you Earl. And then we've got an opportunity to do a callback function, and then within that function, we can retrieve back a string value. So we're just gonna call it data and so we're retreating back. There's data information from the get requests and now so that we're returning back the ah value for data. So this is the callback value. And now let's do something with that data that returning back so we can do what we can Just console, log that out as data. Or maybe what we want to do is, well, maybe we want to just place it within that output value. So it's output one and html and then place that data into that HTML. So what do you think is gonna happen here once we load this this web page, We've got that. I would put one there. We've got HTML data, data data. So we're making a call over to Jason John J s. Let's check this out within our browser. So we do the request, we refresh it, and we can see that so within the consul were actually retrieving back all of that information that's contained within Angie's son. So that was Jason dot html. Or I believe that was No, sir. That was Jason dot Jason. So two different files that have got there. So this is the essentially the contents of that Jason file, and we make our get request, we can see that we can retrieve back information from this from the web page and place it within an object and in this format, then we could begin to utilize it. So you're probably looking at this insanity. Well, this looks kind of familiar to what we did earlier, where we pulled in a string value. Eso what we were doing earlier with the My Jason file is we're pulling over that string value, parsing it out and actually treating it as an object in javascript. So in the next lesson, I'm gonna show you how to do that. So it's coming up. 23. 33 Get JSON data: in this lesson, I'm gonna be showing you how to parse Jason Data. So we have our my Jason dot com been file. So this is actually a Jason file, and we're gonna create a request over to the server, pick up this file something copy. This one now in go into our web document, and so they get function, we can pull back. We saw in the last lesson how we can go over to a specific girl and pull back that information and then output it into our element here within our HTML. So now what we want to do is actually update this instead of just doing a get we want to spent. Be more specific because this is Jason Data and G. Query has a built in function to perform and load Jason and quoted data from on external Web page into our our content here. So what we're doing now is we're console ing logging out that information that's returned from that Web page. Let's go to our you, Earl, refresh the page. And now we see that we've got nicely formatted Jason data. And of course, now, at this point, we can interact with that we can loop through it and we can output it within our web content. So it's a Z Z is that ad in Jason? And if you are picking up string data from the get request, you can always parse it into Jason. So the same functionality that we saw earlier where we do that Jason parse. So I'll just show you what happens here now. So if I was actually so what we're gonna use is the Jason parts of the response or that data. And now instead of Jason, let's see what happens now. So instead of just pulling in that data, let's do a Jason parse of the returned data, and we'll see what happens. And maybe actually, will also Consul log out data. So before I show you, actually, what's gonna happen? So what do you think is gonna happen here? Do you think that we're gonna automatically get back data and it's gonna be in a Jason format? Or is it gonna be a string format? And we would parse it over to Jason. Are we gonna be able to utilize it as a data object, open up our web browser and check out what happens when we refresh it the first we get an error there, so we do need to fix up that error. Not sure what happened there, but I ended up with two brackets there, So let's refresh that. Still haven't air there, So let's check that out. The one I added that next bracket, I refresh it. We see something really interesting here. So basically what's happened here is that we don't actually to parse it through because it's already Jason formatted. So even as get even though the proper format is to be specific that it's a Jason object, the JavaScript, the J Coury is smart enough to understand that this adjacent object and already parses that string value into a data object and allows us to utilize it. So best practice is to make the query Make that get Jason, make the make that get Jason request. But it also if you're trying to retrieve back the data just as regular data than you can do it was to get as well. And if for some reason it does come in as a string value, you can always do the Jason parse and parse it out as you normally would with JavaScript. So the next lesson we're gonna look at some additional methods that are available within G query in orderto Teoh sort through online data and Jason Data and output it within our HTML . And also, we're gonna look at some other really cool Ajax methods that are available within J query. 24. 35 Post Data to Server jQuery AJAX: the previous lesson, we saw how we can use the get method within G query to make requests over to our external Web files and retrieve that information, pull that back into our JavaScript and then utilize it within our script. So there are some other, uh, there are some other in there is some other information that we can return back. We saw how we can return back data, but we can also return back that status. So going over to our consul. So let's log status as well. So we saw that we pulled back the data object. And when we look at it, we've got the ability to parse through that object so you can pick up people. We can look at the first person, so zero and we can get back the first name. So let's try that and add that in here within the object. So this is just a typical object here within our JavaScript, where we use javascript object, and I believe it was first name. When we go take a double check with that. So first name is the format that we're utilizing. So now we should be able to pull back that first name and populate output one with that value. Let's go over here and refresh it. Remember again. Now we're standing. We're sending over the we're picking up the object that's being retrieved back. So this is all that data information. But we've got another one here that were retrieving back, and this is the status. So the status is actually something that we can utilize when we make our our JavaScript calls and we can see if it's successful by checking our status and the information that gets returned back from the JavaScript or the Ajax called. So we've got returned back of sex success because in this case, it was a success. We were able to make a net connection to the file and retrieve back that information. And when we look over here, we see that we did get back that object information, and we can utilize it within this type format. So when we are making get requests now there's another one, obviously another type of method besides get, and we saw that within the form we can make post. So if I was to update this to post and this time I'm actually gonna post over to my test dot PHP and maybe we just remove out. We can probably keep in the status, get the data, and we can take a closer look at the information that gets returned. I'm gonna comment this out for now until we actually make the request so we can take a better look at the data that actually gets sent back. So let's refresh that and we see that we've got undefined index F name eso. This basically means that we haven't actually sent anything over. And then now when we do the post, we're not actually posting any information over so a few things that we do need to take care of in order to actually post our content properly. We actually to send some data over because our web servers actually expecting that data to be spent specified, and that's what we're actually gonna send back. But notice here as well that the success is still in place because we still retrieve back that, and we're still able to access the file. But the data is not in the proper format, and we're actually not sending the proper data over. So typically, of course, when you are using post, then you're intending on sending some data over to the server. So let's add that data in. And before we actually make our call, we're going to make sure that where we've got it set up and we're ready to post some data in some information. So now we're gonna create a brand new variable, So we're gonna call it variable and going down to over here. We just called it vars So we'll do the same format v A. R s. And this is where we're gonna hold all of our data. So the data gets formatted as well within an object so similar to what we were doing before . So now, instead of where we've got our f name or first name, we can put that here, and we can essentially treat this as its own object. So now we need to pair. So we've got the name value and we need to get the actual value that we wanted to utilise so we can do the same thing that we did earlier here. We're getting the get element by i d f name value. So in j query, this is shortened quite a bit. So all we need to do is specify this update. This to be ah ha sh Instead of value, we use a method of out and get rid of this stuff here. So essentially, this is how we can pick up the value. And I don't need those Coghlan's There s so I can calm a separated out because this is an object, so I can pass over all of this information. So there's first name. There's l for last name and we just get that last name value there. Just make sure that we've got the right name fields here. So these are coming from the form over here. So we've got l name F name and lastly, we also picking up age. So let's add all of these values in and send them over to our PHP file when we do our post request. And now also, lastly, let's some odd in that data here. And so we've got it contained within an object. VRS. And so we've got the URL here. And here's where we specify the data that we're posting over within this variable, and then we've got the functions. We've got the data we've got the status. And actually, there's another value that gets passed back by. Default is exits are so I'm gonna console log that information as well. So we get a whole bunch of response information and we can take a closer look at it as well within the console. So taking a quick look through our code, it looks like we're actually picking up everything. And let's check that out within the browser. So we see now within the browser, so I'll just refresh it. And I haven't hooked up the send via Ajax quite yet. Eso We're still going to do that in upcoming lesson, But let's take a look at what actually gets returned here. So first of all, we get in line 27. So if I open up my editor here in lying 27 So first we're looking at the data. So look at the way that the data is returned back. So this data has returned back in a string format. So technically, if we want to actually access this, we could console log in, parcel that data. So let's refresh it again and take a second look at this. So now what? We're doing is where parsing all of that information. So let's look at this. Eso The data that we're passing through is being retrieved back here, and we're getting connected. Tru X status. So all of this information is being passed through from VRS object passed through in the Post. Picked up in our PHP file, which picks up the post F name post El Nino. Post age inserts it into the database. Does the insert here makes a connection to the database here, inserts it into the database here it does a quick check to see what our connection status is for the database. And if everything on then here it runs the sequel query that we've got up here. And if it turns out true than X status changes to created I d. We get that inserted i d. And if we throw on air, if we're not able to run our sequel query, we'd change X status to an error. We message back that connection error information, and we encoded all in Jason format, and this is what we've got being output here. So the first item here in with the data were actually getting it sent back via post and it gets sent back into a string. And if we want to actually make use of the data that we need to use Jason Parse parse out the data which we've done here in line 30 and now we can utilize age connected first data and so on. So the next one that we're looking at here is the status. So status is still success. Designers were able to connect successfully to the file. Then we return back success and X h r is that retrieved information as an object. And we see here that we've got ready state and we've got the response text. So essentially, what we're returning back here is the actual response text, and we see that it's not actually for mounted in on object yet. Eso were not able to utilize it as Jason Data, but we are able to see that object that gets returned back from the X h r. So we're able to see that ready state for and pick up that response text. So if we want to make use of that response text, it would be the same thing as the data that gets sent back and we can take a closer look at all of this information that gets sent back. So there is quite a lot of information here, but one of the most important ones here is just the 1st 1 that we've making the data, retrieving that data. And then we can parse that through and make use of the data that gets returned back. And remember, again that this is opposed not to get. And we don't have a post Jason, as we did have with the get Jason. So whenever we do a post and we're treating by Jason format a data, we do need to parse that data to make it usable within our JavaScript. And now that at this point, if once it is usable than we can, actually, so we have to still parse through it. So the best thing probably to do is to set up a variable. And maybe we can just call it Jason. And this is where we hold are parsed Jason Data. And then now we can utilize it. We can do that, Jason. People first and so on. So, actually, it's not gonna be We don't need to be that specific because we're only returning back to the information sent from the server. So to simplify, things were retreating back just first. So now we should be able to format and output the first name Mike within that output one element. So let's take a look and see if that works. And indeed it does. We're sending Mike over into that output element within our HTML. So a round trip here going over to the server, and in the next lesson, we're gonna hook up the form and really be able to send some data over added into the database and so on. So, in fact, it still is adding it into the database. So we see we've got created 33. So now within our database says is the PHP Mayan men. So going into the names table, we can see that in fact, we keep creating all of this information as every time we refresh it. And that's because it's taking this default data that we have within the form and just simply inserting it into the database. So we're going to change that and update that in the coming lesson 25. 36 Post data using AJAX to MySQL database: this lesson. I want to show you how we can insert data are formed data whenever we submit our form and insert it actually into our database. So previously we were just showing you how we could utilise post. And essentially, what it was doing is whenever the documents ready, it was going through all of these values running through this Jaeggi Korean this JavaScript and creating that Ajax call. So that's not really an ideal situation. Because usually we do wanna wait for the form to be submitted and pick up the data from the form as it gets submitted. So I can remove out some of this default information here, and we can take care of the form submission just using Ajax call. So it's gonna be in Ajax post eso. First of all, what we need to do is we need to specify on i d, and this is how we're actually going to pick up that for information and be able to make our Ajax call whenever the user hits the submit button. Eso Right now, when the user hits the submit button, it's gonna automatically go to test dot PHP and we don't want to have any page reloads, as is the whole point of Ajax. Of course. So this is where we need to make some changes within our geek worry in order to better be able to grab that form information before it actually tries to get submitted to test stop PHP and the page reloads, as it normally typically would do. So We have a number of different options to create event listeners, and the one that I'm going to use for for this instance is that I'm gonna listen for the submission off our form. So I'm gonna utilize that test form I d. So much like other Jake where we're hooking into the dom simply by indicating whether it's an i d or class or just a regular tag. Eso They were doing it the same way hooking into this form and the vent listener that we're listening for is on submit. So we're biting the event hit list that that handler when the user tries to submit the JavaScript form and that event gets triggered. So what's gonna happen is the user's gonna click, submit Jake or is going to know that this is already loaded in the Dom and that when the button is clicked that we know we need to fire off this functionality. So this is a typical function within J query. And one thing that we do need to pass here is we need to pass that event information because on event typically would hold some kind of content within their and what we want to do with this event. We want to do event and we want to prevent default of that event. So the default essentially is going to be that by default, this form is going to submit. So now let's go back out here, refresh it. Hitting the submit button. You noticed that we're not submitting the form and that's because now, whenever the user tries to submit the form, we've got prevent default. So this is a great starting point for creating our Ajax call, because now we can take care of that form submission of the Ajax. So now all we need to do is grab all of this information that we were working with before, and I gotta clean this up a little bit. Use the beautify function within brackets eso Now that the code is a little bit more readable skittered of somebody's excess spaces. And now what we can do is essentially, we can do the same thing that we've got over here. And all we're doing is listening for that user to hit submit so that we know that when they're actually ready and the rest of this functionality is gonna be pretty much the same thing, some just do a quick look through of this s o. We know that we're passing that event were preventing the default of the submission of the form we're setting up grabbing those variable values over here. And now we're posting over. We're posting to the Earl, which is test stop PHP. We're picking up. The variables were returned back. All this data within the function and we're actually going to utilize this return data. We're parsing it as Jason, and then we're putting that Jason within our HTML. So let's ah, let's try the suit and just going to take another quick look here. So we did have the status, so we haven't I d status. So maybe what we want to do as well is we want to create that same status here that we had earlier. So just gonna do some conversion here to be we're gonna be converting our javascript into G query, so just need to specify believe it was called status. So now that status is going to get the inner html of processing and we also down here. So we had connected to the database If it's connected and so on eso we had sent that object eso I think this is Of course, we need to update this as well. So maybe what we want to do. Update this with the returns status. And then over here we might wanna have some additional information. So first last, So maybe to create it. And we'll just do some surrounded brackets there and couple plus signs to concoct innate that through and were returned back that I d information. So now let's go back out into our web form and what we've got on air there and line 34. So let's ah, let's fix that up. There s so apparently I think I probably added in an extra bracket there. So let's just do a quick update of this to make sure that I had a plus on equal sign instead of a plus sign. So that was causing that issue. So it looks correct. Now I refresh that. No errors. Good news. Eso Now let's see if we can insert some data into the database and there we go. So everything looks good. We will get that returned. I d back now. We've made our connection to the database. When I refresh this, we have our new entry that we just submitted. And this is all done through G Query and Ajax without any page refreshes. It's a really nice thing about it that we don't have to do page refreshes and we can submit data. Keep providing a really nice seamless user experience with no with no page refreshes submitting information into the database s Oh, there we go created 36 going back into the database and we have that same information submitted. So the next lesson I'm gonna show you an easier way to do this. Now with Jake Worry, there's a lot of great functionality and creating Ajax calls. They have one that can actually do Post gets Jason and a whole lot more, So I'm gonna show you how to do that one in the upcoming lesson 26. 38 AJAX method in jQuery: In the previous lessons, we've explored several different J. Corey methods on how to do Ajax calls. Now, in this lesson, I want to introduce you to one that actually does all of them. So we don't have to be specific. Forget Post and Jason Data, and we can get retrieved back that Jason Data just with one simple method. So this is a typical Ajax method for writing. Ajax calls asynchronous calls over to a Web file and retrieving back that information, and it actually gives you a whole lot more functionality as well as information that we can return back all of the different, all of the different content. And we've also got the ability to check to make sure that we fail their done and so on, so really powerful. And I have saved the best one toe last. So let's make some updates and right are Ajax call. So this one in fact, is called Ajax, and this is the core method. It's a very heart of all of them, and this is the one that most of the time that you're gonna be using s a lot of times, depending on what you're trying to accomplish. You may or may not try to do something different, but this method is it's actually holds the most, the most, the most flexibility in the method. I guess we could say so. Structure is going to be slightly different because this is gonna be an object type structure. So whereas previously we had the yarl's, the variables that were passing so within the Ajax method within this Ajax object, we need to specify the URL. So essentially we do have the U R l here within the variable, so we can just specify that. And this is essentially formatted the same way as any other Jason or JavaScript. Object. So you are L u r l. And here we pass over data. So we specify that the pair of value the name is data. And then now we need to specify the value that we're passing over, so that's contained with them variables. We need to also specify the type, So this is where we can do either post or weaken, do get. And this is why I said it's really easy to make them and change them just using this Ajax method. So another thing that was missing within the posts. And that's really nice within Ajax. And I do mean I did save the best for last because this one truly has a lot of really cool functionality on, and you typically will see this one used the most so data type. And here is where we can specify the type of data that we're expecting to get returned back . And this is Jason data. That's the data that we're expecting back. So once we do this call, we actually have some callback functions that we can actually listen for. So typically, the one that we listened for is success. But we can also listen for failure and so on. So let's take a look and see how this one looks. So we've got several different options here where we can place our success in Here s Oh, this is just another parameter within this object that we're creating. So we've got another one called success, and this one is a function on its own or a method on its own, and success retrieves back data. So all of this stuff that we did over here, we can pull back in success, and we can essentially place our success information over here. So let's save that. And I believe I could get rid of all of this stuff here. Somebody clean this up a bit and make sure I don't have any double brackets there, which I do. So let me clean this. Do some more cleaning up with this. So now what's happening here is that we're essentially sending over the u. R. L were specifying the type, which is post we're sending over the data. And we're also specifying the data type that it's Jason Data that we're expecting back. And we're actually got a method that we're doing on success and similar to success. We can also do one on air. So if there is an error that we can actually run this function and have something happen if there's an error so the error actually is gonna return back all of this data as well. So the same as success. And from here, Maybe what we want to do is console log. So I'm gonna take this information. I don't need to parse that Jason data anymore because I believe it should be coming through parsed and update this to data and update this to data. So let's ah, let's try this out and see how this works. And I just started in one more bracket there. So it's tried out now, So refresh the page. And now let's, uh, let's do a basic submission there, John Smith, given an age of 77 let's submit this and see what happens. So we see that our information because we were we specified that we're expecting Jason Data to be retrieved at first Data objects and let me make this a little bit smaller so we can actually see what we're consul logging out. So this first object here is the data we can see. That's nicely formatted as Jason because we specified the data type as Jason. We didn't do that. Then we wouldn't get it for mounted as Jason. So the Jacks method is smart enough to know that Well, we specify Jason to parse it as Jason Data. So that's what we're expecting. So, actually, we have you access to that, and that's what we're doing over here in the output. We've got data first data I D. So we're out putting that within the Web browser for the user after they submit the button so that they can see that information being sent over to them. We're also picking up the status. So let's update this to status and the status to be success. So as long as we've made our connection, status is success, and then we've got the X h r object. So we've got all of this information. We're picking up the Ready state. We've got the response text and so on. So if we still needed that response text that we can utilize it there. But there's another interesting one here. We've got response, Jason, and we see that this is actually taking over for the response because we've specified that we're looking for Jason. So this is actually what gets returned in here. Eso all of the same information again available in the exits are, but it's within this method, and then we can access it so we can check the status to see its status 200 same thing as the ready state. So the same as typical JavaScript method. But we've we've got it wrapped within G query, and it does look a lot cleaner, makes a lot more sense, and is a whole lot more user friendly. So you're probably wondering Well, you know what happens if by you, Earl, by chance there's an error with that. So let's see what happens here. So when I do make my submit, we actually see that we tried to post to it. The pages not found. We get back all of this information in the object online 40. So let's take a closer look at that. So the data that gets returned back is that ready? State four response text. So we actually are getting some response text back, but we see that where not able to find anything statuses for a four status text not found. Essentially, we know that when we throw the error, then this is what we're out putting. We're not out putting. The success were out putting the error information, and we see status now is error and console log is out putting X h r, which is actually not found because we didn't receive a response back from the server, and we see that we're stuck here on processing. So technically, if we updated status here, then we would see that air show up. So let's try that again. Refresh it and we see that we got that air showing up. So this is good. This is really good, because this actually give us gives us the ability to control if there are any issues or errors that show up and handle them appropriately. Which is which is a better user experience as well as you can log information. And so once when the errors get throwing. So you could actually have some additional information as to what's actually happening within your Web page, and the users can actually see some kind of information coming back to them if there are some errors produced. So this is the Ajax method, and as we can see, it really does simplify the process. And I know I went through all of that get and post methods, but in case you are just using those ones, if you're looking for something simple and straightforward than you could use those ones. But if you're looking toe have one that could possibly be changing dynamically. Maybe you want to have one that can kind of be more flexible. Then you can surely use that Ajax method above the other ones 27. 40 jQuery AJAX options: in the last lesson, we showed you how we can introduce an Ajax call. So let's build this out a little bit further. So there are actually some additional options that we can utilize within this Ajax call. I'm gonna get rid of all of these consoles because we're technically, we don't really need them. So looking at our Ajax call So we've got Ajax over here, but we can actually attached some additional options to this. So by doing something like this where we could do and wait for it to complete eso Essentially, this is a callback. Whenever the jacks completes, then we run that done and all the content contained within the function here. So let me show you what happens here within done. So essentially, we're gonna wait for Ajax to complete, and I'm gonna actually Consul log that all the information that gets returned back when it's done and when it's completed, and I'm also gonna add in. But we can change that output to so that status output is gonna change to done some nice and big. So we can really see that. So now let's check this out and see how this works out. So right now we've got our web form there, and we've got a bunch of data here that we're gonna be sending over to the server. We hit submit, and there we go. So now you know, it was really quick there, but essentially, what happened here is that we had a call back whenever that Ajax Ajax call completed and we actually had our second opportunity to pick up our data object. So this was actually coming from that console log that we had over here in line 42 within that done when we're competed, That done option. So this is another optional one that you can add in. We've got several other ones that we can add a swell. So we had done, and we can just separate them out and add additional ones just by doing another option here . So in case it fails, we've got one that we can that we can fire off. So in case that's fails, I'm gonna just copy this and maybe I do feel so if it fails, then we're going to see that that content within there is now failed. So let's let's actually make it fail. So I'm gonna change that, You, Earl, refresh it. Hit, submit. And we see that we got that fail and we show a nice big fail there. An interesting thing about that returned object is we've got that ready state response text , and we see that we've got status for a four. So if it fails and we got a status of four or four, then we can do something all this weekend. Show the user some information we can like that and so on. So a lot of different options there on fail. We also have another one, too. That's another commonly used one, which is always so. This is another option that you have using that Ajax call. And I know there's quite a quite a few different options here at this point. Eso don't go to overwhelm with all the different things that we've got happening here. But it's just important to understand that there's just quite a few different things that we can do with our with our Ajax calls here. So instead of adding and fail and independent and what it's doing, its inserting content to the end of status and completed So this one or maybe I shouldn't put completed but post Waas trying or something like that because this one will always run . Doesn't matter if we fail or not. Let's refresh it. Try it again. We see Post was tried and we see we get another shot at that response Information that gets called back there. So let's update this and update that file name to be correct. Now save that. Refresh it. And now we've got our submit s. We see we've got done Post was tried. So a few different options there within our Ajax call. So the next lesson I'm gonna show you how we can use G Koury with forms and even streamline this a little bit further. Eso streamlining our Ajax call even further with some G query. So that's coming up in the next lesson. 28. 41 Clean up JavaScript Tips Tweaks: one of the reasons I like using J query is because, as it says, it simplifies your JavaScript eso over here. We've been looking at just different options here to get our data from our form. And I have to include this because this is just another really cool amazing functionality within J query. So we saw here how we had to list eight pick up all these values here within all the input fields. So what if we could simply pick up the input fields where all those input fields from the test form and actually structure them within this type of object so that we could easily send them over via and Ajax call. And that's where serialized comes in. So let's so let's do that. And so you a simple example of it. Eso First of all, we need to identify that where we're picking up this data. So we know that whenever the user tries to submit test form, then we're gonna pick up that data and try to send that over. So we can also use this because currently we know what's actually being accessed. But for now, let's use the method serialize and then we'll shorten it even for their. So we can serialize those variables and, ah, Consul, log that out so that we can see what's contained within their. And now let's go out to our Web form and check the suit and see what happens when we hit. Submit, refresh the page hits submit, and there we go. So we get it serialized, structured, ready to go. And we're able to sit at that data really easily to the server back end. So let's try a few other things here to simplify all of this that we've got here. Because, of course, when you're writing out code, the less lines of Cody are writing the better, of course. So let's create remove some stuff and simplify it. So instead of test form because we know we're clicking test form, we know that it's the current object so we can use this so serializing this. Now let's try that Oates and put some test information in here. Submit and there we go. So now we're actually submitting that information. We see we're still picking it up in the database, and while that's pretty big, so let's bring it back down to normal size eso There's our data that we've just inserted within this road test and idea number 43. So coincides with the I D. That we've got within our database. Eso that actually simplified some of this information and we can even do it further. So depending on what your preferences, we can do something like this. Get rid of a few other lines of code, get rid of that console there and now eso weaken, streamline it even more, even stuff like here that we're not actually utilizing. We can get rid of, so or not cluttering what were returning back. So maybe over here we might need some of this information s so I can just get rid of that. Exits are, and we don't actually need all those done fail always. But I'll leave those in just for the sake of leaving that in. But of course, if you are truly, really try to streamline your code word and you're not utilizing, done, fail on always, and you're picking it up within that success or the error over here, you're catching that information and handling it over here. Then you don't generally need to have all of this excess options. So Onley add in what you intend to use. So that's the general rule of thumb when it comes to Web development. Eso Let's try that again now. So we've got a lot of Mike Smith's in our database. So this one So it stands, it is going to be 505 years old s Oh, there we go. Submitting the data, retrieving the data back from the database. Now, when we go up to our database, refresh it. We'll see. We've got that really old Mike Smith sitting there at the end. So what we've covered off within the past lessons has shown us that we can do these asynchronous calls over to our server, send some information back and retrieve back the results and do something on our web page. So so far, what we've been doing is just sending that data over. But what if we actually wanted to update our output? So maybe we have a list of users and we want to update them. We want to check them in, uncheck them and ah, whole bunch of stuff. So we get actually, do this all with Ajax so we can have our output here within the Web page, in sync with our database and let the user interact essentially with our database through Ajax and through PHP. So this is gonna take some more PHP coding and essentially some more formatting of our Ajax calls. So I'm gonna show you how to do that in the upcoming section. 29. 43 Use PHP to output MySQL data from a database in JSON format: in this section, we're going to be putting together what we've learned in the previous sections and building out an interactive application that's actually gonna bellows to actually add content into our database. So add additional users, and we're also we've got an option here for checked so we can update their status. We can check them. So essentially a checklist of all the different users that we've gotten their database. So the first thing that I actually did want to do is I want to clean this up a little bit s Oh, this is all those inputs that we had from the previous database. So quite a lot of stuff there. We've got some blank ones there, So that's really not ideal. So I'm gonna just clean those up and go back Teoh the first column. And I know we still have quite a bit happening here, So maybe checkoff thes, and I'm going to bring it back down to Onley, have a few few people here within our database, so I don't have a lot of duplicates and so on. So now I've got some people here in the database and the first thing that we need to do in our application is list of our database content. So let's open up our editor and make some updates to our application that we've built been building out. So what I'm gonna do here is I just comment this out for now because some of this court were actually gonna be able to repurpose eso. That's why I'm gonna keep it there at the bottom and work with creating some brand new coat . So I did say that the first thing that we want to do is run an Ajax call and pick up all of our output information. So I'm gonna place this within a function for now. So just in case I need to run this output again and load all of our data, eso is a good thing to have it within a function so I could call over to my output at any point and run this functionality. So run this essentially, this Ajax call to pick up our data from our database and actually output it within maybe this output area. So I would put one. I'm gonna update this to be output, so it's a little bit cleaner. I'm also gonna keep this form in place because we still need a way to actually submit user information into the database. Eso Ideally, we're gonna have to make some updates to this A swell, because now, whenever we submit the form we need to run, mark my output as well and make sure that all of our data is in sync. So now we're gonna do an Ajax call and pick up our data from our database. So I'm gonna build that functionality in here. So this is just get database contents. That's what we want to do here within this function. Eso just looking at this right now. What I first need to do is create a PHP file. So I already do have one that I was working with, but this one, actually, we need to make some adjustments to it. So I in a save this eyes and I'm going to see that as maybe just call it data dot PHP. So essentially, what's gonna happen here is we're gonna search through our database and put all of our content into honoree and output. It s so that it can be consumed through the Ajax request and actually put within our HTML so we don't need insert into because this is gonna be just retrieving that back that data. So what were just doing here is we're gonna be selecting that information. So we're doing a select so I can get rid of most of this stuff here, and we're doing select all from names. So that's all we're doing here. Select all from names and we need to create a loop here. So I'm gonna make this a little bit bigger so that we can see that we're still going to need that, Jason, but encoding that a rate within a Jason format. So I'm gonna make an update here as well. So I'm gonna just do an array because this is an empty A race. That's another way to set a default arrayed within a Are are that that variable? So now that we've got our sequel here, we've got our connection to the database. So let's initiate the while statement. So this is gonna allow us to actually loop through all of our information. And first of all, maybe we should add in another function here, so I'm just gonna do check to see if we've got a result and we're going to see that the result is gonna be equal to So just like what we did over here where we did the con eso we utilize that database connection and we initiate a query here. This is where we could specify the sequel and even to simplify it. I know I said that simplifying is the best way to go. Eso Sometimes when I'm doing these demonstrations, I like to keep it a little bit longer a swell so that its adjustable. So I mean, either way is gonna result in the same thing. So we're gonna use just that variable that sequel variable pass up into here. And now we've done the check here. Eso if this comes back true. If there's some contents in here that what we want to do is loop through those contents and output that content as Jason encoded data. So we're just echo that so copying that information, I can get rid of all of the rest of the stuff here and just include it within that while eso while so we're gonna do while role and we're gonna equal roll over to the result and the result is gonna use a built in function, which is called Fetch Array. And what we're gonna fetch is the my SQL associate ID data from the result. So this is essentially going to retrieve back and add in that result information. And then within this wild loop, here is where we're gonna update the array data. So you create additional array data with the contents that we've got within role, and then all together, we're gonna output this as output it within our file. So now let's go over to data dot PHP and we'll just check it. What is showing up here? The data dot PHP. So we do have some in some areas there. So let's update and fix those errors. So actually this instead of a ray, it should be weaken. Do the associative array value over here so I can update this and get rid of the argument that we're passing here. Let's go back out here, refresh it. So now we get our Jason formatted data at data dot PHP. So it's always important, just like we just saw to make sure that our data is actually out putting properly within the page before we try to make our Ajax call. And in this case, it looks like everything is coming out properly from the database. And next, we're ready to actually make our Ajax calls and utilize this data. So take a quick look. Makes her that your PHP is actually a putting your data properly and before you begin with your Ajax calls. So this is all we need to do to pull out our data from our database. So in the next lesson, we're gonna jump back into Ajax and start utilizing this output content. 30. 45 getJSON to get Database content: So now that we've set up our data dot PHP file, we need to pull that into our JavaScript in order to utilize this information. So let's go back into our editor and output some of this information. So we've already built a function that contain this functionality. So now we just need to add in Ajax and what is the best Ajax method for what we're trying to do? So of course we could just use Ajax. But let's use get Jason, because this is gonna be the shortest path to accomplish what we want to do. So we've got the u R l here that we need to specify, and then we build up the function, the method here on we're retreating back some data, and then what we're doing with that data, we're gonna be able to, uh, to run some code there. So I'm just gonna clean this up a little bit. And for now, let's just console log out that data just to make sure that everything is working properly there as expected. So essentially, what we should see is that we should see all of the contents coming out of data dot PHP output as a JavaScript object. Let's go over to a browser refresh. And so there we go. So we've got the all that information coming in as an object and that we can make use of it within our JavaScript. So let's open that up and notice that we do have quite a few objects items here and if we were to actually create another one, so this will still work. Or maybe it doesn't but, um, that's still submitting it over to test, but I guess it's not actually submitting it into the database, or it did. But it didn't out in the names because we're not formatted properly because it's not actually looking for those, because, remember again that we did change those. So I do need to make some updates here and give him an age of 33. So I've just got some or information. So that's all I was doing. There is just adding in another roll off information here and now when I refresh so now I've got the three objects, so we see that the number of objects potentially changes and we actually coming in. We have no idea what the length is and So what we can do is we can create a loop through and loop through all of that data and output it as we want within the format that we want within our HTML So we can accomplish all of this since we've got our Jake Worry library here. And J. Corey has some really nice methods to accomplish this. So we're gonna be utilizing G query to create that output. So that's coming up in the next lesson. 31. 46 List database contents on webpage: in the last lesson we saw that we've got a bunch of objects here. We've got an array of objects and we need tohave await Actually loop through all these objects. And this is where Jay Query comes in. We have the ability to loop through them using the each method. Essentially, this it aeration. It doesn't federation function through a bunch of objects, both arrays and objects. So essentially, we've got an array of objects, so this is gonna be on ideal solution for us. Eso where we do here is we place the data. So the data is what we wanted toe loop through, and then we build out function. And within the function, we've got several different parameters that we can pass through there. So initially we've got the object, and now we've got a function. So we've got a number and objects and we could also do a call back as well. So, first of all, let's set this up as I and then we're going to look through all the different items as well . So let's add that in here. And let's, uh, let's essentially, we're gonna loop through them and we're gonna Consul Law get all of this information. So first of all, let's take a look and see what I is. And also, let's take a look and see what data I ISS So data and square brackets with I in the middle . So let's go into a browser and check this out. So we see that the 1st 1 that I is essentially an increment in value. So it starts with 01 too, until we hit the end of all the different items in the array. And the 2nd 1 here is when we do data and we access, I is we're actually accessing that information that's contained within that item. So the business is an array. We need to look at the content within that every object. And we see that interesting thing is here that we've already got a formatted in an object so we could potentially output content here now at this point. So if we wanted to list out, maybe if want to list of first name, we want to list that last name. We could just simply do period first and captain eat all of this together, and then we could do last. So let's try this and see how this works. So just updating this to match our Jason data and let's go into our console and now we can see that we can output all of that information that's contained within our database. So we've got her first name, last name, and we can also put age as well. So I'm gonna add in another option here can contine ating the age information. Maybe we'll do some brackets around there and break out of our string out in another string . And I think that brackets is actually adding an extra coats there for me. So let's add an age and take a quick look at this. And I believe that this should be correct. Fourth in the console anyway. So let's see how that turns out. So you can put the age in these rounded brackets. We've got the users names and so on. And if we were to add in additional users, then we would see that they're showing up within the database. So, ideally, this is what we want. We want to be able to output all this content within our HTML eso The next step is to just append it into the proper container, the proper holder and output that and create that within our database. So let's ah, let's create that now and open up her editor. So we're looping through all of this output information. We've done our Ajax call, and we've got all of the contents here ready to go. So let's simply append them to where we want them to sit. So this is gonna be output where we want them to sit. So let's creek that now. So we've got our output and we're gonna be able to create a whole list of all of this information here using append and what upend essentially is gonna do. It's going to continue to upend that information, and we will need to make One important update here is that we're gonna have to actually empty output before we start a pending it, because then we can will continuously every time we run this function will continuously upend additional information. So we don't actually want to be able to do that. So I need to make an update for their But before we do that, I want it assign a div so essentially a container in html for this data Because what I need to do is I need to make it clickable. I need to be able to make what Remove and figure out what? Uh, which which item that users actually clicking on. So this is this is what I needed to add in and utilize within my JavaScript. So let's create a data value eso attributes within the DIV. Call it data value. And then within here is we're gonna break out of the string here, and I know I've got quite a few quotes. So essentially the 1st 1 is a double quote. The 2nd 1 is a single one breaking out of the string. And then within that single one, we're adding it together there, and I wanted to add in the I d value that we're returning back. And this is going to be important because this is the way that I can identify the particular item within my database when I wanna remove it where I want to work with that whenever the user clicks on it. So let's add that in now. I've got the data and I need to finish off this javascript here or the HTML. So let's just put a diff here and go to a browser and try the suit. How will we load the Web page? We get all of the users, and we have access to the users within our Web browsers. We no longer need Teoh access it within the console because we can see the users. We can see our user list. And this is the starting point of being ableto work with that data. Because once we can see it, then now we can make some something happened whenever we click on it and we can apply some updates and again this could be done through an Ajax call, so that is coming up in the next set of lessons. 32. 47 Code Tweak and options: in this lesson a watch. Apply some tweaks and updates to the code that we created within the previous lesson. So much as with quite a few different things here within JavaScript, there's actually different ways to output are content. So when we look through for each, the first value here is the index value, and that's were able to call over to data and then list out that index value. So essentially, this gives us that array value, were working with that original data object, and we can pull out that content there as we looked through it. So there actually is another way to do that because essentially, item is going to be equivalent to the entire object. So when we go and we look at our web page, we see that we're listing out each and every item here as an object. So we're picking up all of those items in that area as we're looping through them, and we actually have access to that so we can actually simplify this where we can do something like item, and actually this looks a lot cleaner. But again, the choice is yours, and depending on how you want to utilize this and output your content, you can use either one. So remember again that this is the index value and this is the whole item, which is actually the object that's contained within the rate. And as we looked through them that we have access to you both of these values here and we can use them toe actually access an output or value within our loop here. So one of the things here that potentially is an issue and that we should update is if I run this ary again that I get another listing. So the same listing, I get it running again. And if I run at multiple times. So maybe if I've got some dynamic interaction within my Web page giving the user the ability to run this function multiple times, we're going to continue to upend. So even though upend is a good way to go, it's not usually ideal because we can continuously keep adding on content. So there are some built in functions within J query where we him remove out and clear out some content so we could use empty potentially eso this even though it runs twice, we only see the output once. So that is an option within J query. And we can also just overwrite that HTML. So sometimes this is the best option, especially if you have a header. So maybe people list is our header here, and every time, instead of actually emptying it out, we want to rewrite it with people list and then have the loop here, loop out all of the content that we want to present their. So in this way, it provides us with a much neater way toe loop through that content and output it within our HTML. So this is just a quick tip, and this is just different ways to help with the content. And again, depending on what the scenario is, you can use either one or as I've done over here. Now I'm using a combination of both. So the next lesson we're gonna build this out a little bit further and add some additional options here. So we noticed that we did put a div with a class of r e m o. So this is our class that's going to identify each and every one of these elements, and now we need to place some dynamic capabilities into these elements so that whenever they get clicked, then we can actually do something with this particular content. So this is coming up in the next set of lessons. 33. 49 Add jQuery Event Listener: in this lesson, I want to add in some click capability into these dynamic objects that we have just created in output in the output element. So let's go back into our Jake worry, so it doesn't actually need to sit within this function. But it does need to sit within the Jake worry. I'm going to remove that second output because ideally, we only need to have one when we're running this. So let's add some event listeners. And usually I like to have the event listeners before I have the functions. Eso This is, uh, gonna be an event listener for the elements with the I. D of output and whenever it gets clicked. And the reason that I'm doing it this way is that I'm taking the parent and I'm gonna add in event listener within their. So this gives me the ability to add different event listeners so I could do click in this type of format, and I want to add the clicks on Lee to the elements that have a class are, um oh, so this is where we can be more specific within our click element. So that's a class. So we indicated with a zero or with a dot and then we need to provide their functionality. So the function is there, and then this is actually it's gonna happen whenever that gets clicked. So let's Consul Law get something eso Every time one of these gets clicked, we want to pick up that data value. So essentially that item, I d and maybe make some use of that. So we're gonna use this and we're gonna use get attribute so built in method to get attributes, contents and the particular attribute that we're looking at is called data value. So let's check this eight and again ensure that things were working properly. Someone we list them out. Now whenever I click on them, I can see that I've got that attributes i d. And now I can utilize this in another Ajax call sending and posting some information over into our PHP file and maybe who want to update or delete or whatever we want to do. We can do this at this point, so let's actually what we wanted to do. Let's toggle this value here this checked value so we'll tie their toggle upto one or zero and that depends on if the user clicks on it. So by default we see that they're all zero. And if they're zero, maybe we can add a specific class or something like that. So we're gonna add that in and show you how we can make this dynamic Where if it gets clicked, What? By utilizing this, I d. We send on Ajax, call over to the database update checked to a value of one and once it gets clicked again. So if it's unclipped, we can toggle that value, so either it will be one or zero. So all we're gonna be doing essentially is toggle ing that value eso if it's one, then we click it and will change it to zero. So I'm gonna show you how to do that in the coming lesson. 34. 50 Post AJAX with jQuery on click event: So in this lesson we need to build out a PHP file because we want to make the ability to either toggle these on or off eso depending on if it's toggled. So if the item has a checked value of one, maybe we want to add in a different class, and if it has a check value of zero, then we can update the different classes. So let's first of all, let's add in a class that we can utilize so that we can show you whether it's been clicked or not eso And then when it does get clicked, we can show a different class. So maybe will highlight them the ones that have been clicked and that have been checked off . So we need to listen for, ah, value for item checked. So if an item and let's just double check with the database to see what we've called it, so I've called it checked, So we're going to see that if the value checked is equal to one, then we're gonna add in another class here, and if it's here, or if it zero, then we're not going to do anything. So if item checked, then we do something, and if it's not checked that we can just leave us. Is eso Maybe we can set a variable that has so a default class or something like that, and we'll just put in just a blank space here for now. And if it is checked, then we'll write a value to the default class and we'll call it highlight and essentially what we want to do now within this string. So we've got that class there. So let's add in another class and eso within here is where we're gonna add that variable. So what's gonna happen here is either where if the item is checked, we're gonna highlight it. And if it's not, then we're just going to leave it blank swimming toe. Add in a style here and swell and in something for the class highlight. And maybe we could just do something simple, like background color and set a background color of yellow eso. That's our highlight there. So let's go into our Web browser and see what happens So everything gets highlight so because it's picking up value there. So we just got a double. Check that and see if the value because this isn't bullying. So if the value is one, then we highlighted, so refresh it. So nothing is highlighted. Let's go into our database and manually update them. Eso this one we're gonna set to checked, go back and refresh it. So this is working exactly as we need it to. So now whenever we load this content, if it's been checked off, it's gonna get highlighted as yellow and everything else is just default colors. So I'm also I'm going to get rid of this status here because at this moment, we're probably not going to need it, although we might need it later on as we send data into our database with another Ajax call . So this Ajax call right now. We added in our event listener here, and we're ready to pick up that I d and send in an Ajax call. So this Ajax call is gonna be simple Post, and we're gonna post over to another file where we're gonna update the content of our database. So let's, uh we're gonna create that PHP file. So we're call it updates dot PHP And of course, we could become more creative here. And Passover Some values and so on. But for this purpose is of this course, we're gonna create separate PHP files with all this different functionality. Here s O once again. So we've got post there to update that PHP do function and we're gonna retrieve back that data. And now we need to specify that content. So we do need to specify the data that we're sending over via the post, and then we can do something with that returned value here from that Ajax call. So let's set up the ability, Teoh first to pass over the value. So we've got our file and now we need to set up variables and s in this case, we're going to use that VRs again and create our object here that's gonna contain the variables that were passing. And we only really need to pass one variable. So this is the update I d. So I'm gonna call it you, I d. And we're gonna pass over the value that's contained within here. So this is the value that we want to pass over. So all we need to do is Passover the I d off that we've picked up from our loop here from our database, and we're gonna pass that I d back into update that PHP. And we're going to do a simple update of the database, and we're gonna toggle that value so currently, depending on what the value is, and actually we probably need some additional information. We probably need to pick up the current value as well. The current checked value eso we can add that in as well. Or in this case, we can check to see if the highlight class is present. And if it is present than we know that the checked value is one. And if it's not present that we know the check value is zero. So not respect. We can add in that value for checked, depending on if this particular element has a class named highlight. So So you had to do that in the upcoming lesson. But for now, let's finish off this post here where we're passing over this value here so v a r s and function. And now it's just Consul log the response, their response data, and we still need to build that PHP update file s. So I'm gonna just utilize the one that I have down here. So I've got data dot PHP because it's gonna be very similar. I'm going to save it as update dot PHP. So to create that really quickly, we just Essentially, we can do the same thing that here, we've got a database connection. So instead of select all we need to update accordingly to the i d. But first of all, we need a way to actually pick up that information and because it sent via post, we can use the PHP post to pick up the information. So for now, maybe what I'm gonna do is I'm gonna get rid of some of this content here, and I'm simply gonna use the data response and echo out the value that we're picking up as the posted variable. So let's set that up now, and I'm gonna call it you I d. And again, remember, I'm passing it as you i d. So I need to specify that this is post value and I'm looking for request variable. You I d. And I'm gonna place it into that. You i d. And in this case, I'm going to send it back as the response there. So whenever they get clicked, what's gonna happen? I'm gonna console, log it this data value and then I'm gonna loop through, create my Ajax call to update dot PHP update dot PHP is gonna pick up this attribute value that I'm sending over in the request variable as post you I d. And it's gonna actually just this stuff is just going to get ignored. And then we're gonna echoed that value for you. I d. So let's go into our browser and try the same. So opening it up in our browser. We see we still list out all of these objects from that original loop where we pick up the database content, and now whenever I click on it, we see that we've completing that full loop that Ajax call sending it over to the PHP file . So it's ready and set to go to update our database and the 1st 1 that we're doing over here . So the first value here is what the object I d. Is that we've placed within this element and we can see that here as a data values, we've got data value five data value for and these are in line with the i d values for the Rose or the I D. Values here for the different rose from our database. So the last one there is 45 as a data value, and whenever we click it, we see we're picking up that value of 45. So in the next lesson, I'm gonna show you how to update the PHP as well as how to find it using J Query. If a particular element has a certain class, and then we're gonna utilize this to see if it's already been checked and were toggle that value for checked. So that's all coming up in the next settle essence. 35. 51 Setup data for AJAX post: So in this lesson, I want to cover off how we can detect what the checked value here is within the database, and I want to actually toggle that value and send the opposite. So if it's a one, what's? That's a highlighted value. I want to send a value of zero using the Ajax call. And if it's a value of one, which means it is highlighted wants and zero and a zero. I want to send one. And I want this to alternate as they get clicked and also update in the database. So there are obviously a number of different ways and approaches to do this. But because this is predominately focused on JavaScript, I'm gonna leave a lot of the heavy lifting in JavaScript and just simply utilize PHP to stew a simple update of the database eso simple query toe update the database. And that's all we want to do. So we want toe actually do all of the calculation detecting and so on within the front end . So let's now take a look at our editor and see where we need to add this code in. So with geek worry, they have a really nice method to pick up if ah, class is available within an element. So we do have this as the element whenever it gets clicked. So we do have the contents of that value sitting in here. So let's first of all, let's create a variable to contain this information because there's going to be quite a bit of changes here as well. Eso I'm going to try really minimize the lines of code that I'm going to be doing for this . So, uh, I'm gonna break it apart and added in bit by bit. So first of all, we're going to do this and we're going to utilize the method called Has plus And then within the argument, we need to specify what the class is the class name that we're looking for. So it's a simple as this that we're gonna get a value in to see when we're gonna consul, log out the value of C. And so this is gonna just do a quick check to see if the highlight class has been added in to the element that just got clicked. And if it is, then see will be true if it's not there and it will be false. So let's try this out and see how this works. So make it a little bit bigger and actually already clicked that so false. Click it true, false. So that's working properly. So now what we need to do is we need to convert these Boolean values into a one or zero, because unfortunately in the database were using numeric values. We're not using the Boolean values. If we're using the Boolean values, we could simply target those and pass that. But we wanted Teoh use numbers for some reason. Eso let's toggle those values either toe one or zero. So there's a really easy way to do this. And what I can do is I can write C and equal C to whatever the value of C is. And if it's true, then we're going to give it a value off one. And if it's false, we're going to give it a value of zero. So I am breaking at apart into multiple lines of code, and obviously I could just take this and place it in there as well s. Oh, this is just start so that you can get a better idea of actually what we're doing and what the current value of C is, so I can even add in a consul log up here and we can see the value of seat changing. So now when we click it, we see the first value of C is false, and that's equal to zero. It's true, it's equal toe one. So that's exactly what we want. And now, lastly, the other thing that we want to do is flip. Those values of C is equal to one. We want to flip it over to be zero, and if it zero, then we want to flip it over to be one. So let's create another console log here, and we're doing quite a bit here before. Actually, essentially, we're prepping it to send this data, and there's variable data over eso. This is something that sometimes you need to do in order to get your data formatted properly on the front end before you send it over the back. And so when we are trying to keep the back end fairly simple and straightforward, eso that if you're using another back end code, then it's really easy to integrate this as well. So what we want to do here is due si is equal toe one minus c. So when we think about this logically, if C is equal to zero than see one minus zero will be one. And if C is equal toe one that's one minus C will be zero. So that's the logic there, and that's our probably one of the ways that we can flip it and actually gonna use another weight as well. But we see here that are end value is gonna be the reverse of what it's starting out with. So now, actually, I did want to do it another way. So this is just one way. That kind of makes a lot more sense. But there is an actual, shorter way, and just best practices usually do it a shorter way. So essentially, what this is going to do. This is a less common operator that doesn't really get used a lot. But essentially, it's gonna do the same thing as what we just looked at up there just short of format and already within that operator. So all we have to do is call this operator toe one, and it's actually gonna flip the values. So let's try that out now. And just to make sure that everything's working, because, of course, we want to make sure that everything is working properly and that our end value is the opposite of. So if it's highlighted, we want to send out a value of zero over to the Web to the back end PHP code. So everything looks pretty good at this point and I'm actually gonna move over that console , that variable information, and we're gonna place it within here. And here is where we can pass over another value. So we're passing that you I d and we can pass over a value. Maybe we'll just keep it as C and pass over a value of C. And here we can console, log out our variables in preparation before we actually send it before we send that Ajax call. So saving that and let's check it what it looks like now, So never I click it. So we're all ready to send that Ajax call. So we want to change the item with the idea of 5 to 0 and we want change for the the item with the idea of four we want Change it toe one and the item with the idea of 45 we want change it toe one. So essentially that's going to be toddling it. And when we reload all of this data making another Ajax call and reloading it, we're going to get that opposite. So essentially, it's gonna look like we're highlighting it. But this is all gonna be done through Ajax and loading content. So I'm gonna show you how to do that. And we're gonna update that update. File the update PHP file in the coming lesson. 36. 53 Update database sync with HTML elements: the previous lesson we looked at how we can set up and send our data over into using our post. So we're actually sending Teoh the update file. So let's update update PHP. So now we're going to keep it really simple and straightforward. So now we've got a new posted value called C just over here within this Ajax request. So we're gonna pick it up as a value of see, we don't need an array for this here. We're doing our database connection, sir, picking up our variables that are posted doing our database connection. And we don't need to echo that either. Eso Now, let's just create our sequel Query. So the sequel query is gonna be an update query. And essentially, what we're gonna do is we're gonna update the table called names. We're gonna set checked Teoh whatever value is contained here within, so I'm not not sure brackets keeps adding in those extra brackets until sometimes they're hard to see. There s Oh, I've got a single and a double quote there. And what I'm doing is I want to update checked to whatever values being passed here because remember again, last lesson we created and we updated. Whatever that checked value should be once it gets clicked. So all we need to do is specify which i d. We want to update. So do I. D and we'll just equal it too. So again, this is the same thing here where we've got a single quote and a double quote because we're breaking out of the string and we're picking up that information Here it was variable, that variable information snow. Just close that off and we've got our sequel Query ready to go. So now it's just a matter of initiating that query from the database. We're gonna meet, use our database connection, which we've called con, and we're going to query into it. You saying that sequel query that we just set up And if it comes back as true than what we're gonna do here is we're gonna echo out updated, and if it comes back as false, we're gonna echo out Failed. So let's so let's now try this out and see if it works. So refresh the page, which actually didn't need to do because we just updated the PHP. But it's always good practice to get into to make sure things are the most current version . So there we go. We see that were passed over, updated. Now, when I go into the database, let's see if we actually passed over to I d four and if we updated toe one. So there's I D for its updated toe one. And when we refresh the page, we see that the JavaScript now updates it and highlights it. So what we ideally want to do after we create this post is we want to run the function, my output so that we get the most current output available. So let's try the suit now. Refresh it. And now when I click it, we see that we get this really nice effect, and it's actually in sync with what's in within the database. So now we've got them all on its ones. I can go back out here and uncheck them and refresh it. And now they're all gonna be zeros. So it's Azizi Is that to make thes E Jack's connections within our database and we can update them, highlight the people and so on. That's within our list. So the last thing that I wanted to do within this project is hook up this ability to pass content into our database again and update the values and then also list out the new people , giving us the ability to have dynamic capability of adding people into our database and listing them out there and then highlighting them on the fly. So that's coming up in the next seven lessons. 37. 55 Add content to the Database: in this lesson. We're gonna apply what we learned in the previous lessons. But Ajax calls, and we wanna have the ability to be able to submit data into our database from our front end and then also listed out and click on it highlighted update it and so on. So what we need to do is create another Ajax call and this Ajax call is gonna get triggered whenever we hit the submit on the form. So let's open up our editors and go into our editor here and listen for actually the submit of the form. So we're going to do it this way. We could also create a button here, and we don't even need tohave a form, actually where we can create a button and we can pick up all these values. But the good thing about using ah form, actually is that weaken serialize that data. So that actually becomes a way to save some lines of code. And of course, just like with everything, there are multiple ways to accomplish these types of functionalities. So let's start by hooking up our test form here to the form that we had called test form. So that's by D test form and we're gonna listen for a submit on it. And whenever it gets submitted that we're gonna fire off the function with the event, object there and when we're gonna provide our functionality within here. So what's one of the first things that we need to do in order to create this form functionality? So going back to the form by default, this is an HTML form, and by default, if you hit submit, what is it going to try to do? It's actually gonna try to submit to test dot PHP. So we want to remove that capability. And the way that we do that is, we take that event object and we add the method prevent default, and essentially, this will prevent that form from being able to be submitted. And this is standard practice. Whenever you've got some content that you're utilizing it Ajax because you don't want to give the user the ability actually to be able to submit that that content. So next we're gonna use eso. We've got our choice of different Ajax methods within J query. So which one? Which one do you think makes the most sense to use in this case on just looking at the form . So we're gonna be passing over data posting data, and we want to retrieve some response back as a Jason response because we might wanna utilize that response information in a number of different ways. So, looking at this, the probably the best way to go is to use the jacks request. So the Ajax Ajax method. So that's Ajax. And here we need to specify. So this is eso here. We could specify the u R l that we want to submit to, and I know that we've already built that out here within test. So maybe we could just still utilize this, maybe rename it because it's gonna be different purpose. But we're going to see that as odd dot PHP go back into our HTML. And in this case, instead of posting it to test up Ph Peak, let's posted over to add dot PHP next, the data that we're sending over. So this data is already within the current object so on, and it's also we want to take all the information from the form. So do you remember how to do that? How weaken serialize that data. So that's a hint. There s So let's pick up the current object this and let's serialize that so that now it's gonna be broken down into a data object that we can pick up on the other end and utilize that within our post. So now we need to specify also the type of Ajax call that we want to do. And because this is data from our Web page we want to do on actual post of that data. And lastly, we want to retrieve back a response. And that response has a data type. So that data type that we want a retrieve back is gonna be a Jace on file. So this is where we indicate that we want to retrieve back Jason Data are Jason formatted data, and we're gonna listen for success. So that's Ah, the last item there that we're gonna listen to s o. We're gonna make sure that we're getting a success. And if we do get success, then we want to do something with the data that comes back within that success string. So over here, I'm just going to do a consul log of that returning data. And now let's Ah, let's try this eight and actually see what happens. Make sure that everything's working before we continue with this Ajax call. So open up our browser. Refresh it. And now it's just do a submit s. Oh, there we go. So we've got that object that gets returned. Eso the status is created. So this is the content that gets output from the PHP file. And now when we refresh it here, we see that we've got additional person here enlisted. So the last thing that we need to do eso we refresh the page, we see that we've got that person, they're listed. So we want them automatically toe list whenever this is completed. Eso We've got a few different options here we could use done. So whenever it's done, then we could run the function. We could also put it into the success as well. So probably that's going to be the easiest way to go. So whenever we've got a success there, then we just simply place that into our HTML code. So let's, uh, let's try that out. So Paul Jones and given age of 44 click it and there's there's a new entry and we can see that now we can click uncheck and so lot so on. It's a lot of different options here, and probably another one that might be a good idea to add in is option Teoh. Maybe remove the item so maybe be able to click it, but also be able to remove it out. Eso That's something else that we could look at as well s a number of different ways to do that. And I'm gonna show you one of them in the upcoming lesson how we can actually remove out items from our database. And that will be the last, that last option that we need to use in order to synchronize with our database. So you've got the ability to update. We've got the ability to add. And last week I'm gonna show you how to delete items from the database using Ajax. So it's coming up in the next lesson. 38. 57 Update Code prep for Delete: so this lesson. I want to be able to have the ability actually to update these items and actually delete them as well. So highlight them and delete them. So let's let's check this out and see what we can do in order to add the's this functionality in. So, ideally, maybe we should have a couple buttons here and one of the buttons checks it. Another one deletes it. So something simple like that and straightforward. So the problem here is that we're trying to do everything within the front end, and if we were doing it more in the back end, we could update various values within the Ajax call on drily, highlight different ways of sending data over and have our back end do some of more of the heavy lifting. But because for the purposes of this course, I do want to stay within the front end. So this is why we're gonna create another PHP file that's actually just gonna delete. We need to pass over the I. D of the item that we want to delete. So that's the only information we need to pass over. So there's a number of different ways to approach this, I could create another event object here and I could, as I'm looping through this data, I can have another div here or another span here, right beside it. And the span of this content could be just another clickable item. We could pass over that I d and just simply delete whatever ideas passed over. So that is probably the easiest way to go. But I want to make this a little bit more challenging because we're coming to the end of the course. And I wanna just demonstrate some different functionalities, different ways of thinking about solutions and applying different kinds of logic. So over here we've created thes classes. We've got this data item and so on. So what if I was toe actually add in a span here and this span, so the first span would have a value off check and close that span off, and then the next span would have a value of delete span and delete. And then within this functionality, it's instead of listening for clicks on all of that entire div with the class of r e m o, we want to listen for any clicks on the spans that are contained within that particular class. So this is makes it a little bit more complicated, of course, but it's gonna be a little bit simpler there when we're out putting our HTML. So the challenge now is to be able to detect where we're clicking and actually only have the spans as clickable items within this element. So we don't want people to be able to click on the first name, last name and so on anymore. We all wanna limit users to click on either the check or delete. So let's go up here and take a look at what the best way to create this functionality is. And we need to make some updates to this event event things click event over here. So let's, uh, let's update some of this code and quickly we're just gonna pop back into the browser and refresh it. So now we've got this check delete, and I know that doesn't really look that great. So I need to add in some styling as well. So this is, I believe, the only place of them using spans. So in the interest of keeping things simple, I'm gonna just simply create some content fear for span. So maybe we can add in some potting Just a little bit of potting I'm gonna add in a border one pick solid and maybe just do really a light colored border. So just so that there's something there, So let's see what that looks like now. So we also need to add in some margins as well Eso We need to add in some additional styling in there. So we've got the class of r e m O. So I don't want spoke focused too much time on creating creating CSS. But sometimes it does. It is important to kind of make it look a little bit neater and more presentable. So now we've got our list here. We've got check, we've got delete, but we're not isolating out which span is actually being clicked. So in the next lesson, we're gonna take a look at what we can do to isolate it those spans and be able to pass that information and depending on which one got selected, that we're gonna do different Ajax calls, So that's what we're gonna be doing in the coming lesson. 39. 58 Clean up Code use jQuery This: In the previous lesson, we saw how we can add in spans. And now what we need to do is hook these up, be able to detect which span was actually clicked, the value that's within that span and actually treat them as buttons. Because right now, when I click check delete, I click the person's name. All of this sends that same information and does that function where we're sending an update to the database. So we need to take that apart and actually create separate, depending on which span was clicked. So the first thing that we need to do is isolated those spans, and we know that there the parent class is r e m o on all the different spans. So this is how we can identify them within our HTML. So we know any with the class parent of R E m o spans than those of the ones that were after, and we want to prevent and provide this click functionality to those. So over here, what we've done here previously is we've got this get attributes. So this is a JavaScript weight of accessing the current object of this object, and this is actually different than the geek worry this, and that's important thing to note. So let's make some updates with this, and we're going to use G query in order to traverse through to the parent and get that same information. So the first thing that we want to do is we want to check to see what actually got Click. So let's open up a console log and within here we're gonna take the current odd object using J. Query this and we need to isolate that HTML. So whatever each team l value is within their we want to pull that they would and be able to see it So we can also do it via text as well. So maybe text is probably better way to do that. Eso that. We make sure that we're only getting that text value that's within that span. So now when we click it, we see we get checked, we click it again, we get delete. And I know we've got some other consul messages here, so I'm gonna clear some of those out so that it's quite a bit less confusing when we're clicking through those. So I think that should take care of the all those other consul messages, and let's quickly check that as well. So now I check, I click delete, and we see that we've got all of that functionality and notice that it's not highlighting anymore. And that's because this is now apparent. So we're looking at the child of the parent, so we need to move the needle back to the parent. So the first thing that I want to do is actually want to check to see if or whatever value that's contained within here is equal to check. And if it is, or maybe what we want to do is check to see if it's equal to delete, because I think delete is a little bit worse if it's actually checked. So if we have any errors, we want to make sure that we're checking for delete instead of just the highlighting of the check. So delete is less forgiving. That sort of trying to say Here s oh, we're going to check to see if the value is delete and if it is delete, then we're going to do something in here. So we're gonna consul log out delete process, and this is what we're going to run that delete process. And if it's not delete, that must mean that it's check. So we're just going to do an else condition there. And now let's summarize some of the stuff that we've been doing in here and place that Ajax call within on this else statement. So previously we had set the value of C, and we had checked to see if the classes there. So what I'm gonna do now is I'm gonna just shorten some of this, uh, cold here. Just clean that up. So that's going to do the same thing. We're gonna leave this toggle here as well. And actually, it's important to note here that we need to Travers and get to the parent because the parents the one that actually has the class of highlight So here we're going to check move over to the parent from the current one, which is the child of the remote class. Because now we've added in those spans eso this way. We're actually accessing the parent, so I'm gonna just beautify that quickly. And as I did see initially when we set up this project, we use the javascript weight of getting the attributes. So this is not gonna work the same way. If we do something like this, get parent. We're not going to still be able to get the attributes. So we have to use J query to be consistent. And this is how we get the attributes of the element. That or the first element that matches the value that's called dot data value. So essentially, we're getting that attribute of data value, and we're doing the same thing. Posting it in as you, Andy. And then, lastly, once we've done all of this, we're ready to go with our Ajax call. And now I'm just gonna update that. And now we should be able to do the update. And maybe I should console law, get something So we do see something so updated. So let's try the suit now and see how that works. So refresh the page. And now when we check, we get check updated. If we click delete, we get delete process. So we see that these buttons, they're not firing anything off while they are firing off the delete process. When we click on the person's name, nothing happens. So now we've effectively created two different buttons with two different possible Ajax calls. And the next lesson we're gonna build out that delete Ajax call, and that's going to be different than the update Ajax call. And as I've mentioned before, of course, there's a number of different ways to do this. But for the purposes of this lesson, I really want to isolate out all these different Ajax calls so that you can better utilize them and combine them and use them within your own projects. So in the next lesson, we're gonna look at how we can delete from the database, build out that PHP delete query into the database, and we're gonna pick up that information from the delete or from this particular element. So that's coming up in the next lesson. 40. 59 Create Server Delete query from Database: So this lesson. I want to hook up the ability to delete the items out of the database. So we had the option to highlight them by clicking off check. And now we want to add in delete. So we also have the ability to add them up here as well. And we're going to reform out that to make it look a little bit nicer as well in the upcoming lessons. So now let's build out our delete capabilities. So opening up our editor and the deletes is gonna probably be very similar to the update. So all I'm going to do here is I'm gonna save this update file, and I'm going to call it delete so that we know what its functionality is. And as mentioned before, I wanted to keep everything separate because I want to be ableto have the ability to really isolated what the's Ajax calls conduce. And of course, we could pick up all this information on the server and do a lot of the heavier lifting on the server. And but I really want to keep it within the front end because the focus of the course again Mrs is within the front end. So here we're gonna pick up what? The user, i d and we don't actually need to pass anything else other than the user. I d. Because all were simply doing is doing a delete. So this is the same database connection that we've been using in other projects. And now this time we just need to update that sequel query so delete from names so from the table names and can remove it. Some of this stuff here s oh, we're deleting from names where the I d is equal to the posted idea that's being passed through. And here we're just going to say, If it's successful, then we're going to save deleted, and that's it. So that's our delete functionality. That's always to do for the elite within PHP. And in the next lesson, I'm gonna show you how to do the Ajax call where we're actually going to do our delete. So just looking at this probably the best way to go is just to do a post. We're gonna pass over these variables and from the variables, we can just do a quick update of that content. And then, of course, we have to do that, my output as well and update what's being presented within the HTML, so that's coming up in the next lesson. 41. 61 Post AJAX to php delete: So this lesson I want to make thes delete buttons functional. So previously we built at the delete buttons we broke out the process of all the different buttons. But we don't have actually any functionality yet to these delete buttons. So let's add that in within this lesson. So first of all, there is actually some content that we're gonna be reusing, so I'm gonna just assign a variable to it. So maybe I could just call it you I d just to really simplify things and coming in here. So I'm gonna isolate it variable, and I'm gonna call it you I d because we're gonna need this within our delete process as well. So I can get rid of this part now and now I've got the i d that we're working with both in the updating and deleting, ready to go. So this is actually going to be really easy and straightforward. We've already got a lot of the code here written, and I can simply just copy and paste it. And instead of posting over to update, I'm gonna post over to delete and notice here that I still need to specify the variables so I've only got that one variable that I'm adding in eso. I've got a few different options here on how it can do this. Probably the simplest would be just to copy out variables, placed it in here, get rid of the sea because we don't need to specify that. And in this way, so essentially, we're doing the same thing here that we were doing before. So I'm just gonna beautify that. And so we've got our variable data. So we've got Are you I d that were passing over to delete. We've got the my output and we've got the updated there. So I'm going to get rid of some of these these consul messages that we no longer need because we're actually going to see that functionality in action. So now let's go out to our browser and take a look at this functionality. And hopefully when we click on any one of these items here within our list here, we can actually delete them out s Oh, there we go. We just lied. It won delete out this one as well. We go over to a database and everything matches exactly the same way that's being outputs we've got the 1st 2 are this one checked this one unchecked that one checked, same thing in our database. Checked, unchecked, checked So everything is in sync. And now whatever updates we make on her front end is actually getting sent. Be a Ajax seamlessly to our database and updating so next lesson. So the delete was really easy. And in the next lesson, we're just going apply some simple styling and finish off the project. So usually what I like to do first is build up all of the functionality. Make sure that that's all working, and then apply the styling because sometimes the cases that when you build out your Web project, you build out the functionality. If you go the other way around and you build out your styling and then try to do your functionality, sometimes you might miss things where you might need to add in additional functionality, and it just doesn't work well. So in the next lesson, I'm gonna show you how we can updates some of the styling and finish off this project that's coming up in the next lesson. 42. 62 Update Styling CSS for project: So this lesson I want apply some additional styling and actually present this content in a little bit. Niedere fashion. So let's update and add in some CSS and move some things around somewhere. HTML elements around. So we've got all of our functionality. Everything's working as we expect and we're sinking with the database. So now let's just update the way our application looks and feels so opening up our editor I'm gonna actually just change to know split because I don't need any access to those anymore. Gonna hide the sidebar as well. And we're gonna focus strictly on updating our HTML. It's the first thing that I want to do is just format it properly, so have it properly formatted each team l file. So let's update the buttons. The first thing that we should do, maybe update some button colors Eso, remo span. And I'm gonna use pseudo of first child. And essentially, what this is going to do is this is gonna pick up that first span, and I apply some style into it. So in this case, maybe we're gonna add background color of and what color should we make? So the highlight maybe we could do it a coral color. And so we got the first child and let's do believe it. So last child and the last child beautifully make it red, because that's a delete button. So we've got our check here. We've got our delete red. So now we've essentially they do look like buttons. Maybe we need to add some spacing between them. So the 2nd 1 is gonna have parting and we'll add the padding on the left hand side. Or we said this actually should be a merchant margin on the left Will may add some five picks, so move the button slightly over. Says a little bit more space between them. Eso this eso something else. Maybe we can add in as well. Maybe we could even float them over to the right hand side. If we want to do that, just move both of those buttons all the way over. Or we could also include some some margins between the rebels margin, and we'll just do margin of five picks and zero left. And right now, let's go back out and see what that looks like. So that gives us a little bit of spacing between each one of these elements, and we still need some spacing between the check and that content. So I could, of course, add in since some spacing there. But maybe, let's just add it in in this type of way, so just do a margin left. So we have some additional spacing between those values and these check values, and also maybe by default, we still wanna have maybe a great color for these Remo's eso because not all of them, or just the ones that aren't gonna actually be highlighted eso that we do have some kind of color there to distinguish it from the background. Or maybe this Alice Blue, see what that turns out. It looks like now what? We refresh it, uh, we've got that value there but were not able to override it with the highlight. So this one is going to be important. We went. Now, when we go back out and refresh it, we see that because that one has important attached to it, that one's going to override the other one so essentially were setting two different backgrounds on the same element, and that wasn't working well. So instead I've applied important so that one takes precedence over the other ones. So now let's take a look at where we've got this form up here at the top, and it doesn't really make sense that the form is here at the top. We should have it here at the bottom, and we should have the ability to just maybe have it on one line. So make it look a lot neater and then also maybe update this button to be in Maurin line the way that these buttons here looks so everything looks more consistent. Eso let's do that. And in this case, we need to move around some of our HTML so or we could just move our output above there. We don't think we're using status so I can get rid of that one there. And now, instead of actually having line breaks, let's get rid of those line breaks as well. And get rid of that double there. And now let's take a look and see what that looks like. So we've got a bunch of our fields here and again. It's not really ideal. We should maybe make thes smaller and attach in. Maybe we could use police holder text here instead of these names that are sitting in here cause this isn't really give or provide the best user experience. So let's add and apply some styling to the form as well. And now let's also adjust our inputs s so that they're not as large. Maybe we can get rid of some of that formatting as well. So this way doing some CSS here specify the type, and the type is going to be text that we're gonna be looking for. So that way we can distinguish between the number and the text for styling. And now let's set a default with here so we can set maybe 20 picks and we're gonna display it as a block. Just gotta update this statistically block. Let's take a look at what? How that looks so actually way too small. So we do need to adjust that I'm actually going to get rid of the block, so I don't think that that was a good idea. So maybe we can do it at 15 e m. See what this looks like now. So refreshing it. So now we're back to a default size there, so maybe even five e m see about looks like, Yeah, that does turn out a little bit neater. I do want to remove out this first and last, so maybe we can apply them as labels and then resize our labels as well. So label for F name and close that off and then just put first in there and do the same thing here for lost. So for, uh, for last and then, lastly for age. And now let's just check this out and see what this looks like. So starting to format a little bit better. So one line is probably typical what you would expect when we're adding in content just underneath within this form field. It's also I want to just reformat the way that the labels look. So that's label, and I want to just want so the thought size and I want to make it quite a bit smaller. So unit zero point 8 p.m. So see what? See what that looks like and maybe even we can adjust the color so we can have ah less a color that doesn't stand out. It's much so we could do something like this kind of dark gray color. So I got her first name, last name, age and the age is just way too big. So let's update that as well. So this one was input type number and this one? Maybe we can even make it smaller to three e. M s. Oh, there we go. We might even make thes one's a little bit bigger because I think that was just a touch too small to make some quick adjustments there. Seven e m. And I think that looks quite a bit better. Eso the next lesson. We're gonna continue to update some of the styling, the CSS and present this content, including updating the submit button and maybe even wanna add in additional container around here to really to be to bring it out, make it stand out a little bit more. That's all coming up in the next lesson. 43. 63 Course Summary: in this lesson. I want to just finish off this projects on the previous lesson we built in all this really nice need functionality and we can actually add in new people into our list update the content here and then once we've added them in, we can check them and we can also delete them out. And we get out in any number of people and create a really nice long list of people if we wanted to. And this is in sync with what we've got in the database. So when I refresh this, everything is in sync and working together. So I want to still finalize the way that this looks also want to update our html to be it actually look like an HTML file. So in this case, we need to add in that doc type here. Eso doc type is html so that we indicate that this is an actual HTML file. Then we've got our HTML tags opening and closing in between those next we're gonna do had and within the head it could include the title there, So database a jocks project. So this is just that the title there also want to set the view port as well so that we're ready. Teoh, add in some additional meta information here. Eso vieux port Initial scale oneto one. It's going to reform out that and copy and paste this out Eso now adding in that style. So I know what typically I would just link out to to a style sheet. But in this case it's just a single page project. So we just keep it within on the page itself, adding in the body content gonna keep my JavaScript here at the bottom, closing off body, closing off html, saving it and then just beautifying it, so to make it more presentable eso we don't really need to do much more with the JavaScript because everything is up and running. Eso I just does still want to finalize that we were out putting the form and I want to add in a class here so that this is maybe call it button. So copy that from what we do in bootstrapped there and of course, I could bring in boots, drop and really simplify this, but this is just it's almost done here, just adding in some finishing touches to make the buttons look seem so. I did have this as a typical content here, and maybe I could do a background color. So this background color and Scott picked the 1st 1 there that pops up. So let's check this out. So now the buttons Air Maurin line, they look the same. We've got this styling and I was thinking maybe we should even do a wrap around here, a wraparound that form information. So class and in user. I call it bad user tive and then just make a quick update of that class. And again, I don't really want to spend too much time on the CSS, but I did want to make it a little bit more presentable. So let's just simply add in some padding here. So 10 picks pouting lad in a margin, maybe 10 picks of margin as well. Do a background color and, uh, makes background color. We could even do something like black. Maybe that might be too much. We'll see. So there we go. So now we've created our form. We've got our inputs there. We've got our output here and so on, and everything is functioning. Working as expected, adding in new people as well. We cannot end. This money is we want Check them off. And if we got once that we don't want we can always delete the moat. So that concludes our project. Now, I have included the source code as well through lessons of the course. So I do encourage you to take a look at it and try it for yourself. And other thing, too, is that I've created various Ajax requests here, various different ones here. So you get a good sampling off uses for each and every one. So there's actually four different Ajax calls here within this file, and they're just calling over to a simple back and file, so PHP file. So if you're not familiar with PHP, you can use whatever back and server code you are familiar with eso. Typically, you might wanna even combine them into one file so you don't have as many files and data connections and so on. So this was just a simplified way to present that content throughout the lessons and as well, I've broken apart a lot of the content here as well. So let you too, can take out what you need practice. It tried out for yourself and added into your own Web projects. And throughout the previous lessons, we've really demonstrated the power of using Jason and Ajax together in order to really bring out a lot of power within our JavaScript applications. And you can see that there's a lot of use for this. And there's a lot of scenarios where you could utilise this type of coding. In order to add, I added dynamic and interactive functionality into your Web applications and whether you choose to use J Query or you choose to use a Java or JavaScript. Either way, you can make that same functionality. But I want to present J Query as a really good source for making Ajax calls from the front end code. So that's Ah J query, and a lot of the course did go over Jake Worry. But we also did touch upon that. This could be done in JavaScript as well, so there was some combination of JavaScript and G query at some points throughout this course as well. In order to illustrate that there are different ways to access that data and pulling that data into our Web applications So check out that source code, try it out for yourself, create your own projects and work with Ajax and Jason. And the more you work with it, the more you're gonna enjoy working with it.