Laravel 5.2 PHP – Build a Shopping Cart – #1 Intro & Setup

00:00:00 welcome to the shopping cart project or
00:00:03 the first video of this project on the
00:00:06 lateral side so this video is not about
00:00:08 no chairs this is about label now I will
00:00:12 start as I said it's very basics and
00:00:15 will are the very basics of starting a
00:00:17 new project well setting it up right
00:00:19 installing it so this is what I'm doing
00:00:22 here I already got a new terminal window
00:00:25 here and what I want to do is I want to
00:00:28 use composer to create a new level
00:00:30 project and it's real easy to do i
00:00:33 navigate it into the folder where i want
00:00:35 to store it so you should do the same on
00:00:38 your machine of course and in there
00:00:41 having composer installed on my machine
00:00:43 does is of course important you can
00:00:45 download it from get composer org i type
00:00:49 composer create project and a little off
00:00:53 slash narrable and then optionally I
00:00:57 here specify the folder where I want to
00:00:59 store the project in this case I will
00:01:02 call it shopping cart now this will
00:01:05 download a level framework and set this
00:01:08 folder up for me and this will take a
00:01:11 couple of seconds here because first as
00:01:13 you can see it installed wearable but
00:01:15 now it's updating all the dependencies
00:01:17 and that are a bit more so I'll be back
00:01:19 once this is finished great so my
00:01:22 installations just finished but now the
00:01:23 interesting question is how do you
00:01:26 actually run it so which options do you
00:01:28 have to run it I choose vagrant over
00:01:32 home stairs or virtual machine which
00:01:35 will host my web server by PHP
00:01:36 interpreter and so on – to run this
00:01:39 project so I am already prepared to
00:01:42 start my new app which I will show in a
00:01:44 second but if you are not using vagrant
00:01:47 and of course it's fine
00:01:48 not you you may have mam or exam or some
00:01:52 other PHP development stack on your
00:01:55 machine and of course you should consult
00:01:57 the documentation off that stack to
00:01:59 figure out where to put your project so
00:02:01 that they get served correctly or you
00:02:04 might use cloud 9 or any other cloud IDE
00:02:07 or cloud workspace provider where you
00:02:09 can also setup and store projects and if
00:02:12 you're interested
00:02:13 that you will also find a link in the
00:02:14 description explaining how to do it or
00:02:17 at least leading to the respective
00:02:21 resources which will show you how to do
00:02:23 that so if that's talking out of the way
00:02:26 what I will do is I will open up a
00:02:27 browser window and navigate to this
00:02:29 newly created application to see that
00:02:31 everything is working as it should
00:02:33 great so here is my working application
00:02:36 laravel shop dev is just the URL I set
00:02:40 up in my hosts fault to navigate there
00:02:42 easily and with that I got the project
00:02:45 set up but now it's time to have a look
00:02:48 at the folder structure do some cleaning
00:02:50 up there and one set of the basic folder
00:02:53 structure we or at least I will need to
00:02:56 successfully create and handle this
00:02:59 project probably not that surprising I
00:03:03 use phpstorm for that and n phpstorm
00:03:06 there are a couple of things I want to
00:03:08 go through here
00:03:09 the first one is TD invivo and at this
00:03:12 file you can provide some basic
00:03:14 configuration for lateral as you
00:03:15 probably are aware now the most
00:03:17 important thing here of course is
00:03:19 database make sure that you're setting
00:03:23 up this connection to your database on
00:03:25 your machine or your on your stack on
00:03:28 which you're developing so for me with
00:03:31 homestead this default setup here is
00:03:33 perfectly fine but you may need to
00:03:35 change this change database name and so
00:03:37 on the next thing what I want to do is
00:03:39 in the resources folder on the views the
00:03:42 welcome to play dot PHP file alistair
00:03:44 you were currently seeing in browser but
00:03:45 we won't need that we will build our own
00:03:47 views so i'll get rid of this and next i
00:03:51 want to provide a couple of default
00:03:54 files here or starting files on folders
00:03:57 so i want to have a master layout
00:04:00 providing a layout for all my views so
00:04:02 all my view should extend this layout to
00:04:04 have while the same style or the same
00:04:07 skeleton and so on then i will have some
00:04:10 partials like the header which is used

