 Welcome back everyone. So today we're going to start to combine the different ideas that we've already talked about in past videos So this video might seem a little bit complicated, but just work through it and I'll explain everything as we go There will be one or two new ideas in this video, but overall I don't think you'll have much trouble with it Okay, so whenever you're starting to build a real program The first thing you should do is think about your goals so I have a couple goals set up here today and For my goals remember the hash at the beginning means this is a comment So this will not be ran as a program. I can type whatever I want and I can still run our script No problem. Okay, so the goals that I have today are run a web server and host a web page So what we need to do here is write a script that will Allow us to connect to our computer or to the script with a web browser Okay, and then host a web page means that whenever my web browser connects to the script then we will take the contents of a file and Provide that to the user who's asking for it. Okay, so this is creating a web server and hosting a web page now that might seem like a lot already but Because of libraries that we've already talked about this becomes much easier Okay, now just hosting or providing a web page isn't very interesting It can be of course, but if we're just providing a web page. We usually want additional functionality so on this web page that I provide to the user I want to Give the user a place to enter a user name and a guess and What I mean by guess here is that I want to basically Create a random number generator and then have the user guess what the random number is so as you open up the web page The program has a random number already Calculated and then the user guesses and then you compare to see if those numbers are the same Okay so our goals for this is run a web server and host a web page that way the user can connect to us and Ask for the web page and then once they see the web page They should be able to send us their username and their guess Okay, and then once we have the guess we need to generate a random number and Then we need to save and show the result and I'm probably just gonna say instead of save and show for now We'll just do show the result. Okay, so these are the things that I I need to accomplish so it's always good to write down your goals and Overall We could say that our goal is to create a guessing game Okay, now from creating a guessing game. These are some of the sub Topics or sub tasks that I need to do to create the guessing game, right? and What you'll find is if you write this your goals down at the beginning some of these turn into Almost directly into functions. So for example generate a random number Basically, that could be a function definition directly. Okay, so what I recommend you do Before you actually get started programming on whatever it is that you want to Develop make sure you write down what your goals are and then step through and think about okay If I'm gonna create a guessing game, what are the different steps that I need to do well first I need to run a web server and host a web page. This allows the This is kind of the user interface essentially and then on the server or the script side you want to Accept a username and The users guess and then generate a random number that's on the server side as well and then show the result that is Basically sending the result back to the UI So the user gets an interface then they send data to the server the server does something with that data And then we send data back to the user the user interface This is pretty standard for any type of service that you would be creating Okay, so um, yeah, so let's go ahead and get into this so some of the first things I want to do is Is Create a server right so that's one of my first tasks and what I'm going to do to create the server is import two libraries I'll do one library first. Okay, so I'm gonna import one library and The library that I'm that I'm kind of calling is called HTTP this is the HTTP library and then this is the Class or the definition of server inside HTTP, so I'm Taking functions from the server class inside HTTP. Okay, so from HTTP dot server Take some code from here import two different methods HTTP server and base HTTP request handler now you might be thinking how the heck did you find All of this well Python has really good documentation for the different libraries that it has right so I think it was a In a prior video. We talked about where you can find more information about libraries And I'll just show you an example here. So in my browser. I'm at the docs python org three Library HTTP server. Okay, and then this is the documentation for the server. It tells me all of the different methods that I can use In there all the different things that I can do with HTTP server. So Going back up you'll see The first thing I can I can import one method is HTTP server and base HTTP request handler So I want to import both of those methods That way I can use their functionality. So from this library import these two methods Now before we just had one we would say for example from HTTP HTTP server import HTTP server but if you know that there's multiple methods then you can just use a Comma and then base HTTP request handler or the name of the second method that you want to use Okay, because both of these are coming from the same library So I can just use a comma and then separate them that way I don't have to put a bunch of things on different lines. I can keep everything on the same line Okay, so now what we've done there is imported some functionality Okay, all we've done is load some additional code That's available by default in Python and now we can start to use some of that functionality so The next thing I'm going to do is create a Let's see if you can guess what this is Okay, I've just inserted some code here and we have deaf Run, so what do you think this code actually does? Well, if you remember back a couple videos ago deaf is a function declaration So we're basically saying create a function the name of the function is called run and then It takes a couple different arguments Inside the function or parameters. Okay, so in run We have a variable called server class and it is by default HTTP server. We have a handler class It's by default s which we'll talk about in a second We have address variable, which is default local host and port variable, which is default 8,000 Okay, now you might be thinking well, this looks a lot more complicated than before What's going on here? Well, basically the only thing that's going on here is before we would have Just given a variable only so it looks something like instead of server class HTTP server we would just say server class and then we would have to give this function an Actual value and if we didn't give it a value that function would not run Well, if you assign the variable and the the contents what happens is Whatever you assign it will be the default content So if we don't send anything to server class this variable then By default it will be HTTP server if we send something else like address for example Address local host. This is your computer. I could also say 127.0.0.1 Well, let's say that I wanted to change this address by default. I would attach the address 127.0.1 but if I Gave it another if I gave the function a called the function with another argument Then I could assign the address a different value. So 127.0.0.1 is just the default value here Okay So these are default values Variables with default values variables on the left default values on the right. Okay, so just like we talked about before Def is a function or sorry run is a function and def says that we're declaring the function And then you can see that the function begins over here on the right So next we have server address equals address and port Okay, so ADDR and port are both variables And they have already been assigned values over here local host your own computer and port 8000 which is essentially saying I want to open up a specific port on my computer and listen for connections So this allows you to Listen to connections coming in to your computer. Okay, so that's what we call server address This is also a variable and then we have Another function server class Server address which we've already assigned this is a variable and then handler class which handler class is s And we'll talk about that in a second. So this function returns back a HTTP D connection and What that does is basically set up your computer to listen. Okay So set up your computer to listen at this address and then whenever you receive Something some connection at that address then send it to your handler class, which we have not written yet. Okay Just moving on I'll come back to this in a second and it'll make a little bit more sense The next thing we have is print which you should just know You should be aware of what Prince doing by now and here we're printing this string starting HTTP D server on address and port again address and port are just variables So we print out this string and this will say starting HTTP HTTP D server on localhost 8000 okay, and then to actually start the web server We have HTTP D dot serve underscore. That's an underscore underscore forever and this is a function of HTTP D method of HTTP Okay, so now what this function does if we call it it will start an HTTP server Listening on your computer. Okay. Now by default an HTTP server will automatically serve a file called index dot html That's in the same directory as our script. So I'm in my Python tutorial Directory I do ls. I don't have a Index dot html, but I do have this zero zero eight html. So if we start this up, I'm gonna If we start this up nothing will happen yet because we haven't called our function So let me go ahead and call that so think about how I would call This function so far we've imported a library We've defined a function called run and then that starts up our web server and Then if I want to actually run the server, I need to call the function run Okay And that's it. So now Basically all of this code defines what happens and then this run code starts This function which actually starts the web server. Okay. Now we have to do at least one more thing first We have this handler class and this handler class has not been Created yet. So we need to create a Way for the web server to respond once something happens Okay, so the handler class in a web server handles the request If you send some code to my computer, how should the computer respond? Okay, so what we're going to do is Create a class And we haven't talked about classes yet I'll talk more about them later, but basically you can think of a class kind of like an easy way to create Multiple objects where each object has different attributes. So think of it like Like Like the class person so You're a person. I'm a person, but we might have what we're the same class, but we have the same different Names or different addresses or different values. So class person has particular Attributes assigned to it and you can use classes to create multiple copies of objects, but we'll talk more about that later so this class is taking base HTTP request handler As a base and then We want to do a couple things. So now with this class Remember, this is the handler. So I want to change The I want to create a way to respond to somebody who's making a request So the first thing I need to do is create a function inside the class So I'll just create a function inside the class. So another def and then I have set headers and Self is referring to this class. So set headers for For web servers, you need to create a header Basically, whenever people connect to you, you have to respond to them saying, hey, this is the kind of data that I'm going to send you So we'll create one function or method That sets the headers Okay, something you'll see here is send response 200. That's a good response and then send header context type text html to tell the web server or to tell the client what kind of information we're sending back, then I need to do get Now, if you've ever done anything with web servers before, most or a lot of different requests that we would receive from a client would be sent to the web server Client would be a git request. So your browser tends to send git requests or post requests or there's a couple of other types. Basically, we'll start with git Now what we're doing here is whenever we receive a git request, we will first set the headers which creates this kind of Basically saying we're going to send back some text, then we have this query here that basically takes arguments from that are sent from the client. So the client is trying to send us data. This args will get the data that the client is trying to send. And then we will call another class or another function, sorry, another function called html args So notice I have this args parse qs url price URL parse. This is also an additional library. So I need to actually add that back. While I'm here, I'm going to also use random again. So go ahead and add those libraries. So I'm going to add two more libraries. One is from url lib parse. And this takes a URL that a client sends to you. And then lets you pull out all of the extra information or extra data that the client is trying to send. Then we import URL parse, which is a method or some additional code and also parse underscore qs, which is also some additional code. This will let us handle what the user is trying to send us. Okay, and then we've also talked about the random library before and we're going to generate a random number. That's one of the tasks that we need to do up here. So I'm just import random right now. Okay, so going back down, we have do get we're setting our headers. So what happens is the user makes a request with their browser. We set the headers first and we send them that we're going to send them back some text or HTML. We figure out if the user has sent us any additional data. And then we need to actually write the HTML out that we're going to send them. So this is all within a class. Okay, so now the last thing we need to do is actually structure or create the HTML that we're going to send. And I'm going to do this a couple different ways. So the first thing I'm going to do, we already have a method name called underscore set underscore headers. No, sorry, underscore HTML is the method. So I need to define another called def underscore HTML. And I'm going to say marks. Okay. So now what happens is whenever a client tries to connect to our web server using a get instruction, get request, then we'll send them back some headers will get any of the additional information that they have. And then we will create our HTML response to send back to them. And the self w file right is basically sending the information back to the client's browser. Okay, so let's go ahead and do def HTML. And then I'm going to say, let's make it easy. First off, content. I'm just going to write out the content. So if you've ever written HTML before, this is the very basic version of it. So we're making a web page. So our content is just a string of text, but this text altogether is an HTML valid HTML page. We start with an HTML tag, then a body tag, then h one for the first header, then we say hello. And then we close all of the tags in order, or in reverse order. Okay, now that string is saved into content. And then I'm just going to return content. And I need to encode the content to utf eight. Okay, so now what happens is the user connects to our web server. So we first run our code, the server runs and then it just sits there listening for some sort of connection. Whenever the user connects to our web server, we get the request, we send the headers back. We look for any additional arguments. And then we send whatever is inside this HTML method, which basically just says hello, we send that back to the user. So now what should happen is whenever a user connects to our web server, they should get a web page that just says hello. Okay, let's go ahead and try that. Okay, so going here again, we can say starting htpd server on local host 8000. So we know that all everything was defined so far everything worked. And then we ran the run function. This run function successfully ran, we set up the server created an basically an htpd listener at the address and with a handler. And then we printed starting this server. Okay, and now the server is just listening for a connection. So what we can do now is go back over to our browser and I'm going to local host 8000. Okay, now I went to local host and then port 8000 and we got back hello. So what actually happened, you can see the different requests down here. It also requested a favor con. We did receive a request from the local computer. And it was a successful request using htp 1.1. So this is the protocol it was using and it was using a get request. Okay, so this is the request that we received. And then once we received that request, then we did do get set the headers sent it back to the user look for arguments. There were no arguments in this case. And then we wrote the response back to from html from the html function or method. Now the html method, the only thing we actually did here was create our content and say hello. Okay, and then encoded the content back to utf 8 and sent it back to do get with the return call here. Okay, and then that's why we got hello in our web browser. All right, so now that might be fine. Like if we change this text to how are you, we close our server down because it was still listening. And then we run the server again. If I go back and I refresh the page, then again, we ran different code inside the html function. So it's going to return a different result. How are you? So now we know we can at least get contents or get the request from a user and then do something with that request. But let's do something a little bit more interesting here. First off, I don't want to type out this html like a string all the time. It's just if we're going to be creating a web page, it's going to be a little bit burdensome. So what I'm going to do is keep the html and keep the body. And I'll show you why I do that in a second. And what I want to do is save my main web page inside a different file. So I've already created a file called 008.html. It's in the same folder. So if you can see we have our web server web server.py and we have 008.html. They're both in the same folder. And I want to use this 008.html to have my main page or the code in my main page that does not change. So this is html code. Saved as an html file. The only thing I have in it is a header, which is h1 guessing game. This would be in bold. And then the instructions choose a number between 1 and 100. If you're within 5, you win. And then I have a html form. And in that form I have two fields where you can type your name and where you can type your guess. Both of these fields are inputs, text inputs. And then I have a submit button. So let's go ahead and build or tell our server to submit this page, to show this page to the user instead of hard coding everything into our server. So here I have my content is html body. But what I want to do is open up 008.html and read something from it. So just like we did in, I think it was the last video, we use whatever you want for your file handle. So f, I'm just going to say capital F is my file handle equals open 008.html. And remember R is for read. Now that we have this file open, what we need to do is actually extract the content from that file. And if you remember to read everything from the file, we don't want to just read one line. We're going to read everything. So we use F dot read. But we have to actually save that contents somewhere. So what I'm going to do is say content equals F dot read. Now the problem with this is we already have a variable called content. And it has this string assigned to content. Now we're saying content equals F dot read. And everything inside of content will get overwritten with this new call. So I want to save the old content and just add it, add the new content. So what we can do is do content equals content plus F dot read. Now remember F dot read is a string and content is a string. So this plus sign doesn't do addition, it does concatenation. So basically we will combine HTML body with everything, all the text inside this. So what we've done now is we have our top HTML code. Then we have everything we've read from the file. And then we add them together and then we have content. So the next thing I want to do is I'm done with the file. So I'm going to do F dot close to close my file. And I also want to add something to the end of this. Because we have to finish our page, right? So we have our body HTML closing tags. So basically we have our opening tags up here, we have our closing tags down here. And then we're loading all of the main contents from 008 dot HTML. So now we're reading all of the contents from a file. Let's go ahead and run our script or run our server again. Notice it did not exit, so it's still listening. If I go back to my browser and I just refresh, now we have guessing game. And then the instructions and then our two fields. So this is exactly what was inside of our HTML file. Okay. So now if I just type, let's say my guess is 10. I want you to watch what's happening in the URL. So we have local host 8000. And then if I click submit, then in the URL we get this question mark. And then name equals Joshua and guess equals 10. Okay. So that was actually sent in the URL to the server. Now if we go back and we look at the server, we have get. And then we have question mark name Joshua and guess equals 10. This code or this additional data is sent back to our server. So now we want to take that data and do something with it. Okay. So going back to our HTML or our response. Okay. I already had the code there. So what we can do is parse out the arguments. So we have the arguments that are coming in. And this is arguments or parameters sent by get. We have name Joshua and guess 10. Okay. So whenever we initially receive the get method, we set the headers. And then we take everything that's in self.path. And this is essentially self.path. And then we parse the URL using a library that we have imported called URLParse or URLlib.Parse. Okay. And then we do query. And we basically what this does essentially is extracts all of this content into individual name value pairs or a dictionary. Okay. And we have this dictionary and we save the dictionary into arcs. Now we call the HTML kind of content creation method with these arguments. Okay. So what should happen is if we're in this HTML method or function, we have our arcs. Now we can start to do interesting things with them. So I have my content, the top of the content. I have my web page. And then I read everything from the HTML file. And then I close the file. Now before I finish the response to the user, I want to do something with the content that they have given. So what I need to do is first check if the user actually did send me any data. If the user sent me data, then I want to react differently than if they didn't send me data. In this case, if they sent me data, then I want to check the random number and see how close they are. If they didn't send me any data, then I just want to skip it and not do anything. So what we can do, we've used this before. I can do if le in, and if you remember from a prior video, this was length. If the length of arcs is two. Now we always expect two arguments, right? One should be the name. One should be the guess, the integer. Now, if they only send us one, let's say they only send us the name, then we don't want to do anything. If they send us three, then they're probably hacking our webpage. We don't want to do anything. So I'm just going to say if the length of arcs is two, then we want to add some additional data that says whether they were correct or not. Okay. So next, if length of arcs is true. So we have the two arguments that we want. I'm going to make another variable called guess. And then I'm going to do, I just realized we haven't talked about dictionaries yet. So I need to go back and talk about that in a later video. So in a dictionary, notice down here, we have a variable called guess. And the value of that variable is 10. Whenever you create a dictionary, instead of looking, instead of like an array where we'd have array one is the first value in the array, we can have a named value. So arcs guess will return the value 10. Okay. So we'll talk about dictionaries more also in a later video. Now, what this is going to return to me is actually a list. So I want to get the first value from the list. And I want to make sure that it is an integer, because I'm going to take that value and compare it to another number. So I need to treat it like an integer. Right. So here we have arcs dictionary. I'm going to look up the value for guess and get in this case 10. And then I want to treat it not like a list, but I want to get the first value from it. There's only one value in it. And then I want to treat that value like an integer. Okay. So I'm going to inside guess add 10 as a number. Okay. So the next thing I need to do, and you might think this is cheating because I'm just now generating my random number. The user has already sent their guests to me. And then I'm going to generate the random number. If you wanted to make it, I don't know, feel a bit more fair. You could generate the random number first, but it really doesn't matter. So I'm going to generate a random number. R equals random dot rand int. And I want it to be between one and 100. And we've already talked about rand int in a prior video. So basically all this is doing is picking a number randomly between one and 100. And then I'm saving that number into R. So now we have the user's guess and we have R. Okay. So now all we have to really do is compare them. If I just wanted to know whether they were the same, it would be a really difficult game to just make it exactly the same, right? Because then I could just do if guess equal equal R then done, right? If you were doing between like one and 10, maybe this makes sense, but one and 100 would be a really difficult game. Instead of just doing whether the guess is equal to R, I want to check whether the guess is within a particular range. So what I've already said in the rules here is if you're within five, then you win, okay? So let's say if they pick 10, then a winning number would be basically greater than five and less than 15, right? So greater than equal to, I should say, greater than equal to five less than or equal to 15. So this is what an acceptable range for our game. And if they guessed 10, then any of these numbers would be acceptable. If they guessed 16, then it would not be okay. Okay. So let's go ahead and code in our range. So if R is like, think about how we're going to do this for a second. So we have our guess, right? And basically if guess plus minus five. So this is the range that we actually want here, right? But what we're actually wanting to figure out is, is R within that range? Is R within that range? So what we're going to do here is say if R, which is our random number, is in, and we have a function called range, which is built into Python, is within the range of guess minus five to guess plus five. And what this will do is essentially make all of the numbers, whatever number guess is, if it's 10 minus five, then we'll start with, this is basically five. And then if it's 10 plus five, this is 15. So it'll make any number between five and 15 because we're using the range function. So if R is in the range of guess minus five, guess plus five, then we want to do something. So now we have our range set up. And if this is true, then they win. Okay. So if this is true, then the user actually wins. Before we do that, let's go ahead and I'm going to comment this out. So this is a good use for comments too. I just want to make sure that our random number is working as well. So let's do content equals content plus I have to convert it to a string, string, guess, and I'm going to add a space so we can see it a little bit better string R. Okay. Now what we're doing here is basically saying these two guess and R are both integers. So I have to cast them to a string. Basically I have to tell Python, yeah, the R and guess are both integers, their numbers, but I want to treat them like strings right now. So please just temporarily convert them to a string while I'm updating content. It doesn't update them forever. It just does something called casting to a string. So now I need to close my web server again and restart it. And if we don't get any errors, that's good. I need to remove the contents up here. Okay. So the name Joshua and what this should do is whenever I give it some value, it should print back the guess, which I will guess 56. Okay. It should print back the guess plus R and it should print it out underneath our submit button. So if I submit, we have 56, which is my guess and the value was 53, which means that this would have been successful. This would have been a win if I got it. Okay. So now we know that our guess is printing out correctly and we have a random value. Now if I submit this again, let's say my guess this time is 45. Okay. If I print this again, notice the first one is my guess. The second one is random. So we should not get 53 again. Yeah. So 45 and the random value was five. So I lost that one. Okay. And that's how the game would work. Okay. So let's go back. So now I know that this is working so I can remove this content bit. And it's really good to check that everything is working the way you intend it before you make things more complicated. So in this case, I know now my guess variable is working properly and my R variable and my random number is working properly. Okay. So since I know they're both working, I'm going to remove this code and then do my check. So if the random number is within the range of the guess plus plus minus five, then the user wins. So what we can do here is kind of a long code, but hopefully it's a bit easier to understand. Okay. So we have content equals content. So basically that's taking everything we've done before and then concatenating an additional string. This is a message. This is args. So content content. And then I have h2, which is a heading. And then I have args, which is what we sent or the user gave us some data. And I have name. So before I was using args guess and then that's the whatever value the user is guessing. That's their guess. The name is the name that they included. So again, I'm doing the same thing. I get a list, but I'm just taking the first value in the list. So we get their name. We add it to the content. Then we get the string guess. Again, I'm casting guess. This is a integer that I'm casting to a string. And then all of these are just adding additional spaces because the computer doesn't know you want to make something readable. So let's go back here a second. So there is a space in between 45 and 5. And that I had to put in manually because if you don't put this in manually, then it'll just put the guess and the name together with no space in between. Okay. And then we have our random number string. And then in this case I won. So I'm going to say win. Okay. Now this is an if statement. So the next thing I want to do, you either win or you don't win. Right. So I'm going to do if else. And then I can basically just take this exact same content, copy it. Which we don't like to copy things usually, but just for time. Content, content, h2rg's name. So get the name. We have our string guess. We have our string R. And instead of saying win, we want to say lose or what did I say? Yeah. Lose. Okay. So now what should happen is if the user sends us some, some extra data, then we will get the value that they're guessing will generate a random number. And then we will compare the random number with a range that we accept. In this case, this range is five plus minus five. If it's within that range, then we print out you win. If it's not within that range, you print out you lose. Okay. And then we finish up the HTML page and then we encode everything and send it back to the user. So now let's go ahead and save that. Run our server again. Now notice every time I make a change to my, my Python script, I have to save it and I have to close the web server and restart it. If you don't restart it, you won't get changes or you won't get any updates. Okay. So let's go back to my page. So I'm going to remove this extra data. Okay. So since we didn't send it any data, we don't print anything at the bottom. I'm going to give it my name and my guess this time is 85. Okay. So submit. Then what should happen is we have two arguments. So it's going to compare those two arguments and let's see what happens. 85, 74, lose. Okay. So 85. So I would have accepted anything down to 80, but I don't accept 74 because it's too far. Now, if I just keep submitting, what will happen is this extra data is already in the URL. I didn't clear out this data after I sent it. So since that data is already there, it will basically just keep sending Joshua 85 over and over again. So let's go ahead and submit. Sorry. This time, name and guess were empty. Okay. So I do have to do it every time. Okay. Joshua and my guess this time is 10. Okay. And notice that nothing printed out before like lose or win because I submitted and there was nothing here. So we didn't actually run this code because length of arguments was not equal to two. Okay. Now, every time we are getting a request, we can see the request on the server side. So this is the second time I ran it, guess 10, guess empty and then going back. Okay. So now we have this little guessing game going on. If I just keep hitting enter, then it will generate a random number every single time. And we can also change the number of here instead of saying 15, I can do 52. And then you can see I got very lucky winning the first time. Okay. So now we have our guessing game. Basically anyone on your network, if you do local host is just on your computer. Anyone on your computer basically can go to local host 8000. And then they should be able to play your game as long as you are running your Python script. Right. So you can see all the requests here while you're running your Python script. You'll be able to access this guessing game. And then you put in your name and then your guests and see what happens. Okay. So that's it for today. If you wanted to expand this, what I would recommend is saving all of these values to a file. And then basically by doing the same thing that we were doing before, we have this open file and we read everything from it. Well, I would save a file called scores. And then I would get the score that basically has this content and I would make a list of those scores. So I would show you your current value plus all of the scores that we currently have. So what I would recommend trying to do now is every time somebody puts in a value into the web page and then they get this 7845 loose, keep track of all of those scores and load every score that's been ran. All you would have to do is save an additional file with all of this content inside of it. Okay. So that's it for today. Thank you very much.