Objective

Apply knowledge learnt in this course to create a social media network website for picture album management and sharing.

Due Date

See Brightspace post for the due of this project. To earn 10 points, you are required:

1.    Complete this project in a group of 2 – 3 students as required.

2.    Submit your project work to the Brightspace before the due date. Only one submission is required for each group.

3.    Demonstrate your project work during the lab session after the due date.

Requirements

This is the comprehensive project of this course. Compared with the other labs, the amount of workload evolved in this project is significant. You should reuse your work in lab 5 and lab 6 as much as possible. Your final deliverables must be at commercial-grade. To be specific:

1.    The layout and the styles of the pages may not necessary be the same as the screen

captures shown in this document, but they should be well designed and styled like being developed by professional web developers.

2.    The website is secure. At minimum, it is protected from password stealing and SQL injection.

Database

1.    Use MySQL Workbench to run SQL script cst8257projectDB_Builder.sql (downloadable from Brightspace) to create a database cst8257project the following tables in the database:

User

UserId varchar(16) NOT NULL PRIMARY KEY,

Name varchar(256) NOT NULL,

Phone varchar(16),

Password varchar(256)

Accessibility

Accessibility_Code varchar(16) NOT NULL PRIMARY KEY,

Description varchar(127) NOT NULL

Album

Album_Id int(11) PRIMARY KEY AUTO_INCREMENT,

Title varchar(256) NOT NULL,

Description varchar(3000),

Owner_Id varchar(16) NOT NULL,

Accessibility_Code varchar(16) NOT NULL,

FOREIGN KEY (Owner_Id) REFERENCES User (UserId),

FOREIGN KEY (Accessibility_Code) REFERENCES Accessibility (Accessibility_Code)

Picture

Picture_Id, int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

Album_Id, int(11), NOT NULL,

FileName, varchar(255) NOT NULL,

Title, varchar(256) NOT NULL,

Description, varchar(3000),

FOREIGN KEY (Album_Id) REFERENCES Album (Album_Id)

Comment

Comment_Id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

Author_Id varchar(16) NOT NULL,

Picture_Id int(11) NOT NULL,

Comment_Text varchar(3000) NOT NULL,

FOREIGN KEY (Author_Id) REFERENCES User (UserId),

FOREIGN KEY (Picture _Id) REFERENCES Picture (Picture _Id)

FriendshipStatus

Status_Code varchar(16) NOT NULL PRIMARY KEY,

Description varchar(128) NOT NULL,

Friendship

Friend_RequesterId varchar(16) NOT NULL PRIMARY KEY,

Friend_RequesteeId varchar(16) NOT NULL PRIMARY KEY,

Status varchar(16) NOT NULL,

FOREIGN KEY (Friend_RequesterId) REFERENCES User (UserId),

FOREIGN KEY (Friend_RequesteeId) REFERENCES User (UserId),

FOREIGN KEY (Status) REFERENCES FriendshipStatus (Status_Code)

2.    The script also populates Accessibility table and FriendshipStatus table with the predefined data.

3.    The following is the relational data model of this website. Study this relational data model to see how you can derive PHP entity classes from the database tables in the model.

Web Site

1.     header.php and footer.php

All pages on this website have the following header.

The header.php page should have the following menu items:

a.    Home – link to Index.php page

b.    My Friends – link to MyFriends.php page

c.    My Albums – link to MyAlbums.php page

d.    My Pictures – link to MyPictures.php page

e.    Upload Pictures – link to UploadPictures.php page

f.     Log In / Log Out – link to Login.php if the user is not logged in yet, or Logout.php page if the user has already logged in.

All pages on this website should have a common footer with the copyright information.

2.    Index.php

This page is the landing (default) page of this website.

3.    NewUser.php

The same as in lab 5, this page is for a user to sign up with the system. The same validation rules as in lab 5 apply as well.   Passwords cannot be saved in the User table as plain text.     They must be hashed.

4.    Login.php

This page allows the signed-up users to log into the website with their student ID and password.

Except the Landing page (index.php), New User page (NewUser.php) and this page, all other pages of the website are protected, requiring users to be authenticated to access. If an

unauthenticated user tries to access a protected page of the website, he/she will be redirected to this login page for authentication.

Once successfully authenticated, the user will be redirected back to the protected page he/she was attempting to access.

5.  AddAlbum

This page is used to create a new album for the user.

On this page, the user specifies the title of the album, select the accessibility from the dropdown list and optionally the detailed description of the album.

The possible selections of dropdown list come from CST8257 database table Accessibility. Currently there are two entries in the table:

.     private – The album is only accessible by the user him/her self.

.     shared – The album is accessible by the user and the user’s friend.

6.  MyAlbums.php

This page lists user’s albums. For each album, it lists the following information about the album:

.    Title – The title of the album

.     Number of pictures – The number of pictures the album contains

.    Accessibility – the album’s accessibility. It is shown as the selection of the dropdown list. The available selections in the dropdown list come from the database table

Accessibility

The user can change the of albums’ accessibility by selecting the desired accessibility from the dropdown list for each album and click the Save Change button.

The page also has following links:

.     Create a New Album – link to AddAlbum.php page

.     Album Titles – All album titles in the album list are links to MyPictures.php page

once clicked, the user is brought to MyPictures.php page with the clicked album as the selected album in the dropdown list, see MyPictures.php section for details of  MyPictures.php page.

.     DELETE – a link button to delete the album. Once clicked, the system will prompt the user to confirm that all pictures in the album will be delete with the album.

7.  UploadPictures.php

The user uses this page to upload pictures into one of his/her albums.

The user can upload single or multiple pictures at a time. Optionally, the user can specify title and description for the pictures to be uploaded. When uploading multiple pictures at a time,  the specified title and description apply to all the pictures uploaded.

8.    MyPictures.php

This page is for the user to browse and manage his/her pictures. The page contains the following elements:

.    A dropdown list for the user to select an album to browse its pictures.

.    A picture area showing the picture selected when the user clicks its thumbnail.

.    A thumbnail bar displays all thumbnails of the pictures contained in the album. When a thumbnail is clicked the picture area displays the picture the thumbnail represents. The thumbnail of the picture currently in display should be highlighted with a blue border.

.    A description and comment area showing the picture’s description (if exists) and comments (if any). The comments are ordered chronically from the newest to the oldest.

.    A text area for the user to leave a comment. The user can write a comment and click the Add Comment button to leave a comment about the picture.

9.   AddFriend.php

The user can use this page to send a friend request to another user by enter the other user’s user ID and click the Send Friend Request button.

A friend request must follow the following rule:

.    The entered user ID must exist.

.    A user cannot send a friend request to her/himself.

.     If A sends a friend request to B, while A has a friend request from B waiting for A to accept, A and B become friends.

.     If A and B are friends, a friend request between them will result in a message: “You and A (or B) are already friends” .

If the request passes the above rules, the user will get a confirmation message to confirm that the friend request has sent to the specified user:

10. MyFriends.php

This page lists the user’s friends and friend requests. For each friend, it shows the number of shared albums of that friend. The user can perform the following action for each friend.

.     Click a friend’s name to view the friend’s pictures in the shared albums if that friend has album(s) to share.