Adding HTML and CSS 0:00Welcome to step four. Now, so far, we've simply been echoing or printing basic text onto the page. But of course, you know, this is a far cry from your typical website like Laracast. There's a lot more going on here than just echoing text to the screen. There is HTML, there's CSS, there's lots going on here. So how do we use PHP with just HTML, right? This is the basics of PHP, and where it really became super, super popular. Because PHP was built for the web, it hooks in very, very simply. There's just not much work for you to do here. Okay, well, right now, I'm just going to spit out a quick bit of HTML. Now, I do assume you have some HTML 101 experience here. So if any of this looks really overwhelming to you, you might hit pause and freshen up on HTML. Otherwise, I'm going to continue on here. Okay, so let's create an h1 tag here, and I'll say hello world. Okay, so if I command tab back and refresh, we stillpause and freshen up on HTML. Otherwise, I'm going to continue on here. Okay, so let's create an h1 tag here, and I'll say hello world. Okay, so if I command tab back and refresh, we still see hello world. But if I view the page source, we know that we have nice HTML here that can be styled and configured however we want. So why don't we do a quick bit of HTML work. I'm going to create a header section for hello world, and then I will nest just a bit of CSS right up here at the top. We'll say for the header, we're going to have a background color of gray. Let's see what that looks like. Refresh it. There we go. Why don't we have some padding all around? And then I will do text align center. Refresh. There we go. Very, very simple, but the beginnings of a website. So now let's switch back to PHP. Right now, we're hard coding this value, right? That's how we would say it. We're referencing it directly. But what if we Embedding PHP in HTML 1:45but the beginnings of a website. So now let's switch back to PHP. Right now, we're hard coding this value, right? That's how we would say it. We're referencing it directly. But what if we wanted to use PHP for that instead? Okay, well, remember what you learned in maybe the first or second lesson? If you want a part of your page to be interpreted as PHP, it has to have this extension, and then you open up PHP tags like this. But now, yeah, you've learned how to echo hello world, but you did not learn how to close PHP. So you'll see right now, it fails, right? It's getting mad. And if I give that a refresh, we're going to get a parse error. Okay, so here's the rule. If you have a file that is 100% PHP, you omit the closing tag. So like this, PHP name equals John. If I never have anything below this that is not PHP, I can omit the closing tag. And the closing tag, by the way, is this little sequence right here. Question mark greater than sign.John. If I never have anything below this that is not PHP, I can omit the closing tag. And the closing tag, by the way, is this little sequence right here. Question mark greater than sign. So open PHP, close PHP. That's our way of saying anything between those should be interpreted as PHP. However, when it's only PHP on the file, it's generally a good practice to leave that off entirely. It doesn't need to be there. Alright, so I'm going to bring back what we had before. And in this case, we do have non-PHP code here below. So I have to include it. Alright, look good. If we come back and refresh, now we get hello world once again, but we are leveraging PHP here. Now, we can do the same thing that we had before. So for example, if we want to clean this up and put it on its own line, yeah, you can format this however you want. Maybe you set up a variable here. Greeting equals hello world. And then you echo out the greeting. Okay, so we come back, refresh, Reading Query Parameters 3:28put it on its own line, yeah, you can format this however you want. Maybe you set up a variable here. Greeting equals hello world. And then you echo out the greeting. Okay, so we come back, refresh, and I still get that same thing. Now, let's do something fun. Maybe the name is going to come from the query string, or in other words, a section of the URL. And this is probably something you've seen quite a bit. When you go to a website, you'll often see things like order equals ascending and another keys equal values. You'll see stuff like this all of the time. Think of this as a way to pass what we would call key value pairs, just sets of data, to the server. And that way we can read that data and process the code as needed. So for example, if you see something like this, that might be a way of saying whatever data we are printing out, we want to order it in ascending order, maybe by the date. Or if it says that, that's your way of saying order it in descendingthat might be a way of saying whatever data we are printing out, we want to order it in ascending order, maybe by the date. Or if it says that, that's your way of saying order it in descending order. So maybe we're just going to have something simple here like the name. I'll do myself. All right, we're going to fetch that name and then say hello and whatever name it says there. Okay, so the name and here's a new thing. We're going to reference a super global. That's what we call it. And it sounds confusing, but it's really not. Don't let it overwhelm you. Okay, dollar sign underscore get. And this is actually a new construct that you haven't learned yet, an array. I'm going to teach you about arrays in the next lesson. So just come along for the ride and then we will return to this with your new understanding. Okay, so we want to get from the URL keys up here. And in general, when you have blank equals blank before the equal sign is theand then we will return to this with your new understanding. Okay, so we want to get from the URL keys up here. And in general, when you have blank equals blank before the equal sign is the key and after the equal sign is the value associated with the key. So if I want to get the value associated with the name URL parameter, then hopefully that should return Jeff. Let's try it. Let's echo out the name. If I come back and refresh, there we go. Or Mary, or john. Pretty cool, right? So why don't we work this into our greeting, we will say echo, hello, comma, and then the name. Now if I come back and give that a refresh, there you go. So we're getting a bit more dynamic here, we're able to fetch data from the outside world, we can save it to a variable. And then we can reference that variable at some point in our logic. So name equals Jeffrey. And now it updates. Now, let's switch back and clean this up a bit. The fun thing about writing Concatenation and Shorthand Echo 6:05variable. And then we can reference that variable at some point in our logic. So name equals Jeffrey. And now it updates. Now, let's switch back and clean this up a bit. The fun thing about writing code is, believe it or not, it's a very, very creative process. And everyone has their own ideas of what looks good, and what fits together properly, and what is elegant. So in this case, we could split this into multiple lines. But couldn't we also do something like this? Let's just reproduce this exact bit here. Heading one. And in this case, like we talked about in the last lesson, do we absolutely need this variable if we only reference it in one place? Maybe not. So in that case, we could do echo, hello. And then while we can't do anything like this, because we're within a string, and this is not a variable, right here, we are referencing an item within an array. And you'll learn about once again, arrays in the next lesson. So we're goingbecause we're within a string, and this is not a variable, right here, we are referencing an item within an array. And you'll learn about once again, arrays in the next lesson. So we're going to use simple concatenation here, concatenate, get name, and then we use a semicolon to close that out. Okay, so we can take all of that, and we can bring it down to maybe this setup right here. And many people might say that's easier and cleaner. Now, if we come back and refresh, we should still get the same thing, and we do. Next, here's another little secret. As you can imagine, you will often do stuff like this, open PHP, and then echo something out. Well, as it turns out, there's a shorthand for that. So if I do less than, question mark, and then equals, that's, think of it almost like an alias for open up PHP, and then echo out some text. So this, if I refresh, same thing, it's equivalent to this. So often, yeah, you'll see me do this Sanitizing User Input 7:44that's, think of it almost like an alias for open up PHP, and then echo out some text. So this, if I refresh, same thing, it's equivalent to this. So often, yeah, you'll see me do this number here, and it's the same thing. Okay, so everything is great. But then you start to learn, things can get a little tricky, and you start having to learn a bit more about security. And who really wants to learn about security when you're still trying to figure out what a variable or an array is? But nonetheless, just a quick heads up. What if we made name or some user of our website, they updated this, and they changed it to maybe even a bit of HTML, maybe small tags? Okay, well, notice that we interpreted that. So maybe if we did something like an anchor tag. Okay, well, if we run that, notice that all we expected was the person's name. But now, we actually have a link to Google. Well, great, not what we wanted. And you might think,Okay, well, if we run that, notice that all we expected was the person's name. But now, we actually have a link to Google. Well, great, not what we wanted. And you might think, users wouldn't do that. Yes, they would. As a general rule of thumb, when building websites, assume that your users are guilty until proven innocent. So you want to be very defensive about these sorts of things, so that you don't allow them to inject malicious code into your scripts. Okay, so yeah, just a bit of a heads up. There's no need to be too overwhelmed just yet in that regard. But just remember, security is very important. So for now, I'm going to teach you about your very first function. Think of a function as a named bit of logic. So imagine that you need to do x, y, and z. Well, if you wrap it within a function, then you can just reference the name of the function, and behind the scenes, it'll do x, y, and z. So rather than you havingthat you need to do x, y, and z. Well, if you wrap it within a function, then you can just reference the name of the function, and behind the scenes, it'll do x, y, and z. So rather than you having to over and over, every time you want this functionality, you have to write out in a script, I want to do this, and then that, and then this. And then when you need to do that exact thing later in another file, well, rather than having to do it again, do this, and this, and this. Yeah, you could put it in a function, give it a name, and then you can reference that name anywhere, and you'll still get the same output. Now, as it turns out, you can create your own functions, or there's a lot of built-in functions that PHP provides. So you're only interested in one for now, HTML special chars. Now, you'll see the way I've referenced it. It takes the shape of this, the name of the function, and then open parentheses and closed parentheses. Now,HTML special chars. Now, you'll see the way I've referenced it. It takes the shape of this, the name of the function, and then open parentheses and closed parentheses. Now, if you need to pass data to the function, you can do it within here. And I'll show you all about that in a follow-up lesson. So for now, you can see we are calling this function, and then within the open and closed parentheses, we are passing in the value from the URI. So in this case, we're essentially passing in this right here, of course, as a string. Anyways, if we switch back, yeah, now we're seeing something a bit different. So before, we weren't converting anything, all these special characters right here. Yeah, we didn't convert it, so we just took that exact text and echoed it onto the page. However, by using HTML special chars, we are converting all of those special characters into what we would call HTML entities. So that's just the HTMLtext and echoed it onto the page. However, by using HTML special chars, we are converting all of those special characters into what we would call HTML entities. So that's just the HTML representation for the key. This is what we call sanitizing our input. So remember, we assume any data coming from the user or something supplied by the user of your website, we assume it's guilty until proven innocent. So we sanitize it. We take it, and we massage it, and we strip out anything we don't want until it's at a point where we can use it. Yeah, kind of confusing stuff. If it's overwhelming, don't worry. Like I said, I don't want you to worry about security too much just yet. You have the rest of your career to figure that out. For now, you've learned about embedding PHP within HTML, you've learned about your first function, and you've learned how to get any number of parameters from the address bar. So I think that'll do it for this lesson. Here's your homework. Homework: Dynamic Sentence 11:52PHP within HTML, you've learned about your first function, and you've learned how to get any number of parameters from the address bar. So I think that'll do it for this lesson. Here's your homework. Try to recreate a sentence dynamically in very much the same form that we did earlier. So remember, website question mark key equals value. Accept something through the query string, then from your code, fetch it, then sanitize it using HTML special chars, and then attach it or concatenate it with some other fun sentence that you think of, and see if you can get that entire process to work flawlessly. And once you do, you're prepared for step five. I'll see you then.
