Project1
Table of Contents
1 Project: URL shortener
- Demo: bitly
- This project is simpler
2 Project Overview
- Teams of up to 4
- Part 1: Implement select feature set
- Part 2: Get creative! Implement product ideas
3 Dates
- Oct 30th: Part 1 due
- Nov 13th: Optional Part 2 Proposal
- Dec 4th: Project Code Due
- Dec 12th: Class presentation
- Dec 19th: Technical report due
3.1 Part 1 Details
- Update
templates/home.htmlto create a form with 2 text fields: the short path, and the long url.- Use the
labeltag to label the text fields. - Improve the HTML with at least 4 non-form tag types.
- HTML must validate.
- Improve the CSS with at least 4 new selectors.
- Improve the CSS with at least 4 new properties.
- CSS must validate.
- Use Javascript to ensure the short path is only letters before the submit button can be clicked.
- Use the
- The form must
POSTa request toserver/shortsto create a new association between the short name and the long url. server/shortsmust return HTML with information about the new association.- Future attempts to
GETserver/short/<name>must redirect to the long url. - Attempts to
GETserver/short/<name>where <name> has no association must return404 NOT FOUND
4 Sharing Code
- One member create a fork of webarch2014 -> project-webarch
- Add collaborators (incl instructors) to new fork
git cloneforked repository to ischool server- Turn in your homework via personal, project via fork
4.1 Keep In Mind notes
- Suggest using same workflow as homework:
checkout -bfor a new feature, issue a pull request, get someone on your team to review, merge into master - You can only run one
server/app.pyat a time – even from different directories
4.2 Extra Credit: Adding bitly Features
- Automatically choose short path
- Use the same short path for existing URLs
- Only applies to Part 1
5 app.py
- Comments and docstrings
@app.routeassociates a path to a representationrequest.args.getdictionary to accessGETquery argumentsrender_templatewill render the file intemplates/make_responseis generating an image/wikiis a semi-working redirector to use in HWrequest.form.getis a dictionary to accessPOSTdatadbis a dictionary that acts like a databaseapp.logger.debugwill print out variables when requests are madeflask.redirectwill send the correct headers and response code. Just give it a URL- compiling errors: restart
app.py
5.1 DB notes
- DB will be personalized to you. Collaborators will not be able to edit your DB by default.