Using PHP in a Client Application

[00:00:00]
>> Maximiliano Firtman: So let's move into the next one, our last project. And for that, based on the repo that you have already downloaded. I'm gonna open the folder that says FRONTENDMUSEUM, that one. There you will find some HTML, Javascript, CSS, all that stuff, that we won't touch too much, more than adding some PHP on top of that.

[00:00:26]
First, of course, you can open the HTML and see the code, the script.js, and also CSS. We won't care too much about that. We have images, we have a gallery with some images and also we have some data folder. In the data folder, we have already there three files.

[00:00:47]
It's actually the same data, it's just some data that I want to serve to our web app. Actually, we wanna do server side rendering because we are doing PHP. We have the data as a A PHP array is this thing. So this is like a website from a museum.

[00:01:07]
And we will just render information about some pieces that we have, some artifacts that we have in our museum. So we have a title, a description, and an image. The image is pointing to the images folder. This is an array, so I think this is the simplest to allow to do.

[00:01:27]
Then we have a JSON version of that array. So we see if we can get the JSON using the file system, if we can read the JSON and parse it from PHP, and then we have a db version. And say, ooh, what's that? That's a SQLite database. So then we can see how we can use PHP to connect to a database, okay?

[00:01:53]
We'll talk about what SQLite is in case you don't know, but that's the goal, okay? So if you, we need a server. And we are gonna run PHP, so we know how to start a PHP server, right? Php -S, localhost. Let's put this just big, just in case, localhost:, well, we can change the four number if you want, 5,000 now.

[00:02:24]
One level up. So, now we can open this and this is what we see initially, okay? So actually what I want is to clone this, but using this actually taking the HML and is using JavaScript to load the data and render in the data with JavaScript. But okay, so this is a client side application.

[00:02:51]
How do I know that? Well, if we look at the source code in the main part I have one article only. One and only one, but then, if we inspect this in the main I have a lot of articles. So, where are those articles coming from? Not from PHP, because they're not in the source code from JavaScript.

[00:03:17]
So we want to change that. Why? There maybe several reasons, performance, you wanna move from a client side application to a server side application, and also for SEO, for search engine optimization. Because Google or now forget about Google Chat GPT can actually, I'm not sure if you know that Chat GPT is not really in JavaScript, so it's not execute In JavaScript.

[00:03:42]
So it can browse websites and read websites, but it won't execute JavaScript, okay? So yeah, maybe we wanna do server side rendering. So what I'm going to do next is, I'm sorry it will hurt, but I'm going to delete the JavaScript file. I'm sorry. We don't need JavaScript anymore.

[00:04:02]
And just for avoiding errors, we can just also remove the script declaration in the HTML. I mean, if you don't do that, nothing will happen. But now when we refresh, I only have one of these references that I leave that as a template. We want actually to clone this into separate parts.

[00:04:30]
Okay, does it make sense?
>> Maximiliano Firtman: So let's see if we can actually do that. Let's start with, first, it's an it's an HTML. If we wanna convert that into server side rendering, we need to change the extension to PHP. That's the only way that we can change this from PHP.

[00:04:56]
So let's take that file, index.html, and let's rename that to index.php, it will just look the same, it will the same. But now we can open PHP tags here and there. Does make sense? Yep. So what's the goal? My goal is to repeat this, okay? So I want to repeat this.

[00:05:27]
So once per article that I have here, let's start with data.php. I have exhibits here. It's a variable, so I wanna go through this. It's an array of arrays, but this array has keys, string keys, okay? So first, what do I need to do? If I ask you, what's the first step?

[00:05:53]
Well, open a PHP tag anywhere, well, it's opening here.
>> Student 1: And then include.
>> Maximiliano Firtman: Include. So we need to include the file that has the array, okay? So we're going to include its data, data.php, so now everything that is set or defined in that other file, it's also defined in my file.

[00:06:18]
So that's the first step.
>> Maximiliano Firtman: What's the next step?
>> Student 1: You'll want to have a for loop.
>> Maximiliano Firtman: A for loop? Which loop? While, do while four, or for each?
>> Student 2: For each.
>> Maximiliano Firtman: For each, or for. It's up to you.
>> Student 1: Or the for, yeah. It's up to you.

[00:06:41]
>> Maximiliano Firtman: The for each is simpler typically. Because you say for each the collection, in parentheses, the collection, what's the name of the collection? Well, I have to look into data.php, right, there is no way to see that here from here. It's exhibits thing, right? So that's the name, as and then I need to set the variable for each object, or however you want to call it, okay?

[00:07:10]
I will use a column thing, just to show you something different. Remember the column when you start one of this PHP flow condition or loop statement and you end up with column and you don't open coblock, you need to find a place to finish this with endforeach. The problem is that the endforeach is PHP and not HTML, right?

[00:07:38]
So that means I need to open PHP tag. Just for the end in the for each. Does that make sense? So I open tag for endforeach. So in this case, what I'm doing, what's the goal here? Also, you can ident this in this way, if you want, if it makes things easier for you.

[00:08:01]
So I need to clone this article, I need to generate, to output to the browser, a lot of article.
>> Maximiliano Firtman: Yes?
>> Student 3: Just a minor semantic question. Is that semicolon necessary in the-
>> Maximiliano Firtman: Which one?
>> Student 3: In the endforeach?
>> Maximiliano Firtman: In 34, it's not necessary. Why? Because it's the only sentence, the last sense that I have, so I don't need that.

[00:08:28]
Yeah, you know what's the problem? I mean, it's not mandatory, which is, okay, the problem is that tomorrow you come to the code and you say, after that, I need to do something sure. You press return, and then you do something else, and you forget to add the semicolon.

[00:08:41]
So, okay, it's just that, is that why sometimes, for example, my brain is adding it automatically, because I know that there is a good chance in the future that I will do that, that I will add something else to that PHP code block.
>> Student 3: It won't hurt to have it now.

[00:08:55]
>> Maximiliano Firtman: Yeah, exactly, it won't hurt it now, so it may hurt in the future. Okay, make sense? So if I do that and I'm not changing anything else, if I refresh, this is what we will get, okay? So I'm repeating the same article.