CS412
Spring 2025

Assignment 6: Using Multiple Models; Creating Model Data

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

Learning Objectives

After completing this assignment, students will be able to:

Pre-requisites: Assignments 5

Assignment 6 builds upon the case study you began in Assignment 5.

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

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 (tasks 1 and 2): MiniFacebook Application.

Here is a sample implementation (tasks 3 and 4): 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.


Continue working on the mini_fb Application

Continue to do this work within your existing Django project, within the mini_fb. application that you worked on in Assignment 5.

Task 1: Modeling and Displaying Status Messages

  1. Create a new model called StatusMessage, which will model the data attributes of Facebook status message. This StatusMessage model will need to include the following data attributes:

    • timestamp (the time at which this status message was created/saved)
    • message (the text of the status message)
    • profile (the foreign key to indicate the relationship to the Profile of the creator of this message)

    Here is a diagram of the models and their relationships:

    The foreign key is how we model a relationship between different kinds of objects. In this case, we are defining the relationship such that every StatusMessage object is related to a single Profile object.

    Be sure to create a __str__ method on this class to return a string representation of this object.

  2. Use the Django admin to create 3 sample status messages, for at least 2 different Profiles), with any content of your choosing.

  3. In the Profile class, create an accessor method get_status_messages to obtain all status messages for this Profile.

    Hint: you can filter StatusMessage objects by their profile (foreign key), and order them by timestamp.

  4. Edit your show_profile.html template, to add the display of status messages. Use a loop to display all status messages.

    Test your page! Try this URL pattern: 'http://127.0.0.1:8000/mini_fb/. Follow the link to any profile that has status messages, and view that page.

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 a new Profile

In this Task, you will create a form to collect inputs to create a new Profile. For example:

  1. Within the mini_fb application folder, create the new file forms.py. In this file, add the following import statements at the top:

    from django import forms
from .models import Profile, StatusMessage

    Create a class CreateProfileForm which inherits from forms.ModelForm. Be sure to specify the inner-class Meta, which relates this form to the Profile model.

    Also, specify the list of fields that this form should set (i.e., all of the data attributes of the Profile class).

