CS412
Spring 2025

Assignment 5: Using Data Models in a Web Application

due by 9:00 p.m. EDT on Friday, February 21, 2025

Learning Objectives

After completing this assignment, students will be able to:

Pre-requisites: Assignments 3 and 4

Assignment 5 builds upon all of the basic Django concepts from Assignments 3 and 4 (URLs, views, templates), as well as use of git for deployment.

You must have completed Assignment 4 before you attempt Assignment 5.

Case Study: Mini Facebook

This assignment is part of an in-depth case study to develop a data-enabled web application. In the entire case-study, you will simulate the core features of the Facebook social networking application:

This assignment is the fifth part of the case study, and you will continue the work from the previous assignment to build a database-enabled web application.

Here is a sample implementation: MiniFacebook Application.

You do not need to match the data of this example, or even the way it is formatted. The look and feel of the application, as well as the data you dispaly, is entirely up to you.

Preliminaries

In your work on this assignment, make sure to abide by the collaboration policies of the course.

If you have questions while working on this assignment, please post them on Piazza! This is the best way to get a quick response from your classmates and the course staff.

For each problem in this problem set, we will be writing or evaluating some Python code. You are encouraged to use the VS Code IDE which will be discuss/presented in class, but you are welcome to use another IDE if you choose.

Important Guidelines: Comments and Docstrings

  • Refer to the class Coding Standards for important style guidelines. The grader will be awarding/deducting points for writing code that comforms to these standards.

  • Every program file must begin with a descriptive header comment that includes your name, username/BU email, and a brief description of the work contained in the file.

  • Every function must include a descriptive docstring that explains what the function does and identifies/defines each of the parameters to the function.


Create the mini_fb Application

Within your existing cs412 Django project, create a new application called mini_fb.

All other tasks are to be done within the mini_fb project, unless otherwise indicated.

Task 1: Modeling and Displaying Profiles

In the first part of our case study you will begin to develop a simple implementation of the Facebook social media web application. In this part, you will create a simple data model, create some records using the Django admin application, and create the URL patterns, views, and templates required to display the data on the web.

  1. In the models.py file, create a model called Profile, which will model the data attributes of individual Facebook users.

    This Profile model will need to include the following data attributes: first name, last name, city, email address, and a profile image url.

  2. Use the Django admin to create 5 sample profiles, with names/data of your choosing. You do NOT need to reproduce the exact data from the example above.

Important: Add files to git!

  • You’ve just modified your database structure, and added some data records.

  • This is an excellent time to add your files to git, commit your changes, and push your changes to GitHub before anything gets F@&#ed up.

    • Add all files to your git repository using the command:
      git add -a

    • Commit changes to your git repository, using the command:
      git commit -m "Created Profile model for mini_fb"

    • Push changes to your GitHub repository, using the command:
      git push origin master

  1. In the views.py file, create a class-based view called ShowAllProfilesView, which inherits from the generic ListView.

    Use this view to obtain data for all Profile records, and to deleguate work to a template called show_all_profiles.html to display all Profiles.

  2. Create a templates directory, and create a template file called base.html. Use this file to:

    • create all of the standard HTML tags (<head>, <body>, etc.)
    • link in CSS file(s)
    • create a standard header/footer to display on all pages
    • provide navigation links for your application (not needed in this assignment, but for future parts)

    Create a content block (using scriptlet tag) to be filled in by the pages that inherit from base.html.

    Create the template file show_all_profiles.html, which extends the base.html template and implements the content block. Use this page to display a table with all Profile records, one per line. Include the first name, last name, city, and a profile image, using the data attributes stored in the Profile model.

  3. Edit your main project’s urls.py, to create a link on the URL pattern '/mini_fb/ to route requests to the mini_fb project’s urls.py file. Create the urls.py file inside the mini_fb project, which will create a URL mapping from the default URL ('') to the ShowAllProfilesView. Name this URL show_all_profiles.

