Laravel 5.2 PHP – Build a Shopping Cart – #2 Product Index View

00:00:00 so welcome back so in the last video we
00:00:04 set up our project we implement the
00:00:06 basic project structure now in this
00:00:08 video I want to start outputting or s so
00:00:11 once you start working on the product
00:00:13 page outputting our for now a dummy
00:00:16 products which we can add to the card
00:00:18 and well by later on this tutorial it's
00:00:21 let's start for this I already got my
00:00:24 extra plate a PHP file here
00:00:26 which is of course page or the view
00:00:28 which should hold my different products
00:00:31 however I also want to have a header to
00:00:35 well later on navigate to my let's say
00:00:39 user area to sign in or sign up and also
00:00:42 to access my card so I will create that
00:00:45 header for now and I do this in a
00:00:47 partials folder by adding a new fall
00:00:49 which I'll call header or later PHP and
00:00:53 then on get bootstrap comm components I
00:00:58 will pick the default bootstrap navbar
00:01:01 now of course you may change this or
00:01:04 laplace's with whatever that for you
00:01:06 like but I just want to have a basic
00:01:08 navigation bar here which I can use and
00:01:11 customize to my needs so therefore I
00:01:13 will grab all of that code here which is
00:01:16 more than I will need but I will clean
00:01:18 it up in a second and paste it into my
00:01:22 header here now as already said this is
00:01:24 way more code than I need so I will
00:01:27 quickly clean this up but before I
00:01:29 actually do this I want to implement it
00:01:31 first so in the master file and the
00:01:34 master layout here right before I enter
00:01:38 my content here I want to include this
00:01:41 partial and I do this by using the
00:01:43 include command here and level
00:01:46 plate in levels plate templating engine
00:01:48 and then I just specify the name or the
00:01:50 path to the file I want to include so
00:01:52 this is in the partials folder and then
00:01:55 the header file so if I save this and
00:01:58 reload my page you can now see this
00:02:00 bootstrap header with that it's time to
00:02:03 clean it up so let's think about what do
00:02:06 we need or what do I want yeah I want
00:02:09 this brand here which leads back to the
00:02:11 product in next page in this case for
00:02:14 now I don't want all of this stuff here
00:02:17 I want to have a link on the right which
00:02:20 allows me to go to the user page or to
00:02:23 login locked logout sign-in it was
00:02:26 something like this tea will use related
00:02:28 stuff or none of the thing about it
00:02:30 let's make this a drop-down where I then
00:02:32 have like sign up sign in or if you're
00:02:35 assigned in logout and access to the
00:02:37 user page so drop-down is fine
00:02:40 and I've also want to keep this link
00:02:42 here which should lead to the shopping
00:02:43 cart so now first I'll get rid of this
00:02:46 part here on the left and in order to do
00:02:50 this you can just see I want to get rid
00:02:52 of this link this link and a drop down
00:02:54 so I may just grab all these links or
00:02:57 this whole unordered list here on the
00:02:59 left delete it also get rid of the
00:03:03 search bar delete that now on the right
00:03:06 as a center will keep this link which
00:03:08 should be well I should believe into the
00:03:10 shopping cart later on and I also want
00:03:13 to keep this drop-down menu but I will
00:03:15 use or call this user account or
00:03:20 something like this this is fine and in
00:03:24 here well I would get rid of some of
00:03:27 these actions here let's say these two
00:03:30 actions
00:03:31 later on then I will have let's say the
00:03:33 logout link what a log out link at the
00:03:35 bottom and here the user account link or
00:03:38 something like this so if I now go back
00:03:42 that's how the log just looks much
00:03:44 better and if I resize this page a bit
00:03:48 you can see that we get this mobile
00:03:51 navigation built in to bootstraps or
00:03:54 this works too great so that's the
00:03:56 important first step next I want to add
00:03:59 a little bit of fine-tuning already I
00:04:01 want to have like a user account I can
00:04:04 here next to the text and I shopping her
00:04:05 like and next to the shopping cart link
00:04:08 here I will use font awesome to do this
00:04:11 and if you're not aware what font
00:04:13 awesome is this is well with named sass
00:04:15 and a fund which you can include like
00:04:18 any other
00:04:19 you might use your webpage but instead
00:04:21 of real characters this font has a

