Coding

Laravel 5.2 PHP Build a social network – Creating the Dashboard View

  • 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