This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The most often used type of browser based persistence is through Forms. Forms allow you to share information from one page to the next. When used to construct a URL, you are able to persisting data over multiple users.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The most often used type of browser
based persistence is through forms.
0:00
Forms allow you to share information
from one page to the next.
0:05
They also allow you to capture user input
0:09
that can then be utilized
by the application.
0:12
This works great if we're going to use
the data to change the content of the next
0:14
page, or to perform some action on
the server, such as sending an email.
0:18
As an added benefit,
when using the get method on a form,
0:23
the constructed URL allows you to
share those results with others,
0:27
persisting data over multiple users.
0:31
We'll be using forms in our
project to accept user input and
0:35
also to tell our game which
word should be requested.
0:38
I'll be using works spaces for
this project, but
0:42
you’re always welcome to down load
the files and work on your own machine.
0:45
Let's get started.
0:49
We'll be starting a simple site that uses
the front in framework both strap for
0:50
design.
0:55
To learn more, so
the note associated with this video.
0:56
This site has three pages, a welcome page,
a game page, and a story page.
0:59
Let's take a look at what
we have in a browser.
1:04
From our welcome page, if we click play,
we are taken to step one of five,
1:07
where we're asked to enter our first word.
1:12
Once we enter a word, And
1:16
click submit,
we can see that the query string is added.
1:21
But we're still on step one of five, and
we'll stay on step one of five forever,
1:24
no matter how many times
we submit the form.
1:29
Let's go back to work spaces and
update the code so
1:32
that we can progress
through all five steps.
1:35
Open play.php.
1:38
At the top of the file,
you see a variable named page.
1:42
This page variable is used to show our
step, and update the hidden form field.
1:46
Once our page reaches a value greater than
the total, we redirect to the story page.
1:51
The first thing we need to do is read the
data from the hidden field named p, and
1:56
update our page variable.
2:01
Always make sure that we
filter incoming data.
2:06
Filter input, INPUT_GET,
2:09
p, FILTER_SANITIZE NUMBER_INT,
2:15
if the page variable is empty,
2:23
Then we still want to
set the page equals one.
2:33
Let's check these changes in the browser.
2:40
This time, we can go through each step of
the forum until finally reaching the story
2:53
at the end.
2:57
Our placeholders are not being
filled in with the user data yet, so
2:58
we still have some work to do, but
let's take a closer look at the form.
3:01
We don't actually need to use
a form to submit a get request.
3:05
We can just enter the query
string directly into the browser.
3:09
We don't need to worry about
re-submitting a form and
3:16
we can easily jump around to different
steps by changing our query string.
3:19
If following a link can
add items to a cart,
3:26
you might end up with products in your
cart that you never intended to purchase.
3:29
In contrast, post can help prevent
users from doing things unintentionally
3:33
by warning them when refreshing a page.
3:39
Post is also more secure, especially
when combined with a secure certificate,
3:42
because the values are not stored
directly in your browser history.
3:47
You really don't want to be
putting passwords in a URL, right?
3:51
One more thing to be aware of with
forms is that some browsers enforce
3:56
a maximum path link of just
over 2,000 characters.
4:00
This may seem like a lot, but
if you use the git method,
4:04
it can be easier to reach that
limit than you may think.
4:08
Long paths to files, long field names,
many field names, or
4:11
even just accepting large
amounts of user input
4:15
could mean that some of your
data is ignored without warning.
4:18
The good news is that we can pass a URL
parameter along with a posted form.
4:22
I want to be able to jump between steps
without actually submitting a form so
4:28
that's the part that I want in the URL.
4:32
Because our script is calculating
that value and it's not user input,
4:36
we can actually add the query
string directly to our action.
4:40
Now we can change the form method to post.
4:44
The page value will be passed
in the query string, but
4:50
the user entered data
will be passed via post.
4:53
Great, we're ready to actually collect
the user input to write our story.
4:57
One of the limitations with
forms is that by themselves,
5:03
they only pass data over one request.
5:06
If you want that data to be
available on another page,
5:09
you would have to send that data through
another form or in the query string.
5:13
For this project, we could continue to
AdWords as hidden values to the form, but
5:17
then we would need to make sure that
we pose that data to the story page
5:23
instead of redirecting
after handling the form.
5:27
Instead, I'll show you how
sessions can be used to
5:31
persist data throughout
a user's entire visit.
5:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up