PHP for Web Development
Articles,  Blog

PHP for Web Development


>>DOUG LLOYD: So in our
video on PHP syntax, we talked a lot about how PHP
can be used at the command line to run programs in a manner that
we’re pretty familiar with from C. But as I also mentioned
in that video, PHP was initially developed to
implement web programming, websites. And so in this video we’re
going to talk about how we use PHP in the web development context.>>We know, already, from
our video on HTML, that websites are built
out of a set of HTML tags that semantically define
the structure of a web page. But websites that are
built with pure HTML suffer from a very,
very serious limitation.>>And to illustrate this limitation,
let’s consider the following. So now I want to build a web page
that, whenever the user visits it, it gives me the current
time in Cambridge, Mass., displaying it to the latest minute. If I was making this right now,
I might say something like this. Current time in Cambridge– so I have
HTML tags, head tags, title tags, body tags– the current
time in Cambridge is 14:08, printing out military time.>>What happens if it’s now 2:09 PM, 14:09? Well so far, with HTML, I have
to go in and change it to 14:09. And then one minute later,
I have to change it again. And then one minute later,
I have to change it again. And as you can imagine, that’s
probably the worst job ever. You’re the webmaster for a web page,
and every minute, 24 hours a day, you need to update the current time by
manually opening time.html and changing just that snippet of code to say the
current time in hours and minutes. That’s probably not a very
good use of our resources, both human and computational.>>Websites that are all HTML
are completely static. The only way you can update
content, as we’ve just seen, is to manually open those source
files, edit them, and save them. And then when the user
refreshes the page, or visits the page for the first
time, they’ll get the latest content. But only because we’ve
manually edited it.>>If we start to mix some PHP in there,
our code can get a lot more flexible. And we can have a way for our pages
to be dynamic, or update themselves, without requiring our poor
webmaster in the previous example to be manually updating things. They can do it automatically. We don’t have to intervene. We can get some sleep. Which is probably a good thing if
you’re doing a lot of web programming.>>So in CS50 IDE, we run a
web server called Apache. It’s a very commonly used,
open source web server system. This system has the
capacity to interpret PHP, which is going to be useful if
you want to do any PHP programming.>>And in CS50 IDE, we have a command
to make this very easy to do, apache50 start. And then that slash
path, slash to, slash dir, that’s just a really common way of
indicating what you’ve specified here is a path to a particular
directory that you want to be the root
site, or the root page, or the folder from which your web server
will start to examine files and serve them up to clients who request them. So let’s pop over to CS50 IDE, just to
show you, really quick, how this works. >>So here in CS50 IDE, I’m in a
directory called Week Zero Nine. And I have two– I have
executed an LS command just above to show you that I have
two directories in here, PHP, which is the set of files that I used in
the PHP syntax video, and then PHP-web, which is the set of files that I
would like to use in this video.>>And I would like to start
a web server instance with the contents of the PHP-web folder
as the files are being served up. So what am I going to do? I going to type apache50 space
start, space PHP, dash web. That’s the path to directory
from where I currently am. Then I hit Enter. It’s going to do a
little bit of stuff here. And then it’s going to say,
Apache started successfully. Your site is now available at– and
then there’s the URL for the site. So what am I going to do? I’m going to quickly copy this. And I’m going to open up– and
I’ll zoom out a little bit here– I’m going to open up
a new tab in Chrome. And I’m going to visit that URL.>>I’m going to hit Enter. It’s going to load. And I’ll zoom out again. And we can see here is the
contents of my PHP web directory.>>So now what is basically happening
here is, my instance of CS50 IDE is serving up these files to
anybody who requests them. And over the course of
this video, we’ll sort of take a look at a bunch of these
different files in context.>>To test that your Apache
server is working, which is generally going
to be the case in CS50 IDE, but if you do this more generally,
and you start building your own web servers, there’s a really
common sort of analog to, “hello world,” that is usually
used for PHP web development. Which is to have a file
consisting of just this code– a PHP delimiter set with PHP info,
parentheses, semicolon in between. Which is basically a special
PHP function that tells you what version of PHP you are running.>>So in CS50 IDE, I have
that file available just to show you what this would look like. So I’m looking at my index
from my PHP instance. My Apache instance is running
the contents of PHP-Web. And I have a file here called info.php.>>I’m going to click it, zoom out. This is what you’re going
to see, pretty much. This is just telling me that
my Apache server is working. And this is, apparently, the
version of PHP that I’m running. This is my analog to “hello world.”>>So I know things are operational. So we’re good to go. We can proceed from here.>>So let’s revisit that
time example we were talking about with our poor webmaster
who had to update the page constantly. This might be a fix for how
I would implement things so that the webmaster didn’t
have to keep updating the time. It would just sort of
happen automatically.>>The down below, the HTML, it’s
pretty similar, with one exception. But here I’ve got some PHP at the top. I have, apparently, called this
function date_default_timezone_set.>>And we don’t talk about all
these functions in CS50, because PHP has probably
tens of thousands. That might be a bit of an
exaggeration, but it might not be. It’s got a lot of functions built in. And so this is a function apparently
sets my time zone as US/Eastern, which is the time zone that I’m
currently in making this video.>>Then I make a call to
function called, date. And, apparently, I’m storing the
HIS of something called, time. So what’s going on here?>>Well, basically what’s
happening is, I’m making a call to some server that is going to
tell me what the time currently is. And I’m converting it to a format
of hours, minutes, seconds. And the reason it’s capital H is this
is going to give me 24 hour time, not 12 hour time, which would be lowercase h. And I’m just storing that
in a variable called, time. So that second line of PHP
there, the call to the function, date, is just getting
some string, which is going to give me the date, and the
time, and a bunch of other information. And the first argument there, that HIS,
is just extracting the important part that I care about for this example,
which is the hour, minute, and second. So that’s the all that’s going on. So I store that in a variable $time. And then down at the
very bottom there, I have that shorthand for
printing out the current time. So I’m just going to print
out what the current time is.>>So let’s take a look at this in
CS50 IDE and see how we’re now saving that webmaster a lot of trouble. All right, so here I am again
back at the root directory of my Apache instance. And I have a file here called time.php. I’m just going to click on that. And I’ll scroll up, because
we’re zoomed in pretty far. The current time is 14:20:34. So I’m doing it hours,
minutes, and seconds. And I can refresh the
page and get new time. –41. I’m going to refresh the page
and get new time, 44, 46, 47.>>So, I am clearly not
changing anything myself. I’m here refreshing the page. So I can’t be back there editing it. And I promise you, I don’t
have any confederates who are editing the file
on my behalf on the side.>>I’m just using that PHP function,
time, to generate the time for me automatically. So that even if I’m asleep,
and my web server is running, the user who visits that page is still
going to get exactly the current time. So that’s pretty good. I’ve made my site more dynamic
with not too much PHP code. It was just two lines of code and then
a little bit of a print statement. And already I have a
much more dynamic site than that first example we saw
at the beginning of the video.>>So, recall from the video on PHP syntax
that when the PHP interpreter runs our program, it ignores everything
that’s not inside of PHP delimiters, spitting it out. In that example, what the thing
that it was spitting out was HTML. And this means I can now
intersperse HTML and PHP together. Because the interpreter will just
ignore the HTML and literally output it. Which is good, right?>>Because presumably,
at the end of the day, I would like my site to
be constructed of HTML. So that any web browser can interpret
it, or understand the HTML on the page and render it as something that we
can actually understand as humans. And I can only use PHP
for the parts of my site the require dynamism, that require me
to have things that update constantly. The static information
can stay the same.>>OK, so that’s fine. But why would I do this? Why would I mix HTML and PHP? I could just print out all the
HTML, using the PHP print function. Why am I not doing that? Think about it for a second.>>Why, when I could just print out– I
could have lines of PHP that just say, print HTML tag, print head. Why am I not doing that? Why am I mixing the PHP and HTML?>>Well, if you think
about it for a second. PHP, the interpreter has
to interpret what it sees. And so it’s going to have
to execute a line of code. Print out HTML. Print out open head tag. Print out open title tag. It’s going to have to
execute and interpret that every single step of the way. Why not just let the
interpreter just gloss over things it doesn’t understand
and do it automatically? It’s going to save me a lot of time
to mix my HTML and my PHP together.>>And so that’s why we don’t
just have open PHP delimiter and then just print out the entire
content of our page as one giant PHP call to the function, Print, and then
close PHP delimiter and we’re done. So that’s why we mix them up together.>>So far, we haven’t seen too much of
a difference from general PHP syntax. It’s been pretty straightforward. We’ve already seen the
question mark, equal. We saw a couple of new function calls,
but nothing really fancy going on. Let’s maybe make things
a little fancier. What if we want to pass information
between different PHP files, so that maybe the user can
submit information to me. And then I could do something
with it on another page.>>So PHP has support for
something called Super Global Variables, which sounds pretty awesome. They’re really just
giant associative arrays that help implement this
functionality of passing information between PHP files that
are existing on our web server.>>The first of these super
globals is called $_GET. And it’s probably the
simplest to understand. What happens with $_GET? Well, basically, the user is
going to type extra information at the end of our URLs. And whatever they type, assuming
it’s formatted in a particular way called a query string, which is just
a set of key value pairs separated by ampersands. Those key value pairs will be
stored in a $_GET associative array. And from our video on
PHP syntax, we know how to work with
associative arrays already. So here is an example of
some PHP, where maybe I’m extracting all of the key value pairs
that the user supplied in the URL. So I have my Open PHP delimiter. I have a foreach loop. I’m iterating across the Super
Global Array called $_GET.>>And I want to be able to refer
to both the key and the value. And I’m just printing them
out, each one on apparently its own paragraph tag here. I’m printing out some HTML
and interpolating the values of key and value into that statement.>>So let’s take a look at how this
would actually work on our IDE. And maybe this will help
illustrate a little bit of what GET is actually doing. So I’m back here in my web root. And I’ll zoom in a
little bit to show you that I have a file called, get1.php.>>So let’s click on get1.php. And I’m not seeing any content. That’s weird, right? Well, not really actually. Because I didn’t supply
anything in the URL. I’m going to get1.php, but I
didn’t supply any key value pairs as part of my query string. So let’s add a query string
and see what this file can do.>>To begin a query string you
just type question mark. Then maybe I’ll say name=Doug&year=2015. And then I will hit Enter. Now notice what’s happening. I’m still in get1.php. But now I’ve supplied
key value pairs, and I’m printing them out on their own
paragraph– name, Doug– year, 2015. That’s exactly the code we just
saw on the slide a moment ago.>>And if I want to maybe add another
key value pair, &class=CS50. Now I have another key value
pair that’s printed out when I revisit the URL again. Now maybe this isn’t
formatted terribly well. So I have another version of get.php. It’s get2.php.>>The difference in this
one is I have CSS file, and it formats things a
little more nicely for me. It’s maybe not the most
beautiful CSS in the world. But it’s just another way of doing it. So I can still get access
to my variables using $_GET. And in this case, I’m just kind of
making the CSS a little more fancy. And if we pop over to
my IDE for a second, I’ll show you in my PHP web
directory here, get2.php. We’ll open it up, some HTML here. Apparently I’m linking in that
CSS file I was talking about. I open a table tag. And then here’s my foreach loop.>>Here is that, what I
showed on the slide before. The only difference is I
have this key and value CSS styling that I’m applying to it. But that’s all I’m doing, is I’m
iterating across $_GET to get all of the key value pairs.>>And I’m printing them out as the table. And, apparently, I’m formatting the keys
in one way, with the