Note: How Django displays HTML Form Fields

  • By default, Django will choose which type of HTML form fields to use, based on the types of the fields in your model.

    For example, when your form has a model.TextField, Django will use a <textarea> (multi-line text input box). Often, this is OK. For this assignment it is fine, and you can get full functionality and points using the defaults.

  • If you want to customize how the HTML form displays, you can explicitly tell Django which type of form field to use.

    For example, you can add these explicit form fields as data attributes in your form CreateProfileForm class:

    class CreateProfileForm(forms.ModelForm):

    first_name = forms.CharField(label="First Name", required=True)
    birth_date = forms.DateField(widget=forms.SelectDateWidget(years=range(2012,1920,-1),),)

    # ...

  • See the details in the Django Forms Documentation page.

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

    Be sure to specify the form this create view should use, i.e., the CreateProfileForm. Also, specify the name of the template to use to render this form, which must be called mini_fb/create_profile_form.html.

  2. Create the template file mini_fb/create_profile_form.html, to render the HTML form. Your form must:

    • definite the <form> tags, and set the form’s method to POST
    • include the django-created csrf_token as a form field (as you did in the example video)
    • provide a submit button

    You may use your discretion/imagination about how this template should display the form fields, but you must include labels for each field to show what input is expected. Upon submission, your form will be handled by the generic CreateView class, which will create a new record for this model and store it in the database.

  3. After storing this new record, the generic CreateView will attempt to display it by using the Profile model’s get_absolute_url method – which you must implement.

    The get_absolute_url method must return a URL to show this one profile, i.e., the URL pattern will be similar to: 'http://127.0.0.1:8000/mini_fb/profile/1.

    • Use the reverse function (from (django.urls) and the named URL pattern to obtain a valid URL to show this profile.

  4. Edit the mini_fb project’s urls.py file. Create a URL mapping to route requests from the URL pattern 'create_profile' to the CreateProfileView view. Name this URL create_profile.

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

    You should be able to see a form to create a new profile; fill the form and use the submit button; and then upon submission you should be routed to the new profile page. If you have errors, resolve them now before continuing on to the next part.

  5. Edit your template file base.html. Add a link to create a new Profile.

    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.

Task 3: Creating Status Messages

In this part, you will create a form to enable a user to post a status message. The form will display on the profile page, and prompt the user for inputs. For example:

After the form is submitted, the new status message will be saved into the database, and the server will redisplay the profile page (with the new status message shown).

  1. Edit file forms.py. Create a new class CreateStatusMessageForm, which inherits from forms.ModelForm.

    Note: this is a smilar process to what you did with the previous forms. We are purposely not specifying all of the details so that you will follow the approach from the previous form, view, template, etc.

  2. Create the template file mini_fb/create_status_form.html, to render the HTML form. Your form must:

    • definite the <form> tags, and set the form’s method to POST
    • include the django-created csrf_token as a form field (as you did in the example video)
    • provide a submit button

    You may use your discretion/imagination about how this template should display the form fields, but you must include labels for each field to show what input is expected. Upon submission, your form will be handled by the generic CreateView class, which will create a new record for this model and store it in the database.

    You will need to set the form action to a new URL, so plan to come back to this.

  3. Edit the file views.py to add a view called CreateStatusMessageView to handle the form submission. We will again use the generic CreateView as a base class, but it will require some additional work that was not required for the CreateProfileView.

    Specifically, the StatusMessage requires a foreign key to relate it to a Profile object. We will return to this below. For now, set up the template_name and form_class.

    Create a URL mapping to route requests from the URL pattern 'profile/<int:pk>/create_status', associate it with the CreateStatusMessageView, and name this URL create_status.

    Note: there are several ways to go about solving the issue of attaching the foreign key to the StatusMessage object. These instructions walk you through one approach using the generic CreateView.

    First Complication: Implementing get_context_data method

    Try this URL: http://127.0.0.1:8000/mini_fb/1/create_status. (Use another primary key if you have no object numbered 1).

    You should be able to display the create_status_form.html template. Try submitting it, and it gets complicated.

    When you try to create the submission URL (the form action), you will need to provide the parameter profile.pk (i.e., identifying the Profile to which this StatusMessage corresponds) as part of that URL.

    To have access to this as a context variable, you will need to implement the special method get_context_data on the CreateStatusMessageView class.

    There is a special attribute, accessible within the methods on the CreateView and its subclasses. The attribute self.kwargs is a dictionary of any URL parameters, and the value self.kwargs['pk'] is the primary key of the Profile corresponding to the URL pattern.

    Within get_context_data method, create a context dictionary, add the Profile object (call the context variabale profile, for consistency with how things worked on other pages).

    Second complication: Implementing the form_valid method

    Test out this URL again. You should now be able to display/submit the create_status_form.html template. You should see an error that NOT NULL constraint failed: mini_fb3_statusmessage.profile_id. Basically, you cannot create/save a StatusMessage without setting the profile attribute.

    To solve this problem, you will need to implement the special method form_valid on the CreateStatusMessageView class. Within that method, you will need to (a) look up the Profile object by its pk. You can find this pk in self.kwargs['pk']. (b) attach this object to the profile attribute of the status message.

    Third complication: Implementing the get_success_url method

    Test out this URL again. Now when you submit the create_status_form.html template, you should see an error: No URL to redirect to. Either provide a url or define a get_absolute_url method on the Model.

    To solve this problem, you will need to implement the special method get_success_url on the CreateStatusMessageView class. Within that method, you will need to return the URL corresponding to the profile page for whom the StatusMessage was added. For example, if we add a StatusMessage for profile 5, we should return the URL /mini_fb/profile/5.

  4. Edit the show_profile.html template, and add a link to bring up the create_status URL (in its own page view).

  5. Testing!! Start at your main /mini_fb URL, and pick any existing profile. You should see the profile page, with a form to post a status message. Write something witty in the form, and use the submit button to submit it to the server.

    Upon submission you should be routed back to the profile page on which you should see the newly posted status message.

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 a6_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 a6_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:

    • a6_url.txt

    • github_url.txt

Notes:

Notes: