Coding

Laravel 5.2 PHP – Build a Shopping Cart – #5 User Sign Up

  • 00:00:01 welcome back to the next video in my
  • 00:00:03 series on building a shopping cart with
  • 00:00:05 little world I left when we had our data
  • 00:00:09 base in place and when we see that all
  • 00:00:11 this product product data here so with
  • 00:00:14 all these books here now before we can
  • 00:00:17 actually work with the shopping cart or
  • 00:00:20 before I implement those features or
  • 00:00:22 start implementing them I want to
  • 00:00:24 implement the user so that the user is
  • 00:00:27 able to sign up sign in and yet that we
  • 00:00:31 have the user in place which we will
  • 00:00:33 need later anyways so the first step is
  • 00:00:36 to create a start up or the sign up page
  • 00:00:39 and process so let's do that in my
  • 00:00:43 little project I will start by creating
  • 00:00:46 the user itself so the user model first
  • 00:00:50 and I will do this in the terminal
  • 00:00:53 window here navigated into my project
  • 00:00:55 folder and I run PHP artisan make and
  • 00:01:00 now I'm only going to make a migration
  • 00:01:03 file because well I deleted that earlier
  • 00:01:06 and my database migrations folder the
  • 00:01:08 model still exists from the default
  • 00:01:10 setup level ships with so I will use
  • 00:01:12 that model and yet just create a
  • 00:01:15 migration file by the running make
  • 00:01:17 migration and I will name this file
  • 00:01:19 create user table of course you may
  • 00:01:23 choose whichever name you want
  • 00:01:24 now this placed a new file in my
  • 00:01:28 database migrations folder this one here
  • 00:01:30 and in this file I can setup the logic I
  • 00:01:33 want to set up to well create a new user
  • 00:01:36 I will just copy this schema block here
  • 00:01:40 from my products table so that I don't
  • 00:01:42 have to rewrite all of that I will use
  • 00:01:45 the time stamps and the increments and
  • 00:01:47 here in the down function I will
  • 00:01:49 implement schema drop and then detail
  • 00:01:53 name the table name of course will be
  • 00:01:55 user so I'm going to change this up here
  • 00:01:57 too and now what should the user have
  • 00:02:00 besides my increments and time stamps
  • 00:02:03 well I want my user
  • 00:02:07 this tape table to have an email address
  • 00:02:11 which should be well a string of our
  • 00:02:14 chart in the database then and also a
  • 00:02:18 password which will also be a string now
  • 00:02:22 here's an important thing the email
  • 00:02:24 address should be unique so I'm going to
  • 00:02:26 add this unique method here which will
  • 00:02:30 just set up the database in a way that
  • 00:02:33 we're this table in a way that we can't
  • 00:02:35 enter two identical email addresses or
  • 00:02:38 however I will check for that when
  • 00:02:40 validating user input later too and with
  • 00:02:44 that I think I have a nice looking user
  • 00:02:46 model with the basics I need right now
  • 00:02:48 so in the user model file I'll take the
  • 00:02:52 default file which is fine by me but I
  • 00:02:55 will get rid of this name field here and
  • 00:02:57 II fillable field here because well my
  • 00:03:01 user doesn't have names simple email and
  • 00:03:03 password and of course this will be
  • 00:03:05 extended later on when we need something
  • 00:03:07 like a shipping address or something
  • 00:03:09 like that but for now I'll stick to this
  • 00:03:11 um simple sign up here an extent us step
  • 00:03:16 by step and yeah that that looks good
  • 00:03:19 now what does the fillable field here do
  • 00:03:23 and the same questions of course true
  • 00:03:25 for the hidden field well that our
  • 00:03:27 little well helpers bilateral which
  • 00:03:30 basically mean if you create a new user
  • 00:03:32 you may pass the field specified in this
  • 00:03:37 fillable field in this area here in the
  • 00:03:40 constructor of the user so this is a
  • 00:03:41 quicker way of creating a user basically
  • 00:03:43 and the hidden field is important when
  • 00:03:46 retrieving a user from the database
  • 00:03:48 password and do you remember token won't
  • 00:03:52 be well output or won't be retrieved so
  • 00:03:56 if you then output the user for example
  • 00:03:57 you make sure that you're not
  • 00:03:59 accidentally passing your password or
  • 00:04:01 something like that so if that the user
  • 00:04:04 is set up and time to create the views
  • 00:04:07 for that so I will already have my user
  • 00:04:10 folder here and in this folder I will
  • 00:04:12 create a new file signup dot light or
  • 00:04:16 PHP and as of course will be my signup
  • 00:04:19 page
  • 00:04:20 and I will also create two other files
  • 00:04:22 already the sign-in blades dot PHP and
  • 00:04:28 the profile to play to a PHP file now
  • 00:04:34 I'll start with a sign up file here I
  • 00:04:37 will create a row this is just a
  • 00:04:38 bootstrap class of course and just some
  • 00:04:41 columns here to position this nicely of
  • 00:04:44 course you may choose whichever styling
  • 00:04:47 you prefer for your application here if
  • 00:04:52 I could type typing and talking not
  • 00:04:57 always that easy so with that why my
  • 00:04:59 rows here are set up on my columns so
  • 00:05:01 this will be DS signup page and on this
  • 00:05:04 page I'll of course have a form where I
  • 00:05:07 later will navigate your route I have
  • 00:05:10 yet to create this will be method post I
  • 00:05:14 want to submit this form of the post
  • 00:05:16 method and in this form I'll create a
  • 00:05:19 div form group just to give to Sam
  • 00:05:21 bootstrap styling I'll have my label for
  • 00:05:24 the email field so this will be this
  • 00:05:29 field here email name should also be
  • 00:05:32 email of course but I'm just copying
  • 00:05:35 that to also provide a password field
  • 00:05:37 and yes you could of course also
  • 00:05:39 implement some kind of confirm password
  • 00:05:41 field but I'll keep that simple here so
  • 00:05:45 the password and also password here and
  • 00:05:51 here too
  • 00:05:55 and finally a button to submit that form
  • 00:06:03 so that's my basic signup form here and
  • 00:06:07 I also want to add a block at the top
  • 00:06:10 where I can output validation error
  • 00:06:12 messages if I get any so here I will
  • 00:06:17 have my alert div followed danger class
  • 00:06:23 and I want to output the individual
  • 00:06:26 error messages here as paragraphs in
  • 00:06:29 order to do that though I will first
  • 00:06:32 wrap this in the if statement to make
  • 00:06:33 sure I only attach the stiff if errors
  • 00:06:36 are available the code for that is to
  • 00:06:39 count if my errors variable has any
  • 00:06:43 errors and close T if block here of
  • 00:06:47 course and then inside of the stiff I
  • 00:06:50 want to loop through all the error
  • 00:06:51 messages so I'll have a for each loop
  • 00:06:53 here where I access my errors variable
  • 00:06:57 which will be provided by level all
  • 00:06:59 errors and loop through them as
  • 00:07:01 individual errors of course and for each
  • 00:07:05 here and output the errors here in the
  • 00:07:09 paragraph so with that I'm displaying
  • 00:07:14 arrows if I have any and as a next step
  • 00:07:18 I want to implement a sign-up logic so
  • 00:07:21 to first show me that view and also to
  • 00:07:24 submit it if I want to do that so I'll
  • 00:07:27 go to the routes PHP file and well
  • 00:07:30 currently I don't have that many routes
  • 00:07:32 so I want to change this and this will
  • 00:07:35 give me the sign abroad here this should
  • 00:07:41 use the user controller with which I
  • 00:07:45 still have to create get signup and I'll
  • 00:07:50 give this a name off user dot signup
  • 00:07:54 and I'll also create the post route
  • 00:07:57 already which will be hit once the user
  • 00:08:02 submits the form suitors will also be
  • 00:08:06 living in the user controller at post
  • 00:08:09 sign up and will have a name of users
  • 00:08:15 sign up as well which doesn't interfere
  • 00:08:17 with the ghat route since we have
  • 00:08:19 different methods here so I will create
  • 00:08:22 that controller and out I'm going to do
  • 00:08:24 this with the artisan command again so
  • 00:08:26 PHP artisan make controller user
  • 00:08:29 controller so let's open this newly
  • 00:08:35 created controller here and I need two
  • 00:08:38 actions for now so public function get
  • 00:08:41 signup is first one which should display
  • 00:08:45 the signup page so I will return a view
  • 00:08:48 here and if you want to show of course
  • 00:08:53 lives in the user folder and a Stanley
  • 00:08:56 sign up plate on PHP file this is why I
  • 00:08:58 return this do you here and the post
  • 00:09:02 function already put a post action here
  • 00:09:05 to handle the form submission will
  • 00:09:08 receive the request object and it's
  • 00:09:13 important we have this illuminate HTTP
  • 00:09:15 request import here at the top to allow
  • 00:09:17 laravel to do this injection here and
  • 00:09:21 then I will want to sign the user up
  • 00:09:25 with those credentials therefore above
  • 00:09:27 first validate the submitted request so
  • 00:09:31 let me set up some rules here and I want
  • 00:09:33 the email address of course to be an
  • 00:09:36 email address um it should also be
  • 00:09:39 provided in the first place so required
  • 00:09:41 and I want to make sure that it is
  • 00:09:44 unique so it doesn't exist in the
  • 00:09:46 database now I set the database table up
  • 00:09:48 in a way that I can't submit the email
  • 00:09:51 address or that I can't write the email
  • 00:09:53 address to the database if it already
  • 00:09:54 exists but that would throw an ugly
  • 00:09:57 sequel error and I don't want to display
  • 00:09:59 that the user therefore I will use a
  • 00:10:02 number validation here which is named
  • 00:10:05 unique and the
  • 00:10:08 the name of the table where it should be
  • 00:10:10 unique to switches users and if that
  • 00:10:12 latter wall will check if the email
  • 00:10:14 field in the table already contains well
  • 00:10:18 the past value in this email field here
  • 00:10:21 so that's the validation for the email
  • 00:10:24 address for the password I simply want
  • 00:10:28 this to be required and let's say I want
  • 00:10:31 to have a minimum length of four and of
  • 00:10:33 course again a chest as to your needs
  • 00:10:36 now as you are probably aware this
  • 00:10:38 validation will automatically return
  • 00:10:41 back to the page the user comes from and
  • 00:10:44 santi you appropriate error messages
  • 00:10:47 with the response so that it will
  • 00:10:49 automatically rerender the signup page
  • 00:10:51 and show the validation error so we
  • 00:10:53 don't have to do anything here so we can
  • 00:10:56 continue here in the case the validation
  • 00:10:57 is successful and then of course I want
  • 00:11:00 to create a new user so I will do this
  • 00:11:02 new user and make sure to add this
  • 00:11:05 import to app back slash user at the top
  • 00:11:08 now since I set up this fillable field
  • 00:11:13 here I can quickly create a new user by
  • 00:11:16 passing an array to this constructor
  • 00:11:18 which well describes this user or which
  • 00:11:22 contains all the fields with which I
  • 00:11:24 want to crude they create this user so
  • 00:11:26 for example the email field which will
  • 00:11:28 be of course to request and then the
  • 00:11:30 email field retrieved and using request
  • 00:11:34 input is just another way of using for
  • 00:11:36 example request input like this so just
  • 00:11:42 another way and the password of course
  • 00:11:46 which should also be request input
  • 00:11:49 password however I don't want to store
  • 00:11:53 the unencrypted password therefore I
  • 00:11:55 will use the bcrypt helper method which
  • 00:11:58 level provides to well make sure that
  • 00:12:02 the password is encrypted are not stored
  • 00:12:04 in raw form next I can run user safe to
  • 00:12:09 safety user to the database and then I
  • 00:12:12 want to return a redirect to the well
  • 00:12:15 let's say homepage for now so I'll
  • 00:12:18 navigate to another route
  • 00:12:22 to the product index route to be precise
  • 00:12:26 which is just a route you set up here in
  • 00:12:28 the routes file the get route to the
  • 00:12:30 starting page and with that these sign
  • 00:12:34 up page should work we should be able to
  • 00:12:37 get to this signup page here however a
  • 00:12:40 thrist need to run my migrations so run
  • 00:12:44 migrate to create this user table and
  • 00:12:47 with that I want to try this out so
  • 00:12:50 targeting targeting this signup route
  • 00:12:53 and I see one thing I forgot I of course
  • 00:12:57 have to extend the D layout without that
  • 00:13:02 will I get this ugly layout you just saw
  • 00:13:05 so I'm going to extend my master layout
  • 00:13:09 here and of course insert this in a
  • 00:13:13 Content section all this code here so
  • 00:13:19 that should make this look nicer for
  • 00:13:23 every Lotus much better of course and
  • 00:13:25 also since I'm here anyways I'll give
  • 00:13:29 this button nicer styling so final
  • 00:13:35 reload looks better though I also need
  • 00:13:40 to give my imports the form control
  • 00:13:43 bootstrap classes I forget that quite a
  • 00:13:45 lot to be honest form control so now it
  • 00:13:49 should look nice much better so now I'll
  • 00:13:52 try to sign up with my test attest come
  • 00:13:56 email address and the test password here
  • 00:13:58 yeah that happens if you were coding in
  • 00:14:04 another language before you forget basic
  • 00:14:07 stuff like submitting this CSRF token
  • 00:14:09 anyways great way to show how you can
  • 00:14:12 quickly implement this token before I
  • 00:14:14 was always creating this hidden input
  • 00:14:17 field and that's important to know what
  • 00:14:19 happens behind the scenes but if you
  • 00:14:22 want to quickly insert this you might
  • 00:14:24 just use CSRF field and this helper
  • 00:14:27 method will create this basically does
  • 00:14:30 hidden input field here hidden within
  • 00:14:32 the value of session token and
  • 00:14:36 named Hogan and so on so with the field
  • 00:14:38 you saw in other videos on this channel
  • 00:14:39 of course one thing missing here is that
  • 00:14:43 I have to implement the route I want to
  • 00:14:46 navigate who's a user sign up and I'll
  • 00:14:50 also update the header to show user
  • 00:14:56 management here instead of user account
  • 00:14:59 I'll change user account here to sign up
  • 00:15:02 and duplicate this to also have sign in
  • 00:15:04 and all editors later again once I have
  • 00:15:07 designed and logic in place so now I'll
  • 00:15:10 hook up the sign up route here route
  • 00:15:13 user sign up and with that there these
  • 00:15:18 first steps should be possible to take
  • 00:15:21 so I'll go to my project reload this
  • 00:15:24 starting page here and click on sign up
  • 00:15:27 this takes me to this page great so now
  • 00:15:31 if I create a new user I'm taken back to
  • 00:15:35 the index page and if I have a look in
  • 00:15:39 my database I can show you this real
  • 00:15:42 quick you see that my user wasn't it
  • 00:15:47 created so with that the user sign up is
  • 00:15:52 in place its next time to also implement
  • 00:15:57 a sign in logic and while the log out
  • 00:15:59 logic see you there