Using Forms for Persistence5:37 with Alena Holligan
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.
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 up