>Do you see a possible
problem here though? Why would we maybe
not want to use $_GET? What if, maybe, I was making this query? –to get3.php, which I
don’t have on my IDE. It’s just a hypothetical file. But notice here that apparently
passing my password in. And maybe my password is embarrassing. Or maybe I don’t want people to
know what my password is, right.>>If I’m passing it though– if I’m using
the $_GET method, what happens is, that’s going to be in the URL. So some malicious user might
be able to see what I’m doing. I may be passing them
sensitive information. Or maybe it’s not even a malicious user. Maybe it’s just your friend who
is standing over your shoulder. And now they know the password
to your Facebook account.>>And maybe they wouldn’t
do anything with it. But if your password were
submitted via $_GET to Facebook, now they know your Facebook password. Because it’s right there in the URL
when you’ve done submitting information.>>And so perhaps that’s not the best
way to pass sensitive information. It’s a good way to pass information
that we don’t particularly care about as being too sensitive. Because GET is pretty fast,
relative to the other super globals we’re going to talk about. But maybe not the best tool
for sensitive information.>>For that we might want to
use something called $_POST, which is another Super Global Variable. It’s another associative array. So it works pretty much
exactly the same as GET. Except, instead of extracting
information from the URL, it does something through HTTP headers. So recall from our
video on HTTP, we talked about how browsers, servers,
and clients communicate. And information is passed back
and forth in HTTP headers.>>With $_POST, information is typically
sent through those HTTP headers. And we’ll most commonly see $_POST in
the context of submitting HTML forms. You can still use HTML forms
to submit things to GET. But they’re usually used
in the context of POST.>>So here’s an example of an HTML form. Now we’ve seen these before, but we have
not seen this part, action=”post.php”. So when we talked about forms in the
context of HTML, I had a Submit button. And if you recall, I’d click Submit
and then the page just refreshed, didn’t do anything.>>In this case, I’m submitting
whatever I type at this form, to a PHP file called post.php. And, apparently, the way I’m doing that
in this form is using the POST method. So every piece of information
that I type into this form will be submitted
through the HTTP headers.>>It will be accessible in post.php,
because that’s the action of my form. It will be accessible
by going to $_POST. And apparently, the way I can
get at each individual element with that associative array
is with this attribute, the Name attribute of our input tags.>>So apparently I can say $_POST square
brackets name to get whatever the user typed in the first field. And $_POST password, of pw rather,
to get at whatever the user typed in the second field.>>So let’s take a look at
this over in CS50 IDE. So here we are, and I’ll
zoom in for a second. And we have a file called post.html. I click on post.html. At the very top here I have
a very simple web form. It’s the form we just saw
on the slide a second ago.>>I can type, Doug, and I can
type my password, which we all know is squadgoals. And I will hit Submit. And apparently, that
submits to post.php. And I’m apparently printing that. So I’m getting rid of all the security
that POST gives me by just printing out the username and password.>>The user’s name is Doug. The user’s password is squadgoals. How did I do this? Well, pop over to IDE
again for a second. We will scroll down to take
a look at post.php, which was the action that I used to submit here. That was the action of my HTML form. And that’s all I’m doing. The user’s name is, and I’m printing
out the contents of $_POST “name”. And then the user’s password
is $_POST “password”. So I was given that information
by submitting the HTML form. And I can now extract it using $_POST
because the method I used to transmit data with that form was the POST method.>>Now it’s probably not
so great– I’m going to go back for a second
to our set here– it’s probably not so great if I am
submitting information with POST, which is ostensibly more secure. It’s probably not so great
if I’m doing that and then printing out the user’s password. It’s supposed to be more secure.>>OK, but it’s not entirely secure. And so in this little
snippet here I want to just draw your attention to some
data security concerns, just something to think about as you’re
working or using the internet. This is just something to consider.>>I told you that information is
submitted through HTTP headers when you use the POST method. Which means they’re not entirely secure. They’re harder to find than
using the GET method, where it’s just right in the URL. But there’s still a way to find it. And I just want to show
you this so that you maybe start to think about this
as you’re working, or using websites and submitting
passwords, and maybe using the same password in a
lot of different places. Know that is is still actually pretty
easy to find out somebody’s password.>>And so here, I’m going
to go to post2.html. And the difference with post2.html
and post2.php is pretty subtle. The difference is just
that I don’t print out the password when I submit the form.>>So I’m going to type in, Doug. And I’m going to type
in, squadgoals, even though we know that’s the password. Before I submit the
form though, I’m going to open up Developer Tools, just to
show you what’s going to happen here. So in Chrome, I’m just going to hit F12. And that’s going to open up my
Developer Tools on the right hand side. I haven’t submitted the form yet. Now I’m going to hit Submit on my form. And apparently, I made a
call to, or I made a request to post2.php, which makes sense. I’m going to click on that.>>Then over here, I’m going
to click on Headers. There’s a lot of stuff going on here. But if I scroll down to the very
bottom, notice right there– my calendar has blocked it for a second– right
there at the very bottom corner, name– Doug, pw– squadgoals. So even though I’m using the POST
method, which is more secure, just be aware that when you do so,
you’re still transmitting information through HTTP. And it can still be
found by an adversary. It’s just something we’re going
to have to deal with really. Maybe there’s some ways to encrypt our
passwords before we send them over, which would be a better,
which I’m not doing here.>>But just be aware that the POST
method has limitations too. It’s an improvement over GET in
terms of being immediately visible. But it’s not a complete fix. So here’s an example of
a quick at home exercise that you can use to get some
practice working with PHP. Create the following pair of web pages. The first should just be a very simple
form with a single field and a Submit button. So very similar to what we
just did with post.html.>>And then the second
file you should create is a file, a PHP file, that
is expecting input, via POST, and based on what the user typed, which
you can assume will be an integer. You don’t have to do any
error checking or the like. You can assume the user
will type an integer value, or something like an interpreted by
PHP as an integer, into that form. You just want to create an
n by n multiplication table.>>So if the user submits 10, we want to
have a 10 by 10 multiplication table. If the user submits a 12, we want
a 12 by 12 multiplication table. Just so you can see what
we’re driving at here, we’ll take a look at
this file in my IDE.>>So here in IDE, I have mult_form.html. I’ll click it. All I want to do is submit a value. Type in 10, hit Submit. And apparently, mult_table.php, which
we can see at the top there in the URL, I’m creating a 10 by 10
multiplication table.>>If I type 15 and hit Submit, now I
have a 15 by 15 multiplication table. I’m, of course, not going to show
you the contents of mult_table.php, because that would take the fun
out of this at home exercise. But it’s a great way to get some
practice working with PHP loops and POST, very simple, hopefully
stress free example, just to do a little bit of practice. And I’ve got a little CSS going on
here to to make my individual table cells just kind of pop off a
little bit and look a little more like a multiplication table,
as opposed to just text just kind of sitting there. The last super global we’ll talk about
in this video is something called $_SESSION. And maybe this is actually
the best example of something we would consider global. It’s another array. It’s another associative array. But it is accessible through every
PHP file that exists on our system.>>We don’t have to submit
information one page at a time like we do with GET and with POST. It’s always there. And so this is great for a page
where you are logged in, for example, and you want your login information
to persist from page to page to page.>>You can just start a session and then
use $_SESSION to save things like the user’s name, or the user’s
ID information, and so on. And that information will remain in
$_SESSION until you destroy the session a little bit later on.>>Writing dynamic websites with
PHP makes them a lot better. Your sites become very
dynamic, and you don’t have to do too much more than what
you otherwise would have done just doing it with HTML. But it requires practice,
a lot of practice.>>You already know how to work with C,
and so jumping to PHP isn’t too tricky. What is maybe a little
bit tricky is working with this new idea of GET and POST,
and maybe mixing your HTML and your PHP together. But also be aware that the internet
is a vast repository of information. And PHP’s documentation is available
in many places, but perhaps most canonically at php.net. And you can find there,
lots of different functions, and use cases, and examples
upon examples, upon examples. Where if you want to try and figure
out how to do something, odds are, somebody’s probably done it before you. And you can use them as
inspiration to implement whatever it is you’re trying to implement too.>>I’m Doug Lloyd. This is CS50.

12 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *