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.html
to create a form with 2 text fields: the short path, and the long url.- Use the
label
tag 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
POST
a request toserver/shorts
to create a new association between the short name and the long url. server/shorts
must return HTML with information about the new association.- Future attempts to
GET
server/short/<name>
must redirect to the long url. - Attempts to
GET
server/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 clone
forked 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 -b
for a new feature, issue a pull request, get someone on your team to review, merge into master - You can only run one
server/app.py
at 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.route
associates a path to a representationrequest.args.get
dictionary to accessGET
query argumentsrender_template
will render the file intemplates/
make_response
is generating an image/wiki
is a semi-working redirector to use in HWrequest.form.get
is a dictionary to accessPOST
datadb
is a dictionary that acts like a databaseapp.logger.debug
will print out variables when requests are madeflask.redirect
will 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.