English subtitles

← Putting It All Together - Web Development

Get Embed Code
4 Languages

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

  1. I'm going to go ahead and add that function to our program here.
  2. Actually, this one works verbatim just like out of the quiz.
  3. Now if we give it a list of points, it will return the URL for the image. Let's go ahead and use that.
  4. If we have any coordinates, make a URL image.
  5. We've already implemented that function. Let's go ahead and move our comment.
  6. Now we just need to display the image URL.
  7. Actually, we need to make one little change here-- img_url = None.
  8. If by default doesn't exist and if we actually have some points, we can set it to something else.
  9. Then we just need to pass imgurl into our template--imgurl = img_url.
  10. Now we just need to update our template, and we're going to insert our image.
  11. Remember, this is our template. I had a bunch of CSS.
  12. Remember I explained that kind of controls the layout of things.
  13. Then we have all of our HTML. Here is our form.
  14. We want to display this to the right of our form.
  15. I'm going to do somethings you haven't seen before in terms of getting it to display right,
  16. but first let's just get the image in here.
  17. If img_url--so basically it's not None--include our image.
  18. This is how we do that in the Jinja template language.
  19. Again, I know we haven't covered this in this class, but it's fairly straightforward.
  20. You just have some text, and you have these little escapes for actually running Python code.
  21. If the URL is there, include this image. Let's give this a whirl.
  22. I reloaded the page, and you can see below the form we have an image with a marker on it.
  23. Pretty cool, huh? Let's get our image displayed off to the right here.
  24. I'm just going to go ahead and do that, and I'll explain briefly how it's done.
  25. I've moved the image over here. I'll show you briefly what I did to do that.
  26. I added a class to map, so I can refer to it in my CSS.
  27. You can use this notion of position absolute,
  28. which allows you to position something anywhere on the page.
  29. I positioned absolute the map to be zero pixels from the right and 112 pixels from the top--
  30. zero from the right, 112 from the top. It fits perfectly.
  31. Obviously, I knew the size of the image beforehand when we did this whole URL thing.
  32. Let's see if our program works. Remember we've got this hack in here forcing our IP.
  33. We're going to have to--probably if we're going to develop this long-term,
  34. maybe when it's in debug mode it'll chose from some random IPs or something like that,
  35. but when we put it into production it is going to use the real IP.
  36. Right now, we're just going to hard code some IPs so this actually works in the demo.
  37. I'll go ahead and include Udacity's office IP, and we'll submit some ASCII art.
  38. We'll have this IP, and let's make sure things work.
  39. Let's add a picture of a rabbit.
  40. We'll past that in or we'll draw it by hand, whichever you're faster at.
  41. We submit this--ta-da!
  42. It took a little longer to submit because we had to look up the IP,
  43. but now we can see that we used our office IP, which is down here in Palo Alto.
  44. We have our old IP from that other IP we faked, which in here in Colorado,
  45. and we can see our rabbit and our cat. Our camel didn't have a location.
  46. Now ASCII Chan is much more worldly.
  47. I'll put this online at asciichan.com, and you call can submit all the ASCII art you love to do.
  48. We'll see how this map goes. That's it for this lesson.
  49. I how you learned something about how to interact with other websites.
  50. Good luck on the homeworks.