Coding

Laravel 5.2 PHP Build a social network – Post Validation & Outputting Errors

  • 00:00:00 everyone will come back in the last
  • 00:00:03 video we set up our post so that we can
  • 00:00:05 create new posts and attach them to a
  • 00:00:07 user now in this video I want to do a
  • 00:00:10 little bit of fine tuning I want to
  • 00:00:12 validate what the user sends us
  • 00:00:14 I want to output a narrower if well
  • 00:00:17 basically we receive an empty post field
  • 00:00:20 and I want to also give back a success
  • 00:00:22 message when a post was created now let
  • 00:00:25 the next would you we'll have a look at
  • 00:00:27 outputting these posts in our dashboard
  • 00:00:29 let's start so validation isn't
  • 00:00:32 something new we've done it before
  • 00:00:34 so it should be done really quick here
  • 00:00:37 in my post controller I want to add it
  • 00:00:39 and as you are aware I can just call my
  • 00:00:41 this validate function in my controller
  • 00:00:45 here and I will pass the request and
  • 00:00:47 then an array with well my rules
  • 00:00:50 basically now I only got one feel this
  • 00:00:52 is the body field and I want to have a
  • 00:00:55 rule of well it being required it
  • 00:00:57 shouldn't be empty and let's say we
  • 00:01:00 don't want it to be longer than 1000
  • 00:01:02 characters okay so this should be the
  • 00:01:06 validation and in case we're not getting
  • 00:01:11 a validation error but instead we're
  • 00:01:13 saving this I want to give a success
  • 00:01:15 message now therefore I will wrap this
  • 00:01:18 in Pretorius saving of the post in the
  • 00:01:21 if statement because this will only
  • 00:01:24 return true if it was successfully
  • 00:01:26 inserted well and if it was not
  • 00:01:28 successfully inserted I want to give
  • 00:01:30 back an error message saying well there
  • 00:01:32 was an error while trying to insert your
  • 00:01:34 post or to create your post so in case
  • 00:01:37 of success what I will do is I will pass
  • 00:01:39 a message and let's say this message by
  • 00:01:41 default is it's a bad outcome that we
  • 00:01:45 say there was an error now if we're
  • 00:01:50 successful then I want to alter that
  • 00:01:53 message to say post successfully created
  • 00:01:59 now how do we pass this message well the
  • 00:02:03 good thing is when we're redirecting
  • 00:02:05 here we can chain another method here
  • 00:02:08 and say with now the width method allows
  • 00:02:11 us to pass a message
  • 00:02:14 so here I'm just passing is an array
  • 00:02:18 where I have a key that says message and
  • 00:02:23 I'll have and then the value of the
  • 00:02:28 message so here this will just be
  • 00:02:30 message and in the case of only passing
  • 00:02:35 one string I could also just pass the
  • 00:02:37 string but but here I'll use the array
  • 00:02:42 because what you might want to do is you
  • 00:02:45 might want to send the success message
  • 00:02:47 with a key of success and a failure
  • 00:02:50 message of a key or fail so that you can
  • 00:02:53 differently style the output you're
  • 00:02:55 showing in the template but in this case
  • 00:02:57 so I don't think we'd get ever will ever
  • 00:03:00 get a fail so just have one styling
  • 00:03:03 should be okay here okay so now we're
  • 00:03:06 passing back our message here and we
  • 00:03:09 obviously pass back an error if
  • 00:03:11 validation fails so now in my dashboard
  • 00:03:13 I want to output this error now we did
  • 00:03:18 something similar in the Balkan view if
  • 00:03:19 you remember we already have a block
  • 00:03:22 here where we output our validation
  • 00:03:24 errors now I could just copy that and
  • 00:03:27 put it into the dashboard but that would
  • 00:03:29 not be good coding style we won't be
  • 00:03:31 repeating ourselves so the better way is
  • 00:03:33 to create a new include remember
  • 00:03:36 includes are just pieces of code which
  • 00:03:39 we use in different places throughout
  • 00:03:41 our application so here I'll just create
  • 00:03:43 a new let's call it message block that
  • 00:03:48 blade dot PHP and in this message block
  • 00:03:52 all I do is not that all I do is I cut
  • 00:03:58 this part here and insert it here that's
  • 00:04:02 all
  • 00:04:02 and then here my welcome view I will use
  • 00:04:06 the blade expression include to well
  • 00:04:10 target this message block inclusion and
  • 00:04:13 then I do the same here in my dashboard
  • 00:04:17 at the very top and now here I already
  • 00:04:23 use a certain styling so you could want
  • 00:04:26 to
  • 00:04:27 put these rows and columns out of that
  • 00:04:29 include so that you can better control
  • 00:04:33 where it is positioned in the view where
  • 00:04:36 you include it because this way we'll
  • 00:04:37 always have
  • 00:04:38 well this column positioning here but in
  • 00:04:42 this case that's fine so here we have a
  • 00:04:46 problem in a welcome view we're just
  • 00:04:49 using this validation arrow bag but in
  • 00:04:51 the dashboard we also get a success
  • 00:04:53 message which I want to display well it
  • 00:04:55 isn't a real problem I'll just add a
  • 00:04:57 message block here so let's say if here
  • 00:05:02 I'm checking if I have errors now I'll
  • 00:05:04 do the same check for if I have well a
  • 00:05:08 message I can do this by checking if
  • 00:05:12 session has message is true because this
  • 00:05:16 message will be stored in our session
  • 00:05:19 and we gave it a key of message
  • 00:05:21 therefore checking with the level helper
  • 00:05:24 method has here on the session for Sade
  • 00:05:26 if message is there we'll well give us
  • 00:05:30 basically the answer if we have to
  • 00:05:31 output a message now this will always be
  • 00:05:34 true when we created a post but it won't
  • 00:05:36 be true if we're accessing the dashboard
  • 00:05:39 through other means so I'll close this
  • 00:05:44 block here and then I'll just copy the
  • 00:05:47 formatting of this block here but now
  • 00:05:50 here are not outputting a list or
  • 00:05:52 anything like this
  • 00:05:52 all output here is really chest well the
  • 00:05:57 message I get it with the GAT helper
  • 00:06:00 method on the session facade so get
  • 00:06:03 message will output the message here
  • 00:06:06 let's see if that works that I included
  • 00:06:09 here yes let me reload and now let me
  • 00:06:15 submit an empty post as you can see
  • 00:06:17 we're getting an arrow here now let me
  • 00:06:19 create a real boost now we get our
  • 00:06:22 success message up here so that's really
  • 00:06:25 cool now the last thing I want to do is
  • 00:06:27 I want to improve the styling of this
  • 00:06:29 box a little bit so I'm a message blog
  • 00:06:32 here I want to basically have a reddish
  • 00:06:35 block for for the errors and a green
  • 00:06:38 block for the message yes the message
  • 00:06:40 be the creation fated part but as I said
  • 00:06:45 in our local development environment
  • 00:06:47 creating the post that this database
  • 00:06:49 action will probably never fail in a
  • 00:06:52 real application you should have some
  • 00:06:54 kind of differentiation between those
  • 00:06:57 cases so here what I will do is I'll
  • 00:06:59 just give this div in our class where I
  • 00:07:01 say error and here I will say success
  • 00:07:06 and now in my public source in my CSS my
  • 00:07:11 main CSS file I'll just create those two
  • 00:07:15 classes so arrow will just have a border
  • 00:07:20 which is yeah let's say red and it
  • 00:07:23 should have a red background color or
  • 00:07:25 reddish so let me just pick maybe Zin
  • 00:07:29 something like like this here and give
  • 00:07:33 it a red colored text and now the
  • 00:07:38 success will be well basically the
  • 00:07:42 opposite it will have a green border it
  • 00:07:47 will have a background color which
  • 00:07:49 should be like a light green here and it
  • 00:07:54 should have a color text which has the
  • 00:07:56 color of green let's save this reload
  • 00:07:59 this page and try this again yeah okay
  • 00:08:04 now there is something else I have to do
  • 00:08:05 just recognized so I want to make sure
  • 00:08:08 in my error class that my unordered list
  • 00:08:13 that I removed the list-style:none and I
  • 00:08:17 remove all margin and padding of this
  • 00:08:22 unordered list so let me try this again
  • 00:08:25 now yeah that looks better now the last
  • 00:08:30 thing which I might do is Center it and
  • 00:08:32 this is the same for error and success
  • 00:08:34 well therefore
  • 00:08:35 create one rule where I just say it's
  • 00:08:39 the text alignment to Center now if we
  • 00:08:42 load this again yeah and now let's
  • 00:08:46 create a number post here wonderful so
  • 00:08:51 now this is
  • 00:08:53 working we get our validation and our
  • 00:08:55 success message and nice way to output
  • 00:08:58 it so we'll see you in the next videos
  • 00:09:00 bye