Welcome to COMP 466:
Advanced Technologies for Web-Based Systems (Revision 6)

Assignment 2: Part 1: Bookmarker

Student name: Christopher Cagna

Student number: 3292839

Start date: 03/10/23

End date: 03/17/23

Hours Spent: 70

Description:

The following web application uses MySQL and PHP to facilitate an online bookmarking service. The application allows for users to create a user account, and personally save web addresses to that account. The website should then display all the links, while logged in, the user has saved.

Analysis:

Purpose:

• This application sets out to create a Web App that allows users to log in and store personal website bookmarks, to be accessed from anywhere provided they are able to login.

Requirements:

• User able to create user account with email name and password
• User submitted email should be checked for email validity and DB uniqueness
• User should need to type same password twice for confirmation during signup
• User account information is stored on database
• User able to log into account using correct account information
• User able to log out from account section
• User able to store bookmarks (Website name and URL)
• Bookmarks should be presented in GUI
• Bookmarks should be clickable, and send user to respective website when clicked
• Bookmarks should be deletable via a button located below the bookmark
• Top 10 bookmarks should be displayed to users who are not logged in (guest users)
• Guest users should be redirected to account creation when clicking on create bookmark

Constraints:

• Application should run on all major browsers
• Application should only require that user has Javascript enabled on the browser
• Application should be live on a Web Server for TA Access

Input and Output:

• Website will be fully controllable using the mouse
• user data will be entered into text fields using the keyboard
• user submitted emails must be unique
• user submitted submitted passwords must pass confirmation
• user will be assigned a unique ID number
• the website will output appropriately based on user ID number

TA Guide

Hello, and welcome to bookmarker! The website should require no extra guidance and function as expected. You may click the Bookmarker tile below, or click home in the nav window to begin the experience. note:

Documentation

The following documentation will serve as a walkthrough of the web application and its functionality. I will start with surface level elements and move in deeper.

Basic Aesthetic Functions

• Background images were created from various AI art websites and inserted using CSS
• Logos were designed from AI Logo design websites
• Styles with CSS
  • Nav Menus: I used an image as well as the newer ::before pseudo class in CCS to create a before state that becomes visible when hovering the element. I used transitions to blend the effect.
  • Clickable Images: I used a transition effect combined with blue and shadow, which increased when hovered
  • Must text sits upon a what I call a bubble, which is basically a translucent white background combined with some blur.
  • There are many more styles, but the above were the more complex implementations
• PHP vs HTML: The web app mostly used .php files, this is due large in part to the header and footer
• The Header and Footer: The header and footer reside in their own files and are brought into each page using the include 'header.php' php command. My researched that this is the most common practice for keeping a consistent header and footer across all pages. This did however force me to convert all my HTML files to PHP.

The Javascript

• Javascript is only used twice, as php scripts are used for most everything else.
• I used it to handle the two client side functionalities
• In both instances, it is used to hide or show a block, when clicking sign up it changes the menu to the sign up menu, and when looking at your bookmarks, if the user is signed in, the "add bookmark" button is replaced with an identically appear button that instead forwards the user to the login page.

Account Creation (php)

• If the user is not logged in, clicking the login nav button, or clicking the get started button from home, will direct the user to account .php, a HTML form for login. If the user clicks SignUp, JS changes the block to the signup form. the HTML form will insure proper syntax is achieved and the form can then be submitted with the "create account" button.
• The Create Account button activates the form action "welcome.php".
• welcome.php gathers the user information using safe isset commands, and store the form information.
• The password is hashed and the email is set to all lowercase
• welcome.php then checks for errors such as invalid syntax, failed to repeat password, and email uniqueness
• User account information is then stored in the bookmarkerdb database
• database and sql information below

Account Login (php)

• The user uses the account.php to login, by pressing the login button in the nav
• Once the user has entered their information, the login button on the form redirects the user to welcomeBack.php. Functions almost identically to the create account but instead confirms a uniqueness of the email, and correctness of password.
• The user is then greeted with the appropriate hello or error message.
• The variables $_SESSION['id'] and $_SESSION['name'] are then set appropriately to be used on all pages

Tracking UserID and Name (php)

• The header, that is on every page, contains the PHP command 'session_start()'
• This starts the session to store the UserID and Name across all the php pages
• At the start of each page, the session variable is checked to see if the user is logged in, and what ID it is
• Guest id=1 is displayed if the user is not logged in
• If the user is logged in, the ID is used to fetch user data from the database
• If the user clicks their name in the nav, they will be directed to loggedIn.php
• This provides a logout button, if clicked logout.php executes that simply unassigned $_session variables

Bookmarks Page

• The bookmarks page loads the bookmarks programmatically through a php loop.
• All the bookmarks URLs and Titles are stored in the database, and the HTML commands are echoed to display each entry
• If the user is not logged in, the ID is set to one, and the Guest ID 10 bookmarks are displayed
• Upon clicking the add bookmark button, a guest user will be redirected to account.php
• A logged in user will fire a JS script that reveals the add bookmark HTML form block in its place.
• Valid email submissions will activate the addBookmark.php action
• The php script uses previously mentioned techniques to add the website and Name to that users bookmarks table, and is then redirected to bookmarks.php if successful, where the bookmark is now displayed.
• Each bookmark comes with a 'delete' button that works by creating a href with the 'bookmarkID= the bookmarks row ID' appended to the deleteBookmark.php url.
• The deleteBookmark.php script then deletes that row from the database, and bookmarks.php is reloaded

All the SQL

• A new database was created named bookmarkerDB, from there create table commands from bookmarker.session.sql were ran to create two tables, users and bookmarks.
• The users table has id as its primary key, but demands a unique email. it also stores first name and hashed password
• The bookmarks tables also uses id as primary key, and references users using userID as a foreign key to link back to the users table.
• All database operations from the website are first started by a include_once dbConfig.php, which is the script that connects to the DB.
• Once connected, a query is formed, and stored in $stmt for security. The statement is then executed before closing
• All database function from here is a result of creating a query, storing it in a statement, and executing.
• Account Creation: Query database to search for email, if no rows return, email is unique, and use insert to store account
• Account Login: Query database to find email, if email exists, verify the hashed password against submission.
• Bookmarks: Use userID to query database to return all bookmarks stored, and then iterate through them to display
• Bookmarks Add: When adding a bookmark the database stores the acceptable website information under the UsersID, and auto increments its personal id number. The id number is used to delete the site later.
• Finally, if the user account is deleted, so will all the bookmarks thanks to the DELETE CASCADE on the foreign key