Test your application! Try this URL pattern: 'http://127.0.0.1:8000/mini_fb/. You should be able to see a page with all profiles, displaying in a table. Resolve all errors before continuing to the next part.

Important: Add files to git!

  • You’ve just reached a good stopping point.

  • This is an excellent time to add your files to git, commit your changes, and push your changes to GitHub before anything gets F@&#ed up.

Task 2: Creating and showing a Profile page

In this part, you will create a profile page for a single user, and link to that page from the show_all_profiles.html page that you developed in your previous iteration of mini_fb.

  1. Edit the views.py file. Create a class-based view called ShowProfilePageView, which inherits from the generic DetailView class.

    Use this view to obtain data for one Profile record, and to deleguate work to a template called show_profile.html to display that Profile.

  2. Create the template file show_profile.html, which inherits from base.html. This template will render a profile page for one user (i.e., a single Profile record).

    Display a larger-format image, and display all the data attributes stored in the Profile record. Choose formatting that you find aesthetically pleasing.

  3. Edit the mini_fb project’s urls.py file. Create a URL mapping to route requests from the URL pattern 'profile/<int:pk>' to the ShowProfilePageView. Name this URL show_profile.

    Test your page! Try this URL pattern: 'http://127.0.0.1:8000/mini_fb/profile/1.

    (If you don’t have a Profile with pk of 1, try 2 or 3... Deleted pks are NOT re-used; rather, the counter just keeps incrementing when new objects are created).

    You should be able to see a profile page with one profile, displaying in a table. If you have errors, resolve them now before continuing on to the next part.

  4. Edit your show_all_profiles.html file to create links from each user’s name and image to the profile page for that user. Use the data attributes of the model to create a URL pattern similar to 'http://127.0.0.1:8000/mini_fb/profile/1, but substituting in the primary key for each profile, i,e., the attribute profile.pk.

    Hint: use the syntax for a named URL: "{% url 'name' profile.pk %}", where name is the name you gave for this URL in the urls.py file. We will discuss URLs in class.

Test everything! Start at this URL pattern: 'http://127.0.0.1:8000/mini_fb/. Test that you can click through to a profile page for any profile, and then use the link at the top of the page to return to viewing all profiles.

If you have errors, resolve them now before continuing on to the next part.

Important: Add files to git!

  • You’ve just reached a good stopping point.

  • This is an excellent time to add your files to git, commit your changes, and push your changes to GitHub before anything gets F@&#ed up.

Deployment to cs-webapps

  1. Deploy your web application to the cs-webapps.bu.edu.

Follow the [deployment instructions here][deployment].

  1. Test your web application on cs-webapps.bu.edu to ensure that everything works correctly.

  2. Resolve any deployment issues.

Submitting Your Work

10 points; will be assigned by the autograder, verifying that you have submitted the correct files/URL, and testing that you website exists at the specified URL. 90 points; will be testing your application and code review

Log in to GradeScope to submit your work.

Be sure to name your files correctly!

  1. Create a text file within your main django directory called a5_url.txt, containing the URL to your web page, and nothing else.

    For example: https://cs-webapps.bu.edu/azs/cs412/mini_fb/.

    This file will be used by the autograder to locate your web page, so you must get the URL exactly correct, and you must not include any other text or code in the file.

  2. Add teaching staff as collaborators to your GitHub repository (wderocco8, Aanuszkiewicz, and azs-bu). Read-only access is fine.

    Create a text file called github_url.txt in the root of your project (e.g., django directory). Paste your GitHub URL in the file.

    Add these files to your git repository using 

    `git add -A`.

    Commit this to your git repository, using 

    `git commit -m "Added a5_url.txt"`

    Push it to GitHub, using 

    `git push origin main`

  3. Log in to GradeScope to submit your work.

    In the Gradescope upload page, upload these two files:

    • a5_url.txt

    • github_url.txt

Notes: