Coding

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