Part 7a

Build the sign in, register and forgot password forms in HTML and Bootstrap.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We make the three account forms the site needs. This part is the HTML and Bootstrap only; Part 7b makes them work with PHP and the database. In this part: 0:18 What the forms are for 1:07 Creating account.php from the existing template 3:58 The sign in form, and the GET and POST methods 6:59 Email and password fields with labels 10:44 The submit button 12:10 Links to forgot password and register 14:46 The forgot password page 16:41 The register page: name, email and password fields 19:20 A terms checkbox 21:55 Centring the form with Bootstrap flex classes Software: Adobe Dreamweaver, UwAmp, HTML, Bootstrap.

Transcript

Welcome back. In our previous sessions then, we have gone through setting up UwAmp,
setting up our database, and creating the basic HTML of our site.
In our last session, we should have gone through some JavaScript to add in some
advanced features as an image slider.
In today's session, we're going to look at logging in to our library system.
We're going to start by creating our HTML form to submit to our PHP
server that will query our MySQL database.
If all the credentials match, we'll then redirect the user to a logged in page,
creating session item along the way to make sure we know they're logged in.
If they aren't logged in, we're going to redirect them back to the login page with
an error message.
Alongside this, we're going to create a sign up function so that if the user doesn't
exist in the database, they can join as a standard user.
Let's begin.
Okay, so I jumped back onto my student machine here and as you can see, I'm on
Parkwood Vale's website on the accounts page.
If I reload it very quickly, you can see that it starts off with the same header
information, same information based around this image slider, and then just below,
we have our form. Now, I should say at this point, if you know how to build a form,
if you're happy to build your form, you don't need to watch this video.
That's all we're going to be doing is creating our forms.
Very simple, but there's going to be a part B video that goes to all the PHP
technicality side of things. What I'm going to do then is I'm going to go back to
mine and as you can see here's my version.
If I click on to account at the moment it crashes there is no account page so I need
to go in and create that. I'm going to load up Dreamweaver.
I've already loaded UwAmp and let's get into it then.
So on the side here I'm just going to minimize these for a second just to make it a
little bit easier. It reloads my last open file which was the
last time. I'm going to close these off and I'm going to create a new file.
It is going to be called account, or it would be called account if it didn't decide
to rename itself,
.php because it will be a PHP file.
Now, when I open up account.php, it already has some pre-tags in place.
I'm just going to delete it and connect to my testing server just to make sure that
everything
To start with, what I want to do essentially is recreate part of my
homepage. So I want it to look like this to start with at the top here looking
exactly the same. So what I'm going to do is I'm going to open up my index page
here. I'm going to highlight this top section, which I think takes my header
information. And I'm going to go all the way down to where it says end gallery.
I'm going to highlight all of this section here, copy it, paste it, save it.
Now, that's not going to function at the moment because I also need to go back in
and take my end div tags and my footer element, copy it,
paste it, and put that there. So, everything should line up now.
And when I refresh and re-check that page, let's
go on to account and just put it to my test server.
refresh that page i get the basic elements in place it has the same feel
as my not browse book sorry home page but it hasn't got the form elements
that we see here on the Parkwood Vale site here so i'm going to get rid of i
can leave that one there for a second actually just so we can see what we're
comparing against and i'm going to go in to start creating my form so let's start
with my normal add or say login form
element and I'm going to end my login form
and let's just keep the capitalization where I've got it previously there
we go so this is where my form element is going to sit right now if I was to just
because I've been missing some elements of style.
First thing I need to do is put it into its own div.
It's going to be a class and my class for it is going to be equal to
padding for just to make sure that I got enough padding space around it so that it
looks as I expect it to.
From there then I'm going to add in a form tag and
what my form tag does is it takes several different options.
First one being the action. The action is going to be where are we going to send and
process our form to. So I'm going to put in full stop to make sure that it starts
from our current page forward slash and then I'm going to put in sign in
as my page that I'm going to
send it to.
From there then, what I'm going to do is say the method, how it's going to process
its information, what it's going to do is go into post that information.
So I have the options to do a delete method, a get method, a post
method, or a put method. Delete is generally reserved for deletion of different
elements within PHP.
Get methods are what goes in the very top URL.
So if you had a URL in place, account, and then you had a question mark, and
then you said id equals cpd
.jjones, this information here would be in the get string
that is visible to everybody.
The put method is similar to the post method we're going to use.
The put is generally used for updating.
I'm going to say post it
and in there then that will be my basic elements.
I will put in an ID for it so that I know which form it's working with.
I can call it signIn and I'm going to end that form and end that form tag.
Now my sign-in page doesn't actually exist, but what would happen is if I
was to put something in here and post that to that page, I'd be able to receive it
on PHP and make any alterations or use that data in any way.
And I'll show you what I mean by that as soon as we've added some information in.
now bootstrap which is the css library we're using in the background has already got
some pre-built in css stylings for handling our forms
i'm going to put in a div class to start with and it is going to be of type
form and it's outline
and I'm going to put a margin border of four in place.
Now this here is a pre-set of styling within Bootstrap CSS.
I'm going to give it a input field.
The input field is going to be of type and again we have several of these.
We're going for email this time around.
It will contain some very basic JavaScript to check that an
correctly. I have to name it, which is what allows me to catch it the other end in
PHP. So I'm going to name it sensibly email.
I'm then going to add in an ID for it.
So if I needed to attach it in any way in JavaScript, I can.
And I'm going to say email input.
And then I'm going to give it a class.
So it has a bit of CSS applied to it.
and the class is going to be, if I can just get that right, form
-control.
Now, with that in place, then I can finish that off.
And as an input type, it doesn't need an end tag.
It just has a forward slash to end it.
I'm going to provide a label to it.
And my label is going to be a class of form label.
again pre-set up in bootstrap to be able to stylize it it's going to be
for my email input so that's where it's
linking between these two sections here the id is the for id in this element here
and i'm just going to say that my label is email address
and let's just check that in as a capital element there.
Now, if I save this page and put this page and refresh this
for a second, we'll see that that appears and it's got email address underneath it
in the same way that we have within Parkwood Vale here.
It's got the margin at the top there, it's got that section in place.
It's all ready to go. I'm going to go back.
I'm going to repeat the process.
I'm going to be lazy when I repeat this process.
I'm just going to simply highlight, copy, paste, and then update some elements.
Actually, I copy and pasted way too much though.
We don't need to highlight all of that.
And all that there, all I really need to do is this part right here
and paste that there. So both inputs are within our form
section, so they can both be accessed by our form.
they are set up we have an email type here so this type here is actually going to be
a password which will automatically hide it from users when you type in it if i just
jump back here i can show you email doesn't hide the information i'll show you
password as soon as we finish this action here so name is going to be password id is
going to be password input
and the for is going to be password input
and the label is just simply going to be password.
Save that and if I put that and refresh, you now get email and password.
And as I said, type anything you can see it.
I can type anything I can't see it, but the little I symbol appears that allows me
to see what I've typed. So I've got so far these elements in place here.
My next step is simply my button to end it, my button to submit what I have done.
So in my form here then I'm going to put in another input and at this point we're
going to do a simple input where its type is going to be submit.
Now within there then I can still add some classes to this so the class for my
submit is going to be a button so btn it's going to be a primary button so i'm going
to put it in primary and
it's going to be a btn block to show it in nice block
elements within it i can put in a margin at the bottom of it by four as well
and that if i finish
that off there like that
should, when I put it,
give me my submit button.
And there it is. It just simply says submit.
I know on here it says sign in.
We'll adjust that later on, but here we've got a basic setup.
If I click on submit now, what it will do is try to post whatever's in here to my
sign in page, which comes up and says, I can't find that page because I haven't
created it yet. That's what
I forgotten password, not a member register options down the bottom here.
These will come out of our form.
There is no need for these to be within our form, so I'm going to take them outside
of there. I'm going to put in, again, another div here.
So I'm going to go outside of this div entire.
No, I'm not. I'm going to stay in this div here.
And all I'm going to do is give it its own
class equals row.
Close that off for that in place.
Now with that in place there I'm going to do another div.
I say class equals and to start with I want it to have
text center because I want it in the center of my screen.
I got those two elements in place there then.
href which will take them to the forgotten password page so it's going to be
for got
password and the element for it is going to say forgot
password question mark nice and simple underneath
that then I'm going to put in a new element again it's going to be another a href
and this time around it's going to be sent to register so I'll do for start
register close that off and put in register
so that will put in place my ability to link to different pages
so I put that up refresh it and we can see how it looks now they're on the same
line here and if I go back to Parkwood Vale they're not on the same line and I've
actually got a bit of a message for my register option.
To do that, what I've done is simply put this element in a paragraph tag, and I want
that paragraph to be at the end of this.
And here I've said, not a member, question
mark, and then I have my register.
If I post that and refresh my page, it comes up looking like that, which
pretty much looks like that. Again, a little bit different styling
my container width on this and I have used a different font but the styling
is there the text is there and if I click onto any of these they all crash because I
haven't created those pages yet
so that's created my form if I go back to here a second and go forgot password it's
very simple very similar to what I've got so I'm going to use the old-fashioned save
as trick and to save as this is going to be saving as for my register forgot
password sorry forgot password dot php
make sure that it's on all documents save it there we go and then if i refresh here
let's cancel that a second i'm on local view forgot password dot php it is there
it's not showing on my side here for some reason yes refresh that there we go and
now it has forgot password has appeared.
It wants to put these up. It wants to get those down.
I'm going to say okay to those elements there.
So that's all in place. So this is my forgot password.
My forgot password, my form for it down here, I'm going to say
forgot password form capital P.
Just grab that there. Put it there so I know what I'm doing.
this time around though i don't need the password box so i simply delete that
and i don't want to send it to sign in i want to send it to password reset
so that's there in place the form isn't going to be sign in it's going to be forgot
password
but email input still the same email name is still the same submit buttons still the
same
on Parkwood Vale, I deleted those elements at the bottom there, but I can leave
them there. It won't make much difference.
If I save that and just put that for a second.
Now on here, if I click on forgot password, it takes me to the forgot password
element. I got the register button, which still crashes.
What did we have on register? Let's go back and find out.
We have our first name, last name, email, password, and repeating our password and
terms and conditions
we're gonna do the same process again I'm gonna close this one I'm gonna close index
I don't need that anymore I'm gonna use my account because it's already got a
password element in place for me and all I'm going to do is save as register
now that automatically picked up the PHP because I forgot to put that in place which
is quite lucky so that's got all of these elements in place I do want to have my
form in place with let's see it's not a list register now and
register get rid of those let's change that to register
user can't use register because we've already got that set up here it's not a sign
-in form anymore it's a register form and that's set up there email inputs write
emails their passwords write passwords there we do need our password twice So I'm
going to copy that there. I'm going to paste it there.
Call it password repeat.
And the name is going to be password repeat as well.
And the input is for password repeat input.
The label is for password repeat input.
Password repeat just simply there.
So the user knows they have to repeat their password.
Should be common practice for people these days.
They're well versed in entering passwords.
just done very quickly is copied the email address element and I'm going to change
this up so the type is no longer email it is going to be type of text and again same
here type of text the name is going to be for name and the
link here would be surname and the ID would be for name input surname
input and as you can see all I'm really doing is going through and adjusting these
elements so that they match all the way through.
So that if I need to use them, if I need to reference them in any way, I can do and
I've got them all in place. Email address here is going to change and I'm going to
put in first name. Now you might think why if I change from forename to first name?
I don't like to put first underscore name.
I don't want to camel case it.
Forename is a nice easy way of encapsulating first name.
And do the same here with last name and the same logic.
Rather than have in surname written in the box there it's nice to see last name but
that encapsulates it quite nicely that's my register page and if i go to my register
page and put that what i should be able to do now is go into here and refresh my
register and i've got those elements in place the only element i haven't got is that
tick box that allows me to say whether they've accepted terms and conditions or not.
So it was nice to have as a final little feature.
So I'm going to put that in place.
So I will stay inside my form for this and it will be above my div here.
What I'm going to do is put in a simple div tag and it is again going to be the same
sort of classes as the rest of these.
So actually I'm going to cheat and copy and paste that.
and there they are now the input type here is going to be a type of
checkbox
and i do need to slightly remove that because the type isn't a password repeat
the type is password the input there is checkbox and i'm going to put in place the
value for this
to start with being nothing.
Now to start it I want it to be checked already so I'm going to use the option that
says checked which means that it has been checked.
Sometimes people like to put in checked like that just so that it's there.
It doesn't really benefit of anything so I don't bother.
I simply put it in as checked there.
Now I need to change these names these different bits
going to be instead of repeat password it's going to be terms
and the ID is going to be terms
and as I go through here it's going to be for terms
so they're all in place there now my text isn't going to work in the same
sort of way here for my label what I'm gonna have is in place the
text I have read
and agreed to the terms. There we go.
And when I save that and put that up and refresh it,
we get this big long input box.
Not quite what we want in place.
We need to change up the CSS for this from our form control to make sure it's how we
want it to look. We want it to be a form type of check this time around because
that's what it is and it is going to be a check input.
Now again I'm going to do a margin of two elements here to put that in place.
I'm going to save it, put it and let's refresh it and there we go.
Now the only real difference is it's in the centre of the screen here and it's got
the terms and conditions linked within
Parkwood Vale's actual site. So on my form class here, I'm going to
set this up to have a type of flex to it, a deflex.
And from there, I'm going to justify the content to the center.
And that should allow it, if I put that,
to be centered on my screen.
The main difference being, I haven't got the terms and conditions element here.
That would be an ahref here.
Ahref equals
and then where it is you want to put it.
So, end that a tag and it was simply hrefed to the terms page.
So, terms. Save that.
I didn't put it. Let's put it.
Refresh it. And there we go.
Our signup system from account.
We can sign in. Forgot password.
We can do this element. Register.
We can do this element. And they all submit to their own pages that haven't been
created yet. In the next video, in part two, you're going to go through the
PHP side of things and see how all of that links together, how we query the database
and how we bring that information back.
But that is setting up our three different forms to do our different elements of
registering, logging in and resetting passwords if need be.
Thank you for watching.