00:04:24 couple of images or little icons you can
00:04:26 use and therefore this one makes it
00:04:28 really easy to implement
00:04:31 I can small little handy icons in your
00:04:34 application now in order to use that you
00:04:36 mentioned click get started and then
00:04:39 just pick this see the end line here to
00:04:42 import it well from a CDN server you
00:04:44 don't have to download it and that will
00:04:46 also include that right believe the
00:04:49 bootstrap import here and the cool thing
00:04:52 now is I can have a look at the icons if
00:04:55 I click on all icons and now I can just
00:04:57 search so if I search for a user I see
00:05:00 all the icons related to your user and
00:05:02 let's say just default user icon doesn't
00:05:06 look too bad now as you see if you click
00:05:08 on it you already get the code you need
00:05:10 to have to add this icon to your page so
00:05:14 if I now go back to my header and add
00:05:17 this user I can write before this user
00:05:19 account text here if I now reload my
00:05:22 page you can see this little icon now
00:05:26 obviously this is way too close to this
00:05:28 user account text so well it's only the
00:05:32 case because I have to enter a space
00:05:34 here and if I reload looks much better
00:05:37 now let's also have a look if we can
00:05:40 find a great shopping cart here so I'll
00:05:43 search for shopping and we get this cart
00:05:47 plus or the stifled shopping cart I
00:05:50 think I'll go with this so I'll just
00:05:52 grab this code here and add this in
00:05:56 front of the shopping cart text this
00:05:59 time
00:05:59 I'll think about adding a space after it
00:06:01 so now I feel reload it already looks a
00:06:06 lot better even though it's still a
00:06:07 default booster block and you might find
00:06:10 unit but I think it's good to go with
00:06:12 that so with the header in place let's
00:06:15 actually work on the product page itself
00:06:18 and I think of having a grid of several
00:06:22 products here a responsive grid of
00:06:24 course where we will have on each
00:06:27 product short description
00:06:28 she at idle an image and then a link
00:06:31 which allows us to to buy it or to add
00:06:33 to the card and of course also a price
00:06:36 would be good so again I will use
00:06:39 bootstraps both in styles or things
00:06:43 helpers I got to get get us going and I
00:06:48 will get you to see us as part because I
00:06:51 will use the bootstrap grid here to well
00:06:54 create my my grid basically and if
00:06:58 you're not aware how bootstrap works
00:07:00 it's definitely worth checking out a
00:07:02 detailed tutorial but to give you a
00:07:04 quick start with it basically to use the
00:07:07 grid which allows you to well make your
00:07:09 whole page a greater where you can
00:07:11 position things you have a container
00:07:14 wrapping you overall grid and in this
00:07:17 container you have several rows and in
00:07:20 each row you might have several columns
00:07:22 and bootstrap is clever enough to
00:07:24 provide your different column classes
00:07:26 with it you can specify if a column or
00:07:30 if column should stack on certain screen
00:07:32 sizes and it will find all this
00:07:34 information on this grid information
00:07:36 page on the bootstrap page here so what
00:07:40 I will do is I will go back to my
00:07:42 application and first in my layout in
00:07:45 the master Pete apply to a PHP file I
00:07:48 will wrap the overall content in a
00:07:51 container so in a div having a class of
00:07:54 container and again if you're wondering
00:07:57 what I'm doing here by just typing and
00:07:59 then having this whole they've tagged
00:08:01 with the class attached to it that is
00:08:04 plug-in called Emmet and it's not only
00:08:07 available for phpstorm it's also
00:08:08 available for other editors so you might
00:08:11 check this out if you are interested in
00:08:12 having this functionality in your editor
00:08:14 and it basically allows me to like
00:08:17 specify class name by typing dot and
00:08:19 then the name of the class and I'm just
00:08:21 hitting tab to create a div with that
00:08:23 class head in the same style I could
00:08:26 create a h1 tag by typing h1 and then
00:08:28 hitting tab but that's just a side note
00:08:30 so back to the grid the content is
00:08:33 wrapped in this container and I do this
00:08:37 of course because each content
00:08:39 we'll have grit in my application here
00:08:41 at least and therefore each content will
00:08:43 be wrapped in this container however
00:08:46 regarding rows and columns that is

