WEBVTT 00:00.140 --> 00:00.740 Okay guys. 00:00.740 --> 00:05.600 So we are going to build a simple visit counter for the current user. 00:05.600 --> 00:10.070 That will just count how many times he has visited the page. 00:10.070 --> 00:16.820 So we are gonna learn about cookies and sessions and how to send headers. 00:16.820 --> 00:20.270 And we're gonna make it a little bit more complex. 00:20.270 --> 00:25.100 First time someone visits the page, he will be asked to enter the name. 00:25.100 --> 00:29.330 If he wants to do that, he will be tracked anonymously. 00:29.330 --> 00:35.420 Otherwise, every single time he's gonna go back, his name would be displayed. 00:35.450 --> 00:40.520 So let's go ahead and build this simple tracking script. 00:41.390 --> 00:44.570 So I think we should start with cookies here. 00:44.690 --> 00:50.270 So the first thing is to how to check if a cookie exists. 00:50.270 --> 00:54.770 Well I've mentioned previously that we have this super global variables. 00:54.770 --> 00:59.360 And this is how PHP allows you to access cookies. 00:59.360 --> 01:04.780 This is how you can read them, because setting cookies is another story. 01:04.810 --> 01:07.120 You do that using a function. 01:07.540 --> 01:11.710 So I can have a variable called has cookie. 01:11.740 --> 01:14.470 We only care about one specific cookie. 01:14.500 --> 01:16.690 That's why I can call it this way. 01:16.750 --> 01:25.960 And I'm just going to use the set function to check if a variable exists or element in an array exists. 01:25.960 --> 01:30.310 And there is this cookie super global. 01:30.340 --> 01:33.820 Now I'd like to call this cookie user. 01:34.750 --> 01:36.940 And that's the first thing that we did. 01:36.940 --> 01:40.510 We checked if specific cookie exists. 01:40.510 --> 01:48.670 Later on in this video you're gonna see how actually cookies work, where they are stored and all that. 01:48.670 --> 01:52.780 But for now, let's just check if a cookie exists. 01:53.410 --> 01:56.410 For now, let me just say this about cookies. 01:56.410 --> 02:03.000 Cookies are stored in user browsers, and they can be stored for a long time. 02:03.060 --> 02:07.260 I'm gonna go back to cookies a little later in this video. 02:07.290 --> 02:15.390 So we just use this user cookie to recognize a user if he provides his name. 02:16.830 --> 02:24.450 So next up we can customize the message that welcomes the user depending on whether the cookie is set 02:24.450 --> 02:25.380 or not. 02:25.410 --> 02:28.350 Now by default, there is no cookie. 02:28.650 --> 02:36.300 So we can set the welcome message to be welcome back user. 02:37.830 --> 02:39.750 So he is anonymous to us. 02:39.780 --> 02:43.530 Otherwise we can customize this message. 02:44.700 --> 02:47.580 Then we can say welcome back. 02:49.200 --> 02:53.820 And we're going to use HTML special characters. 02:56.190 --> 03:03.980 To escape any HTML user might have provided inside his name, because he will be submitting that through 03:03.980 --> 03:05.030 the form. 03:05.240 --> 03:11.780 And here I can just read the cookie user, because that would be the user name. 03:12.650 --> 03:17.840 So I know that you are probably waiting to see what would this be about? 03:17.870 --> 03:19.850 Why don't we start the server? 03:19.880 --> 03:24.380 Well, we need to finish the functionality at least the basic one first. 03:24.380 --> 03:30.440 So next up we're going to be storing the count of visits in the session data. 03:30.560 --> 03:36.440 So session data is similar to cookies but it's also different. 03:36.470 --> 03:40.520 Session data is stored on the server not in the browser. 03:40.520 --> 03:45.590 And there are more differences which I'm going to be describing at the end of this video. 03:45.710 --> 03:52.310 So we're going to be storing the amount of user visits inside the session. 03:52.310 --> 03:56.980 So my first step is to check if the counter exists. 03:56.980 --> 04:01.360 So I'm using is set and the session super global. 04:01.360 --> 04:06.970 This is how you access and actually also set session data in PHP. 04:07.180 --> 04:11.320 So my variable name will be called visits. 04:11.410 --> 04:15.310 If it doesn't exist I initialize it. 04:16.390 --> 04:18.190 So I set visits to one. 04:18.190 --> 04:19.810 This is the first visit. 04:19.840 --> 04:29.980 Otherwise I'm just gonna increment the visits value by using the plus plus operator. 04:31.090 --> 04:35.830 Finally, I am displaying the visits message. 04:35.860 --> 04:38.620 We're going to have two messages displayed to the user. 04:38.620 --> 04:42.610 This would say this is your. 04:43.480 --> 04:45.040 This is your. 04:47.230 --> 04:50.530 Session visits. 04:52.600 --> 04:53.830 Visit. 04:57.870 --> 05:03.540 Okay, so let's close off the PHP part where we have the logic of our script. 05:03.540 --> 05:11.970 So again I described this a little bit like model view pattern though it is not exactly this pattern 05:11.970 --> 05:12.600 yet. 05:12.600 --> 05:14.670 We are going in the right direction. 05:14.670 --> 05:23.760 We are separating our logic kind of and data with the let's call it presentation layer, which is our 05:24.000 --> 05:24.900 HTML. 05:24.930 --> 05:32.430 So now we need to add the HTML because we would like to present this data to the user and additionally 05:32.430 --> 05:34.200 add a form. 05:34.200 --> 05:36.630 So first let's add the form. 05:36.630 --> 05:41.700 The form should be displayed conditionally only if we don't have the cookie yet. 05:43.980 --> 05:50.010 So this is an alternative syntax that you can use in templates of an if statement. 05:50.010 --> 05:52.620 And then we display the form. 05:52.620 --> 06:00.080 The form has a method of post, and we send to the same URL to the same script. 06:00.380 --> 06:01.790 And this would be simple. 06:01.790 --> 06:10.520 I just ask for the user name using label and I add the input of type text. 06:10.550 --> 06:14.870 Which name is name as the user name. 06:15.290 --> 06:16.820 Let me close this. 06:16.850 --> 06:21.470 And finally we've got a button saying track. 06:21.920 --> 06:26.990 This is only being displayed if there is no cookie yet. 06:27.290 --> 06:30.290 Otherwise we just display the data. 06:31.640 --> 06:36.530 And the data that we have is the welcome message. 06:38.540 --> 06:44.510 And the second one is the visits message. 06:44.990 --> 06:48.740 Okay, now we are ready to start this. 06:49.400 --> 06:59.530 So let me run php s localhost Host 8000 and the script name is session Dash cookies. 06:59.890 --> 07:00.340 PHP. 07:02.440 --> 07:03.820 Okay, there we have it. 07:03.820 --> 07:04.720 There is a form. 07:04.720 --> 07:06.250 We haven't set a cookie. 07:06.250 --> 07:08.080 That's why it is being displayed. 07:08.080 --> 07:12.940 We've got the anonymous message and this is our first visit. 07:12.940 --> 07:15.280 Let's see what happens if I refresh. 07:15.490 --> 07:22.900 So as you see, every single time we are seeing that it is our first visit, let's see why. 07:23.800 --> 07:31.630 So I think now is a good time that I explain how sessions and cookies work and how sessions are connected 07:31.630 --> 07:32.560 to cookies. 07:32.590 --> 07:38.830 Now, let me give you the reason why we constantly see that this is our first visit. 07:38.830 --> 07:45.250 This is because we really haven't started the session and we have to do this first. 07:45.250 --> 07:52.500 So the first thing that I have to call in this file is to call a session, start Function. 07:52.590 --> 08:00.930 Now how this works is the session start function is first checking for the session identifier, which 08:01.080 --> 08:04.440 it happens so is stored in a cookie. 08:05.280 --> 08:08.760 So when you call this function a cookie is created. 08:08.760 --> 08:11.250 It is stored in the user browser. 08:11.250 --> 08:18.330 And next time you visit a page, this function is making sure to retrieve this cookie value to find 08:18.330 --> 08:24.300 your session identifier so that it can identify who you are. 08:25.110 --> 08:31.740 Okay, so now let's open the Chrome DevTools and jump to the application tab. 08:31.770 --> 08:34.830 So cookies are stored in the browser. 08:34.830 --> 08:40.260 And under this cookies menu you can find cookies for a specific domain. 08:40.290 --> 08:44.280 Ours is http localhost 8000. 08:44.280 --> 08:48.960 And here you can find a cookie called php session id. 08:48.990 --> 08:59.030 So as set this is automatically set by PHP and it has this value autogenerated so that PHP can then 08:59.030 --> 09:01.040 identify you. 09:01.070 --> 09:06.770 Now how does this cookie gets its way to a PHP server? 09:06.800 --> 09:14.420 Well, that's a mechanism of all the browsers, so that with every single request like this one right 09:14.420 --> 09:24.530 here, it is sending all the cookies of this particular domain to the server using request headers. 09:24.890 --> 09:26.750 We can find it right here. 09:26.750 --> 09:28.190 There is a cookie header. 09:28.190 --> 09:33.710 And it sends the name of the cookie and the value of the cookie. 09:34.280 --> 09:39.770 So some things that you should know about cookies is that they are stored in the browser. 09:39.770 --> 09:41.900 That's first and most important. 09:41.930 --> 09:49.790 Cookies can be set by JavaScript or by a header that is returned from the server. 09:49.790 --> 09:53.170 This is how PHP is actually setting cookies. 09:53.170 --> 09:58.030 It sends back a response header from the server to the browser. 09:58.030 --> 09:59.740 Cookies have a size limit. 09:59.770 --> 10:08.710 Typically it's four kilobytes and you should not really store any sensitive data inside cookies like 10:08.710 --> 10:12.280 passwords, etc. because this is not safe. 10:12.280 --> 10:20.470 Anyone who gets access to the browser can then figure out the user password or any secret data. 10:20.470 --> 10:27.130 So cookies are not for sensitive data now. 10:27.130 --> 10:31.330 Additionally, cookies can have an expiry date. 10:31.330 --> 10:37.810 This means they can be stored for a long time, maybe one month or even one year. 10:37.960 --> 10:40.030 Okay, now the sessions. 10:40.030 --> 10:46.540 So as I said, the session start function is required every single time so that it can figure out if 10:46.540 --> 10:54.570 this PHP session ID cookie exists, and if it does, then it can identify your session now. 10:54.600 --> 11:01.230 Session means that we are storing some data on the server, so this is more secure than a cookie. 11:01.260 --> 11:05.040 You can store some sensitive data in a session. 11:05.070 --> 11:08.220 Now sessions get auto timeout. 11:08.220 --> 11:15.030 So after around one hour if there is no activity from the user, he doesn't visit the page again. 11:15.030 --> 11:18.330 Session would be automatically destroyed. 11:18.360 --> 11:26.010 Sessions are often used for authentication, so you can sign in to a website and the session keeps the 11:26.010 --> 11:34.290 information about you, your user ID, etc. so to sign out you will typically destroy a session. 11:34.290 --> 11:39.750 There is a special function for that and we're going to use that a little bit later. 11:41.220 --> 11:47.040 Now let's try to solve the issue that our visit counter is increasing by two. 11:47.070 --> 11:50.270 So that is really a strange issue. 11:50.300 --> 11:53.810 Now what is happening here is actually pretty simple. 11:53.810 --> 12:01.760 So the web browser is trying to fetch a favorite icon of our website, which we don't have because we 12:01.760 --> 12:04.700 have just a single PHP file. 12:04.700 --> 12:09.470 And it's actually trying to make a request for this favorite icon. 12:09.470 --> 12:16.250 And that's the reason we get double requests every single time we visit the page. 12:16.490 --> 12:19.520 We can do something about that. 12:19.700 --> 12:27.920 We're going to use the server super global and we're going to check the request URI. 12:27.950 --> 12:33.080 So what's the actual path that the browser is asking for. 12:33.350 --> 12:43.160 And if this is a favorite icon dot icon which is typically the name of the favorite icon, we can just 12:43.160 --> 12:44.120 exit. 12:44.270 --> 12:46.220 So we're going to stop the script. 12:46.270 --> 12:48.370 Nothing will be happening. 12:48.790 --> 12:52.630 Oh, and this needs to start with a slash. 12:52.630 --> 12:59.110 And now, after I save the changes and refresh, we see that the counter is increasing by one. 12:59.110 --> 13:01.420 So we have fixed the issue. 13:02.380 --> 13:09.160 Okay, so finally we need to keep track of the user name if he supplies his name. 13:09.760 --> 13:16.750 So after we start the session we would check if the request here is a Post request. 13:16.750 --> 13:21.730 This would basically tell us that someone has submitted the form. 13:21.730 --> 13:28.210 For that we're going to use the server super global which has the request method value inside. 13:28.210 --> 13:31.810 And we are checking if this equals post. 13:31.810 --> 13:37.090 If that's the case, we can set a cookie by using set cookie function. 13:37.120 --> 13:44.320 Notice that there is a slight difference because the session data is set by assigning to session super 13:44.350 --> 13:46.290 global with cookies. 13:46.290 --> 13:47.730 That's not the case. 13:47.730 --> 13:49.620 You need to use a function. 13:50.100 --> 13:53.190 So we need to give our cookie the name. 13:53.580 --> 13:55.770 This would be just user. 13:55.770 --> 14:02.340 Cookies are stored per domain, so you don't need to worry about other cookies stored in the browser 14:02.340 --> 14:03.750 and the value of it. 14:03.780 --> 14:06.960 We're going to take from the Post-super global name. 14:06.960 --> 14:09.210 So data sent from the form. 14:09.570 --> 14:16.890 So every single time you accept any data sent through the user by forms or any other way, you should 14:16.920 --> 14:20.550 sanitize it or validate it or do both. 14:20.580 --> 14:25.350 Now we actually do sanitization when we display the data. 14:25.350 --> 14:27.660 So maybe this is fine for now. 14:27.660 --> 14:31.380 And I can just store whatever the user sends. 14:31.380 --> 14:35.580 Next up we need to give the cookie the expiry date. 14:35.730 --> 14:39.510 So I can use PHP time function to get the current date. 14:39.510 --> 14:50.960 It returns time in seconds and I add three 3600 seconds, which is one hour and it is a top level cookie, 14:50.990 --> 14:53.990 not for any specific subdomains. 14:55.460 --> 14:56.090 Okay. 14:56.090 --> 14:59.090 So this sets this user cookie. 14:59.090 --> 15:01.880 So I think that we are done. 15:01.880 --> 15:04.640 We've got the whole logic. 15:05.000 --> 15:06.470 Now let me save this. 15:06.470 --> 15:09.170 And now let's try that out. 15:09.950 --> 15:15.440 By the way I just noticed that I have misspelled the visits. 15:15.440 --> 15:17.690 And here this is spelled correctly. 15:17.690 --> 15:19.940 But later on it's not. 15:19.970 --> 15:22.490 Let's fix this first. 15:23.150 --> 15:23.900 Okay. 15:23.930 --> 15:25.580 Now let's try that. 15:26.900 --> 15:29.180 So we have a count counter going. 15:29.180 --> 15:30.530 It's doing fine. 15:30.530 --> 15:34.190 Now let me add my name and keep tracking. 15:34.580 --> 15:41.630 So now when I visit the page I have my name and it is tracking me like this. 15:41.660 --> 15:49.810 Now I can reset the session by going into the application tab, and I can just remove this PHP session 15:49.810 --> 15:50.980 id cookie. 15:50.980 --> 15:56.710 And this would make the PHP server lose track of me. 15:56.740 --> 15:59.650 It would have to restart the session. 16:00.220 --> 16:08.260 So I do delete selected and when I refresh this page it knows that I am Piotr because the user was untouched. 16:08.260 --> 16:09.340 The user cookie. 16:09.340 --> 16:16.060 But PHP session id was recreated so that it had to start counting from scratch. 16:16.060 --> 16:22.090 If I remove both then I'm forgotten and also the session is restarted. 16:22.090 --> 16:24.040 So we have the first visit. 16:24.040 --> 16:27.760 So this is how destroying the session works. 16:27.760 --> 16:30.550 Essentially you're going to call a function for that. 16:30.550 --> 16:33.130 In PHP you're not going to remove cookies. 16:33.130 --> 16:36.100 But this function is doing exactly that. 16:36.100 --> 16:39.430 And this is often used for signing out. 16:39.430 --> 16:43.120 If you are authenticated in an application.