CS412
Fall 2025

Assignment 3: Using Data Models in a Web Application

due by 9:00 p.m. EDT on Friday 9/26/2025

Learning Objectives

After completing this assignment, students will be able to:

Pre-requisites: Assignments 1 and 2

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

You must have completed Assignment 2 before you attempt Assignment 3.

Case Study: Mini Insta

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 Instagram social networking application. Over the course of 5 parts, you will implement:

This assignment is the first part of the case study.

Here is a sample implementation: MiniInsta part 1.

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/method must include a descriptive docstring that explains what the function does and identifies/defines each of the parameters to the function.


Create the mini_insta Application

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

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

Task 1: Modeling and Displaying User Profiles

In the first part of our case study you will begin to develop a simple implementation of the Instagram 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 an individual user.

    This Profile model will need to include the following data attributes: username, display_name, profile_image_url, bio_text, and join_date.

    Always implement a __str__ method on data models, so you can obtain a simple string representation of the model (for example printing at the console or even on the web page).

    Reminder: after creating or modifying data models, you will need to run the commands to update the database structure. Also, remember to register your models with the Django admin.

  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_insta"

    • 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 ProfileListView, which inherits from the generic ListView.

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

  2. Create a templates directory, and inside it a mini_insta sub directory.

    Create a template file called base.html. Use this file to: create all of the standard HTML tags (<head>, <body>, etc.) link any CSS file(s) create a standard header/footer to display on all pages provide navigation links for your application (not needed in this part, 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 template to display a page showing all Profile records. For each Profile, iInclude the username, display_name and the image referred to by the profile_image_url. You may choose how to arrange these on the page, for example using a table or div elements within a grid layout.

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

Test your application! Try this URL pattern: 'http://127.0.0.1:8000/mini_insta/. 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: Displaying a Single Profile

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 Task 1.

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

    Use this view to obtain data for one Profile record, and to delegate 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.

    In a future part of this assignment, this page will also show information about how many followers this user has, and how manythey follow, along with all posts by this user. For now, you can leave some placeholders for this information.

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

    Test your page! Try this URL pattern: 'http://127.0.0.1:8000/mini_insta/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 image (optional: display name) 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_insta/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.

  5. To facilitate navigation and testing, add a link back to the ShowProfileListView as part of the footer that shows up on all pages.

Test everything! Start at this URL pattern: 'http://127.0.0.1:8000/mini_insta/. 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.

  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 mini_insta_url.txt, containing the URL to your web page, and nothing else.

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

    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 the teaching staff as collaborators to your GitHub repository with bu-cs412. 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 mini_insta_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:

    • mini_insta_url.txt

    • github_url.txt

Notes: