PHP Website Layout – With Bootstrap

Hey guys, welcome to this new video we will be looking at using bootstrap framework in our PHP application. Now bootstrap is an open source CSS framework that actually helps us to get our application beautified with very minimal effort. Essentially, a CSS framework is basically somebody’s brainchild when they realize that people are repeating certain CSS code patterns over and over. Like, for instance, everybody wants buttons of a certain color when they’re using their websites, you know, red for danger, yellow for warning, etc. So a CSS framework is when somebody sits down and creates these CSS styles to give you these, you know, specific aesthetic complements for your design. And then they publish the code. So bootstrap is no different from this group of developers got together they made bootstrap and they are just Trying to help you get the menial things out of the way like red buttons, blue buttons are certain things that every website has nowadays. Now in order to get started with bootstrap, you have two options. Option A, you can actually don’t load the bootstrap framework, which would come with a bunch of CSS files and J’s files that you’ll need to include in the project that you’re already building. The option B would be using the CDN. So here they give you actually code snippets as to what you can just include in your website in your web code. And, you know, get your bootstrap in the CDN is short for content delivery network, which really means that they’re hosting the code file somewhere else. And you don’t have to actually download it and include it. So you can actually just reference it remotely to where it is being hosted. So in this video, we will be looking at a incorporating it through to CDN links. Now, if you scroll down, firstly you get to the website by going to get bootstrap Comm. Or if you google bootstrap, I’m pretty sure that it will be in the first three search results where you will see that it’s actually the the CSS framework, I’m not saying anything else. And then on the front page to get bootstrap calm, which would be an index page for the websites, you will see the links now my browser, which is edge is kind of obscuring the code from itself. So open it in Chrome, and you see that you can really just copy this code and included in your web application. So my first step is to include the CSS file. So if you look closely, thing get CSS you have the link tag, then you have this attribute called rel, which has a value of stylesheet. Then you have another attribute href which has a link to somewhere. So I’m just going to copy this link, and open a new tab and browse to that link. And you realize that this is really just one big CSS file. Alright. So without trying to understand what’s in that CSS file, I’m just going to copy this line here. So I just double clicked it, to get a copy all of it, and I want to Ctrl C. And then in my website, I’m going to go into my header. And remember that you include CSS files in your header. So if you didn’t know that before, no, you know, no, you always include your CSS files in your header. So I’m going to include that under this last meta tag above the title and other space. And you’ll see comes with a bunch of things are the attributes, you don’t have to worry about those things. The essential thing is that you’re putting this tag or that bit of code from the site in the right place. All right. And we can see if that and then in addition to that, we also have to include a few JavaScript files. So they tell us that we’re using j, s, Hopper, dot j, s and jQuery. So I’m just going to copy all of these. All right, and the, the best place to place these wouldn’t, you can place them in the head, that’s fine. So you could go back to your code and actually put them underneath the link to the CSS. And in another school of thought, they will tell you that you should put it right at the end of your webpage. So I’m going to go over to the footer file, and I’m going to place them right above the body tag. Alright. And of course, I’m going to indent my code because I like when everything looks uniform. So I have three script files being included and the order matters. So if you if you’re going to copy and paste it make sure you copy and paste it in in the exact order that it appears on the websites Alright. So whatever order it is that they suggested to you here. These in sure that you maintain it. Alright, so now that all of that is done, I’ve included the CSS file, and I’ve included the script files, I’m going to browse to my website, which we add here open. So if you didn’t have it open, you can feel free to open it’s localhost. Here, folder name slash index dot php should bring it to the webpage. And I have it open already. So I’m just going to refresh. And when I do that, you will notice an instant improvement in the aesthetics of my site, the font is different. The way the links appear is different. Everything about my size is different. And that’s what bootstrap being brings to the table. So you don’t have to sit down and write hours of CSS code to get the right font to get the right this get the right colors. bootstrap already is designed by people who know what, what developers like. So typical websites look a certain way at least in the modern day. So they pretty much just baked all of that into the CSS files. By default, it will cause certain enhancements to your website. So let me put that into a bit more context. So I’m going to go back into my header file, and I’m going to remove the reference to the CSS to the bootstrap CSS file. Alright, and if I refreshed my website, I’m right back to square one. So my default font is I think this is Times New Roman, and the font this links aren’t the most attractive, but then once I include it, sorry, once I include it in the code, and I refreshed then it’s an instant facelift. And if I go to any page because I included it in my header file, all pages kind of have that uniformity about them. So that’s another important thing about web design. Your pages should be somewhat uniform in you know the font and the clutter is used throughout. Now bootstrap has beats off documentation that is available to everyone actually love their documentation. To be honest, it’s very clear, they give some good examples and guides. And if you click on documentation here, it will bring you to the Quick Start. And they will actually guide you as to where to put what. So they say copy and paste the stylesheet link code, and they actually give you a copy. It’s really, really, really cool. And in the in the GS section, they tell you please the following scripts near the end of your pages right before the body tag, so I was right earlier when I did that. Alright, and then you can just scroll through and see how hold that template should look. So the link it’s in the head, and the script files are right above the body tag. Now let’s start looking at some of the goodies that bootstrap has outside of just by default enhancing our fonts and colors. One thing with digital Web Design trend is that the pages that don’t go into end. Alright, so right now on our pages, we have all the content hogging the left margin of our web page, right on every page looks like that. And that’s not typically how our websites look. So we want to kind of bring that uniform. So if I open a new tab here in edge, and then I just take a look at this first page, it kind of gives me an indication as the whole webpage is look, you notice that there’s a margin between the right side of the content and the right more spiders off the page, and the same obtains for the left. So that has to do with the layout of our page. So I’m just going to on the bootstrap documentation guide, go to the layout section. And in the layout section, they talk about something called a container someone to incorporate this div and the container into my code. No idea is an HTML construct that just to me means divider or section, there’s a tab called section but that Divi is really a section. So you can actually create like logical boxes around your content and style those boxes, and everything inside of those boxes will inherit. So in other words, the div is a section. And then bootstrap uses a class called container, which will kind of style this section a particular way. And the styling that we’re looking for is that it won’t stretch into end but it will kind of create that little margin between the left and the left margin and the right set of contents on the right margin. So in my header file, what I will do is I will open this div. Alright, I’m going to open the div in the header file because remember that we’re wrapping the header and the footer. So I have to open in the header file and I will close The footer file and I’ll close right above my actual footer text. So remember, I’m echoing this. Well, I’m going to close after this actually sorry. So I’m going to close after I’m echoing the copyright information. So the divorce open in the header and then closing it in the footer. So essentially, I’m wrapping all that appears in between the include header and the include footer or the require, depending on which one to use. I’m wrapping all of that inside of this div. Alright, so the div is open here. And the div is closed here. All right, and if you want to look back, I have the menu and then I opened the div. And then I close it. As a matter of fact, I’m going to put the menu and everything inside this div. So I want everything on my page inside this div. So I’m going to move this div opening up to underneath body. All right, and so body begins. And then the div begins. And then all content falls inside of that div, including the menu. As we know, it’s up to know, the page content. And then it is closed inside of the footer, after we have included our copyright information. Alright, the next thing that bootstrap guides us to do is to put in the attribute class container. And the great thing is that you can just copy it, you don’t have to write it all out. And I’m going to go to header and inside of this div, I’m going to paste class equals container. And then lets us just observe the instant chain. So when I refresh this page, you’ll see that there’s an instant jump from the left margin into a more centralized and was more. I don’t know how to put this but more acceptable form of how a webpage would look And all of that was done by just including a reference to a predefined class courtesy of our bootstrap CSS file. Now, in addition to containers, they also have our grid system. And you can play around with this, I won’t be using this. But if you need to split your page into three sections, they give you the code snippet for that. And I mean, it’s up to you and your individuality and your creativity to actually get your page divided and sectionalize the way you were required to be. Alright, so the next big ticket item would be to transform our current navigation and just take back this navigation construct into a more user friendly navigation construct. And if you go down to the components section of the documentation, you’ll see that they have a section for analysis and a section for enough bars and they go give you examples of what each one will look like, and the actual code that needs to go into it. So I’m going to stick with the navs. Right. And the reason I’m sticking with analysis that they have user or ordered loops, on order lists, sorry, that are being used with specific classes to have those menu items. So if I look back at my code, then I would realize that I also used an ordered list and list items and algorithms for my navigation. So all I really have to do is just make sure that I have the appropriate classes and the first thing I’m going to do is use the class equals nav. So I’m just going to copy that go over to my ordered list and paste that there. The next thing I want to do is make sure that I follow this procedure not necessary. In the order or the indentation of the tags, but really and truly in order of the classes and the tags that are used for accomplishing this end result. All right, so I’m going to add the class nav item to each of my list items. So I just copy this from the documentation and go to each list item and include it. And then once you’ve accomplished that, I’ll go back and the next thing I need to include is a class nav link. No, you’d notice that you have a world class equals nav, dash link and active and then the others don’t have active and then this one is disabled. So they’re really just giving you examples. If it is that you want to make one standards as active one, you can always include this in that class list. Alright, so you can have multiple classes inside of that section. It’s vs depicts a new class. So you have nav dash link as one class and active as another class. Similar down here, we have not dash link, and then space and then disabled. So those are two different classes and then they have a bunch of other attributes. And you can see the disabled one clearly displayed here. What makes that one unique, but the point is, all of them have this in common which is nav dash link. So I’m just going to go back over to my code, and I’m going to include nav dash link with each our class equals nav dash link with each anchor tag. Alright, so having done that, and added all of the new class references, I’m going to go ahead and refresh my page. And when I do that, I see that my ordered or unordered list of links now looks a bit more you know, refined, it’s still not enough bar so there’s enough bar coins because of so many links. Leave it like this. As this is is good enough for our context. If you look through the rest of the documentation, you’ll see that you have other options. You have available styles where you can adjust where you want it to be, where they want it to be in the center, or to the right or to the left, you can have it vertically, you can also have it looking like tabs, or looking like pills. Alright, so your links can look like tabs, and the links can look like pills. So if it is that you want that little hover effect, then what you do is just include nav dash pills to your ul. So I have nav and then I’ll just say space, nav dash bills, and then let’s see what kind of change that means to our site. And no, that did not do anything, actually. So maybe that’s one of those bugs that we need to report to the developers that the nav dash pills did not give us what we expected. But outside of that discipline. Another good thing about bootstrap is the fact that it makes our pages responsive, pretty much out of the box responsive means that it resizes our scales according to the screen size. So if I minimize this, and let’s say this would be the maybe this size of a tablet, he noticed that a little Very little is lost from the positioning of the content. And then if I further scale it to maybe the size of a cell phone, then this would actually be something like what a cell phone would look like. Now, the nav bar control actually has cell phone already menu that is there with the pills, I tap the pills and the menu comes down just like it would on a cell phone. It’s actually all built into bootstrap so you can explore if it is that you don’t like my use of the nav, the navs component, then you can always try and implement the navbar later on in the course we’ll actually get around to doing that. If you want to skip ahead, that’s fine. If you don’t, then we you know, you can just stick around that we just push through these concepts. So essentially, bootstrap is a very, very, very, very capable CSS framework. It gives you a bunch of options. Yes, there are a few bugs, like we just experienced with enough dash pills. But essentially, if you go through all of the utilities, and extend, and all of the components, you’ll see quite a few things. You can get carousels, if you need a button, maybe have a button in your page. And we can just go through a button example where these are all of the available button classes out of the box. And you can easily get your button to look this way just by including a class. So I’m going to include a button on my Index page real quickly. So I’m going to go to my index, and then I will underneath that tag so in between that last PHP tag. And while I’m on this page, I’m going to indicate that you really don’t need to open and close open and close tags like that if you notice that code will run on. So like, for instance, we have a PHP block here and a PHP block here, parts of refactoring your code, you could just merge these two because the fact is, the PHP block opens here, and it closes here. And if you want to extend it, you could actually just merge these two, because the PHP block opens here, and it closes here. Alright, so like for this one in between, we have a bit of HTML. So you know, you could leave this one open here, and then just have one big PHP block. But then be mindful of mixing it with HTML, because if you needed HTML in between here, you’d either have to echo it like this, or close the PHP tag, right here HTML. So like, for instance, I’m going to right mouse button here. And this is a button, I’m just going to say, click me. Alright. And I’m going to close this button. in HTML five button is actually a tag. But then because of HTML interrupting the PHP tags, I have to make sure that this tag knows it’s supposed to be PHP. So I’m going to just reopen a PHP tag just for that section of the page. Alright, so if I refresh my Index page, I’m supposed to get a button that says, click me. Alright, I look at this button. It’s it’s a basic plain, you know, not very attractive button. But then I want it to look like one of these buttons. So I’ll just go back up here. And let’s say I wanted it to be a dark button. Alright. So in the code example, they actually show me what code I need for a dark button. And what I need is, well, they give me the type and they give me the class I just copy the relevant parts. So There’s no problem with copying the entire thing here. And then just rewarding it, that’s fine. I already created my button. So I really just need to send some things that are missing, which would be the type attribute, and its value and the class attribute and its value. So I just copy that. And I’m going to go to button and paste that. And then when I refresh my page, my Index page, I know have a dark button. Alright, so that’s the pull of bootstrap. Once again, you just reference our class. In this case, all we had to do was reference btn. And the other class btn dash dark, and you see that it’s a common, you know, is a common pattern. All of them require btn. But then based on the type of what you need, if it’s a blue button, it’s btn primary, if that’s is agreeable, and it’s secondary, green and success. All right. So you can use these styles to give visual cues to your users. Sometimes users will read the text of the button, but they go by the color. All right. And that will have helped them to have an excellent user experience on your site. So I won’t get too in depth in bootstrap, right? No, there’s a lot of things that we can explore. But then the context for us to use them is not really there in this site that we have been building. So I’m going to end this video here. And I encourage you to spend some time looking at the documentation and getting familiar with them. I’m not saying you shouldn’t memorize all of the classes and all of what he can do, but it would be good if you have like a quick recall of what is available, even if you have to come and reference the documentation to see how you implement it. Alright, so once again, feel free to drop me a line or a bit of communication if you need some clarification.