Web Forms 2021 - Part 10: How to write server side code and process form data | Clyde Matthew | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Forms 2021 - Part 10: How to write server side code and process form data

teacher avatar Clyde Matthew, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (1h 21m)
    • 1. Class Introduction - Servers

    • 2. Server side processing of form data

    • 3. Two ways to submit a form to a server

    • 4. AJAX - intro

    • 5. AJAX - building the HTML

    • 6. AJAX - writing the PHP

    • 7. AJAX - creating the AJAX call

    • 8. AJAX - finishing off our example

    • 9. Recap - how to submit form data

    • 10. PHP server - example

    • 11. Node server - example

    • 12. Class Outro

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


What we cover in this particular Class?

We have covered a ton of information in this entire series, but for the final Part 10 I'm going to teach you about server side processing of form data. 

Most of this series has been about understanding the markup of forms from the client's (aka: browsers) perspective.

But as you know, this is only one piece of the puzzle.

Once a user submits a form, then the question becomes "where does the data go to". You may be thinking "Clyde, that's an easy one. The data goes to wherever the ACTION attribute says it should go to". And you would be correct.

But how do you write server side code? How do you listen for an incoming request? And how do you then grab the form data and do something with it? 

In this class I'll show you how to do this by coding up some PHP. I'll also show you how to use Node.js. And I'll also show you how to use AJAX. 

Pretty cool right? 


--- in case you're wondering, this entire series is about web forms. 


A web form is also known as an HTML form. It’s a place where users can enter data that’s then sent to a server for processing. Web forms allow users to place orders on your site, to provide their name and email address to sign up for a newsletter, or to sign up as a member to your site and so forth.

What’s really great about web forms is that there is no “one size fits all”. You can use your artistic flare, and personal business acumen to create web forms with a particular length, format, content type and appearance.

By doing this course, you’ll be able to improve your web form usability, which will ultimately enhance user experience and get website visitors excited about completing your form and converting.

Why is this course so important?

  • Forms which are on point present an opportunity for a company to grow and capture loyalty.

  • A form can often be both a marketing tool and a necessity. A form that puts the user at ease, that evokes feelings of trust, will get filled out far more often than a form which looks (or is) complicated and confusing.

  • After completing this entire Skillshare series, you will be knowledgeable, confident and the “go-to” person for forms.

Let me share my form building skills with you

Understanding how forms work will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master forms and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering a perfect, interactive and functional form is challenging. In this series, I take a deep-dive into explaining web forms and how they work. Why do we need to wrap our form within <form> tags? How can you include a progress bar in a form? How can you customize a toggle or checkbox? Where does the data go once a user clicks on the submit button? How can you perform validation on your form? How can a user upload a file? What happens once the data arrives at the server? What are the different types of events we can listen to on forms? By understanding these questions, and many more in the course, you will be able to build advanced forms and better yet, understand the full stack process! In other words, you will be able to create dynamic forms that improve user engagement and experience.


This series is huge and comprehensive, from basics to advanced

