Part 9

Build the profile page: show and update the user's details and upload a profile picture.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We add the update part of CRUD (create, read, update, delete). Signed in users can see and change their own details and upload a profile picture. In this part: 0:00 CRUD, and what the profile page needs 2:36 Selecting the signed in user's details 7:00 Checking the result and reading it into variables 12:07 The profile page layout with Bootstrap 15:00 A form filled in from the database 19:11 Showing loan tokens without letting users edit them 31:02 Sending the form to update_account.php 34:33 Showing the profile picture, or a default if there isn't one 39:05 Adding a file upload to the form 40:25 Saving the changes with an UPDATE query 54:42 Saving the uploaded picture Software: Adobe Dreamweaver, UwAmp, HeidiSQL, PHP, MySQL, Bootstrap.

Transcript

Okay, so second video for today then and in this video we're going to be looking at
some CRUD functionality. So CRUD is a technical term given to PHP development.
It stands for Create, Read, Update, Delete.
And we're going to be looking at those sort of functionality around the profile side
of our pages. We're getting very close to the side of completing our basic
functionality within our website.
We're going to look at creating our profile today and part of that is going to be
uploading a file from our users documents
Into the website of things so a profile image or something along those regards
Okay, let's get into it
Okay, so here I am back in my student account and as you can see I've already logged
in Parkwood Vale as my admin account and brought up the profile page.
You can see from my profile page then that unlike my copy, I have my
profile image, my email address, which is a non-editable field, the heading for my
profile settings, and then a form that will allow me to edit and put in all the
information directly from my database.
So what it's done here is a key element towards our CRUD system.
So we've created when we created our account last session.
We've read the information from our database into this section here and this will
allow us to update our information as well.
The only thing that's missing from that CRUD element is the delete function.
To get hours looking more like this then, what we need to do is edit this account
page.
So here I am in my Dreamweaver session.
I have my account page open and I've got in place my
if my session was empty it took me back to my login page otherwise it brings me
through and connects using my header header.php for my information
what i'm going to do next then is
query the database to get some more information out than i currently have
because as you can see at the moment i've got my email address my phone name and my
surname on whether or not i'm an admin whereas on the Parkwood Vale side of things
we have our email address our phone name and surname the address details of our user
and the profile page their profile image so we
need to get some more of that information out and the way we're going to do that it
is with another simple MySQL query after that include section
here so I include header does include that require section to get my connection in
place so I can dive straight into doing my SQL.
My SQL in this case then is going to be again a select statement but this time I
want to select everything from my table missing out the password side
of things so we don't want to show the password at any point.
So I'm going to bring back email, I want forename, I want surname,
I also want the address details let's just double check what
I've called it in my database by going into Heidi and opening
up my database connection in my users detail then in my
users table I've called it street town and postcode so let's put that in place then
so I want street town and postcode
from that section there I also want to know whether
and i've included these loan tokens so we're going to show those as well so i'm
going to say is admin and did i just call it and it is
loan tokens
now that's what i want to select i need to tell it where it can find that so from
and let's capitalize that nice and clear and i'm going to say users because that is
the table that's storing that information just again in here it is my users table
and we need to put a query in place so i say where that should be a capital where
and i'm going to say email is equal to
and again i'm wrapping these single quotes in place and i'm going to
concatenate inside of there my session details this time around because we're not
posting anything to this so i need to grab it my session.
In my session, I'm going to use the email function there to bring that back.
Now, if I was to save that in place and put that for my account
page, so I've got to remember I've put the right one up, put that up in place there
and just simply refresh this page then, nothing has happened.
Nothing has changed because I wanted to print MySQL as well.
R and just put in my SQL statement
and then save that and put that in place.
Now, when I refresh it this time, I do get that SQL statement.
It's up here out of where my other elements are because in Dreamweaver, my
other print was done here. But that does give me exactly what my query should be.
And if I take that query into the query section over here, and I run that query
and it tells me I've missed both street somewhere let's
see
street name that's why okay so let's go back into here then it's not a street it's
street name and that shows that importance of having the same
element in both sections and email didn't pull through the
email and I can run that and
with Heidi because it allows me to pull back and check my SQL as I'm going along.
So now I can take that. I know it works.
It's brought my one user there.
I can take it back into here and just replace that section.
So all of that set up, I've got my SQL.
I don't really want to print it there.
That's just so I can check how it was running.
What I want to do instead is do my connection,
dollar sign then and i'm going to say result for where to store the result of my
query
equals and i'm going to say simply connection
run query and my query is my sql
just like we used when we were writing our sign in function
so it's the same sort of principle and just like with our sign in function I want to
check to make sure that it's brought back a result I'm going to say if dollar sign
result
and I'm going to say num rows like I did on our login I say doesn't
equal one
then I want it to take us back to our header page so if it's done a query if it's
tried to do it if
information and it's found more than one record more than one row something has gone
wrong in my database send me back to my login page otherwise so you can say down
here else and then I'm gonna loop through to populate the different variables
as I want to use them to design my form so I'm gonna say while
and I'm gonna put in my while loop I've capitalized the W there that's why it's
knock on blue. I'm going to say while dollar sign row
equals result.
And I want to, in this case, fetch the
associated files.
So it gets the association names as well.
So I can easily reference them.
Then I'm going to loop through here and create variables for these different
elements to make it easier for me to display them so what I'm going to do is paste
them there and simply give them all their own line and their own space
now how you decide to do this is completely up to you there is no easy simple way to
do it it is a little bit of manual editing what is admin
and put that in place there on some IDEs and actually on this one it's even
allowing
use the control key bottom left hand corner of my keyboard what I can do is I can
target and do several things all at once.
So I've gone and I put a dollar sign in at the start of all of those to create them
all as variables press the end key on my keyboard and then I'm going to say equals
and they're all going to start with dollar sign row because they're referencing our
row array created up here.
Now the values inside these are all going to be relevant to the values we've called
here. So let's see if we can use a small cheat again.
I'm using the control key. I'm going to copy all of those and control key to
click into all of these elements and paste and that didn't allow it to work.
No mind. Sometimes you win some, sometimes you lose.
Let's just manually copy these over there.
Now I'm putting these in place and I already know I've made a slight mistake.
I'm going to go back and rectify that in a second and that is simply that I need to
wrap all of these in a single quotation so that it knows that they are the
values. If I double click to highlight them then put it in single quotation and it
will pick up quite nicely and put that in place for me.
Make sure you press the right key.
Now as I've done all of this all I'm doing is taking that information from my
database and I'm checking if there's only one of them and then storing the values
it's given me in separate variables so that I can pre-populate these different
sections with that variable information.
Now if I save this page put this page back up and refresh this
page what I get is a couple of different errors it's not quite happy with line 11 or
line 13 see what's on line 11 then if results num row doesn't equal one
and undo that there
result does help if i spell it the same and then it said line 13 that shouldn't give
me an error now let's put that up and just put this refresh this no errors
perfect exactly as i'd expect it to be.
I am going to go back over here in Dreamweaver.
I'm going to scroll down and I'm going to go to my print section by here where I'm
printing my session data. I no longer want to print my session data.
I'm going to get rid of that section there.
I'm just going to show you that if I now echo dollar sign email and I'm going to say
as one section there, I'm going to copy that line paste it a couple of times
echo for name and echo surname save that
and put that up when I now refresh this I get that information
from my variables directly from my database so I'm pulling that
information through using that CRUD functionality using that retrieve that second
section of the CRUD element to pull the information from my database.
Now I have that in place I just need to design and I've actually forgotten one there
actually let me see if it's in my database see if I haven't forgotten it there as
well. I have perhaps I can do this a different way though.
What I'm going to do here then is I'm going to put my profile picture my profile
page together.
I have my background in place my section there to start with and then I'm going to
go in and put in a
now I'm gonna put in a div for my class equals and
in speech marks and I'm gonna say container and it's gonna be a rounded
container and I'm gonna say that the background is simply gonna be white
and that there's gonna be a margin on the bottom of this to space it out which is a
margin of five and everything I'm doing with my form there is going to be inside
of this section here.
I'm then going to split this into two sections because I want a row.
So div class row to be able to
have my different sections.
Taking up one third of my page.
So div class, I'm going to say simply, uh, to
start with at least call
three, taking up a third of my page is going to be my profile picture.
Taking up the other remaining four thirds of my page, because remember it's all
split by 12, are going to be my details.
And if I save that and I put that up for a second,
nothing's changed. I haven't actually given it anything to display, so I'm not
surprised that nothing there has changed.
I'm going to ignore
focus on this side because this is the easiest side to set up and we have our
profile setting as our title.
So over on this side here then I'm going to put in my heading section and this is
just simply on my setup as a H4 and I'm going to put in profile
and settings.
Now with that in place underneath that section there I'm going to create my form
and my form action is going
to be in place for a second I'm just going to hold that the method is going to be a
post method and I'm gonna give my
form an ID of account
form. Now there's my form in place.
I'm going to start putting in elements within that form of how I want to display
different sections. But if I come back here a second and have a quick look, you can
see that this is in a row of six by six and these are in rows of 12 so that they can
take the full space. So let's check in a div class and it's going to be a row
here. I don't need a set container for it and in this section I'm gonna have div
class call MD6 to give it
half of my space and I'm gonna have a call MD6 as well because that's my first and
up for and surname first and last name elements so let's give those some space
now inside there then I am gonna set up my
label for my in my input boxes.
I'm going to put my label in first this time around so my label appears above it.
The class is simply going to be called labels.
And my label here is going to say first name.
I'm going to do the same process underneath for last name.
And then I'm going to have my input boxes.
So input and the input
as it is just a text type it will be just text it's not password it's
nothing fancy or anything like that and it is going to take a form hyphen
control for its styling now i need
to give it a name the name everywhere else has been for name
so i'm going to stick with for name
and that's going to have my section in place.
If I copy that down here and I put it in place for surname
and that should be the only change I need to make at the moment.
When I push that up and refresh my page,
I now get my elements in place.
But that's far too close to the top of my page there.
I don't have the same sort of spacing that I did there.
is go back to my container after my background color here and I'm
going to put in a div class
equals p-4 and what that is going to create for me and I need to put it at the
bottom of this one as well is a padding of four wrapping around the whole process
so if I do that that should push back to there
and let's just sort out this indentation as well so it's all nice and neat
put that up and let's refresh it and we now have that bit of spacing
it's not perfect inside here yet we are still working we haven't got our margin
there but we have got our spacer on the top
we have our four name set up here with our input boxes for first name and last names
I'm gonna do the same thing here now I'm gonna take another row I'm gonna drop it
below but instead of having call of sixes I'm gonna have calls of 12
and in those 12 sections then I'm gonna have my address details over here I've
called it address line 1 2 and postcode on my database here I've called it street
name town and postcode so for this version I will change this to say street name
and And actually, I can just change that one there.
I'm going to say this is town.
And I need one more of these 12 combinations here for postcode.
And I can save that. When I refresh this page, after
putting that page up,
that will allow me to have these elements in place.
now i did have that section on my database brought back as to whether they're an
admin i also had the tokens in place on Parkwood Vale there's nothing there for
it but if i actually go into the admin section manage users and then find that user
on the manage user edit section i did include a toggle for
whether they're admin or not so i'm going to check that into well i'm
section here because we don't want an individual user to be able to change whether
they're an admin or not. But we do want to display to them what the current token
usage is. So I'm just going to take one of these elements here.
I'm going to put in underneath tokens.
Tokens here. It is going to be a type of text there.
And as well as having all of these, what I'm actually going to do is put it
as disabled.
Now that, if I put that up, should show you over here
tokens that I can't actually interact with or edit.
I can go into these ones, but I can't go into this one.
That's because it's been disabled to the user i am going to replicate this and
change the input type to hidden
for my tokens the input here is going to be tokens and tokens
and i just need to go through and update these so post code i want town
and notice how it's all lowercase and i'm going to call it street
name caramel taste so they're all in place
now that's there the hidden element is what will actually post for
me so I don't want that one to be disabled that allows me to have it in place
and not necessarily show the user how it's editable all of that's
there and it's given me the look of my form my The phone's not quite laid out as
nicely as I like it. So I'm going to scroll back up to this row here.
And on my row, I'm going to add in a padding again.
And I'm going to put in this type of padding of two.
Put that up.
Refresh it.
And there we go. We've got a little bit of spacing around it.
I'm quite happy with a smaller amount of spacing.
I think I give too much on that one.
I'm happy with a smaller setup.
them. The main difference here then is I'm not pre-populating these fields
and I want to pre-populate them.
So the way that I do that is I come along to my input here and I
give my input a value. So I can say value
equals and then in speech marks I
can actually put in a PHP tag and echo out so use the
echo command my variable for forname
and i'm going to take that same line i'm going to copy it to my last name here
and change it from forname to surname i'm going to do the same here so that's the
street name value is street name and
Dreamweaver will try and help you giving you the names of your variables to make it a
little bit easier for you over here then i want this to be town i want this to be
space there and then postcode and over here
i'm going to do the same thing for my disabled value of tokens
or loan tokens as I called them earlier
and I also want to put that let's make sure I grab the whole thing
in my hidden value as well so now when I put that up
and I refresh my page I get my details filled in as you can
see street town and postcode are empty because in my database, street, town, and
postcode are empty. I want to be able to type in what my street is, fill in my town,
my postcode, and hit save on my update save changes button so that it writes
it to my database.
Back in Dreamweaver then, the last part within my form.
It does need to go actually outside of all of these elements here.
Let me just zoom out a second so I can trace this back.
there we have that you'll just have to go to the bottom here then that's not a
problem I'm gonna add in class
label okay let me indent my labels a second to
make sure everything is nice and tidy and
there I have my nine nine I'm gonna take another row then
so down the bottom here that's my nine is that my nine
yes and that's the
let's move my form above that
just so that's there
p there form is there
form needs to go after that one let's get my layout clear in my head there we go
so now what i can actually do down here is put in a div
class and the classes then go into b of
row
and I'm going to do the same thing as a div
class equals call
md 12 and in there
my input
type is going to be submit and
that should be it if i put that up
refresh it my submits there now it's messed things up ever so slightly so let's try
and get this formatting back and get everything right to where i want it to be
so minimize that using that arrow there nice and simple so let's see then where we
to
labels there, there.
do a row there
my form is there
okay could possibly be because i have nothing in here yet so let's just chuck
something in here and h2 uh profile image
just to get started and put that in place and put that up
profile image is there okay
md
Ah, I know I done
Maybe
So that is in my row
That's in my row. That's my column of three, my column of eight.
And then I have a separate row there.
So that's column of eight.
Let's just get it back to the way it was for a second and reset that button.
put that up refresh it and it's back over there okay perfect so that's
where I want it
and let's trace this through then so div column nine is fine that's
fine
I just want to move my form to be there.
Save it, put it up and let's see if it's
moved it over there.
Let's leave the form there then.
And then down here.
put that up
right that's that that's fine
it's that row there that's fine below underneath that's the row for my
first name and surname as it should be that's that section there
let's take my form outside of that section
let's take my form here outside of that
section save it and put that up
nope second move that form it doesn't like it you leave it there for a second And
CY.
Let's go inspect.
Container.
Okay, so there's my form.
my call md3 is not being picked up because i don't think it's got any content
so we will leave it as it is and we'll come back to it and see if it works and
shifts over when i want it to so that's all in place where i want it to be right now
let's re-enable these elements or really expand these put another row
in div class row.
I want a div class.
I'm going to call this one call
MD 12.
So it fills up the whole page.
And then inside this one is where my input type
submit will go and I can say no
I
did this button on there and I'm just gonna leave it like that for a second and put
that up so I have my submit button I do need to
bring this down ever so often so I'm gonna say P
one
and refresh that so let's brought that down a little bit like click submit nothing
happens because I haven't told it where to post it or anything like that I need to
give it a page to go to in my form and let's re-expand that form
action is going to be my main page and I'm going to say update account
and save that. Now when I push that and
refresh continue now if I submit this it tries to go to update account that
doesn't exist exactly as I expect it to be.
I don't want to resubmit the form and let's just get back into my site.
So I can now put these details in place and I can have it post that information into
my form. The only thing that's missing, the only thing I haven't included yet is my
profile picture section. Now in my profile picture section, I did want to put in
place my email address. So I can just simply here, put in my PHP tag,
echo out dollar sign email so that the user can see
link to this account and if i refresh that then
it's not showing me anything because i forgot to press the put button if i refresh
this i get my email account at the top here
i didn't want it at the top i want it next to it so let's have a look and see what's
going on with my inspect now we have some content in there and i've got my p row
there my form there as expected
calls calls tell you what i'm missing a row inside my form
i need to tell it to put a div class row in place
and then all of this information so that there that there
needs to be tabbed over so that they fall
inside my row here which is the row that
belongs to my form.
Save that, put that up and let's refresh it.
And then we have it. It's jumped back to the right place, right where I expected it
to be.
Just missing that one section.
Now I'm going to put in place inside my MD3 section here, my
profile picture for where their profile should be displayed.
I'm going to put it above that section and it's simply going to be an image and its
source is going to be a source that is relevant to where my current section is.
I'm going to go into my images folder and I have a profile pics folder and I have a
base profile pic to start with.
I'm going to say here, so source is equal to, and
let's just use the browser to make it easier, images, I want profile
pics and then I'm going to attach something to the end of it.
In this section then, I'm going to include some PHP to echo
the user's email.
And I wanted it to be the dollar sign email.
So let's get rid of all those help guides.
It does help, but not when it's in the way.
And I want to end it with .png.
So if I save that and find my account page, put that
up and refresh it,
a nice lovely warning telling me that I don't have a profile picture.
That's perfectly fine. We haven't set one yet.
We need to put that in place. But what I can actually do is check to see if my email
picture exists. And if not, instead, I want to put in place
my base profile image. So what I'm going to do here is include a piece of PHP.
I'm going to say if, and this is where I want to check if the file actually
exists.
So I'm going to use the php file exists command.
So I'm going to go into my browser.
I'm going to check because it's always good to reference back.
php file exists to check if my file exists.
and I want to see quite simply file exists.
So I'm going to say in here if file underscore exists
and the file I want to check if it exists is my PNG
for my picture. If my file exists, then
I want to go down to my next line.
Otherwise, I want to display something different.
So I'm going to break out of PHP here.
I've got my file exists. If my file does exist, so I know it's there, I'm going to
use the image command for my picture and put that in place there.
I need to come back into PHP,
finish off my bracket, my curly bracket for my if,
and I'm going to say else. So if that file doesn't exist, that's when I wanted to do
this section here and again and the PHP but I want to break out of PHP
here and restart PHP on this side
so if it doesn't exist my picture
is going to be in my pictures folder and it is going to be the
base dot jpg if i save that
and put that up i should now be able to refresh
and have my base picture
slightly oversized so i need to go down to here on the image tag set that width
equal to i'm going to say 50 i'm going to do the same thing on
the actual picture that they could possibly use as well so that both of my pictures
or all of my pictures aren't massively proportioned to the rest of
my page.
Now if I put that up and refresh the page you'll see how that is
laid out. It doesn't quite reflect this directly at the moment but it's extremely
close to it.
There's my form set up with my submit button.
I'm going to change the value of my submit button to changes and change the styling
on it ever so slightly as well so over here i'm going to have a look i'm going to
put in place my different style elements and what i want is for my button to be a
class of btn and it is going to be a btn primary
so it's a button primary and i'm going to say that its
value should be and it's simply save profile
now I save that and I
put that up I refresh my page and now it says save profile and
it looks a lot more appealing so I got my section set up here and I've got my save
so when I go into the it pushes through to this section there is one last thing we
need in relation to our picture uploading element.
And the way that we're going to do that is our form itself is going to be
a type of multipart form.
And what that means is that our form will allow us to
upload multi-part elements. So I want a HTML multi
-part form.
and our multi-part form then is
not the page I wanted let's see w3 schools that's the one I wanted
our multi-part form should allow us to
not multi-staff I want to upload file upload
perhaps I don't need for multi-part anymore
So that's in place then and there's our form created.
Ready for our PHP side of things.
What I'm going to do there is take a short break and I'll come back to you in two
seconds time with the next step where we update our profile element.
Okay, so part two, what we're going to do in this section is take the data that
we've taken from our database here, process it and update our table with it.
So I've said that in my form, it's going to go to update account.
Update account doesn't exist. And if I try and fill it in and submit it, update
account gives me an error. I need to create that file,
update account.php. Again, we are working with PHP files and I'm
going to open up my update account.
First thing, get rid of all of those elements.
Second thing, jump into sign in and let's keep some of these elements we've done
previously.
Now we are going to include our connection.
We should also still include our elements of our array management to make sure that
we are putting in our error detection.
I'm not going to go through that each time with you.
I'm going to leave you to put that in place.
I'm going to jump straight into the SQL and updating our connection and redirecting
us back to the right place. If I go through and put the error detection in on every
single session with you,
of it too it's going to take up so much time just put in our error detection make
sure you're checking for empty elements put them in errors and catching the errors
and send them back if there are errors on that page so in here then I've included my
connection I would do my error testing so ensure you include
error testing just as a reminder and I'm going to put
in place my dollar sign SQL command.
My SQL command is going to be an update command.
It's going to update the users table.
It's going to set different properties.
Now I'm going to say that set and I this is where it's going to be important to be
able to concatenate things to make it easier to understand.
I'm going to say set for name equals
and I want a single quotes and inside here
I want to grab my post information so dollar sign and it's got post
and I want to check to see what the for name they've entered is now
it might be that they haven't changed the value in for name but we still
need to make sure we're grabbing everything we
going to do the same with surname i'm going to do the same with the same thing then
with street name town and postcode so street name town and postcode
and i want to set well token loan tokens we don't
actually need to update that but i'm going to put it in place anyway so surname
equals
sorry street name and actually I will put postcode here
just to show that they don't have to be in order and town and
I'm gonna say loan tokens and again
these are all based off of the values that they should have been given to us as so
I should be able to put this in place the only one that has any difference because I
don't think there was a capital seam postcode now I've got that in place I'm going
to terminate that and that's my element my update command set for name equals that
the only thing I do need to include is after each of these I'm not going to
show I'm gonna check that actually whether I need to have a comma between them or
not I'm gonna echo out from here then dollar sign SQL just to see what we're getting
and let's go on to count
put that up on here then James Jones I'm gonna say streets I can say one two
three fake street because I'm original like that town my town and
postcode CF 55 6th save profile and it's brought me
here it's giving me some bits and pieces it's also giving me an error on line 15
line 15 loan tokens then equals did to does it tell
me more about my error update users set for name surname
one two three there we go town loan tokens there okay loan tokens
didn't come through with anything from there we'll have a look at that in a second I
do want to space these out a little bit give myself a bit more
readability and account here
I think I just called it I called it capital no I just called it tokens there let's
keep it loan tokens and
where are we to I want the account page put that up
hit that back button refresh the page to make sure it's gone through and let's
go one two three fake street my town there we go thank you very much for the
autofill still not happy with that there but it has hasn't given me the spaced out
either see account settings save that let's put that and
refresh yes put that in place okay getting somewhere and then
identified index loan tokens if i remember rightly i've just done that as
capital L for loan tokens there should be
loan tokens not tokes we're not
abbreviating go like that continue there we go loan tokens but loan tokens
wasn't sent and now click
in the input type hidden the name is
tokens
So that still would have caught me a cropper.
Let's check that up there.
Refresh this page a few times and send that bad boy through.
Perfect. Right. I'm going to take this, copy it into here.
I'm going to paste it and straight away it's going to shout at me if it's wrong.
And say, oh, yes, that's a very valid point.
I'm trying to run an update here without telling it which row to update.
So if I actually executed that and there wasn't any issues here in my settings It
would apply the same details for everyone in my database.
I need to put a where in place email
This time running is a simply email equals CPD at mr.
Jay Jones dot code at UK and Now I can run that and see if it shouts at me It does
show to me it does want a comma after each of these values I believe.
Chuck it in, see what happens.
Now run it.
Postcode, dated too long for postcode.
It shouldn't have the space.
Happy days. That's gone through by refresh here.
It's updated these. Let's check them back to null load just so we can see them
working from our PHP side of things.
So over here, what I'm gonna do is go
to first of all include that semicolon no comma comma
comma comma comma comma
postcode then as you saw two seconds ago we had that empty space
within our postcode that it didn't like it doesn't like this space here
so I'm gonna look check I reckon there's a trim function PHP remove
spaces and if I trim PHP there
move trim method it's just simply the trim method that's
getting rid of a space at the end of it I don't want to do a space in the middle of
it I want to do a spin to get rid of all the spaces so it wouldn't necessarily be
trim I want to say PHP remove spaces from string and I can use
the string replace function so over on here then what I'm gonna do is say I want a
string underscore replace and what I'm gonna do is just check it
it's what I'm looking for what I want to replace it with and where I could possibly
find it three parameters in my string replace function first one what I'm looking
for a space Now, just because of the size of this here, it does sort of make it a
little bit more difficult. You can see if I go like that.
String replace a space with nothing from my postcode.
That will get rid of that space in postcode and hopefully bring it back down in
size.
I still have that one last error, though.
And I've got this comma here. That's a reminder to me to put in a fix for that last
error. I want to concatenate the last part of this then, which would be a space, and
say, where.
And in this instance, I'm going to say email equals
and I'm going to join
to it. Let me put in my semicolons and do it the proper way.
Don't be lazy. Join to it dollar sign underscore session
and I want it to be email. So I can update my details.
I can't hijack and update somebody else's.
We'll do an update for an admin side of things a little bit later on.
So that's update account details.
Let's put that up and jump back here.
Go back a page, submit it and see what it looks like.
We now have update users set, for name James, surname Jones, street 123 fake street,
postcode incorrect. All these details there.
notice it is now only five characters.
It has trimmed out that space for me where my email is in place.
Now, once I've done that, I don't necessarily need to echo it.
All I need to do is my connection dot.
No, sorry, not dot. I want to query and run the SQL
query.
and then I want to redirect them back to the header.
So I'm going to use my sign-in page.
I'm just going to steal my header location for account and drop that there, header
location account.
And what that will do is it will create my query, execute my query, and then
redirect me back to my page. Now, it could be nice to have an updated account
element, but realistically, we should be able to see that's happened.
So if I was to load this a second, it's pulled that information in from the database
and it's empty. Pre-populate it, save it, and now it's loaded it in without my space
in my postcode. So I can see that it has applied it.
Let's just have a quick look while I'm thinking about it.
PHP upper function and str2
upper. Perfect. That would be lovely.
So in here, I've got my string replace.
I also want to put an str to upper function in place around
it, which will take all of the text then and turn it to uppercase.
Was it all one word? Yes. Let's save it.
Let's put it and let's submit it.
And now it's capitalized it for me.
So let's put that in place and I can save that information.
Nice and simple I can log into my account I can update my details and I have my
profile picture on show.
What I'm going to do next then without going into the admin side of things I'm going
to show you how to create a upload point for a picture using a multi-part form.
It's going to be very similar to what we've done here I'm going to keep this details
and then actually going to just use this form as part of it and up where our form
action is up here I'm add in an element to make it a multi-part form
and deep to deep to deep
let me just double-check I want a HTML
multi-part HTML image
upload and
w3 schools straightaway here it's got the action there simple I don't want that I
want a multi-part form data.
And it was the enc type, the encryption type was what I wanted.
So I'm going to drop in alongside this, the encryption type from multi-part form
data. And if I upload my account then back to here,
it will not impact the way this works at all at the moment.
If I add in some elements, it's all exactly the same.
I can remove that element and it still works the same.
My form doesn't get impacted. But what I want to do instead now
is jump back into Dreamweaver and where my file
is, I want to put an upload point for a file.
so I got my email address I'm gonna put in input my type is
simply gonna be a file its name is going to be
profile image
and I'm gonna leave it like that now if I
up that element and refresh this page now I can choose a file I can choose any
file I like and it tells me the name of the file there.
If I come back into my update account section then what I can do in the update
account section is check to see if my image has been uploaded.
Now there is my text in place and there is that section all from my
data upload. I'm going to come down here and move my head and redirect ever so
slightly and I'm going to check if is set and what I want to know if something is
set is my underscore file this time around rather than being
my previous post elements it's my files section and if it
is I just simply want to print underscore r to start with as
always to see what's currently being stored inside files
I'm going to say otherwise else then redirect
so if I post a picture it should fall into this cache and print out
everything inside files
so let's give it a go refresh it choose a picture I'm going to go for the outside
picture save it and it's come back here it's not redirecting me
Let's have a look at what's going on with my files and delay.
I think I know what's going on with my files actually.
Let's bring this back a second.
Let's see if I'm right first. I don't think I put that up as I should have done.
And let's refresh, choose, outside,
and save. I didn't. As always, I forgot to upload it.
So as you can see here then, I have a new array.
The array has the name profile image and inside that profile image has the name of
the file that I've been given outside dot PNG
It's type. It's a type of PNG and The temporary name or temporary location
for where it is. It also contains its size
Now what I can do when I have this so I've got all of this information here is I can
actually set my file name so I say dollar sign and let's go file name equals and
set it to what I want it to be and I actually want my file name in this occasion to
be my email address so I say dollar sign email and I want to
concatenate onto the end of it dot png now
aside from that then what I want to do is tell it to move it so I'm gonna say it's
location and is going to be equal to and it is
my image folder forward slash and let's expand that out so I
can double check my spellings profile pics forward
slash and then at the end of it there I'm gonna put in dollar sign file
name so what it's gonna take it's my email address and this year and
actually I don't want to always lock it to a PNG not at this stage we could possibly
end up with a different type of extension we'll see with that in a second so there's
my location and what I want to do
is move my upload
from its current location so I want to move
upload and I want to say that the uploaded file I want to move is in my file section
and it is called profile pic so if I come back here a
second you can see here it's called profile image sorry so I want that to target the
profile image and what I want to do is move and let's
just double check in the
template so that's a temporary location I want to move that file to its new
location which is simply going to be my dollar sign location
and that should place it in that
location for me given that I've gone through and I'm happy with where it is
and how it's set up so let's save that and
update account post that up here what I'm looking to happen then
is if I refresh this page let's see undefined variable on line
21 which is line 21 email ah
that's why try again save
upload account and now try refreshing it
nothing's changed there but if I go into my USB into my UwAmp
www images profile pics I get a CPD dot
mr.jjones file which has a size to it which is considerably bigger than my
base image I also get a plain PNG from my mistake two seconds ago.
If I open that up, that becomes my outside picture.
So that is there. And if I was to go back to my account page, then
my account picture hasn't picked up, even
though my email address is there and it is a properties.
Let's double check. It is a type of PNG.
What did I say my account page then I said images profile pic
ah I'm checking if an echo works as
nice as that would be that is a mistake and it shouldn't be there is an echo it
doesn't need to have that there I want to see does the profile pic there
dot dot there um file exist
images my email address and profile png now that should work let's refresh that
still not picking that up file exists
image do I need to do that
image profile
fix forward slash and then
whatever my users email is
that should work did I put that up I probably didn't know in me
refresh and And there I am. I've changed.
If I go into here and I change the logo
It's brought me to there and that should
change
What I need to do now is just come back over here a second and
Remove that else so it should upload the pictures Overwrite the picture and then
bring me back
in here then if i go to this picture it is now that picture which is perfectly
fine if i
press the f5 button to refresh the page it will change so it now will change
automatically uh let's go um fred why not let's grab a picture
of a fred images let's go for fred weasley i'm gonna grab his picture
save image as in my downloads as Fred
and that saved it as a JIF file brilliant let's see how it works let's see if
it handles JIF files in here Fred and save page
I'm Fred Weasley no sentence you say very often
and let's go update account push that there and let's just go okay so we
had
Harry Potter Fred. Let's go Harry Potter.
Run.
Stick with the Weasleys. Save image as.
Run.
And I'm going to jump over here.
Choose a picture. Run.
Upload. And my picture changes.
I can now change the picture for my profile for my user as well as filling in the
details. I haven't added any fanciness to it.
I haven't done some of the more advanced elements.
as would have done within actual Parkwood Vale's version,
where I could go like that and have some more prettiness to it.
But the basic details are the same.
And actually, in fact, I don't think that's updated wrong there, but it does update
wrong there. So the prettier elements don't necessarily always work.
I have that functionality in place.
I can see there, I can go to Fred.
It's Fred GIF and upload it and it changes me to Fred.
my name to Fred over here and save that.
Now as I'm saving it, not uploading the picture, it's pretty instantaneous
as to it updating and refreshing itself.
It's happening so quick that I can't actually distinguish the page loading any
differently. So now you should be able to do two elements or three elements within
that CRUD function. Remember it's create, retrieve, update, delete.
We can create something because we've already done a creator in our accounts.
We can retrieve the information as we've done with our form here.
We can update the information as we've done.
We haven't done a delete yet, but we have done a file image upload.
Just to bring that back up then, the file image code was really simple.
I don't need to print files there any longer.
I've got my file name. I've set it to the session email name that I want it to.
I've got my location to put it in.
It's moving it to there, calling it after its file name.
In fact, I could probably make that a smaller piece of code again, just by simply
removing the need for the file name.
And I've got that there. If you really want to nitpick and go really
functionality and really reduce lines it's all done in one
function here move files the current file comma where i want to put
it and then redirect me back to my header page if i go update account and
i show you that i can show you that that still works what are we at the moment we
are currently wrong i want to go back to you being fred and there it is all done
in effectively one but it is quite a long line of code.
So again, you have to put in the error testing.
I'm not showing you individually every single time error testing.
This is a lot of the same functionality that will be in place when it comes to
adding books to our library.
Updating users, updating books, adding books, so inserting in books the details and
moving the pictures to the right place and then redirecting you back.
That's the basis of our transactional website.
As always, any issues, drop me a message, drop me an email, and I'll do my best to
further explain, further
provide details or triage from a distance.
Thank you for watching.