00:04:12 in multiple views and then I will have
00:04:15 my individual views I use use I use yes
00:04:19 and this and this use again I will
00:04:22 structure them
00:04:23 well part of the application so I will
00:04:26 have use related to my shop and I will
00:04:30 have used related to my users because my
00:04:33 users of course need to have sign up
00:04:35 sign em pages and so on so how do I set
00:04:39 this up specifically well I will create
00:04:41 a new folder here and I will call this
00:04:44 folder layouts and I will create another
00:04:49 new folder resources here there which I
00:04:54 will call partials and another new
00:04:57 folder called shop with showed of course
00:05:01 hold all these shutter lighted views
00:05:03 and finally a new folder called user end
00:05:07 as you might guess this folder should
00:05:09 hold all the user lighted views so let's
00:05:12 get started in the layouts folder I will
00:05:14 create a new master layout here and I
00:05:16 will call it master but later PHP and
00:05:19 you probably learned how to create such
00:05:23 master layouts in my upper-level videos
00:05:25 and you might all look at them if you're
00:05:27 unsure but here's a quick wrap-up
00:05:30 layouts are basically a concept in
00:05:32 levels templating engine played this is
00:05:35 why this file has to stop blade in it
00:05:37 which use or which provide a basic
00:05:41 skeleton our views can well extend or
00:05:45 use basically so with this I'm able to
00:05:49 set up my normal html5 skeleton and I do
00:05:54 this with Emmet here really quick a
00:05:57 which allows me to have well the stock
00:05:59 type this HTML tag head tag body section
00:06:02 and so on as well as the title and I
00:06:05 can't provide certain hooks in this
00:06:08 layout where my views later can come in
00:06:10 and inject or insert their content so
00:06:13 that I don't have similar files with
00:06:17 only different content pieces in them
00:06:20 but instead I have one single file where
00:06:22 are the files
00:06:23 well inherit from this file and then
00:06:26 input their content and this of course
00:06:28 leads to your files to be written and if
00:06:31 I change something for example here in
00:06:33 the skeleton if I add
00:06:35 today hat section I only have to do this
00:06:38 in one fall and not in all my single use
00:06:41 so this of course is a great time Savior
00:06:43 and it is also a good programming style
00:06:46 so with this basic skeletons setup here
00:06:49 there are a couple of hooks I want to
00:06:51 provide here in a couple of imports
00:06:53 let's start with the hooks which my
00:06:56 inheriting views should be able to use
00:06:59 so here I start with the title I don't
00:07:01 want you hard killed a title here I will
00:07:04 provide a new hook with the yield
00:07:06 keyword and yield allows me to specify
00:07:10 well attack here or a name and I will
00:07:12 call this title and my hopper views will
00:07:15 be able to come in and supply a title
00:07:19 and level will know or play it a
00:07:21 templating engine will know where to
00:07:23 enter this title because I set this hook
00:07:25 up the next hook I will have is below
00:07:29 the title here let's say my style hook
00:07:32 where I want might used to be able to
00:07:34 insert their specific styles or style
00:07:37 sheet imports if they have something
00:07:39 like this and of course be aware you
00:07:41 don't have to use these hooks if you
00:07:44 don't provide anything well it would
00:07:45 just say empty but you can and that is
00:07:48 the great thing about them at the end of
00:07:50 the body section I will provide a
00:07:51 similar hook the scripts hook and this
00:07:54 again allows my use to inject or insert
00:07:58 their own scripts at the bottom of my
00:07:59 document and finally the most important
00:08:04 hook I'd say is the content hook and be
00:08:09 aware that all these names here are
00:08:11 totally arbitrary
00:08:12 you may choose whichever names you like
00:08:14 I just chose these names because I think
00:08:17 they are very expressive but that is
00:08:19 totally up to you so the content hook
00:08:21 here or this yield content here is of
00:08:24 course responsible for allowing the
00:08:26 views to insert their own content into
00:08:29 the skeleton so with this I got my basic
00:08:33 layout set up but for this application I
00:08:37 want to use bootstrap to have some basic
00:08:39 styling available so in order to do this
00:08:41 I will go to bootstrap get bootstrap
00:08:44 calm and I actually won't download it
00:08:48 but I will crap this CDN link here to

