- 00:00:00 I wanna welcome back in the last video
- 00:00:04 we protect our outs and now we did all
- 00:00:08 the things we have to do to be able to
- 00:00:10 log in and to access this restricted
- 00:00:12 area so to say now what we will do in
- 00:00:15 this video will be pure HTML and styling
- 00:00:18 because we will create our dashboard
- 00:00:20 view so to say if you where we can
- 00:00:22 create a post and see all posts now if
- 00:00:25 you're not interested in that well feel
- 00:00:28 free to skip this video in the next that
- 00:00:29 you will continue with hooking up some
- 00:00:32 logic to actually be able to create
- 00:00:34 posts let's dive into this so currently
- 00:00:37 our dashboard looks like this not too
- 00:00:41 exciting I have to say let's change this
- 00:00:43 I'll start with the HTML part and I'll
- 00:00:46 start with extending from our layouts
- 00:00:49 master file so that the dashboard like
- 00:00:52 to welcome to desk uses our master file
- 00:00:56 and this kind of we have the header at
- 00:00:59 the top and so on style so to do this I
- 00:01:04 first extend then I create my content
- 00:01:07 section here remember this will be
- 00:01:11 whatever I write between those two
- 00:01:14 section expressions here will be what
- 00:01:17 will get injected here
- 00:01:20 so oops one file so now what I'm going
- 00:01:24 to do here is I'll create two sections
- 00:01:26 on HTML tag section which will give
- 00:01:30 class row for our bootstrap framework
- 00:01:34 and our class of new post which I will
- 00:01:38 manually style now in the section I will
- 00:01:42 have a bootstrap column and I will add
- 00:01:47 some offset so that it is centered now
- 00:01:53 this will be the new post section ste
- 00:01:56 CSS class implies and what I'm doing
- 00:01:59 here is
- 00:01:59 I'll add a header address so not only
- 00:02:02 for navigation and in this header I'll
- 00:02:05 have an h3 tag where I say what do you
- 00:02:08 have to say and then I want to add a
- 00:02:13 four
- 00:02:13 I'll leave the action empty as of now
- 00:02:16 and here I'll add a form group again
- 00:02:19 this is a bootstrap class which will
- 00:02:21 just format my four nicely and I will
- 00:02:24 add a text area which it will give a
- 00:02:27 name of new post idea of new post we
- 00:02:34 need two columns but I will set it to
- 00:02:36 five rows and I'll add a placeholder
- 00:02:39 where I say your post so that's my text
- 00:02:45 area and I also will give this text area
- 00:02:47 class of form control so that bootstrap
- 00:02:50 formats it's not formatted nicely now
- 00:02:54 below my form group div I'll add a
- 00:02:56 button of type submit' which I will give
- 00:03:01 a class button mount and by primary so
- 00:03:04 that it is nice blue button and I will
- 00:03:08 just give it a label of create post so
- 00:03:12 that will be my new post arm section and
- 00:03:15 if I load this it's gonna look okay
- 00:03:18 because we're mostly using bootstrap
- 00:03:21 classes so this will be how we create
- 00:03:23 new posts now below my new post section
- 00:03:27 I'll add an hour sexual firstly all to
- 00:03:30 be around
- 00:03:31 bootstrap row exactly which will get the
- 00:03:33 posts class which I will also manually
- 00:03:36 style or use in my own CSS file now in
- 00:03:41 here I want to loop through all the
- 00:03:43 posts and output them now obviously we
- 00:03:47 don't have any posts as of now we don't
- 00:03:48 even have database so I'm just going to
- 00:03:51 create some dummy HTML code here which
- 00:03:53 will be first again my bootstrap columns
- 00:03:59 so just to have the nice styling here
- 00:04:03 out of the box then again a header where
- 00:04:06 I say whatever P people say and then
- 00:04:13 here I want to have an article for each
- 00:04:17 post which I will give a class of post
- 00:04:20 so when we loop through all our posts
- 00:04:22 what we will do is we will create this
- 00:04:24 block for each
- 00:04:26 host we find so this will be our dummy's
- 00:04:29 skeleton for each post what we're
- 00:04:31 creating here and there should be a
- 00:04:34 paragraph with some dummy text for now
- 00:04:36 this will be the actual blog post text
- 00:04:39 or post text in the full application
- 00:04:42 obviously and below this text I'll have
- 00:04:45 a div with a class of info where I will
- 00:04:50 say post by then this will be the offer
- 00:04:53 which we would also retrieve from the
- 00:04:54 database for now just using my name here
- 00:04:58 on and then they do it would also be
- 00:05:01 retrieved from the database then I'll
- 00:05:05 add another div which of a call or which
- 00:05:08 will give a CSS class of interaction and
- 00:05:10 here I will have various interaction
- 00:05:14 methods or possibilities now I'm first
- 00:05:19 going to list them all divided by this
- 00:05:22 pipe symbol here so we will have a like
- 00:05:25 and a dislike and we'll have the
- 00:05:31 possibility to added our post oops and
- 00:05:35 the possibility to delete it now
- 00:05:39 obviously when we're looping through
- 00:05:41 this we'll have to check if this is our
- 00:05:45 post or not because if it's our post
- 00:05:47 then we should not be able to like or
- 00:05:49 dislike it but to be able to edit and
- 00:05:51 delete it but if it's supposed if
- 00:05:53 another person we want to make sure that
- 00:05:55 we can only like it dislike it and not
- 00:05:57 mess around with it right so that's
- 00:06:00 that's that and now let me just copy
- 00:06:02 this article here and paste it one more
- 00:06:07 times good we have to dummy posts here
- 00:06:09 and now if I reload this page you see
- 00:06:12 yeah that doesn't look too nice in
- 00:06:14 Wiseman's in dirt
- 00:06:15 oh I misspelled to this class here off
- 00:06:21 set free so so that term that could use
- 00:06:28 some additional styling I guess but you
- 00:06:30 see the Kitchener ol idea how our post
- 00:06:33 should look like now let me add some
- 00:06:35 styling I will
- 00:06:38 for this go into my public folder here
- 00:06:40 and I'll create a new subdirectory which
- 00:06:43 we'll call source and in this
- 00:06:45 subdirectory
- 00:06:45 I'll trade an additional user directory
- 00:06:48 called CSS this is where where I will
- 00:06:50 store my CSS files now here I will
- 00:06:54 create a new CSS file which we'll call
- 00:06:57 main dot CSS in this file I only want
- 00:07:02 you to some additional styling too much
- 00:07:05 first I'll start my new post section of
- 00:07:08 it that will give it some additional
- 00:07:10 padding from top and bottom and I will
- 00:07:13 give it a little border at the bottom so
- 00:07:17 that we have a clearer separation to
- 00:07:19 your posts area then the header in our
- 00:07:24 new post section as well as the header
- 00:07:28 in our post section should have a margin
- 00:07:32 bottom of 20 pixels just to set it a
- 00:07:34 little bit more apart from the content
- 00:07:36 below it then I will in my post section
- 00:07:40 format my post article such that I give
- 00:07:45 it a little bit of padding to the left
- 00:07:47 to kind of if we look here to indent it
- 00:07:52 a bit into the right and I will give it
- 00:07:56 a nice little visual sugar here by
- 00:08:00 adding a border where I picked a nice
- 00:08:03 red dark red and which will appear on
- 00:08:08 the left of the post and just add some
- 00:08:11 margin to the bottom sit to the next
- 00:08:13 post three pixels and last thing is that
- 00:08:16 info bar here I want to forward that too
- 00:08:20 so I'll select it by yet just going into
- 00:08:28 the info deaf in my post article in my
- 00:08:31 posts section and here I want to first
- 00:08:34 give it some dark grey color and I will
- 00:08:38 make it italic okay so now to be able to
- 00:08:42 actually see these changes I have to
- 00:08:45 import the style sheet and now this is a
- 00:08:49 bit
- 00:08:50 you're not very tricky but you have to
- 00:08:52 know how to do it right I could use like
- 00:08:58 the direct path year so I could use
- 00:09:01 source CSS main CSS but this would be or
- 00:09:08 would lead to possible problems because
- 00:09:11 well in wearable application when we use
- 00:09:15 our router
- 00:09:16 we can have URLs which not actually
- 00:09:19 reflect the real directory structure
- 00:09:23 light right like here for example where
- 00:09:27 we have slash dashboard now if you were
- 00:09:30 to look for source yes as main CSS in
- 00:09:33 this folder it would not work because
- 00:09:35 that is not a folder that is chest out
- 00:09:38 of the URL and how we styled so to get
- 00:09:42 an absolute reference URL file i will
- 00:09:46 use allowable helper here so I'll enter
- 00:09:50 my plate expression here with the double
- 00:09:54 curly braces and then I'll use the URL
- 00:09:56 fade and here the two method and now I
- 00:10:01 can specify the path as if I always were
- 00:10:05 in the public folder here so I'm routing
- 00:10:08 out to source yes as the main dot CSS
- 00:10:11 now if you do have problems with it to
- 00:10:14 here in which sometimes can cure
- 00:10:16 depending on your development
- 00:10:17 environment well you could also use the
- 00:10:20 URL secure method which which just
- 00:10:23 enforce HTTP or you could use the assets
- 00:10:30 howcome method and then specify the path
- 00:10:32 here now in this case I'm using this and
- 00:10:37 this should work in most of the cases so
- 00:10:39 let me reload reload this page now as
- 00:10:42 you can see it's much nicer looking now
- 00:10:44 we get this border here beautiful and
- 00:10:46 our posts are much more nice to look at
- 00:10:49 right now so that is just the styling
- 00:10:53 the visual part in the next with you
- 00:10:56 will take care about actually being able
- 00:11:00 to create posts see you there fine
