OTTER FORUM

CST 336 FINAL PROJECT

Christian Martinez | Sabrina Ferras | Martin Ronquillo

Otter Forum | 1 8-10-22

 INTRODUCTION
The otter forum is a social media site where a user can create an account with basic
information and make posts and like and comment on other users’ posts.

The distribution of task was as follows:

 Christian Martinez – Backend Lead, Project Coordinator
 Sabrina Ferras – DB Administrator/Lead
 Martin Ronquillo – UX Design Lead.

In this project we wanted to focus on utilizing Node.js using Express and EJS as well as
connecting to MySQL. We wanted to incorporate user interaction in a user-friendly way
to allow the user ease of access to updating their information.

DESCRIPTION
The Otter Forum stores information for Users, Posts, Comments, and any other needed
information to make a user-friendly social site. This information is stored in a database
and sessions are used to make sure the user is logged in before being able to make a
post, comment, or edit their account.

The posts can have a category which can be used to filter what post the user would like
to see on the home page. The user also has the ability to look at their profile and edit any
information about themselves. On the home page they can make a post with a title and
category as well as comment on other users posts.

REQUREMENTS
Project allows user interaction with at least three different types of form elements
Across our site we have various input form elements below is three of the ones we used
 Line 16 of the userUpdate.ejs there is a input type “file”
 Below that we have multiple basic input elements
 On line 25 of the userUpdate.ejs there is an textarea form element

Project uses Web storage or Sessions

For our project we implemented Sessions to check whether a user was logged in or not to be able
to access certain pages or update certain tables in the database.

Otter Forum | 2 8-10-22

 Project allow users to update existing records in the database, in a friendly way
On the updateUser.ejs the user is allowed to update their information, and when the page loads
some of the records are prefilled (not the passwords for security reasons).

Project allow users to add records to the database

As well as the user being able to update their information, they can also make post, comments,
likes, and dislikes. By doing this they are adding records to the database.

Project must have at least 50 lines of client-side JavaScript code

There is over 100 lines of JavaScript code in the homeScript.js.

Project includes at least two local or external Web APIs

We used a lot of internal API’s found in the apiController.js. In that file we have API’s for
getting comments by post, and getting likes and dislikes. The location of two fetch calls are
on lines 15 and 40 of the homeScript.js.

Project has a nice, professional and consistent design, free of typos.

This project uses over 100 lines of CSS as well as Bootstrap. Included in this report are
screenshots of the site.

ER MODEL
ORIGINAL DESIGN
Originally, we had three tables. Below is a picture of the first ER Model. We had a table for User, Post, and Comment
information.

Otter Forum | 3 8-10-22

 CHANGES FROM ORIGINAL
While we kept a lot from the first ER Model, we did add and alter some things to make the database fitted to the
sites needs. We added a field for a profile picture for the users. Instead of having a count for comments, likes, and
dislikes, we created tables to hold the information for likes/dislikes and utilized queries over the comment table to
calculate the number of comments per post.

DB SCHEMA
C r e a t e Ta b l e S t a t e m e n t s
-- MySQL Workbench Forward Engineering

SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0;

SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
SET @OLD_SQL_MODE=@@SQL_MODE,
SQL_MODE='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISIO
N_BY_ZERO,NO_ENGINE_SUBSTITUTION';

-- -----------------------------------------------------
-- Schema eerc71z7eby8fcnl
-- -----------------------------------------------------

-- -----------------------------------------------------
-- Schema eerc71z7eby8fcnl
-- -----------------------------------------------------
CREATE SCHEMA IF NOT EXISTS `eerc71z7eby8fcnl` DEFAULT CHARACTER SET utf8 ;
USE `eerc71z7eby8fcnl` ;