This entire series (which I've split into multiple classes) will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience with building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers and how to view all HTTP request information. This is awesome knowledge. This series will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end form web development.

By the end of this series, you'll be able to “speak” and “walk” FORMS by gaining an understanding of how you can build it, manipulate it and style it in meaningful and practical ways. 

Why should you learn so much about forms?

A web form is one of the best ways to get input from prospective clients and indirectly establish a relationship with them. The time you spend in bringing the user to your website should be matched with the time spent in perfecting the user experience with your web forms. It is surprising to see so many sites these days contain complex and frustrating web forms that cause a negative experience.

Ultimately, a web form allows your visitors to get in contact with you and to send information, such as an order, a catalogue request, or even a query, which is passed on to your database.

Can you begin to see how important forms are and how their use can be escalated?

*** The most important course on FORMS on Skillshare***

Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how HTML code works behind the scenes. This is particularly true when it comes to building forms. If you’re wanting to become a full stack developer, you need to know, really know, how forms work. You need to understand how the browser URL encodes form data, how the browser sends data to a URL that you specify, and how to perform validation to ensure the user does not submit invalid data.

A unique approach

You will learn "why" things work and not just "how". Understanding advanced topics about forms (URL encoding, accept-charset, multipart/form-data, regex, etc) is important as it will give you infinite possibilities and upskill you. Armed with this knowledge, you’ll be able to create forms that are tailored to your needs, and allow the form data to get submitted to a server via AJAX. You will be able to create forms that are customizable by the user (for example, if the user wants to change the color of the form theme). You can create a control on a form that displays the progress completion of the form and displays messages to the user along the way.

Can you begin to see how pivotal forms are and how important having knowledge about forms is?

How is this Skillshare course different?

There are lots of courses on Skillshare that focus on web development. Many never get into the detail about how HTML forms work behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential.

In this series, I focus on the more advanced topics of true web development when it comes to forms. This includes understanding what all of the attributes on the <form> element mean, understanding the different <input> types in detail, what URL encoding is, and how data is sent over the wire to a server.

Practice makes perfect

Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this entire series.

Is this course for you?

Absolutely. If you fit in any of these categories then this course is perfect for you:

Student #1: You want to advance in the world of programming.

Student #2: You want to know how successful developers build dynamic forms that engage with the user, have high conversions that put them ahead of the competition.

Student #3: You want to gain a solid understanding of how forms really work

Student #4: You want to start using backend technologies like Node or PHP with forms


Right this second, your competitors are learning how to become better web developers.

Web development is a blazing hot topic at the moment, and in the foreseeable future. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.

Lets get started.

See you in the lectures.

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true


Ideas are a dime a dozen. The hard part is execution. Unfortunately, most people never carry tasks to completion.


I've worn many hats in my career …  As a result, I have an ability to view all sides of a coin, something that is becoming crucial in our tech-savvy world.  


My experience and a few words:


·        I’ve had to learn things the hard way (aka: hard slog)

·        I want to teach people what I’ve learnt, with the hope of making a meaningful impact (cliché, but true)

·        No one is a master of everything. But at the same time... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Class Introduction - Servers: Welcome, Welcome, Welcome back to another class, Medea students. I'm so glad you following along for those of you who don't know me and you just want to learn about servers when it comes to forms, hi, my name is Clyde and I'm going to be your instructor. This has been an entire series around mastering forms. And up until this point, we have only been talking about front side code. But now in this class, I want to focus on server-side processing of form dot. So taking a step back, you can submit a form to a server directly on the form element itself from him, which is have to include the action attribute which defines the URL that the former sink. So we know we can see that the daughter to assume that what happens when the daughter gets desert. Well, this would this process or about I'm going to be coding up at PHP server with me. I'm going to be coding up a Node.js server with you. We're going to be extracting the form daughter, doing something with it and in displaying something back to the user. But let me be clear, this class is not about server-side code in great detail. That's not an entire class of course, around servers that would be 20 or 50 hours long. But I will give you enough. Again, R will give you enough so you can start understanding how server-side code works. The other thing I'm going to be doing in this class, which is going to be fascinating because I'm going to be talking about agents. Now, remember, on a fault, we have the method attribute and action attributes. We can get rid of both of those. And we can submit the form data to a server asynchronously. And what do I mean by asynchronously? It's a funny word n. Well, don't worry, it just means that we don't need to implement a browser refresh when the user clicks that submit button. So we can do it via this technology called Ajax. And don't worry, I'm going to be explaining exactly how it works and we even going to code up examples. So this class really is going to be epic. I really do hope you follow me along. Adios. 2. Server side processing of form data: What can I say that well done for sticking with me in this entire course. We've pretty much reached now no ahead even saying we've pretty much reached our last session in this course. But let's JIRA, because we have learnt a lot that's been a super, super fun time. And in this last section, I do want to touch on a bit of server-side processing. I know this course is majority focused on client-side validation and building forms on the client side. I just don't have enough time in this course to teach you about servers. Servers is a whole topic in and of itself. But I thought it wouldn't be complete if I didn't at least touch about it and talk about it. So when we go and submit a form, that data has to be submitted somewhere. And we've spoken about client-side validation that you need to perform checks on the front end because it increases performance and improves performance and improves UI. There aren't, you don't want the user to submit a form, it goes to the server. The server then says, Hey, there's an error, sends it back to the user. You don't. Molly, you want to try and avoid that if you can. But as I keep mentioning, front side validation is not enough. You do need more. And you need to also ensure that your server-side code checks the data. But again, that's a topic that's beyond the scope of this course. But what I do want to show you, I want to show you that they are different ways to submit the form data to a server. And I keep saying you can use the form record like we can put the method attribute on their gait or post request. We can put the action attribute and that defines where the daughters being scenes and enter your server listens on that URL for that request and processes the daughter. But there's another way. And the other way to submit form daughter is via Ajax. Don't be intimidated by all these fancy words. Ajax just means Asynchronous JavaScript and XML. So what I wanna do in this section as I want to talk about these things, but more I want to show you examples of using Ajax. I want to show you an example as well of creating a PHP server and actually submitting data to a server, the server listening for the daughter and then displaying something back. And I'm not going to only give you a PHP example. I'll also start up a node server, show you how that works. So it will be an interesting section. It's not going to be super long, It's not going to be super detailed, but it should give you enough so you can get started yourself on more complicated server-side processing crew. But enough said, I'm just talking and talking and talking. So let's jump into the very first lecture in this section are Conway it. 3. Two ways to submit a form to a server: We are going to be talking about submitting forms in more detail now. And what I mean by this is that I just want to discuss what happens after you submit a form. As you and I already know this the frontend aspect of Bolding the form. And then is the client side validation. And once that process is complete and everything is valid, what happens next? Well, generally speaking, there are two ways to process forms. One, we can use the action attribute. And remember we use this action attribute on the form element itself, right? Remember, and we can use that to send the form data to a back-end URL. And that back-end URL will then process the form and redirect the user to a success or error page. And if we use this way, we don't need any JavaScript, right? It's as simple as using the Form Wrapper and putting the action attribute on it. It really is that simple, but sometimes you want more control. And using the action attribute is not the only way. We also have Ajax. And we can use ajax queries to submit the form without even leaving the page AKA with no page refresh. If you've been unsure what AidAccess or 12, but more information. Please check out my CLP course. But I am going to stop this lecture shortly and I'll show you an example of Ajax. But anyway, the point I wanna make is that when we use ajax, we do have to also use JavaScript and therefore, success or error messages are displayed on the same page by manipulating the HTML with JavaScript. Now, I just want to say, depending on how your company organization is structured, form processing may not be part of your job role is a front end web developer. And if that is the case, you'll just need to coordinate very closely with a back-end developer to make sure that the form submits the correct name value pairs. Otherwise, it's going to be up to you to make sure the front-end and the back-end of your forms fit neatly together. Okay, so you've got a drought. Resubmit the form. We can use either the action attribute on the form element itself, or we can use ajax queries. But regardless of which approach we use, the next step or the process remains the same. In other words, I want to talk a bit about now when the user submits a form, where does their daughter go and how do we handle it? Well, this boils down to the client server architecture. At its most basic, we have a browser which is known as a client and a server, right? That's where all the files of any webpage sit. So we know that we've got a browser and we got a server. Well, the browser, aka the client, whatever you wanna call it, it will send a request to a server, or do I mean by server? I mean a server like Apache or Tomcat or Node.js, et cetera, et cetera. It's going to be sending it to a server, but it seems that how it seems it using a protocol, a set of rules. And typically when we're talking web, we talking the HTTP protocol. Okay, Have you got it? So the browser scenes and HTTP request to a server, what does the server do? We'll server has to listen for that HTTP request. And when it receives that request, it has the processor daughter, and then it issues a response using the same HTTP protocol. And that is the crux of it. That really is the crux of it. So don't get bogged down with all the detail in HTML form. And a webpage is nothing more than a convenient, user-friendly way to configure an HTTP request to send data to the server. And it allows the server to listen for that request and send a response back to the client. Very, very cool, very useful. But like I mentioned, I want to stop here before I even start talking more about servers. And I want to show you what Ajax is, because I don't want you to be wondering this whole time, what is Ajax limiters tackle the elephant in the room. See you in the next lecture. 4. AJAX - intro: I love doing this stuff. What is it I want to show you now? Well, as I mentioned, the two ways we can submit data to a server via form, right? We can do it on the Form Wrapper itself by using the action attribute, that method attribute. We've done this many times before, but I've also now mentioned that we can use Ajax. Like what does ajax all about? Well, I don't want you to get bogged down in all of the detail. Ajax stands for Asynchronous JavaScript and XML. Egypt's an ajax is pretty cool. That allows us to basically submit data to servers and retrieve data without implementing a page refresh. So it's very, very useful. We also not limited by the types of methods. Remember when we're dealing with the method attribute on forms, we can only have GET or post. That's not the case with Ajax. If you need to update something in the database, you can see that via the update method, PUT, delete, et cetera, et cetera. But Clyde, these are just words and you're a 100 percent writes. Nothing, beats an example. So why don't I hop over to the editor? Why did we start up a server? I think I might use PHP here, could have used node, but I'm just going to use PHP. And then why don't we use Ajax and I'm not going to use the new Fetch API. I'm just going to stick with the traditional ajax because once you understand that, Just me picking up the new Fetch API will be very recently. So we're going to use Ajax. It's kind of a form that start up a server. And let's submit our data to a server. It's going to be super exciting. But we're going to use Ajax. Sit back, grab a coffee and enjoy. See you now. Before we start coding, I just want to show you exactly what it is we're going to create. It's going to be really fun. You can see here we've got a very simple form. I know it looks ugly, but I don't care about the CSS. I want to show you how Ajax works and I want to submit this form to a PHP server. So what do I want to create with you right now? Well, let's try and submit this form. Look at that. We get an error message. Your funky username is required. Choose a food men that if we get our HTML, look at our index file. There is no required attribute on the input elements. Can you see? So what this means is that we are performing server-side validation. Wow, awesome. Of course, if the user chooses username and tries to submit the form, we only get an error now associated with picking their favorite food. If the user doesn't have a username that puts the favorite food is grass. Click submit. Early username is required. The user can then fill it in. Click submit. And we are successful. Here we get displayed a success message back from the server saying everything has been done. How awesome is this? And this is what I want us to create. It's going to be very, very simple. Like I mentioned here as our index file. You'll notice that we using ajax right? On this form wrapper, there is no action attribute, is no method attribute. And as I mentioned previously, when we using ajax, we use in JavaScript. So that's why I've got the script tag here. We grab all our elements. We listening for a submit event on actual form. We prevent the page default refreshed from happening. And in we're using Ajax specifically, I'm going to be using this XHR object. Don't worry too much about understanding the code. I'm going to be writing this code up from scratch with you in real-time. In fact, are actually already coded this up in real time with you. And I've just obviously used the end result of the code to form this introduction video. So there we go, hope it's making sense. Try and give it a go. At least just try bold the HTML form. Don't worry about building the PHP file. And then Ajax, I know I haven't taught that yet. So we're gonna go through that together. I seriously can't wait, I'm super amped. See you in the next lecture. 5. AJAX - building the HTML: I hope you are as excited as I am. Because for the first time in this course, I'm going to show you what Ajax is. Now, let me be clear. This course is not about Ajax, and it will take me a very, very long time to really explain what Adriana is to show you the XHR object versus new Fetch API. I don't want to get into so much detail. All I want to show you is just a high-level overview of what Ajax is. And that it is a real alternative to somebody form dotted. Because this is probably going to be quite lengthy. I just want to start off with the HTML. Then we can take a break. Then in the next lecture, we can finish off by coding our PHP file, setting up the server, and encoding our JavaScript. Because you've got all these little areas that are going to be displayed. It's going to be really fun. Icon weight. So let's start off with the HTML. Of course, blank file, right? You know my style. So we've got HTML. We are going to need to include CSS. I'm not going to put it in a separate CSS file because it's going to be really simple at don't want to concentrate on CSS in this lecture, It's going to look rather ugly, but it's more that back-end code that I want you to understand and code with you, not CSS or ads. And then of course we, in our body, this is where we have all our HTML. And of course I want an H1 heading, right? And this is submitting form to a PHP server. So on precise submitting a form, a PHP is our H1 heading. Very, very simple. Everything else, I want to wrap it in this form element, but do we need an action? No, because we're going to be using ajax. Let's remove this action entirely. This is what's really cool. And I want to now create our form. I want to wrap each form control within its own div element. And why don't we give each control its own ID. So this div can have an ID of username wrapper. And within here we can have a label for username. We'll just call it name. I'll show you something new here. And we can also use, what is your cool? Use an m. Now we can have an input of type text. Very simple. We can give it a name of username. And remember, this is the name that is submitted to the server. We giving our variable name, the name of user name. The ID has to match the name of that for attribute which is named. And that's why I wanted to show you. It doesn't always have to be one value that's used on the for attribute, the name attribute NID. And let's give this a placeholder. Make it funky. And that's it. It really is the simple. And let's create another form control here, asking for the user's favorite foods. So why don't we give it ID of food wrap up and yeah, label, Give it for attribute the value of food. We can ask the user what is your favorite food? And of course, input type text. The name that we seem to the server can be fair food. The ID has to match the four attributes, name of food. And again, let's give this a place holder of Yum, what I wanna do, you see we've got two inputs. Charat actually want to give each input a class of input to make it very clear. So on both inputs I'm just adding a class of inputs. You'll see how we use that later. And then finally, we've got a form. We've got nowhere to submit the form. So of course let's do a final div. We don't even need to give that an ID because we're going to have one button on this entire form, which is a pattern of types of MIT. And we can give it a value of my details. And of course you already know we don't need type of submit Dewey, we could just do this. Anyway. I liked being very explicit. It's look on the browser now. And then we go kind of looks okay, like I mentioned, I don't care about the CSS. But in saying that, let me just seem to everything. So that's just scroll a piano file. Its target, the H1 and the doves, give it a width of 70 percent. I'll say it. And now I wanted seen it. Let me show you exactly what I'm doing. It's inspectors. Look at form. Can you see if we look at our form elements, It's all pushed to the left, all our text and allow widgets. I wanted sintered to center that all we have to do is access the text align property in CSS. It is really, really that simple text align center, right? All we have to do if we save this and we look now, now seated, okay, but remember we gave it a width of 70 percent, says why it's kind of not exactly centered to exactly centered. I want to affect its margin property 0 altar and see what that looks like now it's exactly in the center. Really, really cool. But you can see there but bunched up to each other. So why don't we maybe give a top and bottom margin of 10 pixels. There we go. I think this is fine. For example, I want to show you. So let me stop here. We've done our HTML and CSS. Take a break. Think about not necessarily the code and the syntax on how to write it, but think about what it is we need to do. It's going to be super, super interesting and super fun. I can't wait, and I'll see you in the next lecture. 6. AJAX - writing the PHP: Welcome back. Welcome back. I'm having a lot of fun. So what is it that I want to do in a PHP file? Well, when we submit this daughter, I want to create two types of arrays. I want to create an array, and I want to create a daughter array. What is an array? Doesn't worry about exactly what it is. Just think about it as a very big container that allows us to store things inside of it. It's almost like a container. I think that's the best way I can describe it. The eras arrays and you're going to be full when the errors and a daughter array is going to contain our success status. Whether we are successful or whether we have failed in our form submission. And it's also going to contain a message, or it's going to contain that eras array if there are any. So it's going to be quite interesting. Let's cut up the PHP together. There'll be very quick. And then we'll finish off with JavaScript. Let's get cracking. So all we need to do is we need to go to our file here. You can see our directory is empty. By the way, we've only got an index.html file. And remember we've got very, very simple HTML here. We've got two form controls in a pattern. Now, you guessed it, it's created our PHP file initiates, call it PHP server file. And remember the extinction dot PHP. So there we go. We've got our PHP file. Remember, syntax of PHP? This is our PHP. Okay, so let's get started here. I want to sit up two arrays, as I mentioned, one for errors and one for the daughter. How do we set up an array? We'll JavaScript, we use a variable keyword like little const in PHP, we don't, in PHP, we use a dollar sign and here we want to call our array eras. And we use the square bracket notation, just like JavaScript. And then I want to set up another array called data. Rots, rotten all the empty. You can see we've just set up to empty arrays. The next thing I wanna do is I want to create Allah error messages, right? How do we do that? Well, it's very, very simple. We can access the if statement, again, very similar to JavaScript. And this is what's cool about server-side code. My dear students is that once you learn one server-side language, It's a lot quicker for you to learn others because the syntax is largely the same. Anyway, we've got an if statement and we want to say, right, if you just go to our browser here, we've got this form. If the user doesn't feel anything in the username, we want an IRA. And you'll notice on the client side in our index file, we don't have the required attributes. In other words, we not performing client-side validation. We can do it on the server side. Right now the user can submit this. We don't want that to happen. So we want to check if it's empty. If what is empty, Clyde? Remember we've got this PHP global variable post. We know we've called our variable username. If that is empty, then we want to execute something, right? We want to execute something between these curly braces. But you understand what it is we've done, we've used the empty word in PHP. We saying if that post variable is empty, then what we want to happen, we want to populate our errors array. We want to create a new era array where we push in a name of username and we assign it the value of our message, which is your funky, the username is required. Does it make sense? I hope so. Think about what it is we've done we checking to see whether the post variable contains a key value pair with key is used in him. And if it's empty, we wanted then populate our errors array with a key of username and assign it a message of your funky username is required. That's all we've done. And now we can do exactly the same to create our next error message. Can you give it a go? Give it a go with the Fair Food. Within our index HTML file, we have given the food variable a name of fav food. So just pause the video here quickly and try and create your own custom error message, but this time targeting the key or fair food. Alright? Alright, right, Hope you gave it a go. If not, don't worry, we literally just do the same as we did above. If it's empty, if what is empty? Well, if the post variable does not contain a key of that's right. Then we want to access our errors array. We want to now push in a key called Fair Food. And we want to give that or sign that the value of our message, which is choose a food man, have very, very simple. And there we go. That is literally all our error messages. The next thing I wanna do, right, is to check whether we have any errors. And create our daughter variable, sorry, our daughter array. Accordingly. What don't want to do first? Well, let's deal with the case where we do have areas, right? And if we do have eras, we know that our errors array is not going to be empty, right? We know that our errors array is not going to be empty. That's all that that syntax means. And in that case, I want to access our daughter array that we've defined above him. You just scroll up here. Remember we defined to erase the daughter ran areas are now accessing the daughter array. And I want to push in here to keep the one is going to be success. And that is going to be false because we know we not in a successor state. The other thing I'm gonna do is we're going to access our data array, pushing another key, this time called eras. And we're going to assign it the value of our entire here is array. Really is as simple as just like JavaScript, we can use an else statement. Now we know we dealing in the success case because now we know that our errors array is empty. Meaning if we scroll up that both username and fair food had been received by the server. In that case, it's very simple. All we wanna do is grab our daughter array, define its key of success to the value of not False, True, because now we are in a successor state. And then the final thing I wanna do only in the success state is I want to give this a daughter array, a key of message. And this is going to be our success message. We can say success. The daughter has submitted to the server. They, we go. And finally, let's echo back our results to the client, aka the browser. Raul browser. Sorry, not thinking straight to there. And I once and I want the format to be in JSON. So all we need to do is x is pH peas eco function and it's JSON encode function. And you can see my ID is already telling us what it returns. It returns the JSON representation of a value. And I want the daughter array returned. Hello, my dear, dear students, this is it. This is all our PHP server-side code. Very simple, right? We're not dealing with anything complex. I don't want to be complex because server-side code, as I keep mentioning, can get very complex and very long and beyond the scope of this course. So just remember what it is we did we sit up to empty arrays, one for errors, one for our daughter. We create our error messages by saying if either of those values are not present, when the server receives the daughter, then create an error message, put it in our errors array. Then we define our daughter rate depending on whether we are in an error state or subsystems. And then finally we send it back to the browser. And by sending it back, I'm just saying we sending our data array back to the browser. And remember this data array is either going to contain errors, in which case the success value will be false or the success value will be true and it's going to contain a success message. Why don't we stop here in the next lecture, we're going to code up ajax is going to be super, super exciting. I can't wait to see you now. 7. AJAX - creating the AJAX call: Welcome back. This is such a cool example, isn't it? It's got out index file. And yeah, we all, we've literally got a very, very simple index file, but no action attribute on the form. Remember we going to be using ajax. We've coded up our suicide file that's going to give us error messages or successful depending on whether the form is valid or not. So how do we talk Ajax? How does it work? What do we do? Well, it is JavaScript, right? Ajax stands for Asynchronous JavaScript and XML, and we know all JavaScript has to be included within. The first thing I wanna do is I want to grab form and impulse. First thing I want to do, I just want to grab them and put them in variables. If we need them later, we can use it. So for example, let's grab our form, that's excess documents, query selector. Then we want to grab off. We've got a full and we can also grab our input strength. We can grab our username inputs, do the same thing, documents. But this time let me just mix things up. Let me say get elements by ID. Remember we gave it an ID of name. The reason we can't use, by the way, query selectors that only select one element. And as you can see, we've got input elements. That's why it didn't exist. The querySelector get element by ID. We can do exactly the same thing now, all the food and what's next is our document object on yet get elements by ID and we gave it an ID. Scroll up and I'm going slow, but you need to stay with me. We're going to get more complexity. Gave it an ID of food. So even though we've got both of our input elements, but I also want to grab our reds up to dig rabbits. Let's grab the one called main that we ingest documents it elements by d and we give it an ID and username. We can do exactly the same thing. But now we can say the document get elements by ID we gave it was read and I think that's it for now. I mean, if you have missed something with moist moist, grab it later. So how do we kick everything? We need to listen for any veins are only one to start executing code when the user clicks on this seemed my details button. In other words, when the submit event has been fired on the form. So in order to listen for the submit event on a form, grab off all variable. We then add an event listener and the event we want to listen for us and motivate. And then of course we want to execute our callback. And just to show you it's working. We can console log. Hi, yeah, we got excess console. And just click submit and we get high. So we know it's working. But you'll notice every time the user clicks on submit and get a browser refresh. And I don't want that to happen. We've done this before as well, but when you use the addEventListener method, we get given a object, specifically the event object. Usually it's common practice to put it in a variable called e. We could call it anything you want. And on the event object, we bought a method called prevent default. It's basically going to prevent the default behavior of the browser. And that is, it's going to prevent the browser from doing its refreshed. In fact, it's going to prevent the browser from even sending the data to a server. So if we just refresh now and now the user clicks submit, we don't. In fact, we don't even get things appended to the URL and just make it very clear, right? This daughter in each of the input elements, user clicks submit that nothing happens. And this is brilliant. We are now in complete control as to what happens next. What should happen next? Well, the next thing I wanna do is I want to grab all of our whole daughter. And we could start doing it ourselves. But I want to use the daughter API given to us by the way. But in other words, I want to define our form data in a variable called daughter. And I want to access a web API called form data. The form daughter has a constructor that just creates a new form daughter object. When we use it, that object is going to be populated with the forms current key values using the name property of each element for the keys. And they submitted value for the values. And it's super easy to use. We just use the new keyword because it is a constructor. And of course, we exit this. Daughter. Mid already tells you what it is. We can use it easily with an Ajax request. And of course it takes one argument and the one argument it takes is our entire full. So that's a law firm daughter in this variable. And like I mentioned, we doing this because we're going to be using Ajax and the object we're using an ajax is going to require this form dot object when we submit it to the server. Let me just write a comment here. Grabbing daughter. Now what I wanna do is for the first time, I want to sit up. Ajax. A few different ways to set up an ajax query. We could use the new API, but I don't want to do that. I wanted to show you the old school way of setting up an XML HTTP request object. The reason I want you to know that way is because once you know that way, the Fetch API is going to be super easily. Okay, So I'm going to be using XHR object. Me, show you what I mean. The first thing I want to do though, before I sit up, ajax is I wanted to find two things on a defined the URL, aka way we going to send the form data to. And I want to define its method is post as a delete is it puts, was an update, etc, etc. Let's define a variable called URL. Let's submit it to the same directory when rights, but PHP server file, but PHP. So that's where we're going to see our form daughter. That's almost equivalent if we were on our form element here and we had the action attribute, same thing, we just putting it now into an Ajax request in a URL. Then let's define its method as post. That could have easily just have been gated, but I decided to use post. And now we can actually sit up our age ajax query in a variable called XHR. In order to set up an ajax query, we accessing the XML HTTP request constructor. So we have to use the new keyword. We exist in HTTP request constructor. That's nothing we've defined that is provided to us straight out of the box by the browser. So there we go. We've got our XHR object. Now, in order to open and seemed an Ajax request, we have to first open the request within, have to define what happens on a successful response, and then we have to actually send the request to the server. So let's deal now with opening ajax request. This is step one. Remember these three steps, right? Opening up our Ajax requests to step 1, open it up, we access our XHR object and on-hand is admitted old ogre. And you can see it takes two arguments, at least. The first is the method, and we've redefined the emitted in a variable called method. We've defined our URL in a variable called URL. And then the last argument we can give this open method is whether we want it to be asynchronous or synchronous, we want it to be isochronous. Possibility of true simple practice, we've literally opened up. Step 2 is define what happens on a successful response. Again, the many ways to do things when it comes to coding, how do I want an odd the final happens on a successful response. Will something you need to bear in mind is that there's an onreadystatechange property that's fired through the whole Ajax process. When Ajax makes a call to the server, there's an event fired when the server receives it is an urbane fired through the whole chain, a PhD, when it comes back, another event is fired. So what I'm saying is I'm going to be listening for the onreadystatechange, but I'm only really care about when the ready state is four. And when the ready state is four, basically means that Ajax pool is been successful and we received the response. And I'm going to be listening for when the status is 207. Everything has been successfully completed. So let's do that. Like I mentioned, all I wanna do is I want to access our ajax objects and they want to listen for the on ready state change if instead of fired consistently. And every time it's fired, we're going to implement the function, execute a function. But we only really care about the one state. And the one state is if the XHR object as a ready state of trial for him at all complete. And I want it to be 200. Because now in this block of code, we know that everything is been successfully hoping that we know we've got the response. So this is kind of way the meat happens is that all the interesting stuff happens in our server file. We scroll to the bottom. We know that we've given back the browser this data in JSON format. So when we grab it, I actually want to convert it into a JavaScript object, nice object that we can work with. So let's define a variable called response. We are going to exist Jason objects. This is given to us by the browser. It has a method called PaaS, and we want to pass in the actual response and to access the actual response, we grab our Ajax XHR object. And on here is a property who responded, said they we go, we've got our response. And then what do we want to do with this response? Well, let's define the success case. If the response is in a state. Now remember, we had the success property on our response rates. We grow here in our response, aka in their daughter array. We've got a property called success. And if it's in a successful state, we know it's going to be true. So in other words, we're going to say, if this is true. What do we want to happen? Well, very, very easy. We want to access our entire form and change its inner HTML and assign it the value of the property that our PHP file. We've given our response, I'll daughter and Mrs. property, and that is our success message. And maybe I should stop here. You know what I'm gonna do? Let me say failure case. But I'm not going to code anything AT what I wanna do is I want to seem this and it's just T stock code. This don't go too far before tasting. In other words, I want to see now ajax request. So outside here, I want to do step 3, our Ajax. And this is very, very simple. All we have to exercise Ajax XHR object and of course, existence seemed needed. And remember, we defined all our form data in the form daughter variable. That's why we did it. So what are we sending to the PHP file we've seen in the daughter? Save this. Now, in order for this to work, we need a server running and we go to the browser now is just go to the console. If the user types something in CGD, it's not going to work better. Console, we've got a four or five method not allowed. In fact, if we go to the Network tab and post requests, I'll serve as not running. So nothing will happen. But what's really cool is we've got this whole daughter, right? So we already know that form daughters being sent in the body correctly. It's just the case that this PHP server file is not found. So why don't we go here till this current server, which is what I've done, rots and MIT start our own server. So let's open up the terminal. And all you have to do is once you've got PHP installed on your device, you can start up your own PHP server on a local host. Will you do is you write the keyword PHP dash capital S for server. And we can tell a server on which port to listen to. Yeah, I want to listen to localhost 8 thousand this. And we're done. It's not like we can do is we got up browser, localhost 8 thousand. And here we go. Yes, I'll literally listening to the console. Here we think, if we now type in a value in each field and click Submit, what do you think will happen? That shouldn't happen? Because an unexpected bracket, PHP is we have to each statement with a semicolon, city of me. Here we go. I'll save this, refresh this set of user types in each box. So we shouldn't get there as we submit. And is all success message. How awesome is that? So there we go, it's all working. And what's really cool is that it's all coming from this right? Now. I want to deal with this. 8. AJAX - finishing off our example: Shall we say there is no exclamation mark. If our response object does not have the name we want to deal in this block of code. And let's deal first with the username era. Let's look at the response. Remember, this response is going to have the eras objects. In this era's objects. If we did our file here, we're gonna give a key username. Almost eras object. If there is a username, then we know we are in an interstate for a username. What we do anything crazy, It's just console log. And we can do the same thing now, when it comes to username, that food, food era. If the response object has this era's array and we put a key that exists. Then we want to console log, just making saints, sort of Exxon browser. Let's go to the console. It's actually exits localhost 8 thousand. It's now not include anything in here that's seen. The details has been submitted. Why is it doing that? Well, this is awkward. I think I've actually spelt wrong. That's my whole issue. Era should be everything. Irr, think that's okay. So now let's refresh the browser and see the username era. Probably fair food. So let's go here. Index files will be easy to fix. Eras, eras, go back, refresh, seemed to get a username era and a food era. Simple misspelling is cool. So many issues anyway. Okay, so now we know that I'll failure cases all working, which is really, really cool. But now I want to start adding error messages. So let's just finish this off fairly quickly. We are almost done. We don't just want to console the console. We actually want to code and fix some CSS. So why don't we say in this case, we know that we've got an ear on the username. We access our username input, the elements itself. We access the class list API, which you've seen before in this course. And we want to add a clause, and let's add a class of main or Aramaic. Let's scroll up tell CSAs. Let's define a class of era main. And our air main clause can just have a border of one pixel solid. Save this got our browser. Refresh everything in the console. Since the daughter of applied styling to that input element, that report, I can see it and we can do exactly the same thing. With scroll down the console. We can grab our food inputs exist the cost list API at a class called Era. We save this, got our browser, refresh, transcend everything, and now we get errors on both. It's very, very quick, very intuitive. But I want to do more. I also want to add a message. So why don't we add an error message? In order to add an error message, if we look at our HTML, we've only got an input runs. But why don't we add dynamically a span element and within expand elements, we can have our enemy. So now the error message, well, I wanna do is I want to define a span elements and we can dynamically created by accessing the element method on the document itself, an element we want to create as a span. I then want to put in our inner message. All we have to do is access our span, faked its inner HTML property, and we can use temperature tools yet. You don't know what they are. Please check out my JavaScript calls. But it's basically just a way that we can write, takes n variables easily. The variables have to be within this dollar curly braces format. So we want to now x is our response objects. And on, yeah, we put our eras object and we want to access. Please remember that our file, we basically accessing this. I'll eras using Anki. And that's going to return us almost, you know what? Because we are not even including takes. We don't need to just realize that now. So we can just do this simple. Before I continue what NDT, we look at the browser and see the enemies as well. Let me ask you this. Do you think the error message will display in its current form? One, because we've created the span elements, but we haven't put it anyway, it's floating in space. We haven't told it along. So if we go to the browser, but now we still don't see an error message. To see the error message, we have to attach the span to something. And if we look at our HTML code, Why don't we append it to the main username, rapid? Super, super easy. All we have to do is we grab our elements and we exit this property called the paint. Really, really easy. All we wanna do is we want to paint all span to the browser. Now. We see, sorry, let's refresh. And we are now getting an error message. You'll funky username is required. Of course the styling is terrible. Why don't we add some styling? Why didn't we edit costs? We can access our span API and we can edit toss cold era. Why don't we do exactly the same thing, but add another clause called input. So let's go to browse a bullet before you actually submit again that's defined these losses and you'll see why I'm doing two pluses in a second. So the first class I wanted to find, Yeah, Is era. We can display inline and we can give it a color. I'll say, yeah, we've seen funky username is required. Let's do exactly the same thing now. For our food is defined I span element, element, element of the span. We're just going through the same versus span in HTML and our response objects on here, we've got our ears objects. Then we want to add the class list API. We want to add era close to this input. And of course, we don't want to access self.name. We want to access alter food, retina. And we want to paint this span element to the browser. We getting error messages. Now, I'll also is this Medea students. But you'll notice a problem now, because the problem is if the user clicks again, we just duplicating our messages. It's gonna start getting SQL. Actually, let me show you the problem in another way. Let's say we use a first falls in is username that forgets the food. We've got an error. If the user deletes username includes food and click Save, We still getting that invalid state on the food inputs and it shouldn't be lacking. So in a way, we need to tell the browser, refresh everything every time the user clicks on. Turns out it's very, very easy. And this is why outputs, if you call it I HTML, this is why I put the class of inputs on all of these clauses. And it's the reason we edit a class of inputs to these spans. This is the issue I'm going to be dealing with, right? Right. So before we start dealing with success cases and the failure cases format, every time it's submitted, right, we went to almost start from scratch again. So in order to do that, Let's grab all of our inputs. And you can do that by documents. Get elements by class name and the class name we've given them all this input. And this returns a collection. So we can use for, of loop, which is very intuitive. We just grabbing every item in that collection. And through each iteration, we get excess to each item and we put that item in a variable called item. Let me show you what I mean. So we're going to grab each item in the collection. We're going to exit the closeness, the API, but this time I want to remove all eras, rot, all error messages. I'm going to remove the era main clause. And we going to remove the era. Save this, the browser. Refresh. In order to test this, let's seen this. We get our first error message, which is fine, that's seen it again. Now we've got another problem because its span is still showing rot, your funky username is required. We've removed the styling, the rate is gone, but the actual span is still. So what we need to do is actually in our CSS file here, we need to grab our span and sit its display property. Save this. Refresh again. That's kicks in again. And we still an error state, but we're not duplicating this span. It's not full. First item and it's entirely fixed. We removed the red border, we remove the error message entirely. And I'll use a can. And we've got a success. But you know, what we haven't done is we haven't styled the success message in any way. Can you figure out how to style that? Well, it's very simple. All we have to do is just call it success. We've done ticks, the line would login. Yeah, why don't we just copy paste rocks. We can give it a color of green. And all we have to do is in this case, we want to access a list API and we want to add it to save this, go to the browser, refresh. And there we go, success. The daughter has been submitted to the server. And what's really cool with even scroll up here. You can play around with it. A nice background color, widescreen. Adding three pixels at random. Take a regards even a much more bolder success message. Don't even have to make it that wide. Why don't we do it 50 percent. I'll also use this Medea students. I know this has been a very long lecture, but I want you to at least get a feel for how server-side code works. How you can start creating error messages, kicking dots on the server side, sending back a response in the browser takes that response. Javascript state things to the screen really has been an interesting example. I know I've had fun putting it together. I loved coding, but don't get lost in more detail. Let's just walk through it. But I'll CAC is at the top. Today. We've got a very simple HTML. Complicated. We disrupt each widget, class name. We have Australia, and we use the script tag with the easy Ajax. And to use Ajax and JavaScript, we use Ajax in the form of this XHR object. And they meet competed off the stapes. We opened up the equation within defined what happened on a successful request. A. We just think we're ready state of Florida status to a 100. And when that happens, we checked whether we see staple failure just to do different things for premium. And finally, step 3 of the ajax is to see now replaced. So the user sees the baby simple opiates should have. Don't worry too much about the syntax and the code and kind of write it. That comes with a lot of practice working with server-side code. And I don't want to get compensated for soups accredited school psychic saying in, but this should give you enough to get started and getting a lot of fun. And I'll see you in the next lecture because I still want to talk about server-side code in a bit more detail. Audios. 9. Recap - how to submit form data: Well done for sticking with me. Hope you're having a lot of fun. Now I just want to talk about how to send data client-side. And what I mean by that is how do you define where and how to send the form data? And right now I'm not going to be looking at ajax. I'm going to be looking at our traditional form, right? Submitting it via the HTML form. And is a very quick recap. You know, the client server architecture already done here. We've got a browser, we've got a server. The browser sends an HTTP request to a server. The server responds with a response using the same protocol that you already know this, you already know this. But let's talk about this in a bit more detail. Specifically, I want to talk about the request part of it. How does the browser to find where and how to send the form data will, as you know, we've got two attributes, writes, the action attribute and the method attribute that we place on the form element itself. And these are the two most important attributes on the form element. So then how exactly do they fit in? Firstly, let's look at the action attribute. And the action attribute basically defines or tells the browser where to send the data to. And its value must be a valid relative or absolute URL. What happens if it's not provided at all? If the attribute isn't provided, then the daughter's going to be sent to the URL of the page containing the form, AKA the current page. And because the action attribute is telling the browser where to send the data, the obvious counter to that is that, that actually value or URL should be a file on the server that is listening to their daughter and they can handle the daughter. And as a bit of FYI, it is possible to specify a URL that uses HTTPS, secure HTTP. And when you do this, the data will be encrypted along with the rest of the request, even if the form itself is hosted on an insecure page accessed via HTTP. What's interesting is the flip can also work right? If the form is hosted on a secure HTTP page that you specify an insecure HTTP URL with the action attribute, all browsers will display a security warning to the user each time they try and seen the data, because the data is not going to be encrypted. Anyway, that's just a bit of FYI. So that's the action attribute. You can kind of view the action in the server going hand in hand. Point, right? It's where the doctor should go to. And then we've got this method attribute. And the method tells the browser how to send the data. And the HTTP protocol does provide several ways to perform a request. Html form data can be transmitted via a number of different methods, specifically using a GET method or a post method. And to understand the differences between a GET and post, you need to step back and examine how HTTP works. Every time you want to reach a resource on the web, the browser sends a request to a URL. And an HTTP request consists of two parts, a header and a body. That's right, the header contains a set of global metadata about the browser's capabilities. And the body contains information necessary to the server to process the specific request. So then what is a good method? Will the GET method is the method used by the browser to ask the server to send back a given resource. And in this case, the browser's going to send an empty body because the body is empty, if a form is said using this method, the data sent to the server is going to be appended to the URL as a series of name value pairs. And we've seen many examples of this in the course. After the URL web addresses ended, there's a question mark and then followed by the name value pairs, and each one is separated by an ampersand. We've seen this many times. And then we've got this post method. The first method is a little different to get. It's the method the browser uses to talk to the server when asking for a response that takes into account the data provided in the body of the HTTP request. As you already know, if a form is sent using this method, that data is appended to the body, not the URL of the HTTP request. So there you have it. This is how we define where and how to send form data to a server. I know you already know this, but it's always good to recap, especially at the end. So everything can just sync and hope it's making sense. 10. PHP server - example: I'm super-excited because now we are going to be looking more at server-side and we're going to be looking at a few examples. I'm super, super amped. And by this, I just mean we're going to be looking at retrieving the form data on the server. And nobody spent a lot of time talking about the client side, but I'll just head to head to Alicia you a bit of server-side code because whichever HTTP method you choose, the server is going to receive a string of data. And it's going to receive the starter ultimately in a list of key value pairs. And the way we access this list, this list of key-value pairs is going to depend on which server-side language you're using. For example, you could be using PHP, Ruby, java.net, Node.js, and a plethora of others. Like I mentioned, I can't go through each single one. I'm just going to have to be very focused and very specific. But instead of just showing you one, why don't I pick 2? Why did I pick PHP and node and why don't we look at how they would work? So firstly, let's look at PHP as a simple HTML file. And in our file we've got a very simple form. And the form just has one input type of text and of course a button to send it to the server. We've got a method of post. Can you see the action attribute? That action attribute has defined a file called PHP server file. And this file is a PHP file and the daughter's going to be sent to that file, which of course is going to contain the PHP code. And remember when it seemed to this file, it's going to be sent as name-value pairs. The name we gave this input was, it's right food. Can you see it? So let's look at what the PHP code may look like, right? This is the PHP file. And here all we're doing is we're defining a variable called food and then we echoing it back to the browser. So what we're gonna be doing is we're going to just be taking the value of that food. Say the user likes grass. I'm just going to display the word grass back to the browser. It's all we've done here. And this file is obviously going to depend on whichever server side language you're gonna be using. Like I mentioned, he has an example of PHP. And PHP offers some global objects to access form data. For example, we've used the PHP is inbuilt function HTML special chars to convert certain HTML into their perspective symbols. And because we sent this form via post method, I use the global post variable in PHP to allow me to access the form data sync with the post method by name. And a case you're wondering we could have used the global get variable in PHP if we had sent the form via GET request. So that's an example if we used PHP, but talk is cheap, right? So before we even hop over to note, why don't we just code this up together? Because I know it's one thing, just seeing it on a screen versus actually doing it in real time together. Let's do that now. So here we go. As I promised, let's code this up in real-time. So here is our HTML. I've wrapped everything within a form. We've just got an input of type text. We've given it a name attribute of food, and we need this name attribute, right? Because if we don't have a name, it's not going to be submitted to the server. We need dots are submitted to the server in name value pairs. We've given our variable name, the name of food. Remember that, that's going to be important. Then we've just got a button of type submit. And so we've done right now, our directory just has this index.html file. So this just finish us off together and I'll show you how easy it is to work with PHP. First thing we can define on our Form Wrapper is what? Well, let's do an action. Let's define what did we call it PHP server file that PHP. That's where the daughter's going to be sent to that file. The method we can define here as post doesn't have to be, post could have just as well have been good. I just want to show you different ways to do things. Of course now, if we, if we code this up, will it start this up? I'm just going to start a server in the terminal. There are a few ways we could have done it. I could have opened up exempt, for example. You'll read a lot about that. And we could have started this Apache server here. We could have done it that way. I don't want to, I want to just write it's all. Start a server directly from a terminal. All you need to do is type the keyword PHP hyphen for server. And then we can define where we went our server to listen. Let's just define it as localhost 8 thousand. So now we've started up a PHP server listening on our local host 8 thousand port. That really is the simple. All we have to do then is go to the browser, go to localhost, 8 thousand. And there we go. Here's our form. But right now, if we go and submit data to say that while he likes cross and they hit submit, what do you think's going to happen? Well, of course, it's not going to be filed because our resource PHP server file dot PHP was not found on the server. The servers running, which is good news. It's just not found. And of course it's not found because we haven't defined our file. So of course, let's go PHP server file. Make sure that you do put dot PHP because this is going to be a PHP file. And then with JavaScript from him, but everything's wrapped in script tags with PHP, everything is wrapped with this kind of question mark, tag and a, and a strange, It's just how it works and what do we wanna do in this file? We'll all we wanna do is take the food that uses typed and login back out to the screen. That's all we wanted to. So in order to that, remember the JavaScript, we use the let keyword to define a variable or with PHP, it's just a dollar sign. So we're going to define a variable called food. We're going to use that HTML special Charles function in PHP. It's inbuilt, like I mentioned again, we're going to access this global post variable in PHP, and this allows us to access the request body by name. It's really, really cool. You can look at it as we've had access now to all the name-value pairs sent to the server and we called it food. Remember, if we go to index file, we call it food. And this is why it's so important to name your form controls precisely. And that's what I mean by saying, you know, if your role as front-end in your organization, you have to work very closely with back in because they have to know the name of that variable. So there we go. We've got the food variable. And all I wanna do is echo that back out to the browser. Very, very simple. Let's go to the browser. Let's go back. And let's now see this again. Do you think it's gonna work? Let's give it a go. Mission completed ahead, and how awesome is this? Tear students have been having fun, hope you've got a huge smile on your face. Because you've seen a very simple example of using a PHP server. Very, very cool. And just a side note, you might be thinking or why did we really need this HTML special chars function? We don't really on the face of it. And if we refresh this page, so let's get back into it again. Looks the same. But really using that function just ensures that what's outputted to the screen here is actually content and not HTML itself. That just prevents by this potential hex further along down the line. So anyway, enough said on that, hope you having fun, hope it's making sense. But let's jump back into the lecture now and start talking about node. 11. Node server - example: So there you go. That's PHP I told you it's not that bad, right? And finally, I want to look at node. The same process applies, right? The browser's going to be sending form data via the HTTP protocol to a server. And the server has to retrieve the data. When we're dealing with node getting at the body of dot and a post request is a little bit more involved then with PHP. Why is a bit more involved? All node is just different to PHP. Specifically, the request object is going to implement the readable stream interface. In other words, it's going to be receiving it in chunks. And the good news with node is that we can grab the data out of the stream by listening for the data and end events. So again, enough torque. I don't even want to show you on the screen examples. Why don't we just hop over to the text editor thought a node server together. And let's look at how to process a form via using node super, super excited. I'll see you now. We've looked at a PHP example. This is the one we've just done. Now, as I mentioned, Let's do an example using node. I know super, super exciting, right? Firstly, this action attributes listed finite later. We don't need that now. But in order to use node, I want to create a new file. And the way that notice bolt allows us to use JavaScript to write server-side code. So instead of having this PHP server file.js, HP, let's create a new file called test.js. And this test.js is going to allow us to do numerous things. That's going to allow us a, to set up a server to listen and watch if a port we define. And two, it's going to allow us to actually write the functions defining what we want to happen to their daughter. Let me just minimizes a bit. And let's now import some node modules to help us work with HTTP request. It's very, very easy. All the entities, when I define a variable called HTTP, we're going to use the keyword require. This is built into node and this allows us to import modules. You can think of modules is a big object that has a whole lot of properties and methods straight out of the box that we can access. And the module we want to import from Node is this one called HTTP. There's another one on ones. And when we seen data via form, remember we're going to be getting a whole lot of key value pairs. And in order to work nicely with those key value pairs, I want to import another module called query string. So let's define a variable called query string. And of course import the module called query string. Very simple, very simple. The next thing I wanna do is I want to define what happens with the response and request objects. So in order to do that, let's define our own process post function. I'm just going to call it process posts. That's a name I've given it. We could have called it anything we want. In order to do that in JavaScript, you know that we have to use the function keyword. We're going to call our function process host. And we in a process function, a request object, a response object, and then a callback function is going to be executed. All right, it's gonna be very simple. And remember how I said in the lecture that getting at the body daughters just a little bit more involved when it comes to node. And the reason is, is that the request object, remember that the browser scenes is passed into a handler that implements the readable stream interface. Please don't worry with all these big words. All it means is that we've just gotta get these pieces of data in chunks. So let's define a variable called query data. And this is just going to be all our form data, right? And initially it's just going to be an empty string. But now on a post request, we want to grab the data and put it in a variable and execute our callback. That's what we want to do. So if this request object, It's method is post. What do we want to happen? Well, in that instance, we want to listen for the daughter event. So every time we get a chunk of data, we want to listen to that and in edit to our query data variable. And then when it's finished, we pretty much done and we want our callback function to execute. So all I wanna do is we want to access this request object. This request object is given to us by the way, when we create the server via node. This isn't something we've created, so it has a method called on. We're going to be listening for the data. And then what we're gonna do is start event gives us the data every time it's fired that chunk of data and name. What we want to happen is we want to append it. We want to grab our variable that we defined. Remember that query data variable. And all we wanna do is we want to keep appending each chunk of data to it. That's all we've done here, very, very simple and I don't want to get into JavaScript, right? And how and the syntax will take me a very, very long time. Just try and follow along at least the concept of what we're doing here. So we listening for when the request method is set to post. When it's done, every time a chunk of data is emitted on that request, we just going to be appending it to this query data variable that we've defined when the daughter is finished being emitted, when all the form data reaches the server, then what? Well, then a end event is going to be emitted, right? Very, very simple. When that happens, all I wanna do is I want to now access our request object. On here. I want to access a property called post. We're going to use our query string object that we've imported from node. And we're going to pass this entire query data variable. Basically, it's just going to put it into very nice format that we can use. And that's pretty much it. Then I want to execute our callback function and the square wave function we're going to define very shortly. You'll see how that works now. So now we've just defined our if statement block when the method is set to post. If it's not seek to post, we can execute this else statement. And this is going to be very simple. All I wanna do is access the right head method. And here we are going to respond with an era of 45 era basically saying that the method is not known or not fall, right? We can specify the content, type is text. And then we can put an end to this response. Makes lot of sense. So that's our own custom function. But now we haven't even defined or create our server, right? So let's create a server and define the callback function. Remember the callback function that we executing me to scroll up, you know, that callback function we executing the ANA code. We haven't defined it yet. So let's do that now. We can create our server by accessing this HTTP variable. And we met the very top of our file. We imported this module from node, right, that gives us access to a property called Create server. How convenient. And then we are going to execute a callback function when the service created and it gives us access automatically to the request object and the response object. Really, really is that simple? This is what the Create server method gives us. And yeah, I don't even want to deal with errors if it's a Gates and molecular stuff, I just want to access our process post function directly. We can execute our provost, our process post function. We scroll up, we have defined our process post function is taking three arguments. There are quest, a response and the callback. Before I implement the callback, we just want our request to be in the correct format, right? Which is what this is doing. We basically taking all the chunks, we then parsing it into a nice query string. And Dean, we want to execute the callback, but it does take three arguments, the request, the response, and the callback. So when we execute our process post down here, we've gotta give it, you guessed it, the request, the response, and the callback. But why don't we define a callback now? Because we haven't defined it. This way, we're going to put our meat. This is where our code is going to reside. The first thing I wanna do is I want to define our food variable. So to do that, and it's going to be in this request object in a post property. And we know that the name we gave our variable was food, right? Does this makes sense? If we scroll up, remember that on our request object at the end of receiving all the data, we put our query string into a property called post. Can you see it says all we doing down here is I'm accessing that post object. And then we know we call that variable food, right? And our index.HTML, we've given it a name of food. So don't get lost in all the detail. That's all we've done. Then in order to display it to the browser, we're going to grab our response object, which is given to us directly by the HTTP module. Here, there's a method called right? It's almost like when we use PHP echo, we just using right here and we want to display to the screen food. And when this is done, we can end our entire response session, right? Very, very simple. And the last thing we have to do is we've created the server, but we need to define where it's listening. So why don't we say we want to listen on port 801000. Hannah and her, wow, Very, very cool. So that's pretty much our test.js. I hope it all works. We'll see shortly, but right now we haven't defined an action, right? And remember we said we are going to be listening. Yeah, node, we're going to be listening on port 8000. Let's go to our index here, and let's just type http and are basically our local host. And we're going to be listening on port 8 thousand. And it should work my dear students. But now we haven't started our survey yet, right? This test.js server, in order to do that, it is so simple. Node, the type node into the terminal and it start our server. So let's execute our test.js file, right? We do that and the server is now listening on port 8000. This is so cool because node is listening on port 8000. Now, all we have to do now is start up this index file. So let's go to our browser. Start this index file, Appia. Rights, what define young grass? Let's submit. And there we go, My dear students, we've literally just done the same thing as we did in the PHP example. But now loaders, load, load node. But no does now listening on port 8000 and we've used node to grab our query string and display it back to the browser. How awesome and don't get lost in all the detail. All we did was we imported some node modules to help us. We imported HTTP and query string modules within defined our own process post function. I did this because I went to to get our full request before we implemented our main callback function. Okay, I wanted to listen for the chunks. I wanted to then pass the query string and only then execute our Quebec. So if we scroll down, this is our main meat of our code where we create the server. We set it up, we listen on port 8000. And once the server has received the full request, we only then implement this callback function. And the callback function just grabs our food variable and it writes it back to the browser. And that is pretty much arithmetic students that HTML was very simple. And you can see the browser couldn't get more simple than this. Hope you're learning a ton. I know server-side code can be quite complex. This is just a very, very rudimentary example. It's not structured that properly. We haven't dealt with areas that well, but I just wanted to at least introduce you to server-side code so you can kind of see how it's done and it will give you enough now to start exploring this further. Thank you. Thank you. Thank you. We're so close to ending this course. I'm so sad that targets the saying goes, all good things come to an end. See you in the next lecture. 12. Class Outro: Well done my dear students for finishing this entire series on forms. I'm super, super, super proud of you. Thank you for your support. And I mean, take a step back and just realize how much you've really learned. We learned at the very beginning about form records. We learned how important it was to read all your form controls in widgets in the form. Rather, we learned about very important attributes on that form record things like Ink type, things like mythic action, et cetra, et cetera. We then looked at the three most important elements when it comes to forms, the fields it element, that input element, that label element. We discussed various types when it comes to the input element. Tons of them actually, and I'm sure you can appreciate by now how powerful that element really is. We then looked at other form wages, things like progress bars, millibars. We then discussed styling when it comes to forms, the box model, CSA, pseudo-classes elements. We discussed regular expressions. We then looked at client-side validation. And in this class, we looked at server-side code. Or you really have come a long way. Take it for granted seriously, you are well on your way to becoming a very, very advanced love. You bet a lot of fun in the course, please do leave me a review if you've liked the series, did before you finish, remember there is an assignment in this class. Take it heavier guided to have fun. And I hope to see you in future classes of mine take chlamydia students, taking.