AJAX connection to MySQL PHP API | Laurence Svekis | Skillshare

AJAX connection to MySQL PHP API

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (1h 49m)
    • 1. Apimysql

      2:29
    • 2. 1 Introduction to creating an AJAX database interaction API

      4:53
    • 3. 2 Resources Setup mySQL PHP ready

      5:26
    • 4. 3 Quick jQuery intro and how to add it to your web pages

      4:43
    • 5. 4 Working with jQuery

      6:54
    • 6. 5 jQuery Ajax methods

      7:25
    • 7. 7 AJAX post content to PHP endpoint

      7:02
    • 8. 8 PHP output as JSON data

      5:24
    • 9. 9 AJAX send multiple values to PHP endpoint

      5:20
    • 10. 12 Create MySQL database table

      2:26
    • 11. 14 Connect to Database

      4:19
    • 12. 15 Add content to database via AJAX frontend code

      6:42
    • 13. 16 Insert to mySQL

      5:53
    • 14. 17 Insert and update Database content with AJAX

      9:43
    • 15. 18 Get data from Database output as JSON

      9:21
    • 16. 19 Dyanmically output new JSON data

      7:34
    • 17. 20 Get data output into HTML

      5:47
    • 18. 21 Web API conclusion

      7:14

About This Class

AJAX connection to MySQL PHP API
Learn how you can create a simple database API which can be accessed from
frontend code, updated and more

The scope of the course stays focused to building the API interaction. It covers
multiple technologies working together, and topics only in relation to the
finished project.

Want to access your MySQL database using JavaScript? Let web visitors interact
seamlessly with you MySQL database. Add new content, update existing content,
and query the database to return results! Databases provide so much power to your
web applications, why not use them more.

This unique course takes you through the steps of creating a simple web api to
allow web visitors database interaction. Database is key to creating an amazing
interactive dynamic experience for web users. It lets you do more!

This course will open the door for you to build our a lot of COOL STUFF! From
the lessons of the course, you will be able to produce a wide range of uses for
the code. Source code is included so you can practice along side the lessons, try
it out for yourself and tweak it for your individual needs.

This course covers a lot of technologies and demonstrates them all working
together to achieve the API objective.

JavaScript and an understanding of the Document Object Model is an important
foundation before starting this course. We've designed the course to be fast
paced step by step covering the essentials to build the web API. Please note
that the course overviews core technology used only within the course to build
the API.

What you will learn

Basic HTML - setting up simple elements to access from JavaScript
Basic CSS - creating buttons
jQuery - AJAX, Getting element values from a form, updating element inner HTML.
JSON - How to send JSON objects and how to retrieve JSON data and use it as
objects within JavaScript.
PHP - How to get request variables, setup a mySQL database connection, looping of
data, arrays, outputting content as JSON formatted.
RegEx - Check values as numeric
MySQL - Setup a database, connect to a database, phpmyadmin access, write queries
to Update, select and insert data. Prevent SQL injection.
See it all working together and much more!
By the end of the course you will have the knowledge on how to put it all
together and create a simple API to interact with your database. Use this course
as a starting point to limitless options with this fully functional and
customizable code.

I'm here to help you learn about APIs and ready to answer any questions you may
have. What are you waiting for enrol now and see what you can do!

Transcripts