00:08:52 basically import the stylesheet package
00:08:55 from the content delivery network here
00:08:58 and I will insert it right above my
00:09:00 custom styles hook here so that my
00:09:03 Styles would be able to overwrite
00:09:05 bootstrap if well I need me to do that
00:09:08 so this is one thing I also want to grab
00:09:12 the bootstrap script here because that
00:09:15 later on will give us the ability to
00:09:17 create modal's or something like this if
00:09:19 you want you and I will insert that
00:09:21 right above my custom script hooks you
00:09:24 hook here and I will also grab jQuery
00:09:28 and as I said I don't have this
00:09:32 application planned out completely but
00:09:34 chances are high that we will need
00:09:37 jQuery or bootstrap molds or something
00:09:39 like this along the way and if we don't
00:09:41 we can always come back and throw it out
00:09:43 of our application later I just inserted
00:09:45 right now so that I got all the basic
00:09:47 styling available and don't have to
00:09:49 write this all on my own for now so
00:09:51 jQuery can always be grabbed from a
00:09:54 content delivery network and you will
00:09:56 find down here and simply by clicking on
00:10:02 this coach Acree comm link you're able
00:10:05 to choose your check for aversion and I
00:10:07 will pick 1.12 1.12 the minified version
00:10:11 here is fine for me close this and
00:10:15 insert this above the bootstrap script
00:10:20 source hero script tag and with this I
00:10:24 prepared my layout in a way I needed to
00:10:26 be prepared to work with it the next
00:10:29 step is for me to create a new view and
00:10:34 I will do this and I just saw all these
00:10:39 folders you should not be directing the
00:10:41 resources for that is certainly wrong
00:10:43 they should be in the views folder here
00:10:45 so make sure to move them there right
00:10:48 very important sorry about that so now
00:10:51 in the views folder in the shop folder I
00:10:53 will trade my basic in next up later PHP
00:10:56 file and for now all I want to output
00:10:58 here is
00:10:59 a heading which says it works just to
00:11:05 see that I successfully created my own
00:11:07 view and hooked it up which I haven't
00:11:09 done yet that's the next step in the app
00:11:12 folder which holds all of the app
00:11:14 related total all the code we will write
00:11:17 throughout this application all our
00:11:19 business logic in the HTTP folder I got
00:11:23 this routes the PHP file and here all
00:11:25 three routes are registered through outs
00:11:27 available for the user to access queue
00:11:29 well navigate in our application
00:11:31 currently there is only one route get
00:11:34 slash which refers to this basic root
00:11:40 URL here because you can imagine a slash
00:11:42 at the end now here I get the error
00:11:46 pre-casters welcome you doesn't exist
00:11:49 anymore of course because I deleted it
00:11:50 so time to replace this and no longer
00:11:54 return you named welcome but instead
00:11:57 return of you named index however this
00:12:00 view is not inside the views folder
00:12:02 directly but instead in the shop
00:12:04 subfolder so in order to access this I
00:12:07 can write shop and then chest dot index
00:12:10 note though shop slash index would work
00:12:15 too if I now reload you see this it
00:12:17 works heading I just provided so I will
00:12:20 get just get this back to a dot and with
00:12:24 this we have the very basic setup
00:12:25 however this index view currently it's
00:12:29 not extending to layout therefore it
00:12:32 doesn't get any styling and it is not a
00:12:34 semantically correct HTML document so
00:12:37 therefore the next step is to go to the
00:12:39 top of this file and add another level
00:12:42 plate templating keyword or command
00:12:46 which is called extends and this allows
00:12:49 me to do what I explained earlier extend
00:12:52 from a base layout use the space layout
00:12:54 and insert my own code into specific
00:12:57 hooks in this layout here of course I
00:12:59 want to extend the master layout living
00:13:02 in layouts folder
00:13:03 therefore access this room layouts dot
00:13:06 master now I get my layout extended
00:13:11 however currently
00:13:12 this is not inserted correctly because I
00:13:16 am not using my content hook which I
00:13:19 prepared for it so I will add this by
00:13:21 using the section come on here which
00:13:23 says which hook which place in the
00:13:26 layout do you want to use for the
00:13:28 following section which is defined so I
00:13:31 will use the content section and I have

00:13:34 to close this off with an section
00:13:36 otherwise level has no chance of knowing
00:13:38 when the content I want to insert ends
00:13:40 and then I just grab my heading here and
00:13:44 insert it between Jia's opening and
00:13:46 closing at section lights tag here so to
00:13:50 say and this command now enters this
00:13:53 content in the content or in the place
00:13:56 of this content hook this yield content
00:14:00 part here in my skeleton so if I reload
00:14:03 now it doesn't change if you look like
00:14:07 on this but if you open up the HTML
00:14:09 document you can see that this is now
00:14:12 inside the body tag before the scripts
00:14:14 but after the head tag here which of
00:14:17 course has to be the case because well
00:14:19 this is where this yield content hook is
00:14:22 set up to be now as the last thing
00:14:25 notice that we don't have a title so I
00:14:28 will provide this title and I do it the
00:14:34 same way I provided my content by using
00:14:36 section title and section and then I
00:14:41 will just call this level shopping cart
00:14:47 if I now reload well voila you see this
00:14:53 works
00:14:53 I get the tile in my tab here so that's
00:14:56 a basic setup of this project of course
00:14:59 during the next videos some other files
00:15:01 will be added a custom style tea for
00:15:03 example and so on but as I said I want
00:15:06 to build this project step by step to
00:15:08 get work with you and well this is a
00:15:10 very important first start we got a
00:15:12 project set up get our basic views and
00:15:15 then the next video it's time to have a
00:15:17 look at well how the product page should
00:15:21 look like so when we can click on
00:15:23 products to add
00:15:25 to our shopping cart for example let's
00:15:28 have a look at this in the next video
00:15:29 see you there
00:15:30 bye

You may also like