Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #2 Product Index View

  • 00:00:00 as the next step I want to bring in a
  • 00:00:03 header in this application because I
  • 00:00:05 will not only have a list or a grid of
  • 00:00:07 products but I want to have a header
  • 00:00:09 which allows the user to go to the user
  • 00:00:12 account or to sign in log out and so on
  • 00:00:15 and to go to the shopping cart of course
  • 00:00:18 and manage the shopping cart and well
  • 00:00:21 use it so in order to do this I will go
  • 00:00:24 to the cat bootstrap comm page again so
  • 00:00:27 to the bootstrap page and on components
  • 00:00:30 ribbon here I'll pick the navbar and
  • 00:00:34 this is the default nap or bootstrap
  • 00:00:36 chips with now you may replace this with
  • 00:00:38 whichever code you want or whichever nap
  • 00:00:41 or you want but I think it's fine for my
  • 00:00:44 purposes here so I will just go back to
  • 00:00:47 the views folder and now we'll create a
  • 00:00:50 new subfolder which we'll call partials
  • 00:00:53 and this folder should hold the well
  • 00:00:57 partials the files which should be
  • 00:01:01 included in a variety of different files
  • 00:01:03 possibly at least I will treat a new
  • 00:01:06 file here a cold header dull HBS and in
  • 00:01:13 this file I will paste this bootstrap
  • 00:01:15 header code now we'll add a disk out in
  • 00:01:17 a few seconds but for now I want to
  • 00:01:20 include this header in the layout
  • 00:01:22 however now in order to implement this I
  • 00:01:25 have to replace the handlebars
  • 00:01:28 templating engine the generator use for
  • 00:01:31 us with number one I do this by opening
  • 00:01:34 up a new terminal window and then
  • 00:01:36 navigate it into this project folder i
  • 00:01:38 run npm install – – save to save an
  • 00:01:42 entry in the package to JSON file and
  • 00:01:44 then Express – handlebars and this will
  • 00:01:50 in store another handlebars templating
  • 00:01:53 engine third-party package which offers
  • 00:01:57 more features than the built-in one with
  • 00:01:59 that I will go to my app Duchy as fall
  • 00:02:02 now in order to use this newly installed
  • 00:02:04 package I will create a new variable
  • 00:02:06 here which I will call Express HBS which
  • 00:02:10 will
  • 00:02:11 just import this Express handlebars
  • 00:02:14 package we just installed and the next
  • 00:02:18 step I will go down here where the view
  • 00:02:19 engine set up and replace this app set
  • 00:02:22 here with app engine register this new
  • 00:02:25 engine with a name I want to set so i
  • 00:02:30 will use HBS here and then I will use
  • 00:02:34 the Express loops this should be
  • 00:02:36 handlebars two HBS not HSB so use this
  • 00:02:41 package it just brought in and execute
  • 00:02:45 it kind of started with this command
  • 00:02:49 here and I will pass a JavaScript object
  • 00:02:52 to this method here to configure the
  • 00:02:54 templating engine I will set the default
  • 00:02:57 layout to layouts so this will always
  • 00:03:01 search for layouts HBS file and I will
  • 00:03:05 set the extension name to dot HBS to
  • 00:03:09 keep this well dot HBS extension were
  • 00:03:12 already used to otherwise I would have
  • 00:03:14 to change all file names to dot
  • 00:03:16 handlebars which is default as package
  • 00:03:18 ships with now here I will then replace
  • 00:03:21 this HBS with dot HBS as well to refer
  • 00:03:24 to this new engine and for this to work
  • 00:03:27 this should be layout not layouts by the
  • 00:03:30 way for this to work I will creat a new
  • 00:03:32 subfolder called layouts and I will move
  • 00:03:36 my layout into the subfolder here so if
  • 00:03:39 all these changes in place if I now
  • 00:03:40 restart the server and reload this page
  • 00:03:43 you can see it still works now I can
  • 00:03:47 include my header here it is partial and
  • 00:03:50 I do this by going to the layout and
  • 00:03:53 then right at the beginning of the body
  • 00:03:54 tag before the actual content of you is
  • 00:03:57 entered I again open double curly braces
  • 00:04:00 then I have to greater than sign close
  • 00:04:03 to Coit braces and then I specify the
  • 00:04:07 name of the partial I want to include by
  • 00:04:10 default this will look for this file in
  • 00:04:12 the partials folder so all I have to do
  • 00:04:15 here is specify header now if I reload
  • 00:04:18 this page you can see this bootstrap
  • 00:04:20 header being at the top now while this
  • 00:04:23 is great I don't
  • 00:04:24 all this stuff here and regarding the
  • 00:04:27 right drop down I will well get rid of
  • 00:04:30 some links and I will also rename this
  • 00:04:32 to be more fitting like user account and
  • 00:04:34 shopping cart for example so back in the
  • 00:04:37 header first I'll get rid of the
  • 00:04:40 complete left part of these naughty nav
  • 00:04:44 bars of this unordered list and a search
  • 00:04:46 form here and next I will get rid of
  • 00:04:49 some of the links in a drop-down on the
  • 00:04:51 right and then I will rename the drop
  • 00:04:54 down to let's say user account or
  • 00:04:56 whatever you like and then I would have
  • 00:04:59 D let's say ya the EDD user account here
  • 00:05:03 so let me rename this to user management
  • 00:05:06 for example and then here the second
  • 00:05:09 link should be logout as human we're
  • 00:05:11 logged in and does what we changed later
  • 00:05:13 on depending on the real state of the
  • 00:05:15 user so if there is in place what I will
  • 00:05:17 next you is I will rename the link here
  • 00:05:21 to shopping cart and if I now reload
  • 00:05:26 this looks a lot better however it would
  • 00:05:29 be nice to have little icons next to
  • 00:05:31 these links here to indicate while I use
  • 00:05:34 your symbol and a shopping cart symbol
  • 00:05:37 here that is real easy to do and I will
  • 00:05:40 use font awesome for this now fun
  • 00:05:43 awesome is well a package of fun so to
  • 00:05:46 say you can import into your project but
  • 00:05:49 instead of changing your text it
  • 00:05:51 introduces a whole lot of little icons
  • 00:05:54 you can use so by clicking on get
  • 00:05:57 started
  • 00:05:57 you're able to grab a link to the CD and
  • 00:06:00 holding this stylesheet and I will just
  • 00:06:05 input this into my layout file here
  • 00:06:08 right before I import my own styles but
  • 00:06:12 positioning doesn't really matter with
  • 00:06:14 this package to be honest and then it's
  • 00:06:17 really easy to use
  • 00:06:19 so if I want a user I can I can go to
  • 00:06:22 icons here and then just search for user
  • 00:06:27 and I find all user related icons I
  • 00:06:30 think the first one here is great so
  • 00:06:33 then I can just copy the code it gives
  • 00:06:35 me here
  • 00:06:37 and enter that in my header right before
  • 00:06:41 the user account and also spacebar to
  • 00:06:44 have it not sit directly on the text I
  • 00:06:48 will also search for another icon the
  • 00:06:52 shopping cart such as chopping gives me
  • 00:06:56 a couple of shopping cards I will go
  • 00:06:57 with this one here the classic shopping
  • 00:06:59 cart copy this and input it right before
  • 00:07:04 the shopping cart link here also have a
  • 00:07:08 space after it and now if we reload the
  • 00:07:10 page this looks good where is the user
  • 00:07:13 icon I inserted it in the wrong place
  • 00:07:16 didn't I right it should not be inside
  • 00:07:20 the drop-down but here at the user
  • 00:07:21 management link now I very load this
  • 00:07:25 looks much better so that's great the
  • 00:07:27 header is in place and the overall
  • 00:07:29 application doesn't look too bad but now
  • 00:07:32 I want to start adding the products of
  • 00:07:34 the product thumbnails on this index
  • 00:07:37 page though so that we actually see
  • 00:07:39 something for this I will go back to my
  • 00:07:42 views folder and I will create a new
  • 00:07:44 subfolder called
  • 00:07:46 shop now I will move my index to HPS
  • 00:07:50 file into this shop folder and if I now
  • 00:07:53 reload this will break because it no
  • 00:07:55 longer finds the index view of course so
  • 00:07:59 in the index dot J's file I will change
  • 00:08:02 this to not look for the index file in
  • 00:08:05 the views folder but instead in the shop
  • 00:08:08 folder and then in the index or then use
  • 00:08:11 the index HPS file so if I now restart
  • 00:08:15 my server and reload this page this now
  • 00:08:18 works again so dad is working again but
  • 00:08:21 back to the thumbnails how do I get
  • 00:08:24 nice-looking thumbnails and a grid
  • 00:08:27 holding these four nails
  • 00:08:28 well if bootstrap of course and this is
  • 00:08:31 no bootstrap course so I won't go into
  • 00:08:33 too much detail but you may just use
  • 00:08:37 bootstraps both in grid system and if
  • 00:08:40 you're not aware how this works this
  • 00:08:42 basically divides your whole page into
  • 00:08:45 several blocks you can use to structure
  • 00:08:47 or to position your data at this grid
  • 00:08:50 system
  • 00:08:51 also supports different screen sizes to
  • 00:08:53 automatically stack or expand these
  • 00:08:55 blocks so that is really great and
  • 00:08:57 allows you to create a flexible
  • 00:08:59 responsive layout without using flexbox
  • 00:09:02 which in furious
  • 00:09:03 batter but doesn't work in all browsers
  • 00:09:06 if this is all totally new to you I
  • 00:09:09 would recommend you check out some of
  • 00:09:11 the many many bootstrap tutorials
  • 00:09:13 courses and videos you will find on the
  • 00:09:15 Internet to learn how it actually works
  • 00:09:18 so I use the grid but I also want to
  • 00:09:21 have a nice looking thumbnail if we go
  • 00:09:24 to the components tab here you can see
  • 00:09:27 that we get this thumbnails point here
  • 00:09:30 on the right and we could even pick a
  • 00:09:33 bump down with only having an image but
  • 00:09:35 I want to have one with having a text or
  • 00:09:38 which has a text as well later on I want
  • 00:09:40 to have a price at the bottom – and I
  • 00:09:42 want you only have one link and move
  • 00:09:44 that to the right but for now I would
  • 00:09:46 write grab this ko here and just insert
  • 00:09:53 it here instead of G current content we
  • 00:09:56 have so now if I save this and reload my
  • 00:09:59 page while we get the thumbnail it
  • 00:10:01 doesn't look that great to be honest but
  • 00:10:03 we'll get there it doesn't look that
  • 00:10:06 great because currently we're using the
  • 00:10:08 thumbnail but we're not positioning this
  • 00:10:11 row inside a container bootstraps grid
  • 00:10:14 works in a way that it has rows and
  • 00:10:17 columns in the rows and all rows sit in
  • 00:10:20 an overarching container now this
  • 00:10:23 container currently doesn't exist so I
  • 00:10:25 will add it in my layout HPS file and
  • 00:10:28 wrap all views or all the content which
  • 00:10:32 might be added by views in such a
  • 00:10:34 container as I have em at install which
  • 00:10:38 is a little black in my IDE which makes
  • 00:10:41 it easy for me to create HTML file or
  • 00:10:44 HTML tags and assign classes I can just
  • 00:10:47 type dot container and then it tab to
  • 00:10:50 create a div element with a class of
  • 00:10:52 container you might just Google for your
  • 00:10:55 favorite editor or IDE and m8e mmm
  • 00:10:59 tea if you're interested in installing
  • 00:11:02 this plug-in as well so now I got the
  • 00:11:04 container and if I reload now it at
  • 00:11:07 least looks a little bit better but
  • 00:11:09 still we need an image we need to fix
  • 00:11:12 these buttons well let's start with an
  • 00:11:14 image for now I will just fetch one from
  • 00:11:17 the internet but of course later on we
  • 00:11:19 want to replace this with images
  • 00:11:21 actually living or sitting on our server
  • 00:11:23 so I will search for a great product and
  • 00:11:27 what do we want to sell on our shop
  • 00:11:29 how about video games and I think well
  • 00:11:35 now I can certainly only make mistakes
  • 00:11:38 by picking the wrong game so great
  • 00:11:40 choice by me therefore I will pick a
  • 00:11:43 game probably no one else but it's a
  • 00:11:44 great game by a German game developer
  • 00:11:47 gothic but older but one of the greatest
  • 00:11:51 RPGs you can know and of course I should
  • 00:11:55 have known that I don't fight the game
  • 00:11:57 by just searching for gothic so gothic a
  • 00:11:59 game yeah that is so therefore that
  • 00:12:03 people buy that game it's great so I
  • 00:12:07 will just pick the link here deep
  • 00:12:09 linking of course not something you
  • 00:12:10 should do on your page but that's just
  • 00:12:12 for testing purposes here you slink back
  • 00:12:16 in the indexed or HBS file at a shop
  • 00:12:19 folder I will paste here in the source
  • 00:12:23 of my image
  • 00:12:23 and if I now reload boom that's big
  • 00:12:26 while gothic is a great game it
  • 00:12:29 certainly deserves to be that big but
  • 00:12:31 that's too big now I want to change this
  • 00:12:35 and I will change the overall styling or
  • 00:12:38 the maximum height this image element
  • 00:12:41 may have inside a thumbnail I will do
  • 00:12:44 this in my own style sheet style dot CSS
  • 00:12:46 here and I just add a rule thumbnail and
  • 00:12:50 an image each image tag in the thumbnail
  • 00:12:53 and we only have one of course should
  • 00:12:55 have a maximum height of 150 pixels and
  • 00:12:59 I will all sail back in the index to HB
  • 00:13:02 s fall give this image and a class of
  • 00:13:06 image responsive which is a bootstrap
  • 00:13:11 class
  • 00:13:13 now if we reload this looks better and
  • 00:13:16 of course you may stall is to to your
  • 00:13:18 needs how you want this to look I'm
  • 00:13:20 happy with it like this and next of
  • 00:13:23 course I want to well add some dummy
  • 00:13:25 text here and change the buttons to add
  • 00:13:28 the band dummy text I will again use
  • 00:13:30 Emmet and the only typing lorem and then
  • 00:13:34 hitting tab I get some dummy text here
  • 00:13:36 now if you don't have that plug-in and
  • 00:13:39 you don't want it or can't have it you
  • 00:13:41 were all through you can also get dummy
  • 00:13:44 text like this by just searching for
  • 00:13:48 lorem ipsum and you will probably find
  • 00:13:52 pages like this one long epsom dot d and
  • 00:13:55 while this page is on german it's really
  • 00:13:57 straightforward to use just enter the
  • 00:14:00 number of words you want to generate
  • 00:14:02 then you choose well if this is the
  • 00:14:05 number of words or number of characters
  • 00:14:07 or paragraphs it go and boom here you
  • 00:14:10 got your dummy text to copy so if I
  • 00:14:13 reload now I got a dummy text now I want
  • 00:14:16 to gift make this little bit more
  • 00:14:18 grayish to later I'll have to Bryce
  • 00:14:21 stand out a little bit more and I have
  • 00:14:23 to fix the button still so first to make
  • 00:14:26 this more grayish I will give this
  • 00:14:28 paragraph holding the description a
  • 00:14:30 class of description and in my
  • 00:14:33 stylesheet I will add it in thumbnail
  • 00:14:36 container of course description should
  • 00:14:39 have a color whoops a CSS class here
  • 00:14:43 should have a color off yeah this is
  • 00:14:47 still a chosen from the level video I
  • 00:14:51 recorded a couple of hours ago so this
  • 00:14:54 is fine yep looks good now let be fixed
  • 00:14:58 buttons mmm first thing is I don't need
  • 00:15:02 the first button I only need the second
  • 00:15:04 one this here should not be a paragraph
  • 00:15:07 but a div holding the button and it
  • 00:15:10 should also hold a div with the price of
  • 00:15:15 let's say $12 and I will give this
  • 00:15:17 difficult in to that
  • 00:15:22 the styling I do want to apply is let's
  • 00:15:26 say this should be bold and I want to
  • 00:15:31 have a font size of let's say 16 pixels
  • 00:15:34 all 0 to move the button I will add a
  • 00:15:38 class to this button and a class I do
  • 00:15:40 want to add is pull right now that is a
  • 00:15:44 default bootstrap class or a helper
  • 00:15:47 class bootstrap ships with which allows
  • 00:15:50 me to float something this button in
  • 00:15:52 this case to the right if I reload this
  • 00:15:56 looks really bad and I don't want to set
  • 00:15:59 it down there it should be inside this
  • 00:16:01 whole box well this happens because it
  • 00:16:05 got a couple of floats going on on this
  • 00:16:06 page and well by mixing them all up this
  • 00:16:10 results in what we see here therefore on
  • 00:16:14 the div holding this button I will add a
  • 00:16:16 class clear fix also a helper class
  • 00:16:19 provided by bootstrap which will make
  • 00:16:22 sure that all the floats within this div
  • 00:16:25 here float kind of on their own and are
  • 00:16:29 not masked up by other floats we had
  • 00:16:31 before this so that looks better but the
  • 00:16:34 text doesn't look good here the price of
  • 00:16:37 course this the case because here we
  • 00:16:39 don't have a float so I will assign pull
  • 00:16:41 left to distaff to float this on the
  • 00:16:45 left and therefore it will now be inline
  • 00:16:47 with this button last fingers I want to
  • 00:16:50 make this button cream and if you have a
  • 00:16:53 look on the bootstrap page on the CSS
  • 00:16:57 rhythm here or the CSS tab you find this
  • 00:17:00 buttons point here now here you find a
  • 00:17:04 lot of information about buttons amongst
  • 00:17:06 the information
  • 00:17:07 how would you style them and I went this
  • 00:17:10 green button I get it by assigning the
  • 00:17:13 button success class to the button and
  • 00:17:16 note you may not only change or style
  • 00:17:19 buttons as buttons so button elements
  • 00:17:22 but also anchor elements or basically
  • 00:17:24 all the elements you want to style as
  • 00:17:27 buttons nothing's keeping you from doing
  • 00:17:29 that so I will replace the button
  • 00:17:32 default style in my index
  • 00:17:34 HBase file with the button success style
  • 00:17:37 to make it green now ever reload that
  • 00:17:40 looks a lot like what I want it to look
  • 00:17:42 like a major step here last thing is I
  • 00:17:46 want to have a couple of thumbnails here
  • 00:17:48 not just one so for now later on we'll
  • 00:17:51 be done in the number away but for now I
  • 00:17:54 will copy this column which holds the
  • 00:17:59 individual thumbnail and just paste it
  • 00:18:02 into two more times to have two more
  • 00:18:05 thumbnails and because this column or
  • 00:18:09 these columns have the classes they have
  • 00:18:12 they look like they look okay that's a
  • 00:18:15 bad explanation so because they have a
  • 00:18:17 class of call MD for on medium sized
  • 00:18:22 screens each column will take up four
  • 00:18:26 blocks of the overall grid and there are
  • 00:18:29 twelve blocks available so three
  • 00:18:32 thumbnails plus gutters will fit in one
  • 00:18:36 row on a medium-sized screen on a small
  • 00:18:39 size screen because we assigned or by
  • 00:18:42 default and the SM six class is assigned
  • 00:18:46 only to fun plants will fit in one row
  • 00:18:49 and of course you may change this make
  • 00:18:51 this year s m1 and you will have twelve
  • 00:18:55 thumbnails on your mobile phone probably
  • 00:18:57 not what you want but try it out so with
  • 00:19:00 this if I save we get free thumbnails in
  • 00:19:04 one row now in order to also have
  • 00:19:08 multiple rows I will copy all of that
  • 00:19:13 the complete row here and duplicate that
  • 00:19:16 and now I have two rows with three