1. Apimysql: The scope of this course is focused on building on a P I interaction. Want to access your my sequel database using JavaScript. Let visitors interact seamlessly with your my sequel database, Add new content, update existing content and query the database to return results. Databases provide so much power to your Web application, why not use them even more? This unique course takes you through the steps of creating a simple web. AP Allow Web Visitors Database interaction databases are key to creating an amazing interactive dynamic experience. Web users. They let you do more. This course will open the door to you to build a lot of really cool stuff. From the lessons of this course, you'll be able to produce a wide range of uses for the cold. Source code is included so you can practice alongside the lessons, tried it for yourself, tweak it and update it for your own individual needs. This course covers a lot of technologies, demonstrates them all, working together to achieve the A P. I objected JavaScript and understanding of the Document Object Models Important foundation . Before starting this course, we've designed the course to be fast paced, step by step covering essentials to build a Web. A P I Please note this course covers and overuse core technologies used within the course to build a P I basics of HTML basics of CSS G query and how to use Ajax within Jaquie, getting element values from a form updating elements, inner HTML and more. Jason had a same Jason objects and how to retrieve those Jason Data objects and use them within your JavaScript. PHP How to get request variables Set up my sequel database Connection loop through databases, a raise putting content as Jason formatted data and more reggae X expressions. How to check to see if your values are numeric. My sequel. Set up a database, connect to a database Ph. B, my admin access rate queries to update, select and insert data and also prevent sequel injections. See it all working together and much more by then, of course, you'll have the knowledge on how to put it all together and create simple AP ice. Interact with your database. Use this course as a starting point toe limitless options with full functionalities and customizable court. I'm here to help you learn AP eyes and ready to answer any questions you may have. What are you waiting for and roll now and see what you can do 2. 1 Introduction to creating an AJAX database interaction API: hi and welcome to our introductory course on creating a web. Ap I from scratch. My name is Lawrence, and I'm gonna be your instructor for this course. I'm excited to have the opportunity to show you this course and walk you through how to create this Web, E p I from scratch. I come to you with over 18 years of Web development experience and working with Ajax and PHP. It really opens up a lot of doors. You can create a lot of amazing and cool things with utilizing these different technologies . And as you can see here in front of you, this is a sample of what we're going to be creating within the course. So what's happening here is that we've got the ability to send and retrieve data to our database. So essentially, what we've done is we've created a web ap I with ability to update various so able to you create a brand new I D item within the database, we can see that we get a response back from the server. So our action was ad we sent over a company company, were connected to the database that cost is Tendai D within the database that this newly created item is 16. We see that our status is added. Now, if we make an update to its and I'm just gonna make some quick, random updates here and we send data again, we see the next time it actually detects that we already have this existing ex I d. Of 16 or 66. And instead of creating a brain new one instead of adding it this time it updated existing data with all of this content that we just sent over. So that means that we can switch to a different I d switch back to that one that we created and we see that we found I. D is 16. Company is company Teoh Tester, Name update. And so once we see that, we get all of this response information so we can utilize this type of format on multiple pages so I can go to this page over here and I can retrieve back that same information. I can create a new piece of information. They can go back over to this window the original smaller window that I had open, and I can retrieve that information back so all of this is sitting within a my sequel database. So when I refresh this database, you'll see that I'm actually adding in these new items, and I'm actually updating the database content seamlessly through Ajax PHP and my sequel database. So you can see here that we've got the database content here at the bottom and I can pick any one of thes X ideas. So maybe we'll take that one with 100. Here are Costas. Tens will update that. So new name new company and this type of format can be utilized toe update databases and create database interactions for your Web users to see here. Now, I updated my PHP database with the new data that we've just submitted seamlessly through an Ajax call, sending the data via an E p I over to our PHP file, which picks it up processes that inserts that, updates that and gets that information back from the database, and I'm gonna show you how to do all of this. Within this course, we're gonna walk you through setting up your HTML than introducing J query. So also introducing Ajax within G query in order to make those calls to our PHP file. The format of data that we're extending over is gonna be Jason for mounted data so we can see that here as well within the response that we get these data objects. And the good thing about using Jason and data objects is that they're really useful back within the front end code that we can parse through it. And I'll put that content in a meaningful fashion within our HTML. So we're sending the data via Jason. We're picking up via data, be a Jason, and we're out putting it from her PHP file via Jason. So all done through Jason. And that's how we're gonna be transmitting and utilizing that data. So in PHP picks up the information we're sending over it, actually inserts it or updates it into the database. And then we can send a response, depending on what action we took within the PHP file. So when you're ready, let's begin working on this project in creating our very own AP I database interaction from scratch 3. 2 Resources Setup mySQL PHP ready: in this lesson, I want to provide a quick overview of some of the resources that we're going to be using in order to accomplish our Ajax AP. I connecting Teoh my sequel database. So the first thing that we're gonna need is to set up my sequel database. We're also gonna need to have a server environment. So what a easiest way is to set this up if you're not familiar with how to set it up, we've got Zampa that we're also going to be using within the course. Now what Samp does is it allows you to run, ah, local machine in the background, and this allows me to run PHP script. It also gives me access to a my sequel database. So all of this, as you can see here, is running on local host and once again, local host. And in order to get Samp, it's available on Windows, Lennox and OS X, who discovered Apache friends dot ord and you can download it from there. And install is relatively straightforward. You could just go through and do the default settings and be up and running with Samp in a matter of minutes. Eso with Samp. There's also a default directory where you can set up your local machine files and you can work out of that directory as a default in order to get started quickly. There are also some ways to adjust the root directory and opposite pointed to another folder within your system. So there are different ways to work with that. And once you get to become familiar with it, then you can update the config file and make those adjustments. The other thing that we're going to need to use is a Web editor. So I'm gonna be using brackets. This is my version of brackets right over here. And if you already have a web editor that you're familiar with three that you like using, you can go ahead and use. That s O. This is just in order to write some code and have ah, basically formatted layout of the code. So that's what I'm gonna be using brackets for and some of other resources that amusing. I'm going to be using a chrome browser, and the reason I'm using chrome is because we've got access to deaf tools. So this is really easy to access within chrome So we've got a bunch of information here, and this is one of the reasons I like to use chrome. And we can also do this toggle ing of different devices and screen sizes and so on. So we've got all of that act accessible to us. As we run some code, we can get some feedback and input in regards to the coat. So some of the other resources that we're using as well So this is gonna be we're gonna use G query Ajax eso this J Cory has a built in functionality to do Ajax handle Ajax really easily and efficiently. And I'm gonna be using the Google Cdn library for Jake worry. So you can just go ahead and grab that and bring that into your Web project to get access to Jake or and then you get all of the wonderful amazing functionality with Bakery and we are going to be focused around building out those Ajax calls. So I am going to go through that in more detail. If you're not familiar with G query, I am gonna be using that particular functionality within Jake worry in order to make re webpage web content that I can pull in from and send content over to my a p I. Which is gonna be my PHP database. So what we're gonna be doing is we're gonna be depositing information, updating information and getting information from our database. And I'm gonna be using PHP minded men. Comes with Samp eso this All you have to do is go over to local host ford slash PHP minded men and there you have your databases. So it's all ready to go. And I'm also going to show you how to set up databases within PHP. My had been within the course as well eso when she are up and ready and you've got everything set up, create your index stuck PHP file Open up the PHP syntax, which is understood less than sign question Mark PHP type had something like echo. Hello. And just to make sure that you do have PHP running, save that, go back it to your local host, refresh it. And if you get this showing up, then you know that you've got PHP running. If you get the all of the PHP syntax, the question mark in the PHP in in your output as well, then you know that you don't have PHP running eso. It's a quick way to tell a GIs, run some PHP code and then also try to go over to local host. PHP my admit and see if you can access that within your example. So the 1st 2 that you need running is that patchy server. So just go ahead and hit. Start on that and also the my sequel server. So go ahead and hit. Start on that. So you need to have both of those started the 1st 1 in order to do the local host and then the 2nd 1 to have the my sequel running in the background, which is also accessible by PHP. My admit. So once you're at this point that we're ready to begin the lesson and start creating our A p I. And that's coming up in the next lesson 4. 3 Quick jQuery intro and how to add it to your web pages: this lesson. I want to bring J Query into our web application. So what I do have right now is just a basic default template that is ready to go. And I'm ready to start building and adding my coding to this s O. First of all, what I want to do is I want to bring my Jake Worry library into this web page. Let's go over to the hosted libraries and select the J Coury library. Bring that into our web page. So now we're gonna have access to the J Quarry library on notice that also, I'm creating a PHP file. Eso it actually doesn't have to be a PHP file can be an HTML file, but that this is just because I am going to need a PHP file a swell for the A p I in order to create the server interaction. So I'm gonna just keep it consistent as a PHP file. So that's actually not relevant. What type of file I'm creating a ZA long as it's gonna be a Web file could be HTML as well . Eso What we also need is I need to create some inputs here where we can add some information and that we're going to be sending over into our web ap I and also I'm gonna demonstrate how g Corey works. There's gonna be a brief quick run through about Jake worry as well within this lesson. So first of all, just create an input tight. We're gonna create a type input field, just a text input field. Give it a name off, maybe just call it a name and an i d. Of name as well so that we can easily access it within our JavaScript RJ query. And I'm also gonna set a preset value to it so that I don't have to constantly add in values into it. Eso there. I've got my input field. I've got a value of tester and now let's set up R J coury. So I'm going to do the job. The Jake worry on page A swell. So I don't have to flip through between different files. So typically, when you are writing job script, good idea to create a separate Js file and keep all of your source code, and there s so that you can just simply link that into any web page and bring all of that functionality. And so, as I'm building it out, I am going to keep it within as a separate within the script on page. But I am gonna build it out after copy the code over after and create a separate JavaScript library. Eso Let's start by creating the J Corey functionality. So I'm just gonna use short form. See, Also probably see document ready with Jake Larry s. Oh, this is just a short format. In order to ensure that were Dom has loaded and that everything is ready to go with Jake wear eso doing setting this up is the same thing. It's a clevant to document ready, so I could just as easily right in something like this, so it provides the same functionality. But I do want to utilize the short format, so I'm going to keep it at function. But this is just a note that this is going to be the same thing as writing document ready. So for those of you that are more familiar with accessing geek worry in this type of format , this is this is just another way to do this and basically what's happening here, what this function is going to do, it's gonna fire off whenever the document has loaded. Some couldn't do a document directory call over to the document s so you can take a look and we can see that the document has has loaded into the page. Let's go over to the local host and we see that now the documents loaded in and the document essentially represents what's within the dom. And we've got access to all these objects that are contained within the document. And again, if you're familiar with JavaScript and G query, that essentially means that you can connect with any one of these event listeners on your page. You can get information such as the origin on, and you get a whole bunch of information here that you get access to and then you can bring into your JavaScript code. So in the next lesson, we're gonna look at building out some additional functionality. Maybe we're gonna use J query, pick up the value that's in here to simulate being able to get values from the rest of our Web page, and then we're going to show you in the later lessons how to access content, Web content using Ajax. And then we're gonna build out our own A p I and make connections to that from the front in court. So all of this is coming up. 5. 4 Working with jQuery: in this lesson, I wanted to do another quick overview of J Query, how to use it and how we can utilize it within our Web projects. So previously showed you how you can bring Jake Worry into your project. Now let's look at what we can do with Jake weary, and I'm going to keep it relevant to the content of the course. And if you're not familiar, Jake, where it trust me, there is a lot of stuff which equally and it's really great to use J query within your projects because, as they say, it allows you to make your Web pages quicker and easier. Using G query. So just simplified functionality. It's a JavaScript library and allow should have simplified functionality that you can easily call to via the G quarry methods. So let's take a look at what we've done so far. So we've got an input here and with Jay Query because we have access to all of the dawn information, we can really easily access content that's contained within the dome. So if we want to find out what's being contained within this input field, what we need to do is we need to access it. And we've got a really short format here. So this is the same as doing within JavaScript where we would get document by D. But Jake worry has made it a lot simpler. So essentially, this is all we need to do in order to collect to this dom element that we're just selecting it by i d Use the hash for I ds used the dot for classes and then nothing for just the tag names. And this is the same format. If you're familiar with CSS that you'd be using to identify the different elements within the page. So next what we need to do is we need to select this value. So we need to just specify another G quarry method VL. And that's all we need to do in order to pick up that value. Eso I can also put it into a variable. So just call it value one, and I'm gonna just bring this one down below and add value went into here, and I'm gonna show you that we can actually get the contents that's contained within our value field there. So let's hope in this up. Refresh it. Look in the console and we get whatever value is in there. So right now, as of now, if I'm updating it, we're not. We're not actually calling back to it, so we have no way to update it quite yet. Also need to add that in, and the best way to add that in is using Jake Worry again and adding in an event listener. So we saw earlier that all of the's Dom elements they all contain event listeners, and there's a whole bunch of stuff that's available within the dunk. And J. Query makes it super easy toe access and create interaction within your elements of your HTML page. And I am trying to run through this fairly quickly for those of you that already familiar with using G query. So this is just simply a review. I'm going to give this element class of button, and I'll just put Click Me over here. I'm gonna update a style, and I'm gonna create a really simple button style. So give it a border one pick, solid black border and also give it some potting. So it looks a little bit more like a button and so just close that off. Take a quick look and see what it looks like. So there's our button there, so maybe we also want to keep it smaller with. So maybe we don't want to go block. We want to go display So we'll add in in line block and let's go take a look at it. So now it looks more like a button. And so now what we want to do is be able to click it and add our functionality. And this is all done with Jay Query. So let's do this really quickly. Super, quickly. We're gonna pick up where we left off over here and creates an event listener eso this the four Mattis the same. Whatever. We're selecting any element within our Web page. We need to just select it simply by by accessing it. So maybe what I'll do is I'll give it a nightie of button one in case we decided we want to add in some additional buttons eso we're gonna do button one and add in on. So the event listener is click and now we have a choice. We can either just add in the function here or we can write out the function of what we want to happen when the button gets clicked. So let's go ahead and write data. Close off the brackets there and now we need to have our functionality. So maybe just copy and paste that in there. So let's go take a look at the what's happening now within our Web browser. So now whenever I go on top of this button and if I click it, we see that were firing off the value there of Tester and when one more adjustment here. So we want to pick up whatever value is contained within that element at the time of the click. So now whenever we update it, we update the content. We can see that now we're getting that new value that's being contained within that input field, and we can click it. We can pull it into our console here, and we can see that it's picking that up, and it's doing a full full processing of the content that's contained within this input field, were able to utilize it and bring it into our Web project. So over here we had set a variable container for it. Eso we could do the same thing here as well as we could just do value one. And keep that within this button click because we always want to be able to check back to whatever the current value of the dog is and be able to put that so that's an important part of it. Because if we continuously call to the previous version, we might not necessarily get the updates. So make sure that you include, uh, doing a trip out to that element, picking up the current value of that element and then placing that into the variable. And then we're out putting that variable information. So the next lesson we're gonna jump into Ajax calls with a query. And this is where it's gonna get really exciting because there's so many amazing things you can do with J. Corey and Ajax. And it's really simple to start out in these Ajax calls within your Web projects. So that's coming up in the next lesson. 6. 5 jQuery Ajax methods: the previous lesson. We looked at some basic functionality that's available within J query. So let's go take this one step further. And instead of just simply writing out this content, we're going to create an Ajax call. So essentially, what any Jack's call does is it allows you to connect to another file online and pull back information, send data and information to it and pull that information back and doing all of this without page reloads. And they have within J query. So there's one one call that can encompass all of those parameters where you can set different types, see their get or post. You can set your data type s. So this is one with one that we're going to be using, and it's simply just Ajax. So this method is the Ajax method, and now we need to set up some parameters. So we need to specify a you Earl that we want to send two or we want to pick up information from, and we also need to specify the type of the type of requests that it's gonna be eso. Typically, you could do get or post, so we're gonna do a get for this one, and we're also going to specify the data type. So the data type that we're gonna be expecting here is gonna be Jason formatted data. So Jason is away. Teoh JavaScript objects. It's a javascript object format to transfer data s. Oh, this is really quick and easy way to transmit data. It's human readable as well. So what we need to do now is pick up a Jason file. So this is this is where I'm gonna use my Jason dot com. This is ah, a website where you can simply create some Jason and store it online, and then, of course, have access to it s over here. Have simply created a simple Jason file with an idea of 100 name Lawrence company Discovery V i p. And when you create a proper Jason file, they also give you the ability to access that Jason directly via the been. So that's just over here. Eso Now we can access that information, and we can put that within our project of our u R l s. Oh, there we go. So now whenever we click this button, we're going to run through, and we're gonna process this Jason file. So let's see what happens. So when I click it, it actually doesn't look like anything is happening yet. And that's because Jason actually has multiple multiple points where you can interact with it. So this Ajax call, even though maybe it's completed, we haven't specified what we want to do upon completion. And so this is where the done function comes in. So essentially, this gives you Teoh ability to write a callback function whenever that particular Ajax call is Run, weaken, string this. We can attach it here just within that Ajax call as well. We can run the function, include a parameter there s so essentially, this is the parameter that we're going to get the call back data and we're gonna pick that up, and then we can utilize that within our web projects. Eso for now. Let's just console log that out. Consul Logging data. Make sure it matches with the parameter that you have within your callback function. Refresh it, click it. And now we're actually accessing that data from this file over here. Ah, and it's Azizi. Is that notice that there's no page refreshes. And of course, if we were changing this data, which we would typically be doing. If we attached to a server, the server would be generating the Jason data and out putting. It s so then that would be changing as we're passing more parameters. And I'm gonna show you how to do this in upcoming lessons. But for now, I simply want to demonstrate how Ajax works and how efficient G query is at creating Ajax. Really short Ajax formatted code. And it's so super functional and easy to use. So there's a bunch of other a bunch of other Ajax methods that we can add in here as well. So there's another one called Fail, so this one will fire off if it fails. If we if we don't get a proper response back from the server, something happens. We can run this method, so I'll quickly show you how this one will work, and there's multiple parameters that come back. So there's the eighths X h R data. There's also some text status data and so on that gets returned back. So I'll show you what happens when it fails and what we actually see when it fails. So let's copy this console over and copy ex HR. And maybe we can also do another console log for the text status, and now we need to make it fail. So let's creates. Let's try to connect to the wrong URL and we'll see what happens. So refresh it, click and we see that we get this failure. Here s so we are actually getting the status back here as an error is not clicked way too many times. Eso We just got to give it a second here and we see that initially we get the JavaScript air there that this is the wrong URL. But then we're also Consul logging out that returned object object that ex HR object eso and it contains all the information that we need in order determine what's failed. So there's status, text and so on. And then, of course, we can just simply go by the status text. So that's what happens when it fails. And of course, I don't want that to fail s o. This is just something that you can add into your Ajax calls in case for whatever reason, you're not connecting properly and you want to see what the errors are and you want to have a call back, some kind of functionality that runs in case it fails. You can add in the fail method as well. So just chain that together, done, fail. And there's some other ones as well that we're not going to talk about. But there are a bunch of other ones that you can add as well in orderto produce additional functionality within the call box of the Ajax method within using J Query. So, in the next lesson, we're gonna introduce you to posting some data and sending some data over to a server Vienna Ajax call. And for this, we're actually gonna have to set up a PHP file in order to receive that information. Eso that's all coming up in the next little lessons. We're going to jump into some PHP coding and show you how to set up that server PHP code in order to be able to handle these Ajax requests and then also send some information back to the to this file to the front and code. And then we're able to utilize that data that we're sending back. So all of this is coming up 7. 7 AJAX post content to PHP endpoint: in this lesson. I want to show you how you can set up your PHP endpoint. So previously we looked at how we can use get Teoh, go over to a particularly URL, returned back the contents of the URL, output it within our JavaScript, and we can utilize it within our JavaScript as well. So we saw that when whoever we click, we returned back this I d name and so on. And this is returned back as an object. So if I want to have access to the name, I could simply just do data dot name instead of console, logging out that entire object. All I'll get back is the name right now and remember again. So this is connecting to this Web file. So if the contents of this web file change than the contents of the information were treating back will change as well. So what we want to do in our A p I is we want to be able to send some data over to the server and update it within our database and then send that back and since, um, confirmation data back to the originating page in order to make sure that we've actually received that information. So we want to essentially post that content. Eso the difference between get and post post is more secure and typically used. If you want to send values into PHP script so typically you're gonna be using post. So we just need to update that type to post in order to update our Ajax call. And that's why this one is a really good one. Because all we need to do is update these parameters and we can have it do something totally different. Eso Let's go ahead, create a file called a p i dot PHP And then in that file, this is gonna be a PHP file. So we open up our PHP scripting area with the less than question mark PHP Question mark greater than symbol s. Now we've got a PHP file. Let's simply link the girl over to that. So because this is located on the same route as my index stuck PHP, I just need to put in a p i dot PHP. And of course, if you had a web address, you'd have to type in that full you are I in order to be able to send that information over . So taking a look at this Ajax call what is missing in the Ajax call? When we look at the jacks call. We've got that you are l Where we're sending their data to, we've got the type. So the method of how we're sending that data post data type that we're expecting back is Jason, But we're actually not sending any data. We don't have any way to send data as of yet, so this is another parameter that we need to add in. So we could add this one in, and this one is just called, of course data. So it makes sense that data content would be just called data. And usually what I like to do is type in and add a variable there, so contain a bunch of pieces of information. Send it over as data, so this isn't an object format, and then we send that over using post to the a p i dot PHP file. So let's build out that variable called V A. R. S. And so we're gonna equal that. So this has to be an object and its formatted in a format. So data and we need to actually. Maybe if you want to call this name, we can pick up that value that we've got over here of the name value and send that information over. I'm going to get rid of this. To avoid the confusion, get rid of this. Avoid even more confusion. Eso Right now, as of right now, whenever we click the button, we're gonna send the value of name into the PHP file. And so that means that we need to pick that up on our PHP PCP end. So for now, let's just make sure that everything is working properly and we're gonna pick up via the post. So this should be a dollar sign post, and we need to match that Teoh the name here that we're sending it to so you can pick it up within within the PHP area. And all we're doing is going to simply write out the contents that we're sending over in this Ajax call. So let's check the suit and see how this works before we do one other thing, we do need to update here. We want to get rid of the data type as Jason because we're actually not going to be retrieving back Jason information as of yet because this is just simply text that we're putting eso again. We're putting the value that's contained within that input field. So over here, contained within the i d name, setting it up as a variable called name, adding in all those variables, as data that we're sending within our Ajax called over two PHP, PHP receives the post methods. So it has to be in line with the type there and has to be the same value as were sent within our variable object or a data object. And as soon as everything aligns, let's go take a look at this, refresh it and send Just do a click so we can do something like Click One. And now we see that what's happening is our code is actually making a round trip. So notice no page reloads. It's picking up that value, sending it to the A P I file and then all we're doing is just simply writing out that information as a response. So if we still kept it as Jason, which we do want to do and we do actually want output, this content within a Jason format. Then we need to update this once again and adding that data type. So again, we'll bring that data type back. So this is just data type. And then we need to specify that this is gonna be Jason Data, and I'll just show you now it's actually gonna throw on error. Should still return some information. But we see that we're throwing an error, so we see that our response text is correct. But we're actually throwing an error because it's not retrieving it back in a Jason format . And that's actually what we want to retrieve back from the A p I. So I'm gonna show you how to fix this and actually send back Jason for meta data. So it looks just like this in the output that we're gonna build using our PHP code. So that's coming up in the next lesson. 8. 8 PHP output as JSON data: in the previous lesson, we saw how we can send content over to our web server to our PHP code, pick it up and put it. And unfortunately, we're still getting an air here because we're expecting Jason Data. So this is gonna be really easy to take care of. And this is actually something that we're going to need to utilize in order to build out our AP I So first thing that I want to do is set up on a Ray. So I want to actually post all of my content in a re format and that will And once I parse it it as one side Jason and code it, then it's actually gonna be formatted properly to be picked up from our Ajax coal. So let's take a look at that and see what we can do with formatting it properly. So now that we've got our race set up, we can set up, we can attach values to it. So for now, let's just do we'll just call it data and we're gonna equal that data to the post information and then here we're gonna echo out. We're gonna use a method we're gonna act, so we could eh quote the array. But it's not gonna rate it properly because is, of course, this isn't rate. You can't write it out within echo, so we need to format it in a Jason format. And luckily for us, there's a method in PHP that does Jason encoding. And now when we post that information out, let's go back out to here, refresh it, send it over. So everything is working properly. We see that the object that were retrieving back is usual izing that re that we just created. So we created it with an item name of data and we see that the value was tester. So this coincides with the information that we've picked up and sent into our PHP file and were able to encode it as Jason formatted content eso we can also And when you're building this out with PHP, sometimes post might be a little bit hard to work with because you can't actually go over to the local host a p i dot PHP file and get an output. We see that we get defined name, but we still got that data array there, so no so things were throwing an error essentially, and we don't want to do that. If one actually take a look at that URL without maybe we want to build a what? That content as Jason formatted without actually having to post anything to it. Eso await around that and a way to do that is if we can look at the request method and make sure that it's post. And if it is post that we go ahead and do that and if it's not post than for the array data value, we're gonna put something else so was not posted. So now when I go back out here and refresh it, we see that data was not posted. Eso that's working properly. And this is how you can actually see that that content is being output in that same Jason format that we saw with the my Jason dot com file. And so now, of course, if we wanted to add additional content within our rate, it makes it really easy to do eso. If I wanted to do something like status or something like that, I can take him status ready. Refresh it. We see we get status ready over here again. We can see that we do that. Consul message. We get the status ready, we get the data returned as Jason object, and this is really useful. It's a really useful for mount, which allows us to really easily bring in the returned data and utilize it just like what we did with this Jason file and utilize it within our JavaScript. So if we wanted to do something like data and I guess we're calling a data data so we want to do something like data data we can go over to here, refresh it, send that over. And now all we're doing is returning back. That initial data data information that we had set up earlier because it's being returned as a Jason object. The data type is Jason. So it's expecting a Jason object. We don't have to really do a whole lot more. We can just pick up that returned that returned information in the parameter called data or whatever we want to call it. We could just call it D as well. And then we This might be a little bit less confusing so we could do the parameter d and return back D and the data value that's associate ID with that particular object. So the next lesson I'm gonna show you even more of what we can do and how we can continue to build out our A P I to make it a whole lot more functional. So that's all coming up in the next set of lessons. 9. 9 AJAX send multiple values to PHP endpoint: So this lesson I want to jump back into building out our HTML page. So we set up 11 input field. Initially, we called it name, so maybe let's set up some additional input fields. So give it Ah, name here and add in some line breaks eso maybe this one could be company and keep it as a text company. So we keep trying to keep us much of it consistent. Eso It's a lot more readable and easy to understand that. So as much as possible. Instead of click me, I'm gonna go send send data eso other than company Maybe we've got cost or something like that. So we're contracting out So maybe this one would be cost Our value is gonna be 10 instead of text. Let's update this toe number on And also maybe lastly, what we wanna have is a unique identify or so we'll give it an I d. And this again will be a number. And we'll just call it X. I d ex I D. And then started with one of a value. Their eso also, um, good update this to company value. So now we've got a bunch of parameters there that we can pick up and we can utilize. And we've got even more information. We consent over to r A p I. So it's a good thing that we set this up originally, Teoh work as an object and then set the date up that we're sending their because this makes it a whole lot easier in order to set this thes parameters up. So I'm gonna keep it within that same order. So I'm gonna just paste in some additional fields here. Police, older fields, beautify it, using the built in, beautify their within Or actually, this is ah, add on component. So extension manager. And if you want to get some additional add owns this one that I'm using here, this is just a beautif ire. So again, this is available within brackets on Lee, and it's got a bunch of these extensions. So in case anybody, you're wondering what I just did there, that's where that was coming from. Eso let's set these up now. So we need to pass what we want to pass a value for X i d. We've got name already in there. Let's pass over the company, value his company and let's set up cost and cost and send the cost of value. So now we're sending all of these values over to a server end. Whenever we click this send data button. So now we need to set it up on the server in order to pick up all of these values. So let's let's sigh. Let's update this method here. And instead of just doing data may be what we want to utilize this and still update this so that the names, all those values are consistent. So we had I d name. So I'm trying to keep everything everything the same. So it just I guess it's easier to read. But of course you can create your own that whatever makes sense for you to pick up these values. Eso last one waas cost and I also want to include a few integers as well as a few strings string values. There s so that we do have a really nice, really nice layout of all the different values that we can make use of eso. Now we've set that up and we've set them all within the array. So whenever it's a post, we're going to get this information out put properly, we're not picking up data anymore, so I should update this as well. So it's gonna put that whole object and then we'll work with that afterwards. Let's take a look and see what the outcome of this is gonna be. So now what we're doing is we've got a whole bunch more parameters and we're sending even more content over. And we did change that, I d. So make sure that we do have the same parameters. Eso Let's try that again. So now we can send over a bunch of information and pick it up on the server and output it within a Jason format. And this is perfect for what we want to do upcoming and that's be able to read all that information and update it within our database. So I'm gonna show you how to do that in the upcoming lessons. And once we bring this database in, you're going to see the real power of what we're trying to do here with the Ajax calls, the PHP connections and so on. So that is all coming up in the next set of lessons 10. 12 Create MySQL database table: in the next few lessons were going to be looking at connecting our PHP to our database. So the first thing that you need to do make sure that you have a database. And once you have a database, if you're using example, you can go over the local host. PHP my men, If you're using your online server, usually a lot of them do have the PHP my had been when you're accessing the database and what PHP my admin does is it allows us to really be able to utilize uh, this nice GeoEye interfaces PHP interface toe access are my sequel database eso. What we want to do is we want to create a database. We want to create a table and then creates something. So we've got our database test, and within this database test, I want to create table. So maybe I'll just call it a P I. Let's give it five columns because we've got four pieces of data and I also wanted to include it. I d. So not going to utilize this as the main idea because I do wanna have on auto incremental i d. Within this table sewing in a shrink this down a bit so we can see all of the values there is. The 1st 1 is I d We're going to give it. Type is integer. Length is 11. We're gonna auto increment it and set it up as primary eso. This would give us the ability to pick up that information and increment it. So whenever we're inserting new data automatically, it's going to get a new unique I d. So next we want to use X I d. So this is what we got out here in the field. So these are all gonna be integers as well. Cost is going to be an integer as well. So it was going to leave them at length of 11 eso. Lastly, there was name and company, so we've got name. So this is gonna be variable text and let's do company. So company is gonna be the same thing That's gonna be variable text and 2 55 s. Oh, there we go. So now we've got our table all set up and ready to go and ready to start receiving some content into it s own next. What we need to do is hook up our PHP code to our database, so I'm gonna show you to do that in the upcoming lesson. 11. 14 Connect to Database: If you want to really quickly create the table, you could just do create table AP. I entered in sequel and from there paste it and just hit Go and that will automatically format this table the same way that I've got it within this lesson. So now let's go and make our connection to our database with our PHP file. So I'm gonna shrink this one down. Or maybe what I'll do is I'll just do no split and hide that one. And now what we need to do is make a connection to our sequel database. So usually what we do is we do that right at the top here to make our database connection. So let's set this up. Create a variable to store the brand new sequel Connection Do New Boy s Q l I gonna be using sequel I sa. It's seek my sequel. Improved eso gives us a little bit better functionality and a little bit more security. Eso Now we need to specify the parameters. Eso The first thing that we need to specify is where the host, so local host next is gonna be the admin user name. For if you're using Samp. The default is root. Default for the host is local host and the default for the password is just blank on. And of course, if you are not using example, uh, your parameters here are more than likely going to be different s. So this is the user name. This is the password for your database. And then lastly, we're going to specify the table name. So that or the table that we've created, the database that we've created is test eso. Let's that that test up there and connecting it to the database name. So it's where the data base is located. The URL to it. The ad men user name that men password and then lastly, enter in the database. Eso Once we've set that up, we can do a quick check to make sure that everything is working properly. Eso were just do a condition here within PHP will call out to that new object that we've created that new database connection object and will just initiate a ping that being method . And if we get something back from that ping, we know that we're connected. If we don't, then we know that we're not connected eso would just do else here. And so probably one of the best things that we can do now is utilize our brain. You created a ray. So I'm gonna move that up there and copy this and call it connect, connected and if we are connected, will return back. True. And if we're not connected, will return back false. And this way we can see the results within that a p I page and we can check it it from here . When we send that data over, we can see what the result is if we're connected or not. And if our databases hooked up or not, let's refresh the page. And they actually don't need to refresh it unless year redoing, updating, updating your, uh, your front end code because we're still working on her back end codes. We didn't necessarily need to update it there, but just just to clear up the console there, So let's send our data over, see what happened. So we see that connected is true. That means that we've got our database connection and everything is a goal to start inserting and working with the database from our PHP code. So we're all ready to go at this point to continue with our server connections and start utilizing some of this a p I functionality that we want to make use off by connecting our database via PHP and so on. So all of this, we're gonna be looking at even more in the upcoming lesson. 12. 15 Add content to database via AJAX frontend code: So now what we're gonna do is we're actually gonna insert our data into our database. I'm gonna clean this up a little bit, so there's not as many Rose here s so we know that this is essentially our database connection. We do a quick check, make sure that everything is connected properly and that we're all ready to go to continue with their code and check to make sure that that we're able to input data. So we're also picking up and we're doing a request to check the request method, making sure that it's post. And if it is, we set all of these values. And if it's not than maybe what we want want to do is do something like this so we can set some defaults. So 100 for a name, no name. And what's gonna happen here is if it's not post, this is going to give us stability at to actually go over to the page and simply add in those parameters here eso no name and this is gonna be company. And then lastly, we're going to just set up a default cost. So what's gonna happen now whenever I go over to that. A p I page, we get this nice Jason output of actually what's happening on our page here. So you've got connected. True. So that connection still is valid and so on. So we're all ready to go to continue Teoh, add in some content into our database. So let's create that sequel string and make our connection. So over here is where I'm gonna make the connection. So I give myself some more space here within within the file here, and we're going to start by doing s Q L. So give it a variable and we're gonna use that same object that we created over here were actually over here s So this is our database connective object. And we're gonna prepare our sequel statement and this one is gonna be insert. So just a quick trick to show you how you can utilize PHP Myatt men. And while that's gotten pretty big, but let's go ahead and insert something. Eso Let's just insert some content in here. And the reason I'm doing this is because PHP minded men really nicely outputs that input strength so you can really easily just copy and paste it into your PHP code. And as we can see, it successfully added that item in there. So I can literally just take that same insert into a p I We've got all of the fields that I want to insert. I don't insert i d So just will pull that one out, remove that one out, and we've got all of our values that were inserting, and then we just need to close that off. Close that off. And I already got the semi colon eso Let's go ahead and then next will execute that sequel . So s s Q l and execute. So that's gonna execute that sequel functionality. And now let's go take a look and see what is actually gonna happen here when we go to the page so we don't see anything different there. When I go over here and refresh it, we see that it's executing, and it's inserting that content. So this is good. This is exactly what we want to happen. And maybe now we can actually update some of our their content from here. So let's, uh we gotta actually break out of our string here. So take, uh, the single double quote, period. Well, that's actually only if we're adding in something. So for adding in that I d we're just gonna make sure that we've got double quotes there, so I'm gonna just copy and paste, and they're gonna make the updates afterwards. So now we've got a name. So we're getting whatever value is contained within our ray. Uh, that stuff's actually should be cost, and then we've got company is lost name, and this one is costs. We've got to make sure that I'm keeping it in the same order that I have here. So we're doing X I d cost name company. So I want to keep it the same format where I'm doing. I d cost name company. So same format as I do have there. Let's go to the page and refresh it. So when I go to the page, refresh it. I don't have I don't see anything there, but when I do refresh it here, I see Now it's been added in. So this is gonna work the same thing. Here s so if I've got an I d send data, let's go over to our database and we see that now we're able to insert content into our database. So whatever we're type here, I just do. Hello. Change some of these values here. Maybe make this one whatever. 550,000. Refresh it. And we see that now were able Teoh via our Ajax call insert content into our my sequel database via our PHP code utilizing the parameters and the content that we're sending over . So next lesson, I initially you had to add some additional security into the parameters that were sending through binding some of the parameters to be a certain format. And then also what we're gonna do is would do a check to see if X I d is unique. And if it's not, than what we'll do is we'll update and so creating a new one and will also create another another button here, Teoh Retrieve data. So via the i d. We'll just hit retrieve data and then we'll output that data from the database and then we'll have a complete ap I system where we can update content into the database. We can add content and then we can retrieve content from the database. So all of this is coming up 13. 16 Insert to mySQL: the previous lesson we saw how we can utilize our front end code via Ajax and send content over to our database. And then we can take a look at it within our database, see that it gets listed there and so on. So we used PHP, my sequel, and there's actually a way to prevent sequel injections. So this is a security precaution. Basically, what we're gonna do is we're gonna make sure that the type specifications of the characters are what we're expecting. So we see that I is integer d is double s is string and B is a blob. So what we want to do for our a p I So this is gonna be an integer. This is a string, this string This is an integer So we're gonna utilize this formatting toe, ensure that nobody is actually trying Teoh, submit some rogue content into our database. So let's open up our editor here and set up those parameters. Eso this one can go in this line over here and we can specify. So maybe what we want to do is set up a brain new variable for that so we could do something like R s or something like that for request sequel. And here we need to utilize SQL that we set up over here and we want to bind parameters. And this is where we specify the type. And then here is where we've had in the parameters that we want to bind. So what I'm gonna do is I'm gonna copy out all of these and I'm gonna pace them in there. And I still need to make an update there on how it's formatted. So need to remove out all of this excess all of these excess quotes here. And then I'm gonna also need to add that back into the values. But essentially, what's gonna happen here is we're gonna be binding these parameters into our values here. So here we use question marks. Teoh, hold the place for these parameters and we do the bind parameter that we're going to simply deposit these parameters in that same order that they're appearing here within the buying parameters values here, they're gonna replace the question marks with those parameters. And so this is where we can specify the type s O. I is for integer, as is for string. So the 1st 1 that we're looking at is an integer inter jer string strength. And of course, if you're using different values than just make sure that you have the corresponding types mentioned here within the bind parameters. And now what we can do is just make sure that if r s, then we can execute the sequel coach, so that makes sure that we bound it properly. And if it exists, it everything is still true that we can go ahead and execute the code. So let's just take a quick look and make sure that we're still able to Things were still working properly. Refresh this database. So we're still inserting properly everything. It's still ago. Just we've added in this extra security parameter in our in our in our code here eso also once we execute it, we have access to retrieve back that insert I d. So I want to create another item here within that array, and this is going to represent the default, the default i d. So maybe what I need to do over here is I just need to do a quick update to all of these. Just a quick check make sure that that's proper. And this i d is going to represent the insert i d. And this is generated when you insert content into the database eso just connecting to the same connection connection object and it retrieves back it doesn't call back. And does that insert I d. So I'm just gonna pick that up over here, and then we should be able to see that within our a p I. So now when I set that we see that we've got the I d. Comes back as eight r X ideas to 23 23 When we go on our database, this I d should be eight now. So this is our newly inserted, newly inserted item so we can retrieve back that information. Of course, if we need to utilize that in any way where you can do that as well. And that's what's the good thing about returning it within this Jason format is because we can really return back quite a lot of useful information that we can then utilize within our our front end code within our JavaScript, and it put some of that content and even apply conditions to the values of the returned results from the PHP court. So next lesson, we're going to continue to build this out. Eso we saw that we were able to create a new entry, but what happens if it already exists? And I wanted to use this ex i d as the value for existing ideas. So I actually do want them all to be unique within the database. So somebody types in an excited that already exists. What I want to do, instead of inserting, is I wanna update it. So I'm gonna show you how to do that in the upcoming lesson. 14. 17 Insert and update Database content with AJAX: I want to do a quick update to our front end code because now that we want additional functionality, so what? We're just inserting. And of course, later on, we're also gonna want Teoh update, and we're also gonna want to just output that content from the database. So So you something that we can add in here. So we know that the button one click and one of the values here is gonna be so we know that this is to send data, so we're gonna just we'll give it, ah, value of action. And this is always gonna be adding content. So maybe we could do something like odd and then just save that. And so now we've got another parameter that we're picking up over here and we can call it action. And this one is gonna be action as well, and we're just update this as well, so this will always be hot. So now we've got this additional item here called Action, which will help us differentiate different commands within our PHP when we're sending over different things that we might want to do within our coat. So let's set up a condition over here I don't need to split it anymore. So we're just gonna go to know Split, and I gonna set up a brand new condition over here in order to check to make sure that we're actually doing the rate action. Eso this one action is going to be action, and I just wanna verify, do a double check, make sure that the user is actually trying to add content. So now if I want to differentiate if somebody is adding content or inserting content than it's gonna make this this'll one line of code here so that it's ah lot more easier to understand what's happening here. And I'm also gonna indented us. Well, eso now that we've got this action equals an odd I want to be able to check to see if that particular I got particular ex I d actually exists. So let's up create another sequel statement for that where you can actually check to see if it exists. And if it does, then we know that we need to skip over and we need to We need to update it instead of insert. So that's what our check is gonna be to see if it actually exists. And if it does, then we'll skip over it. So create another sequel here. And maybe we just grew sequel A. We're gonna do the same thing where we're doing the prepare suggest so that we're sure that everything is as a okay of the content that we're inserting. Weaken, Do select. So a select ex i d from a p I and I'm gonna check to see where ex i d is equal to question Mark. And then we're gonna bind the parameter in the next life. So just like what we did over here, where we about did the binding of the parameters Let's do that in this line as well. So do RS. We'll just call it ours. A sequel. A. And we wanted to make sure that it's an integer, and we're also gonna add an additional check as well just to make sure that it is an integer on. Now let's just execute it. That sequel, that's sequel A. So execute that out. And now what we want to do is check to see the results. I'm gonna create a brand new variable, and this is where I'm going to get the results of this the sequel Query, and we're gonna use yet results. And now let's do a condition if result. So I checked the return value of result. And if results dumb Rose is equal to zero, then we know that it doesn't exist, and we can go ahead and insert it. So it's, uh, in debt this a little bit. So we know that if it doesn't exist, then we can go ahead and insert it. But if it does exist, then this is where that else statement comes in. We want to update it instead, and in order to update it so a lot of this is gonna be very similar, so I can just simply copy and paste it out and make some updates to it. So, ideally, let's call this sequel be sequel be sequel, be our SB RSP and so on instead of insert into Let's do update and we don't need to do into so updates a p I and this is gonna be different as well. So the value is set and we want to set some of these values. So let's ah, let's cheat a little bit and pop over to our Ph cream. I have been and do an update on that one. So we get our update values and actually should have updated even more of the values Eso 1111 that this is just so I can build it that query string eso No, I'm cheating a little bit but it's going to save us a little bit of time. There s so we've got our ex i d And I'm gonna suck not to question work, Question, mark question mark and a question mark And where am I? D equals one. So I actually want to update it where ex i d is equal to. So I'm not gonna be updating ex i d. But I want to equal it too. The value of X i t So now let's buying the parameters. So first we've got cost. So that's an integer that we've got string string integer and so you just need to change and update some of the order of this eso. Now we're updating it were binding it and now we can go ahead and execute that and we're not going to get an insert I d back. But we know that now we've actually inserted. It s so let's some Let's add in one more parameter here. One more item here that we can pull back from our Jason. We'll just call it status, and so status is gonna be equal to We'll just call it added. And then over here, we're gonna do status updated. Let's jump Oh, to our Web browser and pick up the I d. And maybe we'll just hit it. And now let's see what our returned. So we've got status added and this time status updated. Let's go over to our website here. So the ex i d. So first time, What we did is we added it next, we updated it, so let's just make sure that it is updating. So we're gonna pick up. Maybe we can use another I d. So 2023 new value and we'll just do updated cost. So I'm not information over. So we're gonna take a look at number eight here, refresh it. And now we've got our new value. Our new costs are excited, stays the same because this how we're identifying it they're not using. I d were using X i d. What should still at the end of the day be unique, but this gives us the ability to set those a swell and not really interfere with the automatic ordering that we would get from i d. Within the my sequel database there, we've got our updated value and were able to actually distinguish between updating content and adding content within this format. So the next lesson? What if we want to put all of that contents we want out, put all of this content, or maybe want to select a particular I D. And we want to see the values of those ideas. So maybe we don't want to keep going over to this database, have this open. And we wanna have another button here that says Get data and will pick up that value that's within the i. D. And show us the content of that particular role from the database. So how to do that is coming up 15. 18 Get data from Database output as JSON: I don't particularly like having to flip back and forth to my PHP my ad men to be able to see the data that I'm inserting. So let's update our code at another button and pull that data back from the database utilizing an Ajax call. So it's set that up. Open up your editor here, uh, gonna split the view horizontal view and within their. So I need to have my sidebar. There s oh, I want to bring that one down there on go back to my index page and we want we want to do is we want First of all, let's add in another button and this button instead of sending data, we're gonna keep the class, But would you button to and we'll just do get data instead of sending the data, we're going to get the data and a lot of what we did within the earlier lesson, we can pretty much just copy and paste what we've done and then just make some minor tweaks as needed. Minor tweaks and adjustments as needed. So this is our second button not to be confused with the first button. So second, but and this one is actually going to get the data. So we need to update this toe button to, and we don't need to send ah, whole lot of information here we can get away with just sending that ex i d. We also need to send the action so we can get rid of some of this stuff here. And maybe the action this time is gonna be get. And again, we need to still pass those variables output. Jason So and so So everything else is relatively the same S o. This is all we need. In order to send that data over. Let's go take a look at our web browser and see what it looks like. We've got send data. We've got to get data and notice that they get data. So we've got throwing some errors. So we definitely have to take a look at that and see what's happening here and why we're throwing errors of a pretty good idea because we're expecting ah, value of name, which we're not sending over and value of company, which we're not sending over and cost, which we're not sending over. So let's take care of that within our source code and update it. So we're actually not expecting it when we're utilizing of value within when we're utilizing the get action that we wanted to use instead of odd. So if this action is get, we don't actually to pick up all this information. Eso maybe Let's make some quick updates here, and we only need to update that information If it's there, we've got that ex I D. And maybe instead of let's just do I get So the action is now get. So we've loaded all of those into there and we don't actually have any action that we're gonna be doing. So now let's update this yet. And for now, let's some Let's just add that our action is get and we don't really need to do anything else besides that. So let's refresh it. And yet, so it's still getting. We need to reload the page, so we're still getting undefined index action in line 13. So let's go take a look and see what's happening. Still, we're still getting this error, and of course, I still need to get that action in there. So that was not something that I should have removed there So let's bring that back in, go back and try the so it again. So let's pick another value there. So 1 44 get data Eso that looked like that work properly. The action is get the X ideas 1 44 when we had get. Let's just make sure that the send is still working that were still able to update that data so we can update the data and we can get the data so everything is working properly. S let's continue to build out that response. So we don't need Teoh. We'll just do a no split on this now because we don't need to split it anymore because now it's just going into the PHP code. And what we need to do is make a database query selective that proper I d and return back that the values. So we have a lot of that work already done here so we can simply copy and paste. So we're selecting ex I D. From a P I where X I d is equal to the array exciting that was sent executed and we get our results on now we need to just loop through those results return back. All that result information so results. And we could theoretically we could loop through here and return back eso just making sure that the results value is greater than zero. And if it ISS, then we can return back those results. We can loop through a bunch of results if we want, so we can even add in other parameters were we don't necessarily need to search for this ex i d and we can just return back all of the values. That's something that we could do as well, in addition to what we're doing right now. So we're gonna raid out that code and then if we do need to utilize it, we have the capability here within our PHP. So results and and we're fetching the associate ID data That's associate ID and being returned. Here s we're gonna loop through it and essentially, we're gonna add that in. So we need tohave container for that data. So you set up another array here, So just like what we did where we set up that air raid, that initial ary let's set up another container for that data and I didn't those values there and equal it to the value that's coming back within. The rule is essentially. What's happening here is we're going to return back all the rows of data and add that in to our array. So let's, uh, let's see how this is gonna work. And actually, before we do that, we still need to add in that data information into into that Jason object that we're returning. So let's add this in as response. So this is our response to the query about the results that we're looking for that equal this this value here. So let's take a look at that in the browser. So it's hit data. So we're getting the data from I. D one. So there we've got are connected Tru X ideas. One action get response. So we see that we've got an array object that's being returned there. So potentially, if we had multiple items here within the response, we could have 0123 or whatever number off items that we've got that match. Our query value Eso Now, in this case, we're only returning back the one item and let's take a look at that. So we've got the ex I D. So the reason it's only returning the one is we've gotta update that Select queries. So we're doing select ex I. D. So let's just change it to an Asterix. Eso this way we should be returning back all of the values within that response. Serie the first object to take a look at it We've got company, We've got cost. We've got its i d We've got its name when we've got the X i t. So if we update it and so send that data So now we've added it into there. And now whenever we do get the data were actually out putting that same object information . So this is doing a round trip picking up that information from our database and putting it So speaking of output, next lesson, let's I put some of this content, get out of the console and output it within our visible area of our browser s so that we can take a closer look at it and work more with it. So the next lesson where you jump back into some HTML and put some content within our Web browser 16. 19 Dyanmically output new JSON data: we saw how we can send data inserted into update into our my sequel database and also get that data back. So now let's look at our HTML. So we do, like, split there and show the sidebar. And actually, probably we can move this one down and jumped just into that index dot html and hide that side bar there. So my font is really big there. So it's ah, it's taking up quite a lot of space here on the screen. Eso What we want to do is maybe we wanna have on output area, so we want out. Put some of that content is going to beautify it quickly. So everything goes more in line, create a brand new def. Here, give it an I D of output. So this is where we can output our communication information that we're actually getting from the service. We're getting back from our server here, and let's connect to that output the G query and update some of that HTML within that output area. Eso Maybe first we probably have to look at what we're actually getting returned here. And I can also add that in there as well. So Let's we can minimize some of this stuff here because we don't necessarily need Teoh have this much information. So just a streamline that content a little bit more eso even too. If you want to remove the fail, we can do that as well. Eso Now let's see what's actually being returned. Eso When we submit a piece of data, let's refresh this. We clear out our consul area and let's create a brain you item send data. So first of all, when we send data, we see that status is added so we can go back into our source code and we can check and we can do a condition here. So if de status equals added, then we know that we've actually added something. We can say Let's build out of variable here. So just leave blank. I would put right now and we'll do output equal. We'll do output equals output. Plus, I did a you know, Now we're going to see that we've added a new item to the database and we're gonna output that output within the HTML there. We can also we also retrieve back that ex I d. So this this is the value here of what we've put in eso weaken. Just simply just, uh maybe we want to return back the i d or something like unique. Like that new data base i d. Is. And then here we can add in that i d for this item. Uh, and again just, uh is going to be d minus. I d. So we'll see that this is gonna show up when we add content was the wrong page there. So when I go three send data, we see that you added a new item to the database. New data base I d. Is 11 for this item. So that side gives us some more information about what's happened. And maybe also we want output. So we want to only maybe ADOT. And if the status is updated, we won't have a different message. If status is eso, let's see what updated returns back before we save that. So you see that now it's status is updated and we get all of those values there. So you updated you updated an existing item. Maybe we don't even need all of that so we can get rid of some of that excess text there and add in another line break after this one eso Now that we've got all of that out of the way, we can outputs maybe some of the content we can do an action. So here we can do output plus output and equal it too. Action. And we can also output all of those parameters there. So this would be D action. And next another line break here and us. We had action. We were a turning company. Connected cost name. So all of these things we can easily add in here. So we've got d dot company, and that should be a plus that was left over from PHP there. So we do PHP there, there, dots. And when we do, when we do our JavaScript, then they're gonna be plus signs to concoct Nate. That information. So company. And we also had another one for name, and I believe I just did name for the return of that one. So we did have the name. We had a cost. We had a status. We had the ex i d. So you would just leave cost. So I think you get the point here that we can get access to all of this information really easily. Now that's just being returned, so costs. So I think that that's pretty good, that we can return all that information. Of course, we made some updates. Knaus. We got a refresh it. So let's send data. You update an existing item action ad company tester, whatever we have got, make some updates to it. Send data. So actually, that should be cost instead a name just to get things proper here. But I think you get the point there that it's really easy to retrieve that data back now that it's in a Jason, object us. Whenever we send that data, we can see that we can return back all of this information. This is all from the server eso. Now we've got updated and added working. Let's get that get content working, so that's gonna coming up in the next list and I'll show you how to do that 17. 20 Get data output into HTML: the previous lesson we saw how we can update and send the data and we can get a visual here within our HTML of the same thing that's happening when before what we were looking at within the console. So now we can send data. We can see that update existing item ad company test and send that data. We can see that now it's being updated. So this is all updated from the database. Now let's I When we get data, let's return that, get information and utilize that within our responses. Well, so we see that we've got these parameters, We've got action, we've got connected. And the really important stuff here is within that sponsor object. So let's take a look at that. And I put that information within our JavaScript. So we know that we're actually returning back. Multiple items is possibility that there's more than one item that we're turning back within this particular object. So, for here, let's, uh, set up a variable. So we've got our item and we've got D in response, and I want to just pick up that first response. We only do have one response coming back. S o that makes it ideal that we know that there's only the one response. But by chance, if there's more than one, then we'd have to loop through them. But in this case, we've only got one coming back, so we'll check to see if item now exists. If there's content in there and if it does, then let's create some values for that output here. So I'm gonna set up that same thing that I set up over here, where I've got output. And so I'm out putting nothing. And let's add to that output output, the output value and now within here let's do output equals output, plus some content here that we're returning back. So we see that we're returning back some content from the server. So we've got the company cost, name and so on, so we can just put all of this information into our returned information. So this is right. I'm found I d iss. And here we can add in that I d. So now it's going to be item I d is the value for that. And it did that again where I need to have the plus sign to Captain ate it together and we just do a line break here and we can also go ahead and list out the rest of the stuff. But I don't think that that's necessary. So I think we can still get the point there. That item found is number nine. So, actually, maybe we should list out the rest of that stuff. So it's tryto do it really quickly here. Maybe you can copy and paste utilize some of this content that we did earlier and update that here so we can get rid of that. Get rid of it like that instead of D Actually probably makes more sense, is if we just do data and update instead of d will do data response and update this two d It's a little bit of cheating there, but so this this way don't have to rewrite all of that stuff. So let's take a quick look. Just make sure that everything is correct here, and that's missing. Just saying something here and let's take a look at it within the Web browser, So refresh, get data. But we do have a problem there. So item eso somewhere I still have item that I'm looking for. So actually this should be updated to D as well. And so we get back the action company, name one thing that we are missing. So this instead of data D action, it should be data action, cause this is still within that data object. So let's get data. Eso item found ideas nine. Action was get I and company. His company tester is Tester, so we can make some updates to it. Send the data, get the data. We see that now we get that brain you get data value. Were throwing an error there because we're not returning back a value for D. So let's simply just remove that or we could update this to date again. Now that's it s were able to retrieve the data output. It view it. So on going to the consoles, everything is working, properly updated. So whatever we want now we can make calls to the A. P. I retrieve that data and so on. So the next lesson there's some minor tweaks and adjustments that I'm gonna make within the code in order for to function a little bit better. But essentially, this is our project finalized project where we can send that data and retrieve it back from the database using an A P I. So next lesson, we're into some minor tweaks and updates to the source code. 18. 21 Web API conclusion: So we have everything functioning as we want. There's a few minor updates to make it a little bit more secure because we are expecting an I d. Here. So somebody comes and puts in some letters here, sends the data. Well, we're gonna add a new item, but we're not really adding an item. So we go to the database, gonna make this smaller, and if I refresh it because we're expecting a numeric value in ex I D. It's just gonna cope in as zero because that value that we just entered this isn't in America. So, ideally, what we want to dio within that a p i p h p a p i we want to be able to have a way to actually check that content coming in, so I can pretty much close that off. I can just do the no split here, hide this part, and let's update our PHP in order to be able to ensure that the value that we're getting is America. And if it's not, then maybe we could just return back and air or something like that. So looking at, um, our request values there and so on eso What we want to do is we want to output and do a condition. So this condition, I's gonna check to see if it's numeric, and the way that I usually like to do it is to do it with a pragmatic and this pragmatic, so matching to see if we've got a pattern. And if we do have the pattern, then it's gonna come back true. And if we have anything outside, the pattern's gonna go back false. So preg match is the method. It's PHP method, and we need to match it according to be in America. That's the match to see if the value is in America. And then Secondly, let's put that value in there. So this will basically ensure that if it's numeric, it's gonna come back true. If it's not, it's gonna come back false. So before we actually output are Jason information, we can throw an error down here right at the bottom so we could do something like else. And then here we can say weaken return back response, air or status, air or something like that. So let's, um or maybe what we want to do is update the action to error. So we turned back an error. If that value isn't America, let's try it and see what how that works. Now when I click it, we see we get error. If I go back to numeric value were okay again. If I've got any characters in there, we get error undefined, Undefined Because, of course, we're skipping through returning back the rest of that information we still get connected, ex i d gets all messed up and we get all of these undefined Is there eso This is, Ah, precaution. We can take to make sure that we are getting better formatted content. If you're connecting to this ap I If you're looking to connect from on external page and you want to make sure that maybe some of your errors you you don't want your heirs to show up within the A p I. So we've got ability in PHP to display errors. So right now it's on. We can turn that off as well. So the error reporting. There's also options here for the header. So if you wanna access control, allow origin so that this is if we want to connect to it to this PHP file from a different URL s. So this will allow us to connect from a different domain name instead of our regular domain name. And of course, I'm not going to see much of a difference as of right now, because I'm not having it. I don't not showing any years that will have any errors as well as I'm within that same domain. But these air just a few additional precautions you can take within their PHP tile to make it perform better and to be able to utilize that response information Ah, lot better within your JavaScript as well. So I've included all of the source code that I've been working with within this course. In order for you to be able to tryto for yourself, see how it works and see what you can make happen with Ajax and PHP, and you're through my sequel database. Make sure that you do have PHP running. You do have my sequel running on your server and also when you're creating the code, if you're not familiar with any one of the languages, I've tried to go over as much as is required to cover the content of the course But of course, all of these languages there is a whole lot more that can be done with them, especially PHP. We've just scratched the surface of it. J Query. Same thing. We've only used a few methods that are available when j. Query. So there's a whole lot more you can do with these programming languages. And as you become more familiar and comfortable, you're going to see that a lot of doors, they're going open up, and there's gonna be truly amazing things you can do with this combination of programming languages. And when you bring databases into your Web applications, you get a whole lot more additional functionality ability to store that data and really create a meaningful, excellent experience for your Web users. And also just utilizing J Query and Ajax allows you to have a really seamless user experience. So the average user coming in here so they wouldn't necessarily need to see the console they could see I d. So maybe they want to create an account. They could send data, so added an existing item. Odd, you updated an existing item, or maybe they want to create a new one. So added a new item to the database ideas. 14. And of course, you can utilize this returned information. However, you need to use it within your Web applications Action ad company Tester 10. We can also update it, so update an existing item and we can just retrieve that information back so the user can really utilize thing this database connection and so seamless on there and no page refreshes all done through Ajax without page refreshes and connecting seamlessly to the database. So I do encourage you try it out for yourself, make some tweaks, make some adjustments to the source code and see what you can make happen.