-- -----------------------------------------------------
-- Table `eerc71z7eby8fcnl`.`User`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `eerc71z7eby8fcnl`.`User` (

Otter Forum | 4 8-10-22

 `idUser` INT NOT NULL,
`fName` VARCHAR(45) NOT NULL,
`lName` VARCHAR(45) NOT NULL,
`username` VARCHAR(50) NOT NULL,
`password` VARCHAR(75) NOT NULL,
`profilepic` VARCHAR(255) NULL,
`bio` MEDIUMTEXT NULL,
PRIMARY KEY (`idUser`))
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `eerc71z7eby8fcnl`.`Post`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `eerc71z7eby8fcnl`.`Post` (
`idPost` INT NOT NULL,
`poster` INT NOT NULL,
`category` VARCHAR(45) NULL,
`text` LONGTEXT NOT NULL,
`title` VARCHAR(100) NOT NULL,
PRIMARY KEY (`idPost`),
INDEX `poster_idx` (`poster` ASC) VISIBLE,
CONSTRAINT `poster`
FOREIGN KEY (`poster`)
REFERENCES `eerc71z7eby8fcnl`.`User` (`idUser`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `eerc71z7eby8fcnl`.`Comment`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `eerc71z7eby8fcnl`.`Comment` (
`idComment` INT NOT NULL,
`text` MEDIUMTEXT NOT NULL,
`commenter` INT NOT NULL,
`OriginalPost` INT NOT NULL,
PRIMARY KEY (`idComment`),
INDEX `commenter_idx` (`commenter` ASC) VISIBLE,
INDEX `OriginalPost_idx` (`OriginalPost` ASC) VISIBLE,
CONSTRAINT `OriginalPost`
FOREIGN KEY (`OriginalPost`)
REFERENCES `eerc71z7eby8fcnl`.`Post` (`idPost`)
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `commenter`
FOREIGN KEY (`commenter`)
REFERENCES `eerc71z7eby8fcnl`.`User` (`idUser`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `eerc71z7eby8fcnl`.`friend`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `eerc71z7eby8fcnl`.`friend` (
`idUser` INT NOT NULL,
`idFriend` INT NOT NULL,
PRIMARY KEY (`idUser`, `idFriend`),

Otter Forum | 5 8-10-22

 INDEX `friendId_idx` (`idFriend` ASC) VISIBLE,
CONSTRAINT `userId`
FOREIGN KEY (`idUser`)
REFERENCES `eerc71z7eby8fcnl`.`User` (`idUser`)
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `friendId`
FOREIGN KEY (`idFriend`)
REFERENCES `eerc71z7eby8fcnl`.`User` (`idUser`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `eerc71z7eby8fcnl`.`postlikes`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `eerc71z7eby8fcnl`.`postlikes` (
`originalPost` INT NOT NULL,
`idUser` INT NOT NULL,
`postlike` TINYINT(1) NOT NULL,
INDEX `originalPost_idx` (`originalPost` ASC) VISIBLE,
INDEX `iduser_idx` (`idUser` ASC) VISIBLE,
CONSTRAINT `origPost`
FOREIGN KEY (`originalPost`)
REFERENCES `eerc71z7eby8fcnl`.`Post` (`idPost`)
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `iduser`
FOREIGN KEY (`idUser`)
REFERENCES `eerc71z7eby8fcnl`.`User` (`idUser`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `eerc71z7eby8fcnl`.`commentlikes`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `eerc71z7eby8fcnl`.`commentlikes` (
`originalComment` INT NOT NULL,
`idUser` INT NOT NULL,
`commentlike` TINYINT(1) NOT NULL,
INDEX `originalComment_idx` (`originalComment` ASC) VISIBLE,
INDEX `iduser_idx` (`idUser` ASC) VISIBLE,
CONSTRAINT `originalComment`
FOREIGN KEY (`originalComment`)
REFERENCES `eerc71z7eby8fcnl`.`Comment` (`idComment`)
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `uid`
FOREIGN KEY (`idUser`)
REFERENCES `eerc71z7eby8fcnl`.`User` (`idUser`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

SET SQL_MODE=@OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;
SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;

Otter Forum | 6 8-10-22

SCREENSHOTS
H ome Pa ge (n ot log ge d in ):

Sign-Up Page:

Login Page:

Otter Forum | 7 8-10-22

H ome Pa ge (log ged in ):

Comments:

Otter Forum | 8 8-10-22

Profile Page:

Up d ate Profile Pa ge :

Otter Forum | 9 8-10-22

 CONCLUSION
In Conclusion, our team has walked away with a few takeaways after this project. We all came out of this
project with a strong foundational understanding of Web Development while including sessions and learning to
work with different project paradigm structures. Communication was responsive and effective among us. Despite
having only three people total working on the project we each handled our delegated tasks accordingly.
One learning outcome we had was working on code bases with other people proves to be most effective
with communication. Articulating ideas and project tasks with fellow developers really improves the learning
process. Though some people prefer to work alone, relaying information related to programming projects with
others will be the best for working on large and shared code bases.
It was great getting experience learning the basics of node.js and express as well as learning how to
incorporate a database. Lastly, we felt that we learned a bunch about both server side and client-side
programming and are looking forward to future projects.

Otter Forum | 10 8-10-22