hey what's going on guys welcome back to our blog and welcome to this laravel tutorial series and this is the sixth part or part six of our tutorial series and in the previous blog we talked about blade templates and for today's blog we're going to discuss about how to compile assets in our laravel project but first let us try to pass data as an array of values so last time we passed parameter as array but what if try to pass data or an array of data inside an array so we'll try to do that here in this blog and let's go ahead and instead of passing only the title we'll just pass another array of data here so services and then we're going to add we're going to add regular array here for our services so number one will be web design second one is programming third will be SEO all right so since we're passing this services inside the data array so we should be able to access that in our services that laid that PHP file and in order for us to do that we need to check if there is if the services array contains something so we could add a logic here so if count and then the services is greater than zero and below here let's try to add the and if there you go and of course we need to iterate our services array if it is not empty so add for each for each and then the services as service and we need to add also the N of our 4-h and of course inside inside this for each we need to like if we need to add the LI for our service something like that and then we need to get the server's itself and we need to add the UL for our or inside this if statement so you well here save and let's try to preview our page this is the home page of our application and if you try to go to services we can see here we have the data coming from our pages controller and we're passing the data including the web design programming and SEO now let's talk about compiling or how to compile assets in our laravel project so before we proceed let's download first the no genius so if you're Windows user or Mac OS X user so there is available and solar for you and you can have the 32-bit 64-bit options but we'll just try to install it by using this means windows installer and install it in our local machine so after downloading we can just install it right away open up the installation package and then try to click on next and then accept the terms and the license agreement so next and then the installation path and then next and then make sure to enable all this options here the node.js runtime the NPM package manager online the commendation shortcuts and then add to our environment path in the next and there's an option here the to automatically install the necessary tools and there's a note that this will also install the chocolaty and the script will pop up in a new window after installation process so to save us from trouble so let's just enable this and then next and install and then we'll just wait for a few seconds to enable the node G as installation to complete and then after installation we should be able to like for example include bootstrap in our project to include other dependencies for our project and so on and now that the installation is complete so let's go back to our project here we are we can try to open up our PowerShell window and then let's try to see the version of our nodejs so we have the V version 12.13.12 also we can see the version for our NPM which is also 6.12 point one so by this time we can already include our bootstrap insulation for our project now we just want to run the command composer require laravel and then /uy and then we're just going to wait for a few seconds to allow the installation to complete and we should be able to incorporate the necessary libraries for our laravel UI so as you can see this will also install the bootstrap in our normal project so we can already use that if we have a successful installation for our laravel UI and now that the insulation for our laravel UI has been completed so we need to run also or to include also the dependencies for our oath so this will include the login and register view so PHP artisan and then UI views - - oath and this will install the log in register and after that we need to run the command npm install to compile the CSS and other dependences of our project so we should be able to see the login the register and other views included for our UI and view oath or oath dependencies so i'll try to show you that after this installation so we're just going to wait for a few seconds for it to complete and then we should be able to see the changes in our browser by the way if you can see here at the top there's a prompt here that the layout app blade that PHP view already exists so do you want to replace it so in my case I have said or I have set it to N or no but you can try to accept it or to replace the existing layout of our app that late at page please so you can try to answer yes for that and then the layout of our project will be changed according to this update and this layout balloon will also include the old the login and then register as I've mentioned before and as you can see here I have here the layout view already exist and do you want to replace it and I just answered why or yes for that so I just want to replace the existing app that made that page way that we have been working on in the previous tutorial and after that you need to run also the command npm run dev to compile all the necessary assets that we have so here we have the app that CSS and app dot j s and after running this command we should be able to see the changes of our project so i'm going to show you the project now and what it looks like so this is our project should look right now and as you can see we have here the CSS folder that contains the app that CSS or generated app that CSS that contains all twitter bootstrap styles necessary to apply to our project and we also have the J's file or GS directory with the app that J s file as you can see with all the scripts needed for our project so this is the compiled versions of all the Java scripts or scripts for our project and as you can see here the resources we have here the app GS and the bootstrap Jas and as I've mentioned before we also include the oath files so it should be the log in that Lagoon blade that PHP registered blade that PHP and verify that they are verified that blade that PHP and of course we also have this files for our passwords so confirm email and reset and now let's try to preview our code in our browser so this is the home page of our project right now and if we try to go to about section so we can still see the about us and then this is the about page tax and of course we can also see the services with all the services included the web design programming and SEO so this are the pages that we have added the login and then register if you try to click on that so as you can see we have here the ready-made login form and the same thing with our register so I think that's it for this tutorial and in the next blog we're going to talk about models and database migrations so see you in the next blog thanks
Post a Comment