00:08:48 something which will be specified on the
00:08:50 individual view because that of course
00:08:52 depends on the way I want to structure
00:08:53 or I want to position data in my view so
00:08:58 I will go back to this index page in the
00:09:00 shop folder and now here instead of
00:09:02 having it works it's time to strike from
00:09:05 the layout of this page now later on we
00:09:08 might have like let's say top
00:09:11 information section here or a banner or
00:09:15 whatever but for now I will only output
00:09:18 a couple of thumbnails on this page now
00:09:21 speaking of thumbnails bootstrap helps
00:09:23 with thumbnails to under components you
00:09:27 can have a look at the right navigation
00:09:29 and there you will have this point
00:09:32 thumbnails you click on that you see how
00:09:35 you can include evil pure image
00:09:38 thumbnails or here thumbnails with image
00:09:41 add text and buttons and this is exactly
00:09:44 what I want to have in my application
00:09:46 therefore again I will just copy that
00:09:48 code and if cold copying is too boring
00:09:51 for you or to begin or like you may of
00:09:53 course also type but it's just a couple
00:09:55 of nested ifs with separate word with
00:09:58 different bootstrap classes so back in
00:10:01 the index page I will now enter the
00:10:04 thumbnail so I get my thumbnail in place
00:10:07 here let's have a look at this how it
00:10:10 does it look okay not too bad um I
00:10:13 personally yeah what you have it a bit
00:10:15 will a slight bit smaller of course
00:10:19 having an image would be great because
00:10:21 that looks a bit ugly like this and I
00:10:24 won't need two buttons I only want to
00:10:27 have let's say an Add to Cart button and
00:10:30 then on the Left I want to have a price
00:10:33 so the but we should go to the right and
00:10:36 say add my cart and on the Left I want
00:10:38 as I just said I want to show the price
00:10:40 of this item okay so that's where let me
00:10:43 work on this first I will get rid of
00:10:45 this first button which I won't need
00:10:50 and I'll just restructure that a little
00:10:52 bit nicer here replaced this with a div
00:10:55 element here it didn't want this to be a
00:10:56 paragraph here in this paragraph above
00:11:01 the icons or above the patents excuse me
00:11:03 I will have to even for text about the
00:11:06 item and I will just enter some dummy
00:11:08 lorem ipsum for now and again this text
00:11:10 was created by using the Emmet plug-in
00:11:12 which has this functionality built in if
00:11:14 you're ever in need of some dummy text
00:11:17 well to be honest the quickest way is
00:11:19 just to Google fool lorem lorem ipsum
00:11:23 and for example you might find this page
00:11:25 which is on German but it's
00:11:27 straightforward you just specify the
00:11:28 number of words you want then you could
00:11:31 choose if you want words which is the
00:11:33 default or characters or paragraphs then
00:11:36 you just hit go and boom there you go
00:11:38 you get your text which you can copy so
00:11:42 I got malarum up some text here this
00:11:44 will be the title which should be the
00:11:47 product title and of course here we need
00:11:49 an image now let's have a look for a
00:11:52 possible image I will just search for
00:11:55 well what what do we want to sell on
00:11:58 this page let's say we're selling books
00:12:00 so we're selling Harry Potter because
00:12:06 that is the book we will like here or
00:12:10 maybe you don't you may choose an upper
00:12:12 book so let me look well these are
00:12:16 driven books so you might not recall
00:12:18 these just lay out what sort these
00:12:22 images so you might just take oops you
00:12:26 pick whichever book you want so I like
00:12:29 it with that great and I will just copy
00:12:32 the link here now you on your page
00:12:34 shouldn't do deep linking like this you
00:12:37 wanna store the image on your own sore
00:12:39 and serve it from that and I will
00:12:42 implement this functionality later I
00:12:44 just want to get a prototype a quick
00:12:47 prototype going here so we'll enter
00:12:49 tussling here and a source attribute of
00:12:52 this image and when you reload my page
00:12:56 looks good but obviously far too big I
00:12:59 don't want that to be in the or
00:13:02 in all sizes certainly don't so in order
00:13:04 to fix the size of this I will just add
00:13:07 some inline styles for now I will set
00:13:09 the max maximum height to let's say 150
00:13:14 pixels it's a class of image responsive
00:13:17 just to make this look good on all
00:13:20 devices not very resizes yeah looks
00:13:25 better and of course stumblest to your

