- 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