CS1XA3-Project 3 Social Network Solved

The goal of this project is to complete the social media like site provided in the Project03 template. The site consists of the following pages:

•   login app

–    login page (Project03/login/templates/login.djhtml)

–    signup page (Project03/login/templates/signup.djhtml)

•   social app

–    account settings page (Project03/social/templates/account.djhtml)

–    messages display page (Project03/social/templates/messages.djhtml)

–    people/friend lookup page (Project03/social/templates/people.djhtml)

1.1           Project Database
All of the models (i.e the database) needed for the website have already been created in

• Project03/social/models.py class Interest(models.Model):

# Related to UserInfo as m2m relation, holds interests as strings class UserInfoManager(models.Manager):

# implements the create_user_info method for creating UserInfo entries class UserInfo(models.Model):

# A 1-to-1 relation with the built-in User objects, adds additional info class Post(models.Model):

# holds posts made by users and displayed in the messages page class FriendRequest(models.Model):

# holds friend requests from one User to another

1.2           Project Templates
The entire project makes use of a base template base.djhtml in Project03/templates/base.djhtml that extends the w3schools social media template. By default, i.e un-extended, it provides.

•   links to a variety of w3schools stylesheets and meta page definitions (use the css block to extend)

•   an import link for JQuery

•   a navbar with an icon on the right that links to the account settings page (use the navbar_contents block to extend)

•   a footer

•   three empty column sections (use the left, middle and right column blocks to extend) The base template is extending by

•   login.djhtml (implements middle_column to provide login form)

•   signup.djhtml (should implement middle_column to provide signup form)

•   social_base.djhtml (implements left_column to provide account info, and navbar to provide links to account, messages, people pages)

The social_base.djhtml template implements the right_column block and is extended by

•   account.djhtml (should implement middle / right columns to provide account settings forms)

•   messages.djhtml (should implement middle / right columns to show posts / friends list respectively)

•   people.djhtml (should implement middle / right columns to show unfriended people / friend requests respectively)

2           Project Objectives
Perform each of the following objectives to complete the project. Most objectives provide a fair amount of guidance, but you may delete/add as much code as you like to achieve the attended effect of the objective.

• TIP: Follow the TODO Objective N comments in the codebase

2.1           Objective 1: Complete Login and SignUp Pages 
•   There are login and signup pages already set up under the Project03/login app

•   By default, the URL /e/macid/ will route to the login

•   In order to login you need to create a UserInfo entry ( NOTE it is not sufficient to create just a User object)

•   You can create a new {{{color(blue,UserInfo)}} object manually from the shell by running the commands (remember to run migrations first)

python manage.py shell

from social import models

models.UserInfo.objects.create_user_info(username='TestUser',password='1234') exit

•   The login form is already completed, click the Login button to try logging in, then click the Logout button in the Navbar to logout

•   If you click the Create An Account button, you’ll be redirected to a mostly blank page

•   Implement this page by:

–    Add the appropriate code to the function def signup_view in Project03/login/views.py to render signup.djhtml with an appropriate form

–    Add the appropriate code in Project03/login/templates/signup.djhtml to display a form for creating a new user

–    Add appropriate code to handle the POST request sent by the form to create a new user (i.e automate the code above for creating a UserInfo object)

–    After creating a new user, automatically log the user in and redirect to the messages page

2.2           Objective 2: Adding User Profile and Interests 
•   The template social_base.djhtml renders the left_column used by messages.djhtml,people.djhtml and account.djhtml

•   When each of the above templates are rendered in Project03/social/views.py (see messages_view, people_view and account_view respectively), they are given the currently logged in UserInfo object via a variable (and hence social_base.djhtml has access to it as well)

•   social_base.djhtml currently displays a statically included fake Profile and Interests

•   Edit Project03/social/templates/social_base.djhtml to implement a real Profile and Interests corresponding to the currently logged in user by using Django Template Variables

•   See the UserInfo class in Project03/social/models.py for details on the attributes available

2.3           Objective 3: Account Settings Page 
•   Clicking the top right icon on the Navbar brings you to the Account Settings Page, rendered by

–    the function def account_view in Project03/social/views.py

–    the template Project03/social/templates/account.djhtml

•   Currently the page is mostly blank (besides the content already rendered by the base templates)

•   Edit the above function / template to:

–    Provide forms for changing the users current password

–    Provide forms for updating user info, i.e employment, location, birthday, interests (each interest submission should add to the list of current interests)

–    Handle POST requests sent by the form’s to update the UserInfo object accordingly

2.4           Objective 4: Displaying People List 
•   Clicking the people icon on the Navbar brings you to the People Page, rendered by

–    the function def people_view in Project03/social/views.py

–    the template Project03/social/templates/people.djhtml

–    the javascript code Project03/social/static/people.js

•   Currently the middle column displays a single static fake person and a More button

•   Edit the above function / template to:

–    Display actual User’s in the middle column who ARE NOT FRIENDS of the current user (HINT use a for loop in the people.djhtml template to replicate the current div)

–    The page should start out displaying only a certain amount of people (say 1), then display more by clicking the More button. The amount of people displayed should reset when the user logs out

–    Note: the more button is already linked to send an AJAX POST through javascript (see Project03/social/static/people.js) to def more_ppl_view, and then reload the page on success

–    HINT use a session variable to keep track of how many people to display

2.5           Objective 5: Sending Friend Requests 
•   The right column of people.djhtml should display friend requests to the current user (currently only displays a single static fake friend request)

•   All Friend Request buttons are linked to a JQuery event in people.js, which uses its id to send a POST request to the function def friend_request_view

•   Edit the people.djhtml template to configure the Friend Request button so it’s id contains the user who sent the friend request

•   Edit the function friend_request_view to handle the POST by inserting an appropriate entry to the FriendRequest model

•   Now edit def people_view and people.djhtml to render actual friend requests

2.6           Objective 6: Accepting / Declining Friend Requests 
•   The Friend Requests displayed in Objective 5 contain Accept and Decline buttons

•   Edit people.djhtml so that the id’s of those buttons contain the username of the user who sent the Friend Request

•   Edit people.js so that pushing either Accept or Decline buttons sends a POST to accept_decline_view with the appropriate button id

– HINT: copy how the friendRequest function works, it will be very similar

•   Edit accept_decline_view to handle the POST request, it should delete the corresponding FriendRequest entry, and if the request was accepted should update BOTH USERS friends relation in the UserInfo table

2.7           Objective 7: Displaying Friends 
•   Clicking the message icon on the Navbar brings you to the Message Page, rendered by

–    the function def messages_view in Project03/social/views.py

–    the template Project03/social/templates/messages.djhtml

–    the javascript code Project03/social/static/messages.js

•   Currently, the right column shows only a single static fake friend

•   Edit messages.djhtml to display all of the friends of the current user

HINT: iterative over the objects returned by all of the friends relation in the user_info variable