00:13:27 needs I am happy with this now inline
00:13:30 styling is not the best way just wanted
00:13:32 to see how this looks so I get rid of
00:13:33 this here and instead I will add a new
00:13:36 folder in this public folder with just a
00:13:38 folder of course the server will serve
00:13:40 in the end and sort of browser has
00:13:42 access to this folder and here I will
00:13:44 add a source oops new folder called
00:13:47 source and in the source folder a lava
00:13:50 never new folder called CSS which should
00:13:53 hold my apt or CSS file so all the
00:13:56 styling form application will go in here
00:13:59 now you can see that my the image I want
00:14:04 to style lives inside this thumbnail
00:14:06 class and therefore I can use this from
00:14:09 nail class here and then access each
00:14:12 image in this class which is only the
00:14:14 one I want to change and set the max
00:14:16 maximum height to 150 pixels like before
00:14:21 now if I go back and reload you will see
00:14:24 that this does not work and that's the
00:14:26 case because I'm having my stylesheet
00:14:29 here but I'm not importing it anywhere
00:14:31 right so back in the master layout here
00:14:34 I went to add import my own style sheet
00:14:37 and I will just right below the
00:14:39 bootstrap files here where I have my
00:14:42 Styles hook so I could either import it
00:14:45 here in this master layout or now
00:14:48 imported in my index in my shop index
00:14:51 file and use the Styles hook here with
00:14:53 section Styles to then provide the
00:14:56 Styles I want to use on this view now
00:14:59 since I want to use this app dot CSS
00:15:01 file throughout my whole application I
00:15:03 will go with the first approach and add
00:15:06 the import directly in the master layout
00:15:09 here so right below bootstrap I'll add a
00:15:12 new link or new
00:15:13 import and now how do I import my apt on
00:15:17 CSS file a letter well you have to be
00:15:20 careful here because your files will
00:15:24 always be served from the public folder
00:15:27 because this is the folder accessible by
00:15:30 the browser however depending on the
00:15:33 route you're currently on you might not
00:15:35 be able to access the source folder like
00:15:38 this source CSS app CSS does well work
00:15:46 now because if you can see if you see if
00:15:48 I can reload this applies the new
00:15:52 styling but if I would have another out
00:15:54 like let's say later on the shopping
00:15:57 cart then the browser would look for a
00:16:00 source slash CSS slash app dot CSS file
00:16:06 under this shopping cart folder which of
00:16:09 course doesn't exist on the server since
00:16:11 this is only a new and Euron segment and
00:16:14 not as folder on the server but the
00:16:16 browser does know that that it is just
00:16:18 the way we style our URL and therefore
00:16:20 this would lead to an error now in order
00:16:22 to always import this file from the same
00:16:26 source or from the save path and not be
00:16:30 dependent on a current URL we can use a
00:16:33 helper lana will offers this here and i
00:16:37 access this helper by using double curly
00:16:41 braces which allows us to add code to
00:16:43 our level plate template and the code i
00:16:45 want to enter here is URL colon colon 2
00:16:49 and then the path to this file seen from
00:16:54 this public folder on so source CSS apt
00:16:58 on CSS now this you are all too thin
00:17:04 here this to method used on some kind of
00:17:07 URL class here is in reality fs8 URL is
00:17:12 a facet Nafis aids as a concept in level
00:17:15 which allows to easily access different
00:17:18 helpers if you want to put it that way
00:17:20 off the framework
00:17:23 notice too
00:17:24 method here in reality as defiance of
00:17:27 our class or in some our object but so
00:17:31 that we don't have to write it or access
00:17:33 this complete object and find out where
00:17:35 this – method actually lives letter will
00:17:38 offer us us this URL for said which
00:17:40 that's what the name implies itself to
00:17:42 say data it's allows us to easily access
00:17:45 this underlying helper method here and
00:17:47 this specific helper method to does the
00:17:51 following
00:17:52 it takes the path we specify here as an
00:17:55 argument and finds this path in your
00:17:59 root folder independent of the current
00:18:01 route and then it will parse this in the
00:18:05 correct URL the browser has to access to
00:18:08 fetch this file so by doing it this way
00:18:11 here we're making sure that we're always
00:18:14 fetching this fall and not trying to
00:18:17 access some path which doesn't exist so

