 Hello, this is Christian. Welcome to another video series with me. In this series, we're going to create a simple PHP stocks application. We're just going to basically render some data to the browser. And we'll be using the PDO extension to read a text file. And then also to parse the text file, reading each line or each record, and then insert this data to the MSQL database system. And then we'll display that data to the view. So here is a flow chart what that may look like. So we have mainly a class called DB on the right side that will make the DB connection using PDO to the database system. We have a class called stock function. That is just basically some utility functions to display headers, footers, and to perform the file reading and so on. And then we're going to have a single file called index.php. And that file will have four buttons or four links that will perform a few options. So the home page, home button just going to link to the home page. Reload the index basically. Reset will use the truncate to truncate the entire database table so that we will reset the ID from one again. That's different from the delete. And then we use the get stocks. That is to read a text file. And then we're going to pause each line or each record and then answer that to the database. And then for the view stocks, it is basically to make a query from the database system and display that to the browser. OK, so let's go and see how this can be done. So first, let's look at the text file here. I created my unit six here. It's stocks.text. As you can see, it's a flat file, also known as a text file. And I have about 50 lines or 50 records. So each line is indeed a record. And each field here is separated by a semicolon. This is also known as a CSV file, but I'm not using comma separated because some of these names have commas in them. Like, for example, Innova International comma ink. So if you were to use comma, that'd be a little bit challenging to parse. So instead of using a comma, I'll use a semicolon instead. Or you can also use the pipe symbol like this or sometimes a tab key to do that, too. But in this case, we use the semicolon to separate each field. And be also important that the last line cannot be empty like this. If you do that, you might have an error in your code. You just be careful. So make sure there's no additional lines, blank lines. So if you look at this, we have about five fields. The first field is the IDs. And then this is the name of the company. And then we have this stock symbol. And the energy here, I use this as for the sector. What kind of sector they're in. And then this is the stock price. So we're going to create five fields and the database. So let's go to the database and create that first. So over here, AMI SQL, I'm going to go create a new database. I'll use the, call it stocks. OK, we'll have a table. This time we'll call it just stock, five fields. All right, so the first is the ID field. And this will be the auto increment. So just check that and make that primary key. The second will be the company field. This will be a VARCHAR. I just put 100 here. And this is the symbol. VARCHAR, we'll just put 10. You probably less than that, but 10 should be enough. And then this is the sector. So again, VARCHAR, we'll put 100 here as well. And then the last one is the price. So for the price, we want this to be a decimal number. So I use a decimal. And a decimal, I put 10 comma 2. The comma 2 here just tells you it's going to have decimal values. If you don't do that, I think you're going to have this whole number. So you're going to put that comma for the number of decimal places. If you want more than that, you will put more. If you were 10 decimal places, then you put 10 comma 10. But two decimal places should be enough for this one here. All right, so let's go and save. And then we are good to go. Now, again, remember that our ID is auto increment. So that means when we insert data back in here and the code, that means we're going to ignore the first record here. We're going to do the answer. OK, all right, so let's go and start creating our files. I'm going to go and create a directory here first. We'll call this the includes. So includes will have include files. Another one here for the assets. Again, I like to use assets here to store some other stuff, like CSS and other stuff. So my CSS, I'll create one here as well. Not directory, just a file, CSS file. And let's call it stocks.css. So we'll put the CSS in here. And then in the main folder, we'll create the index file for now. And then we'll also create includes one for a DB. So we do that first. OK, well, let's go and create our DB. Well, let's create the view first, OK? I want to start with a view. And because I want to, again, you always want to display what you want to look like first before you do any other stuff. OK, so before we do all the stuff here, I'll just start with the simple one. A lot of typing, so I'm going to do a quick one. And test, I'm going to grab these. That's all I'm going to do. I'm doing some lazy thing here. But let's close everything and open the index file. Put that here. OK, so this would be the stocks. All right, so we'll have a div tag. This would be the class of a main container. It would be similar to the other apps we've done before. And so here I'm going to have the header. And I have the folder. Well, I'm going to put a header inside a main, OK? So this would be inside a main. And I'll use, again, a function to do that. But inside here I can have a folder. Again, same thing, OK? So this part I just put a placeholder for now. But eventually we're going to replace this with a function. And maybe we'll do that. We'll do that. Maybe we should do that now. So let's go over here and create another file. And this is the function. So I'll put here functions. And just to hold our functions stuff. But what do we have in header? We can do that first. And we can populate it over. I have a ul and then have li for each link. So what does it look like? Well, we can have like, I'm going to hold a sync file. This could be a href. And then inside here, I'm going to do the server, that PHP self. You see that I do this quite often just to make sure that we're calling the same file every time. And this would be the home page. So let's see here. This is the home link. So it has nothing attached to it. When I duplicate this, Ctrl D a few times. I'll use this as the reset to reset my table. And then this is for get the stocks. And then this is just to view the stocks. OK, so when I click on the reset, I'm going to load a sync file. But I'm going to attach here a variable just t for task, I guess, and we'll just call this reset. If you remember this from the vehicle assignment, it will be kind of similar. OK, and then this will be t equals to maybe just call it stocks. And then this one, t is, I guess, we just call it view. So those are three options, four actually. But mainly those are it. And then a footer will be something quite similar or a simple. Copy symbol if you want to do that. I'm going to just put my name here and say I own this. What are we going to put it? I think that, yeah, that would be, that should be my footer. OK, so let's go to the top here and add our CSS. So href is inside the SS folder, CSS, oops, and then our stock CSS. OK, that's our CSS. And that's pretty much all we need from this one here. Put here company stock stocks. All right, so that is the index page. And then let's open the CSS files. We can go ahead and add some of those common rules. Body, you can copy from the other program if you want. But again, I'd just like to do it from scratch just to make sure I remember how to do this stuff. OK, so mungen zero, padding will put zero as well. And the font family, I always like to use the eight. That's the ario. Where is that? This is a default. Sensor, yeah, this one here. I always like to use that one. OK, that's for the body. And then we're going to have a header, right? So the header goes here. And then we have the footer. We can do this together. And then we have what else? The main container, we have that. And then there's going to be a main tag, right? And yeah, those are our main ones. We'll add more things later on. So the header will be, this time we're going to put it on the top. We'll make it also fixed so that when we scroll to stop, the top will also be displayed visible and same for the footer. So I'm going to choose a different color this time. I'll use maybe like a green color for stocks, the kind of green, right? So I'll use either dark green or forest green. Looks good, I guess. Use that one. I also want to add a boxed shadow, make it kind of like a 3D look to it. The first is going to be the position. This is for up and down. I think now left and right, OK? This is the x coordinate system, make it center. I mean, right in the center. And then the next position would be the, I think the up and down or the depth. And then the next will be the spread. I think I'll use 15 here. And then the color will be just black, OK? It's like a black shadow, basically. And the width for this will be make sure you put 100% because you want to stretch all the way across. Top will be zero. You want to stop from the top at zero. And then the color for the text will be white because it's a green and white background. Well, let's see. Let's do a look size first. I don't know. Let's run it and see. OK, so yeah, there's a nice shadow here. And the photo will be kind of similar, OK? And then now we just have to clean this up and then make it look nice. OK, let's go back. And then that's the header. I think the photo will be kind of similar. I'm going to copy and put it here. It'll be fixed. This time it'll be a bottom instead of a top. The color will be white. The same thing here. 15, well, yeah, we'll keep the same. Yeah, we'll see what happens. Let's see. Let's save that. Let's go take a look. Refresh. Oh, look at that. Oh, kind of small down there. But maybe I'll put some padding or something. But it looks good, right? So you see the shadow? It's 3D. And if you scroll it, we have more content. They should stay fixed, OK? So let's add some more stuff here. It's kind of small. So let's add some margin. I want to make sure it centers. So margin again, 0 for top and bottom. And then auto for left and right. Center that. I think we need some padding. We'll put 10 px. OK. So that's the footer. I think that should be good. Now the main container. This is the main div. So we'll have a margin. Just margin. Let's see. OK, remember that when we fixed the footer and the header, they will stay fixed so that anything that you display on the main content will be hidden underneath. So if you don't set some margins, you're not going to see the content, OK? So let's put here, for example, I put 10 before you can see what that is. So I put 10 auto, and then the top and bottom also 10. And then you auto for left and right. Make everything center. And then the width will also be 100%. So say if I have something like that, if I go to the main index file, and like in the main here, so inside here, I'll put some h1 content. Say we have a company stock, for example. If I save that and go to my view, you'll see that it's not shown here. It's not visible because it's underneath here. And this is, again, just CSS stuff. You'll see that it's still there. It's just you can't see it because it's underneath. So to make this work, the main div tag here, you have to put some, let me set the width here. You have to take the margin, the top. If you change the margin, you'll see it will come out. It'll be visible. You see there it is. So it has to be more than a certain value in order to be visible. So we can make it so that it's like 100, maybe 150, I guess, just to make sure it's safe. Because when we add more stuff, it might do some more stuff. So like 150, and then maybe like a 20 on the bottom just to make sure it's visible all the time. And as you can see, if I scroll, it's going to go underneath that navigation header and footer. So that's quite nice. So we'll keep it at 150 and 20 for this one. Let's go back and we'll change it to 150. And then we'll put, oops, not that one, the top margin. And then we'll put 20 at the bottom. We can always change it later on. OK, so the main container is this main tag here, the main content. Contains for that one. We're going to have a margin. Top and bottom, we'll put 10 px. Well, for the top, and then auto for the left, the right. The bottom, again, the bottom, it has to with the footer again. Remember when we designed this, the main and the footer did touch each other right here. So you put some padding down here as well, because the footer consumes some space. So the main has to have some margin, otherwise it will not be visible, same thing as the above. So that means I have to put a margin at the bottom, quite large, maybe like a 75 or 80, at least, or maybe more, and then auto for the left as well. And then we'll, again, padding, just put 10. It gets commonly 10. OK, so let's see. That is my CSS for now. And let's go back and see. OK, so if I refresh now. OK, looks not too bad. All right, I have some issue on the left side here. But all right, so let's fix the navigation at the top. I'm going to turn this into a buttons. So as you can see, when I click on it, it shows the result and I can check the T here. If it's reset, then I'm going to wipe out my database. If it's a stocks, then I'm going to read the stocks from the text file, view, just display the stocks. And if it's a home, then maybe we'll just put some message saying pick an action or something, OK? So let's go back and now let's go to the index file. All right, so we already saw how this works. So I'm not going to put thing here. We'll just put so the main. This will move to a function. And so let's go in here and create our function. I'll use the class as well. So this would be the stock function. Inside here, we have a function called show header. And then we'll put that right in here. OK, and we'll just copy this header, this whole thing, right into this part. And we have another one here for the footer. Show footer and same thing. OK, so the footer will be this whole part. And we'll put it right into the function. And if you just go to code and reformat, it'll clean this up for you. So now we go into show the information here. But we're going to do that using a config file. So I'm going to go to the Unistix and create a new file. I'll call this config. And then I'm going to import that in here. So it includes once the includes functions. OK, eventually we're going to include a database here too. So we can do that right now before we forget include. And it includes and then db as well. And then we're going to do a SFN for stock function is equal to new stock function. OK, good. And then the db as well, but we'll add that later. So now we can call the main function here. And this is the SFN get show header. So we show the header there. And then we'll copy this and put one for the footer down here below the main. So show footer. There we go. That's our functions. And then here we'll do some operations. So the logic will be either show error messages or we show the view. You have three things here, right? So here we have one thing like we'll be show error messages. But now we do a show table or a show the landing page. Just put it here so you can kind of see what the logic might be like. So the error messages, we're going to check for error messages. And then down here the landing page will be just something like dependent on what task it is. Remember in the function, if it's nothing, there's no task, then we'll show that here. If it's a reset, then we go to different route. OK, so here is going to be something like H1. And then we'll put here for now pick an action above. Something like that. So we show to the user. OK, so now if you go to the view, you see something like that if you refresh it. Oops, SFN 912. Error SFN, oh, I need an include up here. So always forget that. OK, so include the config file. All right, let's see. Fresh. So there it is. OK, so pick an action if there's no information here. If you click on reset, then this will be replaced with something else. OK, now these actions here if you go home, you see this one here. OK, so let's style the buttons. And then we'll be done with this video. Let's go back to the CSS. Now let's do the navigation here. Oops. OK, so what do we need? Well, we need the navul. This will be the style list will be none. We don't want any list for the style. Just remove all the bullets basically. And then we'll just force the padding also to be 0. If you don't put padding 0, you're going to have some white spaces on the left and right. I believe so. If you go back, let's say, if you refresh, do we not save it? Let's see. I have it, yeah, list.type, it's called nav, let me see. Oh, I didn't put nav here, that's why. Nav. OK, it's going to wrap inside the nav tag. There we go. And then code format, good. So now let's go and view this again. OK, see the dots are gone. But you can see there's a white space on the left side. Well, you want to be kind of like the right on the bottom here, so you move the padding. The padding is set to 0. So here we say padding before set to be 0. OK, now we go to each ally. And then each ally want the display to be inline black, again for width purposes if you want display width. OK, so let's go with the background color. I want this to be just black, so black over green. I think it looks good. The padding was put 3 px and top and bottom, so left and right, it'd be 7 or 10 left and right. And I want the round border radius. So let's give it a 4 px, pretty good. And then you also put the border as well, 1 px. You know, it may not be ideal, but it's black, black, so maybe not needed, but anyways. OK, and then we do the hover. OK, you have ally hover. We hover, just basically change the background color to a different color. Just choose white. That's it for that one. And then the navigation, right, the A links and stuff. So nav, ul, I'll just call it A. I think there's only one navigation. And we want the text decoration to be none. We don't want the underline. So let's put none here. The color will always be white. The force will be white. If you don't, once you navigate it and it will change colors, you want it to be white. And the hover. We hover that. We want the color to be black on white. So the color will be black, OK? Because when you hover the ally, it changes to white for the background color. So you want the funk to be white. You have the nice contrast. All right, I think that's all we need for this one. So here we go. I still have some padding on the right here to do. But OK, so it looks good. And let's put some title on the top here. I didn't put that in the header. So let's go back in here in the function. Right above here, I bought the nav. I put h1, say company, stocks, right? I think that's what I need. Anything else I need to do here? I wonder why there is a white space on the left side. I don't like that one. I mean, it always bothers me. So 0, 0, margin 0 padding 0. Looks good. The main container, and if these are auto widths, let's change that. It's a typo. Yeah, that could be it. 100%. The main clear build. No, padding 0, 10. Yeah, well, let's save in one more time. Yeah, well, I have to figure out why it's not. It's a padding there. But OK, so far so good. There we go. We have this all and then set up. And then the next thing is, as you can see, when I scroll, you can see the text would beneath the navigation. That's what I want. I want this to remain intact and visible all the time. So that's exactly what I want. Oops. OK, so that's it for this one. And then in the next video, we're going to create the database.