· 8 years ago · Apr 20, 2018, 12:12 AM
1# System Design: MeTube U16
2## Final Project Report
3### John McElvenny and Gordon Zhang
4
5# Introduction
6
7This System Design Document has been created to outline the design of group U16's MeTube website. The purpose of this website is to allow users to upload and share media with other MeTube user's as well as provide a communication platform for the MeTube community. This document will outline the system overview, module design, and security concerns.
8
9# System Overview
10
11The MeTube platform is designed to operate on Clemson University's webapp server, which is a web application hosting server that has Apache 2 with PHP 5.6 installed. MySQL database hosting was available from the university's buffet server, which only allows connections from within the university's network.
12
13Group U16's MeTube implementation is written using PHP, MySQL and rendered to the client using HTML5, CSS, and JavaScript. The implementation was designed to be modular, separating each individual component into its own files. Since PHP supports the rendering of other included PHP files, combining modules is as easy as:
14
15`include 'playlistmodule.php'`
16
17This allowed for separate, parallel implementations of each module by different team members. One member would work on playlists while another would work on comments. After both modules are complete, they can both be included into the media viewer with no overhead.
18
19## Module Design
20
21There were many requirements for the project which resulted in several different modules being created:
22
23- Add comments module
24- View comments module
25- Contacts module
26- Profile module
27- Playlist module
28- Metadata module
29
30Each module, when loaded individually, renders its own HTML5 content for the user. For example, the add comments module displays a textbox and a "post" button while the view comments module displays a table of comments for a media. Since PHP allows included files to access the same GET, POST, and SESSION variables as the parent file, there is no overhead for including modules.
31
32The criteria for determining if a feature should be a module was if the same feature might need to be included in more than one place OR if the feature needed a separate API endpoint. As a result, most major features of the site were modularized.
33
34## Security Concerns
35
36During the development of this project, there were many potential security risks that were identified. There were many severe risks, so they are described below in no particular order:
37
38## Shell Upload Attack
39
40Previous implementations of MeTube allowed attackers to upload a .php file in place of a media file. Due to the insecure permissions and webserver configurations, the server would run the uploaded .php file like any other. As a result, a php shell could be uploaded to compromise the files and database configuration of the user's home folder. Furthermore, this exploit can be used to create and modify other .php files, allowing the server to be compromised extremely easily. Group U16 mitigated this by disabling PHP in the uploads/ folder.
41
42## Plaintext Passwords
43
44Another issue found within the MeTube template was that plaintext passwords were stored in the database. This is a red flag for any application, on the web or not. The severity is compounded by the lack of SSL, so any man-in-the-middle attack will result in the user's credentials being compromised.
45
46## Webapp Server Permissions
47
48Many users on the webapp server make the mistake of leaving their MeTube files world or group readable. As a result, any other student can simply read their config.php file to obtain database credentials, and in turn, user credentials. Since all users are included in the cuuser group, a user would need to have the permissions of 700 on each file to avoid this attack. Group U16 mitigated this by making all php files have permission 700.
49
50## Lack of SSL
51
52One major issue was the lack of SSL on the university webapp server. Any web application handling sensitive user information (passwords, personal media) should have SSL to preserve data integrity. Unfortunately, this issue could not be mitigated as the webapp server is managed separately.
53
54## MySQL Injection
55
56The MeTube template contained only a few basic forms but all were vulnerable to SQL injection. A user could input a carefully crafted username that escaped the hardcoded SQL query to run unauthorized queries on the MeTube database system. This issue could be mitigated by using prepared queries.
57
58## JavaScript Injection
59
60Many MeTube implementations do not sanitize media title, description, or other fields. As a result, a malicious user could upload a file and include javascript in the video description. The unsanitized javascript would be executed on any viewer's machine without them knowing. This vulnerability opens the doors for attacks on specific users. Group U16 mitigated this attack by disallowing HTML tags within fields.
61<div style="page-break-after: always;"></div>
62
63# Database Schema
64<img src="schema.png" style="max-width: 80%; width: auto; height: auto"/>
65
66<div style="page-break-after: always;"></div>
67
68# ER Diagram
69<img src="er.png" style="max-width: 80%; width: auto; height: auto"/>
70
71<div style="page-break-after: always;"></div>
72
73# Function Design
74
75## Overview
76
77This file will provide an overview of the implementation of the core functions of MeTube. These functions are the functions that query and update the database and are all stored in the function.php file. The group decided that it would be messy to store queries in any of the feature files. Each section describes a particular function that was implemented in the core functions file.
78
79## get_media_for_user($username)
80
81This function retrieves an array of all media for a particular username. Each row of the array contains: the filename, username, type, mediaId, filepath, and title of the media.
82
83## update_playlist_membership($userId, $mediaId, $newMembership)
84
85This function is used to update which playlists a particular media is included in. Because of the checkbox design of the playlist module, the user specifies all playlists the media is included in in the newMembership array. This function: removes the specified media from all of the user's playlists, then adds the media to all of the playlists in newMembership.
86
87## get_playlists_for_mediauser($userId, $mediaId)
88
89This function retrieves a list of the user's playlists and given a particular mediaId, whether or not the media is included in each playlist. This function is used in the implementation of the playlist module to generate the checkbox design and determine which boxes should be checked.
90
91## insert_into_media($filename, $username, $type, $path, $title, $desc, $keywords, $category)
92
93This function completes all the necessary requirements to add a new media to the website. A new row must be inserted in the media table, which requires all of the above parameters. The function then calls update_media_metadata($mediaId, $title, $desc, $keywords, $category) to avoid duplicating code. This function is called directly from the media upload function.
94
95## get_media_info($mediaId)
96
97Returns the title, uploader's username, type, mediaId, filepath, description, and category of a particlular media. Used in many files across the website.
98
99## send_user_message($fromId, $toUsername, $message)
100
101Used to insert a new message into the database and place it in the user's inbox. Used when composing a new message and welcoming a user to the website.
102
103## get_recent_messages($userId)
104
105Retrieves the last 30 messages in the user's inbox, including the sender, time, and contents of each message. Used in the user's inbox page.
106
107## get_media_in_playlist($playlistId)
108
109Returns an array of media in a particular playlist, each row containg the mediaId, title, and filepath. Used on the view playlist page.
110
111## does_media_exist($mediaId)
112
113Returns a boolean that indicates the existance of a particular mediaId. Used for parameter validation in many places on the website.
114
115## get_playlist_owner($playlistId)
116
117Returns the accountId of the owner of a particular playlistId. Used for parameter validation / playlist modification to prevent attackers from changing other's playlists.
118
119## add_to_playlist($playlistId, $mediaId)
120
121Adds a relationship to the playlist_media table indicating that the specified mediaId is included in the playlist specified by playlistId.
122
123## remove_from_playlist($playlistId, $mediaId)
124
125Removes a relationship from the playlist_media table indicating that the specified mediaId is no longer included in the playlist specified by playlistId.
126
127## create_playlist($userId, $listname)
128
129Creates a new playlist owned by the userId specified, with the name specified. Used in the uesr's playlist management page.
130
131## delete_playlist($userId, $listId)
132
133Removes an existing playlist. UserId is specified to ensure that the function cannot be manipulated to remove playlists not owned by the user calling the function.
134
135## get_playlists($userId)
136
137Returns an array of playlists, each row containing the playlistId, playlistName, and ownerId. Used to display the user's list of playlists.
138
139## get_comments_for_media($mediaId)
140
141Returns an array of the 30 latest comments on a particular media. Used to on the media display page.
142
143## add_comment_to_media($mediaId, $comment, $userId)
144
145Adds a comment to the media specified by mediaId, where the user commenting will be the user specified by $userId. The contents of the comment are specified by the $comment variable.
146
147## update_media_metadata($mediaId, $title, $desc, $keywords, $category)
148
149Used to update a particular media's metadata. The media table is updated to include the new title, description, and category.
150
151Each keyword is added to the keywords table. Each keyword is removed from the mediaId, and then all new keywords are added to the mediaId. Called by insert_into_media to update metadata for the first time.
152
153## get_media_owner($mediaId)
154
155Returns an integer indicating the owner of a particular media. Used to verify ownership of a media when updating metadata.
156
157## get_media_metadata($mediaId)
158
159Returns an array containing the metadata for a particular media. Metadata includes title, description, an array of keywords, and the categoy. Used to fill in the current metadata when editing.
160
161## is_connected($userId1, $userId2)
162
163Returns a boolean indicating if userId1 has added userId2 as a contact. Used to show the proper button for a user. (Add or Remove contact)
164
165## add_contact($userId1, $userId2)
166
167Adds userId2 as a contact for userId1.
168
169## remove_contact($userId1, $userId2)
170
171Removes userId2 as a contact for userId1.
172
173## search_file_by_keyword($keyword, $category)
174
175Returns an array of media, each row containing the mediaId, filepath, type, and title. The media returned all contain the keyword specified as a parameter. If a category is specified, the results will be filtered by category. Used to search the website by keyword.
176
177##get_contacts($userId)
178
179Returns an array of contacts for userId. Used to show the user who is a contact.
180
181## get_accountid($username) & get_username($userId)
182
183Used to translate between username and userId.
184
185## update_profile($userId, $profileText)
186
187Used to update a user's profile to new profile text. Called by the user when the user updates their profile.
188
189## user_exist_check($username, $password)
190
191Returns an integer indicating whether or not a user exists. If the user does not exist, the user is created. A default profile and welcome message are added for the user upon creation. Called by the login and registration pages.
192
193## create_default_profile($username)
194
195Inserts a default profile into the database for a particular user. The default profile text is "Hello World!". Called on user registration.
196
197## user_pass_check($username, $password)
198
199Checks if a particular username and password combination are valid. Called by the login page.
200
201## get_user_profile($username)
202
203Returns the contents of a user's profile for the specified username. Used to display the profile of a user in the search user function.
204
205<div style="page-break-after: always;"></div>
206
207# Implementation Details: MeTube U16
208
209## Overview
210
211This document will provide an overview of the design choices that lead to the implementations of major functions of the website. There are many major functions of the website: user authentication, user profiles, contacts, inbox system, playlist system, uploads system. Each function of the website utilizes some of the many PHP functions that execute MySQL queries. Each PHP function was designed to do one specific thing and are stored in the function.php file. No queries are stored in any feature part of the website.
212
213## User Authentication
214
215A simple password authentication was used to authenticate users. All site PHP files were prefixed with a header that: opens a session if none exists, includes the MySQL function file, checks for authentication in the session and redirects the user to the login page if not logged in. Since all files have this, the user will not be able to access any content of the website without being logged in. The logout system simply destroys the existing session.
216
217## User Profiles
218
219The user profile system was very simple. Users can edit their own profile and search for other users on the MeTube website. From other user's profiles, the user can choose to add them as a contact. Profiles were stored in a table with the user account ID as the primary key.
220
221## Contacts
222
223The user contact system is similar to the user profile system. A user must add another user as a contact in order to send them a message through the inbox system. Contacts were implemented one way (i.e. User A can have User B as a contact even if User B does not have User A as a contact). Contacts were stored as a relationship between two users.
224
225## Inbox System
226
227The inbox system was more complicated than the profile or contact system. Users can only send private messages to their contacts. Users can check their private messages by navigating to the "Inbox" page. Message content was stored in one table, while the collection of message IDs was stored in another.
228
229## Playlist System
230
231The playlist system was the most complicated function of the website. The website needed to support creation and deletion of playlists while also allowing users to add and remove content from each playlist. A table for playlists was created and then a separate table for playlist media contents was created. When a user creates or deletes a playlist, the playlists table is updated. When media is added or removed from a playlist, the playlist_media table is updated.
232
233## Upload System
234
235The upload system had to be heavily modified to accomdate the addition of metadata. Each media needed to have information like title, description, search terms, and category. Since all of this is required, the upload process had to be redesigned to accomodate this. The media table was expanded to support the title, description, and category. A new table was created to store the list of keywords and another table to relate each media to its keyword(s).
236
237<div style="page-break-after: always;"></div>
238
239# Test Cases
240
241## Account Registration
242- Username must be between 5-32 characters
243 - Navigate to Register page
244 - Enter a username less than 5 characters long/longer than 32 characters and a valid password
245 - Click Submit
246 - Page should reject registration and display an error message
247 - Status: <b>Success</b>
248
249- Username must be alphanumeric
250 - Navigate to Register page
251 - Enter a username with valid length but with special characters (eg *, #) and a valid password
252 - Click Submit
253 - Page should reject registration and display an error message
254 - Status: <b>Success</b>
255
256- Username must be unique
257 - Navigate to Register page
258 - Enter a username that is already registered and a valid password
259 - Click Submit
260 - Page should reject registration and display an error message
261 - Status: <b>Success</b>
262
263- Passwords must match
264 - Navigate to Register page
265 - Enter a valid username and two non-matching passwords
266 - Click Submit
267 - Page should reject registration and display an error message
268 - Status: <b>Success</b>
269
270- Valid use case
271 - Navigate to Register page
272 - Enter a valid username and two matching passwords
273 - Click Submit
274 - Page should accept registration and redirect user to homepage
275 - Status: <b>Success</b>
276
277## Login
278- Account does not exist
279 - Navigate to Register page
280 - Enter an invalid username and any password
281 - Click Submit
282 - Page should reject login and display an error message
283 - Status: <b>Success</b>
284
285- Password does not match username
286 - Navigate to Register page
287 - Enter a valid username and incorrect password
288 - Click Submit
289 - Page should reject login and display an error message
290 - Status: <b>Success</b>
291
292- Valid use case
293 - Navigate to Login page
294 - Enter a valid username and matching password
295 - Click Submit
296 - Page should accept login and redirect user to homepage
297 - Status: <b>Success</b>
298
299## Searching for Users
300- Valid use case
301 - Navigate to Search for Users page
302 - Enter an existing username and click Search
303 - Page should display username and profile description, as well as the Add Contact button
304 - Adding a contact
305 - Assuming that the user does not already exist in user's contacts, click the Add Contact button
306 - User should be added to user's contact list
307 - Page should redirect user to My Contacts
308 - Status: <b>Success</b>
309 - Removing a contact
310 - Assuming that the user already exists in user's contacts, click the Remove Contact button
311 - User should be removed from user's contact list
312 - Page should redirect user to My Contacts
313 - Status: <b>Success</b>
314
315## Editing profile
316- Valid use case
317 - Navigate to Edit Profile page
318 - Enter/replace text in the description text area displayed
319 - Click Save
320 - User profile description should be saved
321 - Status: <b>Success</b>
322
323## Contacts List
324- Valid use case
325 - Navigate to My Contacts page
326 - Assuming that the user has contacts, user's contacts will be displayed in a table on this page
327 - Removing a contact
328 - Assuming that the user has at least one contact, click the Remove button next to a contact's name
329 - That contact should be removed from user's contact list
330 - Page should refresh and contacts list should reflect change
331 - Status: <b>Success</b>
332
333## Messaging other users
334- Valid use case
335 - Navigate to Mail
336 - Assuming that the user has received messages from other users, any received messages along with their sender and a timestamp will be displayed in a table on this page
337 - Status: <b>Success</b>
338
339- Composing new mail
340 - Navigate to Mail
341 - Click Compose New Mail
342 - Assuming user has contacts
343 - Select a recipient from the dropdown box containing user's contacts
344 - Enter a message
345 - Click Send
346 - Message will be sent and a message will be displayed confirming this
347 - Status: <b>Success</b>
348 - If user does not have any contacts
349 - Recipient dropdown box will be empty
350 - Enter a message
351 - Click Send
352 - Page will refuse message and display an error message
353 - Status: <b>Success</b>
354
355## Uploading Files
356- Title must be between 10 and 100 characters
357 - Navigate to Upload File
358 - Type a title less than 10 or greater than 100 characters
359 - Choose a valid file
360 - Click Submit
361 - Page will refuse upload and display an error message
362 - Status: <b>Success</b>
363
364- File required
365 - Navigate to Upload File
366 - Type a valid title
367 - Do not choose a file
368 - Click Submit
369 - Page will refuse upload and display an error message
370 - Status: <b>Success</b>
371
372- Valid use case
373 - Navigate to Upload File
374 - Type a valid title
375 - Do not choose a file
376 - Click Submit
377 - Page will refuse upload and display an error message
378 - Status: <b>Success</b>
379
380## Viewing uploads
381- Valid use case
382 - Navigate to My Uploads
383 - If user has uploaded media, page will display list of uploaded media in a table
384 - View media
385 - Assuming that user has at least one uploaded media
386 - Click on media's title
387 - User will be taken to the media viewer for the selected media
388 - Status: <b>Success</b>
389 - Edit metadata
390 - Assuming that user has at least one uploaded media
391 - Click on media's title
392 - User will be taken to the edit metadata page for the selected media
393 - Status: <b>Success</b>
394 - Download metadata
395 - Assuming that user has at least one uploaded media
396 - Click on Download, next to media title
397 - Media will be downloaded to user's computer
398 - Status: <b>Success</b>
399
400## Search for media
401- Search by keyword
402 - From any page on MeTube, type a search query in the box labeled Search this site
403 - Hit Enter
404 - Query will be performed and any search results will be returned
405 - Status: <b>Success</b>
406
407- Search by category
408 - Navigate to Search Files page (search using the navbar)
409 - Select a category from the dropdown box
410 - Click Search
411 - Query will be performed and any search results will be returned
412 - Status: <b>Success</b>
413
414- Search by keyword and category
415 - Navigate to Search Files page (search using the navbar)
416 - Type any keyword in the main search bar
417 - Select a category from the dropdown box
418 - Click Search
419 - Query will be performed and any search results will be returned
420 - Status: <b>Success</b>
421
422- View media
423 - Assuming a search query returned results
424 - Click on the thumbnail next to the media's title
425 - Page should direct user to media viewer for the selected file
426 - Status: <b>Success</b>
427
428## Viewing media
429- Media does not exist
430 - If page was reached in error using an invalid media ID
431 - Page will display an error message
432 - Status: <b>Success</b>
433
434- Valid use case
435 - Navigate to View Media page for valid media ID
436 - Page will display media viewer, playlist editor, and a comments section
437 - Status: <b>Success</b>
438
439### Viewing comments
440- Valid use case
441 - Navigate to View Media page for valid media ID
442 - Assuming that any comments exist for the media, comments will be displayed in a table along with username and a timestamp
443 - Status: <b>Success</b>
444
445### Add a comment
446- Valid use case
447 - Navigate to View Media page for valid media ID
448 - Type a comment into the text area
449 - Click Submit
450 - Page should update with user's submitted comment
451 - Status: <b>Success</b>
452
453### Add to/remove from playlist
454- Valid use case
455 - Navigate to View Media page for valid media ID
456 - Click the checkbox for the playlist that you would like to add the media to/have it removed from
457 - Click save
458 - Playlists will be updated
459 - Status: <b>Success</b>
460
461## View playlists
462- View user's playlists
463 - Navigate to My Playlists
464 - Any created playlists will be displayed in a table
465 - Status: <b>Success</b>
466
467- View playlist
468 - Navigate to My Playlists
469 - Any created playlists will be displayed in a table
470 - Click on a playlist's name
471 - Page will direct user to playlist
472 - Status: <b>Success</b>
473 - Delete playlist
474 - On this page, media can be removed from playlist using the Delete link
475 - Status: <b>Success</b>
476
477## Create playlist
478- Valid use case
479 - Navigate to My Playlists
480 - Type in the desired playlist name in the text box
481 - Click Submit
482 - A playlist will be added to the user's playlists with the submitted name
483 - Status: <b>Success</b>
484
485# Technical Manual
486*These steps assume you have a working Apache installation on Linux.*
487- Move this source code into your Apache server directory.
488- To ensure the CSS and JS files are included properly when viewing the webpage, execute the following commands:
489 ```
490 cd css
491 chmod a+r *
492 cd ..
493 cd js
494 chmod a+r *
495 ```
496- Set up a MySQL database, preferrably on the School of Computing's Buffet system.
497 - Import the file `create_table.mysql` into your database. Using PHPMyAdmin, the steps are as follows:
498 - Login to PHPMyAdmin
499 - Click Query window
500 - Go to the **Import files*- tab
501 - Click **Browse**, locate `create_table.mysql`, click **Open**, then click **Go**.
502- Change the credentials in config.php to match your system.
503
504<div style="page-break-after: always;"></div>
505
506# Test Cases
507
508## Account Registration
509- Username must be between 5-32 characters
510 - Navigate to Register page
511 - Enter a username less than 5 characters long/longer than 32 characters and a valid password
512 - Click Submit
513 - Page should reject registration and display an error message
514 - Status: <b>Success</b>
515
516- Username must be alphanumeric
517 - Navigate to Register page
518 - Enter a username with valid length but with special characters (eg *, #) and a valid password
519 - Click Submit
520 - Page should reject registration and display an error message
521 - Status: <b>Success</b>
522
523- Username must be unique
524 - Navigate to Register page
525 - Enter a username that is already registered and a valid password
526 - Click Submit
527 - Page should reject registration and display an error message
528 - Status: <b>Success</b>
529
530- Passwords must match
531 - Navigate to Register page
532 - Enter a valid username and two non-matching passwords
533 - Click Submit
534 - Page should reject registration and display an error message
535 - Status: <b>Success</b>
536
537- Valid use case
538 - Navigate to Register page
539 - Enter a valid username and two matching passwords
540 - Click Submit
541 - Page should accept registration and redirect user to homepage
542 - Status: <b>Success</b>
543
544## Login
545- Account does not exist
546 - Navigate to Register page
547 - Enter an invalid username and any password
548 - Click Submit
549 - Page should reject login and display an error message
550 - Status: <b>Success</b>
551
552- Password does not match username
553 - Navigate to Register page
554 - Enter a valid username and incorrect password
555 - Click Submit
556 - Page should reject login and display an error message
557 - Status: <b>Success</b>
558
559- Valid use case
560 - Navigate to Login page
561 - Enter a valid username and matching password
562 - Click Submit
563 - Page should accept login and redirect user to homepage
564 - Status: <b>Success</b>
565
566## Searching for Users
567- Valid use case
568 - Navigate to Search for Users page
569 - Enter an existing username and click Search
570 - Page should display username and profile description, as well as the Add Contact button
571 - Adding a contact
572 - Assuming that the user does not already exist in user's contacts, click the Add Contact button
573 - User should be added to user's contact list
574 - Page should redirect user to My Contacts
575 - Status: <b>Success</b>
576 - Removing a contact
577 - Assuming that the user already exists in user's contacts, click the Remove Contact button
578 - User should be removed from user's contact list
579 - Page should redirect user to My Contacts
580 - Status: <b>Success</b>
581
582## Editing profile
583- Valid use case
584 - Navigate to Edit Profile page
585 - Enter/replace text in the description text area displayed
586 - Click Save
587 - User profile description should be saved
588 - Status: <b>Success</b>
589
590## Contacts List
591- Valid use case
592 - Navigate to My Contacts page
593 - Assuming that the user has contacts, user's contacts will be displayed in a table on this page
594 - Removing a contact
595 - Assuming that the user has at least one contact, click the Remove button next to a contact's name
596 - That contact should be removed from user's contact list
597 - Page should refresh and contacts list should reflect change
598 - Status: <b>Success</b>
599
600## Messaging other users
601- Valid use case
602 - Navigate to Mail
603 - Assuming that the user has received messages from other users, any received messages along with their sender and a timestamp will be displayed in a table on this page
604 - Status: <b>Success</b>
605
606- Composing new mail
607 - Navigate to Mail
608 - Click Compose New Mail
609 - Assuming user has contacts
610 - Select a recipient from the dropdown box containing user's contacts
611 - Enter a message
612 - Click Send
613 - Message will be sent and a message will be displayed confirming this
614 - Status: <b>Success</b>
615 - If user does not have any contacts
616 - Recipient dropdown box will be empty
617 - Enter a message
618 - Click Send
619 - Page will refuse message and display an error message
620 - Status: <b>Success</b>
621
622## Uploading Files
623- Title must be between 10 and 100 characters
624 - Navigate to Upload File
625 - Type a title less than 10 or greater than 100 characters
626 - Choose a valid file
627 - Click Submit
628 - Page will refuse upload and display an error message
629 - Status: <b>Success</b>
630
631- File required
632 - Navigate to Upload File
633 - Type a valid title
634 - Do not choose a file
635 - Click Submit
636 - Page will refuse upload and display an error message
637 - Status: <b>Success</b>
638
639- Valid use case
640 - Navigate to Upload File
641 - Type a valid title
642 - Do not choose a file
643 - Click Submit
644 - Page will refuse upload and display an error message
645 - Status: <b>Success</b>
646
647## Viewing uploads
648- Valid use case
649 - Navigate to My Uploads
650 - If user has uploaded media, page will display list of uploaded media in a table
651 - View media
652 - Assuming that user has at least one uploaded media
653 - Click on media's title
654 - User will be taken to the media viewer for the selected media
655 - Status: <b>Success</b>
656 - Edit metadata
657 - Assuming that user has at least one uploaded media
658 - Click on media's title
659 - User will be taken to the edit metadata page for the selected media
660 - Status: <b>Success</b>
661 - Download metadata
662 - Assuming that user has at least one uploaded media
663 - Click on Download, next to media title
664 - Media will be downloaded to user's computer
665 - Status: <b>Success</b>
666
667## Search for media
668- Search by keyword
669 - From any page on MeTube, type a search query in the box labeled Search this site
670 - Hit Enter
671 - Query will be performed and any search results will be returned
672 - Status: <b>Success</b>
673
674- Search by category
675 - Navigate to Search Files page (search using the navbar)
676 - Select a category from the dropdown box
677 - Click Search
678 - Query will be performed and any search results will be returned
679 - Status: <b>Success</b>
680
681- Search by keyword and category
682 - Navigate to Search Files page (search using the navbar)
683 - Type any keyword in the main search bar
684 - Select a category from the dropdown box
685 - Click Search
686 - Query will be performed and any search results will be returned
687 - Status: <b>Success</b>
688
689- View media
690 - Assuming a search query returned results
691 - Click on the thumbnail next to the media's title
692 - Page should direct user to media viewer for the selected file
693 - Status: <b>Success</b>
694
695## Viewing media
696- Media does not exist
697 - If page was reached in error using an invalid media ID
698 - Page will display an error message
699 - Status: <b>Success</b>
700
701- Valid use case
702 - Navigate to View Media page for valid media ID
703 - Page will display media viewer, playlist editor, and a comments section
704 - Status: <b>Success</b>
705
706### Viewing comments
707- Valid use case
708 - Navigate to View Media page for valid media ID
709 - Assuming that any comments exist for the media, comments will be displayed in a table along with username and a timestamp
710 - Status: <b>Success</b>
711
712### Add a comment
713- Valid use case
714 - Navigate to View Media page for valid media ID
715 - Type a comment into the text area
716 - Click Submit
717 - Page should update with user's submitted comment
718 - Status: <b>Success</b>
719
720### Add to/remove from playlist
721- Valid use case
722 - Navigate to View Media page for valid media ID
723 - Click the checkbox for the playlist that you would like to add the media to/have it removed from
724 - Click save
725 - Playlists will be updated
726 - Status: <b>Success</b>
727
728## View playlists
729- View user's playlists
730 - Navigate to My Playlists
731 - Any created playlists will be displayed in a table
732 - Status: <b>Success</b>
733
734- View playlist
735 - Navigate to My Playlists
736 - Any created playlists will be displayed in a table
737 - Click on a playlist's name
738 - Page will direct user to playlist
739 - Status: <b>Success</b>
740 - Delete playlist
741 - On this page, media can be removed from playlist using the Delete link
742 - Status: <b>Success</b>
743
744## Create playlist
745- Valid use case
746 - Navigate to My Playlists
747 - Type in the desired playlist name in the text box
748 - Click Submit
749 - A playlist will be added to the user's playlists with the submitted name
750 - Status: <b>Success</b>
751
752# Technical Manual
753*These steps assume you have a working Apache installation on Linux.*
754- Move this source code into your Apache server directory.
755- To ensure the CSS and JS files are included properly when viewing the webpage, execute the following commands:
756 ```
757 cd css
758 chmod a+r *
759 cd ..
760 cd js
761 chmod a+r *
762 ```
763- Set up a MySQL database, preferrably on the School of Computing's Buffet system.
764 - Import the file `create_table.mysql` into your database. Using PHPMyAdmin, the steps are as follows:
765 - Login to PHPMyAdmin
766 - Click Query window
767 - Go to the **Import files*- tab
768 - Click **Browse**, locate `create_table.mysql`, click **Open**, then click **Go**.
769- Change the credentials in config.php to match your system.
770
771# User Manual
772The following is a basic usage guide that summarizes how to use MeTube.
773
774## Creating an account and logging in
775On MeTube's homepage, visitors are able to:
776- Register for a new account
777- Log in
778
779### New users
780
781To register for an account, click on the `Register` button on the navbar. Enter your desired username and password, then click `Submit` at the bottom of the page.
782
783Note that usernames have the following restrictions:
784- Must be unique
785- Must be alphanumeric
786- Must be between 5-32 characters
787
788If successful, MeTube will redirect you to the Homepage.
789
790### Existing users
791
792To login with an existing account, click on the `Login` button on the navbar. Enter username and password, then click `Submit` at the bottom of the page. If your credentials are valid, MeTube will redirect you to the Homepage.
793
794## Homepage
795
796On the homepage, a logged in user can perform the following tasks:
797- Search Users
798- Edit Profile
799- View Contacts
800- View Mail
801- View Playlists
802- View Uploads
803- Upload Media
804- Search Media
805
806The following sections describe these actions in further detail.
807
808## Searching for users
809On the Search Users page, users can enter a username and click the `Search` button to be taken to that user's profile. If no user with the requested username exists, no result will be returned. A user's profile contains his or her username and description. To add a user to your contacts list, use the `Add contact` button. Once added, a contact can be also removed by clicking on the `Remove contact` button.
810
811## Editing profile
812On this page, users can edit their profile description. A textbox is provided with a default description. Modify the text as desired, then click the `Save` button to save the changes.
813
814## Contacts list
815This page displays a list of all users on your contacts list. You may remove users from your contacts by clicking the `Remove` link next to the user's name.
816
817## Messaging other users
818On the Mail page, users can access their inbox. Messages you receive are shown here. To send a message to another user, click the `Compose new mail` link. Select a user from your contacts from the dropdown, then enter your message in the provided textbox. Click `Send`, and your message will be sent.
819
820## Uploading files
821MeTube provides a simple upload interface where you can add metadata as well as submit a file for upload.
822
823The following metadata types are provided:
824
825- Title: Human-readable media title, appears in searches
826- Description: A short description of the media
827- Search terms: A space-separated list of related keywords (searches are performed on this set)
828- Category: Media category, similar to a genre
829
830Out of these types, only the title is required. Titles must be between 10 and 100 characters long.
831
832Choose a file using the button at the bottom of the page, and click `Submit` to submit your file and metadata for upload. You will be redirected to your Uploads page.
833
834## Viewing uploads
835This page shows a listing of all of the media you have uploaded. To view the media, click on its title. To edit its metadata, click the `Edit metadata` link next to the media's title. Finally, uploaded media may be downloaded by clicking the `Download` link next to its title.
836
837### Editing metadata
838Media metadata can be updated using a form similar to the upload page. Make any desired changes, then click `Submit` to save your changes.
839
840## Searching for media
841
842Media searches are typically done on their own page, but you may search for media on any page by using the `Search this site` bar in the navigation bar. Typing in a query and hitting `Enter` will perform an all-categories search with the requested keywords.
843
844You will then be redirected to the search page, where any relevant search results will be displayed. Clicking on any of the thumbnails will direct you to the media viewer, where you can view the media and interact with it.
845
846On the search page, there is the option to search for media by keyword or category, or both. Enter keywords in the search bar, select a category from the drop-down, and click `Search` to perform a search.
847
848## Viewing media
849The Media Viewer supports audio, video, and various image formats. On this page, you will typically see the media's title, the media itself, and any comments made on the media.
850
851## Interacting with media: playlists and comments
852
853To add media to a playlist, check the playlist's checkbox under Playlists below the media viewer and click the `Save` button. This will add the video to your playlist. You may also remove media from your playlists this way. To make a comment, type text into the provided textbox and click `Submit`. You will see your comment added to the comments section below.
854
855## Viewing playlists
856On the My Playlists page, any created playlists will be shown. Every user has an automatically created Favorites playlist. To view a playlist, click on its name. When viewing a playlist, the media contained in the playlist will be displayed in a table. To view a piece of media, click on its title. To delete a piece of media from a playlist, click the Delete link next to its title.
857
858## Creating playlists
859On the My Playlists page, a playlist can be created by typing in the desired name and clicking `Submit`. The added playlist will be displayed on this page.