00:18:19 now if I reload the page you won't see
00:18:22 any changes because of course it still
00:18:23 works but now it will work on all routes
00:18:26 and not just the root route were
00:18:28 currently on so to finish this thumbnail
00:18:30 I want to moved as button to the right
00:18:33 and say add to cart and I also want to
00:18:36 output a price on the Left where the
00:18:38 button currently sits at in order to do
00:18:41 this I will go back to my index file and
00:18:44 a shop folder and to move the button to
00:18:47 the right I have a gift is and I'm a
00:18:50 class here which is called pull right
00:18:53 this is a built-in helper class in
00:18:55 bootstrap which applies some floating to
00:18:58 this button to float it on the right if
00:19:02 I now reload this looks pretty broken
00:19:07 because this button now hangs on the
00:19:10 bottom right corner here and well does
00:19:13 this might be the style you like but I
00:19:15 think we can do better here in order to
00:19:18 fix this I have to clear fix before
00:19:20 using this float here so I will apply
00:19:24 enough a class to the div holding this
00:19:26 button now with the gift us div a class
00:19:28 of clear fix
00:19:31 and if I now reload this looks much
00:19:34 better now what does clear fix do clear
00:19:36 fix is basically a combination of styles
00:19:39 being applied which make sure that all
00:19:41 prior floats are cleared before the new
00:19:44 one is applied and by doing this we make
00:19:46 sure that this float does button you're
00:19:50 floating somewhere actually floats in
00:19:52 the overall element it sits in instead
00:19:56 of being kind of mixed up with Prior
00:19:59 floats and the ole grit here in
00:20:01 bootstrap is bolt with floats and
00:20:03 therefore hanging a little bit off on
00:20:07 the page it's really a stylistic fix we
00:20:10 have to apply here and a common one too
00:20:12 as long as you use floats to lay out
00:20:15 your page at least and of course there
00:20:17 are other great ways like flexbox in the
00:20:19 future but not supported by all browsers
00:20:22 so I would go with the default bootstrap
00:20:24 grid system based on floats for now so
00:20:28 floats okay that's one thing now add or
00:20:30 change text and add to Bryce on the left
00:20:33 here so in order to change the text data
00:20:36 straightforward Add to Cart and also I
00:20:40 want to change the color of this button
00:20:42 now if you go over to bootstrap you can
00:20:45 see which colors we got available you do
00:20:49 find this here under CSS and then
00:20:53 buttons and if you scroll down a little
00:20:56 bit you see all the default buttons
00:20:58 bootstrap offers now I think a green
00:21:00 button is a great choice as it should
00:21:02 encourage our customers to buy something
00:21:04 so in order to make a button green you
00:21:07 have to apply the button success class
00:21:09 to it and note that you can not only
00:21:12 stop button elements with this button
00:21:15 classes but like we're currently doing
00:21:17 in our app all the style anchor tags or
00:21:20 any element as a button now this button
00:21:24 already has the button class but we have
00:21:26 to change button default to button
00:21:28 success here so if Y now reload you can
00:21:34 see I got the Add to Cart button last
00:21:36 step I want to add price so I will add a
00:21:39 new div here
00:21:43 where I will say like let's say $12 as a
00:21:49 price and now ever load this looks
00:21:51 pretty crappy so in order to bring this
00:21:53 in line I will also add a clasp here the
00:21:56 pull left clasp to float this on the
00:21:59 left but in the same line as this button
00:22:01 floats and this looks bad or bad we can
00:22:04 we could make us stand out a little bit
00:22:07 more so in order to make this stand out
00:22:10 a little bit more I will give it as a
00:22:11 new class price this is not a beach trip
00:22:14 class I will he find us myself in the
00:22:16 apt or CSS file and I want you style
00:22:20 this a little bit and basically what I
00:22:22 want to do is I want to make it bold I
00:22:26 also want to increase the font size a
00:22:29 little bit at least I think so let's say
00:22:32 let's say 16 pixels let's let's try this
00:22:35 and yeah how does this look looks better
00:22:40 might stand out even a bit more if this
00:22:45 text here were a bit more grayish and
00:22:48 less black so in order to do this I will
00:22:51 go back to the index page and I want to
00:22:53 sell this paragraph the product
00:22:56 description therefore I will give this a
00:22:57 new class called description and back in
00:23:02 the Aptos CSS file I will make sure that

