We'll be using the registration page as a template for the log in page with the registration page open.
Registered on BHP.
Save the file is log in.
BHP made sure to save it in the same directory.
Perfect cop.
Now I'm going to load the log in page in my web browser so that we can preview it as we go along.
We'll need to make some adjustments to the form scroll down to the section of the page containing the
form.
Here it is for me it's on line 123 first will change the heading from registration form to log in so
I'll just delete the word registration and change form to log in and save the page and refreshing so
you can see log in there.
We need to remove the first name and last name input fields
we need to change the button label to log in instead of submit
also change the button element I.D. to log in rather than register now create a button outside of the
form and link it to the registration page
so there's the button.
So if I click it it should go to the registration page and it does so I'll just press the back one since
the log in page will only be visible if the user is not logged in we'll create an alert indicating that
the user will be required to log in to view the blog
so I'll just confirm the location this alert.
This is what we're creating will be above the log in header
and so there it is.
Next we'll need to modify our javascript code so that it transmits the email and password to AP HP script
this HP script will be comparing it against our database entries and if a match is found the user will
be redirected to the blog.
So this is what the script is going to look like I'm just going to paste it in here
the basic functionality of this script is almost identical to our registration page.
We've only modified the form element names in error messages.
So the first thing here you'll notice is that this entire script is activated with an on click event
and that's when the log in button is clicked.
Next we store the email address and password from the input fields that the user supplied.
We then transmit these values to AP HP script named P. check dot BHP and this is using the Ajax and
the post method we'll be creating the p checked out P HP page in the next lesson.
So don't worry about that for now the p check page will check the username and password or the email
and password and return either a true or false code.
So if HMO equals true we're going to output a success message authenticated if on the other hand the
error code is false.
We're going to output an authentication failure message.
Another thing I want to point out is that if the user is authenticated they're automatically redirected
to the blog.
And we've seen that in the example earlier if any other errors occur.
We output a very generic error message so error processing request Please try again.
And just like with the registration page we display the word loading while all this is taking place.
And again that that is the whole process only takes fractions of a seconds with sometimes you might
not even see this text displayed similar to the registration page.
The error messages will be displayed in a div with the I.D. add underscore error too so we need to create
this div and we'll create it underneath our log and heading underneath here.
So I'll just scroll down and look for Here's the log in heading.
And it appears we already have it.
I just remembered from the registration page so we don't even need to worry about that.
It's in the right location as well so that's really done for us.