English subtitles

← Rot13 Solution - Web Development

Get Embed Code
4 Languages

Showing Revision 5 created 05/25/2016 by Udacity Robot.

  1. These are going to be the solutions for the Unit 2 homework.
  2. Remember, we had 2 parts to this.
  3. We had the ROT13 tool, and then we had the sign up page
  4. that tested for errors and that sort of thing.
  5. I'll show you quickly my versions working,
  6. and then I'll show you the code, so let's start with the ROT13.
  7. Okay, here's my ROT13 running on my local machine here.
  8. I could type in some text, and if I submit,
  9. it gets ROT13'd inside the text box,
  10. and if I submit again, it gets changed back to the original text,
  11. and that's how you know it's working.
  12. It escapes properly.
  13. We can see that by typing in our closed text area there,
  14. and it's preserving everything.
  15. All right, so let's take a peek at the code.
  16. So, I'm in an appengine.py file.
  17. This is the base ROT13 handler that I wrote.
  18. It inherits from this base handler class, the ROT13 class does.
  19. That added some convenience functions.
  20. First, I have a write function, and this is short hand,
  21. so I can say self.write instead of self.response.out.write.
  22. I'll just save some typing.
  23. And then I started using something called templates, and I'm going to spend
  24. a little bit more time on templates in Unit 3.
  25. It saves me the effort of having to type in all of the string substitutions
  26. that you probably did for this homework if you didn't already
  27. get tired of that and figure out templates.
  28. My base page--well, let's look at the URL handler first.
  29. We've got /unit2/rot13 maps to the Rot13 class,
  30. and so we come up here to our Rot13 class, and it's got 2 functions.
  31. It's got a get function, and all this does is it renders
  32. this file called rot13-form.html.
  33. Now, your version, you may have printed a whole string.
  34. This accomplishes that same thing, and I'll go ahead and show you that file.
  35. It's right here.
  36. We want to get in the habit going forward of starting to separate these things,
  37. and I apologize for putting you through that heartache of
  38. writing out long strings first, but you'll appreciate
  39. the niceness of this once you've done it the hard way.
  40. This just returns some HTML.
  41. It's got our title.
  42. It's got an h2, which makes some big text at the top of the page.
  43. Here's our form. Its method is post.
  44. And it's got a text area.
  45. The text area has a name of text.
  46. I added a little styling here to make it a little bigger.
  47. This is just some basic CSS.
  48. You're free to copy this from my demo when I put this source stuff online.
  49. This syntax here, again, we'll talk about this more in the next lesson,
  50. but instead of doing the string substitution,
  51. this substitutes the variable text passed into the template,
  52. and it automatically escapes it for me so I don't have to deal with that,
  53. and this closes the text area, and then there's a submit button.
  54. That's pretty simple.
  55. If I were to turn off the auto escaping ability,
  56. which is set by this parameter here, let me show you the behavior of that.
  57. Okay, so here we've got some text in here.
  58. Remember, I disabled the texting--I'm sorry.
  59. I disabled the escaping, so let's see what happens when we submit this.
  60. It works the first time, but the second time the text jumps outside the box.
  61. Why did that happen?
  62. Well, when we turn that ROT13 text area back into a closing text area,
  63. it actually closed our text area in the HTML
  64. and then put this text outside it.
  65. If I were to view the source of this file, which you can do in Chrome easily,
  66. we can see what happened.
  67. You can see my template, and then you can see my text area gets closed
  68. by the unescaped version of that text
  69. and then "escapes properly" gets put outside the text area.
  70. And then here is the closing text area for my template,
  71. so we want to make sure if we go back to our editor here
  72. and I turn on escaping again--this is something you're probably doing by hand,
  73. which is how we learned to do it initially--and if I were to go to Chrome
  74. and then reload this page--reload, that's going to confirm the form submission--
  75. we can see that my text area actually got escaped.
  76. And so this is what the template has, and this is how it renders.
  77. Now, what's interesting to note is that even though our HTML
  78. has the escaped version of less than and greater than,
  79. it renders as less than and greater than, and when we submit the form,
  80. it's as less than and greater than.
  81. It's not as the escaped version, so hopefully you had a chance to
  82. kind of experiment that and see for yourself,
  83. but that's how that works.