00:23:04 my thumbnail class I want to style all
00:23:09 descriptions because of course this
00:23:11 description
00:23:12 lives inside this thumbnail element or
00:23:14 this thumbnail div and description
00:23:18 should have a color off well let me just
00:23:22 choose nice gray here like this maybe
00:23:27 save this have a look could be a little
00:23:32 bit more on the white side so maybe like
00:23:37 this yeah I think that's great so with
00:23:42 this I'm pretty happy and of course
00:23:44 there's always something we can do but I
00:23:47 will leave it like this I think I'm even
00:23:49 happy with the size now that I think of
00:23:51 it we should be able to fit three of
00:23:53 them on
00:23:54 one page and now before actually
00:23:57 outputting some data or making the next
00:23:59 steps
00:23:59 let me duplicate that five times to see
00:24:03 how this looks if we have a really
00:24:04 complete grid here and not just one item
00:24:07 so in order to do this for now of course
00:24:11 later on we will just do this more
00:24:13 elegant I will grab my whole column here
00:24:19 not the road just a column for now and
00:24:22 copy it two times and regarding the
00:24:25 width you see these classes here call em
00:24:28 v4 and call sn6
00:24:30 now what these classes do is they
00:24:33 specify how many blocks this there
00:24:36 should be wide now in a bootstrap grid
00:24:39 there are always twelve blocks available
00:24:41 so with having MD for this means on a
00:24:45 medium sized screen each dev here should
00:24:48 be four blocks wide so free divs are fit
00:24:51 on one or in one row with gathers
00:24:54 between them however on smaller screens
00:24:57 only two of them fit as each of the divs
00:25:01 should be six blocks wide indicated by
00:25:03 this class some other they copied ad if
00:25:06 I reload you see this looks okay my
00:25:08 opinion and now to have multiple rows I
00:25:11 will go up to the top and grab the whole
00:25:14 row here with all the columns in between
00:25:17 and duplicate that and now if I reload
00:25:20 you see we get this grid with all the
00:25:23 items and now again you may restyle this
00:25:25 make this smaller or wider whatever you
00:25:28 like I'll go with that and I think this
00:25:31 is a decent first prototype of a shop
00:25:35 and in the next video we'll go to the
00:25:37 next steps

You may also like