Codeigniter Ep 3: Adding Bootstrap, Images and JQuery

hello guys and welcome to another um tutorial video on coding knight of four this is uh in this tutorial video we're going to be looking at how to add assets uh we'll be looking at how to add javascript assets primarily the jquery framework we'll also be looking at how to add bootstrap and images to your file and how to use them inside your views to start off we will start by running uh the project so in my case i'm running the sample folder uh so right click on it i'm going to open a new terminal the folder and i'm going to run the command php spark sub if you're in windows remember you you have to navigate to csump htdocs so whichever place you had stored your file this means that you need to have your zom server started and your purchaser and mysql server started in this case we're going to only be using apache server but you could also have your mysql server running also so once i have this you can see that the url is localhost 8080 i will go back to my browser which had opened and i'll type localhost 8080 which should give us the same project folder or same view as what we had last time and if you remember when we ran for slash auth index then it we had the login page when which when i click on process login it takes me to the user home page now we will start by creating a few folders which will allow us to store some files so we have two ways of primarily adding resources one of them is values of the cdn or online resources and the second way is by use of local resources or storing them locally now for things like profile photos images that you may need to access locally then you do store them locally things like bootstrap you can show them locally or you can use a cdn uh whichever is applicable to you uh things like jquery you may want to have a local copy but things like your javascript files your local css file then you might want to have them locally now what i'm going to do i have the project folder open in a visual studio called if if you look at the explorer folder you notice that on the explorer window you notice that we have the project folder which in my case is sample we have the app window below it we have the public you can have uh depending on whether you install it using composer you could either have system or vendor right whichever is applicable now inside folder inside the public folder you have a number of files so we have the index.php which is primarily the first file that is being called uh you have robots.txt which allows you to specify which to allow the google search crawlers or seo crawlers to be able to get the files so it will crawl through this uh section and get the details about your project i have the icon uh primarily this is the calling meta icon and we have the htaccess the htaccess is a file that allows us to be able to rewrite urls uh we will be located at it in more detail at a later time so what i'm more interested in is you need to create three folders inside the public folder so right click on it and say new folder the first one is going to be css so we're going to be storing all our css files here create a new folder inside again public the second one is going to be js for javascript so all of javascript should be placed in that folder and the last one is going to be images so we can either have it as yeah let's say it has images now inside the css um so instead of this each of these files we're going to be storing individual files so the first thing we want to do is you want to download an image and store it here and see how we can be able to display it on the user's homepage now what i will be using is a website called unsplash and splash is a website that gives you royalty free images but with some attribution so in case you want to attribute the in case you download an image that is high resolution then you can give some attribution to the user or to the creator of the file and have them you know give them the proper rights so i'm going to pick a file at an image at random i'm just trying to see which one looks good well it doesn't really matter but uh so i think i'll take this image here i will click on it and i will say save image as i will navigate to where my folder is and in my case i have it here then i will save it as jpg right so you can give it whichever whichever name that you want i will look for another image i want to get another image [Music] this looks interesting so let me save it again again note that i'm in the same folder i'll save it as two dots jpg so we have different image formats um you can have png which which can be used for transparency you have gif which can be used for a few second animations but in my case jpg is works well so i'll use jpg once you have that uh you will navigate back again to your file now in this case we can see that in our explorer window we have one.jpg which is available and you can see it here and two so you can you need to confirm that the image is actually showing properly i will close that folder and i will go to my app folder select views uh select auth remember we want to go to the home page which is where we are currently if you look at the browser you'll notice that we're in the home page so we have this is the user's home page welcome 12 peter so i want to open the home page and you can see that we have this is the user's homepage and we have welcome trumpeter now at the end of it uh just below that let me just zoom in a bit just below this uh php code snippets i'm going to add an image so here so i'm going to say image source you always need to give an alternate keyword so i can say this is an abstract image from splash so you can give it whatever text you want now the source is going to be we're going to have a php snippet that will be basically echoing out some base url now the base url here if you don't know where we have we have configured it if you look at app config and this i and you select the app.php you'll see that we have a base url that has been configured where is it yes there's url that has been configured here and you can see it's localhost 8080 if your file is different then you want to using a different port that you could specify a different value here all right so when you say base url we're invoking this localhost for slash local localhost port 8080 forward slash and then we will add something inside the base url now because we are interested in using inside the public we have css images so we have images i will put here as you can see in double single quotation marks remember here we have double quotation marks so we'll say single quotation marks here and we'll say images forward slash one dot jpg right so make sure you save it now when you go to the browser and reload you'll see that our image does appear it does appear we will be modifying it with css a bit in a few minutes we can also get an add another image so in fact here we could just uh simply have a break tag first to to make sure the image goes on the next line so that top it appears first and then we can add a second image so image source images to jpg make sure there is a semicolon there that you've closed the php tag then you have it here alternate text what was the image about so small cupped mounting so here we can see it's a snow now the reason we have this alternate text is that you want to be able to give the user uh it's a way of giving the user um some ability to know what the what the images you're loading um you know and if you're using a text or if you're using um your website supports people who do not have or who have visual challenges then it could have that on text reader or on-screen reader read the alternate text for them so that they can know what their website looks like all right so we can add a break tag before oops i have made this all right so if i do that then you notice that we have our two images loading but then the size of the images is quite it's too big yeah so we will want to reduce the size of the image and we can do this by using css now css allows us to be able to modify the the text or components in our webpage to make them look better so we can add them anywhere primarily we normally add them as a style tag or a style attribute inside the header so we can add them here and then we can modify them later so what i'm going to do is we want to modify image so everything that is an image we want to make sure that the width is let's say 100 percent can work with 100 percent the height you can give it a fixed height limit of x in pixel so you can say maybe 250 pixels let's see what that has you can see that the width is a bit straight stretched so we can reduce and say maybe instead of 100 to the page you can have 30 percent of the page which should be able to have this um a bit better of course you can reduce it to uh to a level that you feel is comfortable but i think 20 percent works well yeah so you can have the 20 percent uh so you can have 20 percent there now um ordinarily you may want to have this same this same styling applied across different pages so what we can do is we can actually add a css styling across so we can create a new file inside css folder in a public folder so inside public css we can call it main or let's call it styles with css and we can simply move our image so everything the image tag and the styling here we can move it to the cells of css and instead of linking it here instead of adding it here we can use the link tag where we can say link href is equals to and we'll put a reference uh we'll say um this is a style sheet now uh the they i'm using a tool called typeline that allows me to have all those autocomplete features so here i'm going to insert the reference i'm going to have the base url so i'm going to have the opening php tag i'm going to echo the base url and i'm going to close the closing php tag inside here i'm going to add css forward slash styles this style of styles styles.css css right now with this we should still have the same exact look inside our file because what i've essentially done is i have added the css which is this one and that has the image tag in fact we can actually also change let's say you can also change the text in heading 1 to be a different color so i can say heading 1 color and i can give and say it's red all right so you can see that by doing that we have modified the file and you can see that the color here becomes red now you could also add a few elements so you can decide you will yeah you may want to have a few elements from other tools like bootstrap so what we can do here is the images we can have the images inside the div so we can move them all inside a div of course we will indent them properly so that we have and we can give the div a specific id so we can give that div id and say images above it you can have a button and you can see a toggle image show all right and you can give it the images toggle ptn we will be we'll be modifying this so that we see because this needs to be complete uh watch what what will happen so i'm just going to add a break tag now the idea is this let me just highlight what what i'm intending on doing when i click on this button image show i will be adding some bootstrap a bit later i want us to be able to have this div collapse when i click on it again the div should appear and we're going to do this based on what we call javascript and we'll be using a library called jquery to do this for us now i've gone ahead and opened up jquery so you can you can search for jquery.com when you are on your browser and you can select uh download now what we normally uh we have two ways of adding jquery the first way is having a cdn which allows you to simply have the jquery online the second way is by clicking on either of these production jquery elements for example the compressed jquery 3.6 has by the time of this recording and simply is doing a control s to save the file now i'm going to navigate and have this inside js and i'm going to rename this to jquery.min.js the main here stands for minified version so it has been minified and compressed to make sure that it's as tiny as possible now if you look at your js folder now you should be able to see jquery.main.js and i'm going to add my own file main.js so we normally need to have uh jquery if you're using jquery and you're going to have your minified your main file of course your main file is not going to be minified but if you minify it later on we have some online tools for that then you can say main.js now inside here the rule of thumb is that we normally add jquery that is a library at the top part of the pages and anything else in the bottom part of the page to avoid the page breaking so here we can have a script we're going to have script type is javascript and you're going to have a source so you're going to say the source attribute is going to uh from be we're going to have that so just to make sure we are correct so here we have the script type is text javascript the source is going to be the opening php tag the closing php tag and we're going to have the same way we've been adding uh the css we're going to add here js slash jquery sorry jquery dot mean dot js now this applies to any library that you're going to be adding not necessarily jquery alone yeah now when you do that we're going to add uh we're going to have a second script tag here of course we'll first define it here then we can define it later on um in other elements now um as you can see there's already a hint that is that i'm being given i don't know if i have github i'm also using github pilot so a github palette is a tool that allows us to have uh to do it allows you to have code auto completion yeah so in my case it gives me code and i can be able to give it comments if you're interested in that then i can do a short at tutorial later time so with jquery you can have the format documents which is essentially this document this page the webpage now we are going to have a function that we are defining here so i'm going to say document so dollar sign document in parenthesis the trading so when this document has has loaded fully we're going to run this function and we're using an anonymous function here to define that you know to have this self invoke now what do we want to do when i click a button so first let's first um make sure that the javascript is running by alerting js works okay so we want to see that this javascript works so i'd expect when i reload the page i get a lot that's a pop-up that says js works uh which indicates that this jquery library has been added successfully and that this uh script tag here which is always at the bottom of the page has worked correctly then we can now come and when we toggle this when you click on this image it should hide and show the images div on demand so i'll go back to my home page and reload and you can see we have this javascript works pop up then everything works so that means the javascript is fully loaded now i want us to simply toggle this and how do you go about it i'm going to use the dollar sign and i will use now jquery allows us to have i think i can just have it autocomplete for me we can the same way we have the document as the dollar sign we're using the dom which is the document object model we can target uh a given id by use of this shop sign so we had the id images div and you can have uh and you have the other id images toggle button which is a button so we can have the two different images uh so what you're saying is you want to when i click the button which has the id images toggle button i want to when we click run this anonymous function that toggles between hide so we have a function called height and then i have a function called show which are both in jquery and when you toggle if it's hidden then it shows if it's not hidden then it hides so this will allow you to have both the toggle so it allows you to to run the function that is supported by jquery so when you click on the on the button then it will run this function which is anonymous function here and it essentially simply plays between hiding and showing depending on which which is currently acting so we can run this okay so far nothing happens when i click on it you can see it hides everything it shows everything and uh if you want to go and see more details about this then you can see the api documentation of hide so let me just search hide here on jquery sorry sorry for that hide yeah so you can have the documentation for hides which is a bit more detailed and of course you can give some specific you know you can add what we're interested in is toggle i don't know you can see how toggle works and you can give you can have some more functionalities beyond what we've just shown that that you can play around with so you can make it slow so for example you can add some few details and you have even some examples on how you know this can work so yeah so you can look around the documentation for it to see how how it works but then you notice something very interesting in fact for now we can actually move this javascript file so remember we had created a new javascript file so here we can move this from document.3d into our main.js and paste it here so we can just cut it from our script tag here and because we are removing it we can simply add a source attribute and say that the source is going to be we're going to have these scripts from js main dot js so [Music] we're going to have this javascript run from the main.js file and again if you click on toggle you can see that it works still the same now to the last bit we can add bootstrap so bootstrap will rely on a number of things and for this case you're going to be adding based on the cdn so i'm going just to copy the css so if you go to getbootstrap.com you should be able to get started you see this file and you can use it i i normally prefer using it from the cdn which allows me to simply copy this and paste it at the top of the file so in this case i will have it's normally good to have the bootstrap file before before you are your own java css file so that you have your css being the last element that is being run then you can add the bundle for bootstrap however if you needed to add it separately then you can add it differently so you can click on copy for rather we can just use the bundle yeah let's use the bundle i hope it doesn't interfere so we'll add it below the jquery i hope this this will not interfere with our javascript we can confirm by running our javascript and seeing if it has any issues and you can see already immediately um some css styling has been applied by virtue of simply adding the bootstrap now i'm going to add one more line of code so i'm going to say um i'm going to add a class and i'm going to add a class for button which makes makes this a button and i'm going to add a button primary and if you if you go to the bootstrap website you should be able to see [Music] the different components and you can see from buttons we have the different button elements so primary means that it's going to be blue in color so when i reload this you can see that it is already blue in color and this is a simple way of adding some advanced you know without doing too much work then you already have some some detailed your page coming up properly without doing too much work and as you can see we have a very nice details by having bootstrap by having some bit of javascript and you're able to add a few images here and there so this episode has become a bit long so we'll stop there i will cover the other parts of forms and other elements that use bootstrap but later tutorial episode if you like the video you can leave a like if you have any questions you can leave the questions in the comments um if you enjoyed the video you can subscribe and uh don't forget to share with your friends it really helps the youtube algorithm until next time see you bye

Channel: Unhinged GT

Views: 101

Keywords:

Id: xS61V41e8e8

Length: 27min 35sec (1655 seconds)

Published: Sat Nov 20 2021