• Setting Up
• Configuring the Database
• Client System
  • Accessing the Client System
  • General Structure of a Page
• Content Management System
  • Accessing the CMS
  • General Structure of a Page
  • Navigating the CMS Bar
  • Editing a Page
  • Editing the Sidenav
  • Floating Action Button
  • Listeners
• Styling
• Front-End Functionality
• Using the API
  • Getting All Objects of a Certain Type (GET)
  • Getting the Content of the About Page (POST)
  • Getting the Content of the About Page for Client (POST)
  • Changing the Content of the About Page (POST)
  • Getting the Log of the About Page (POST)
  • Changing the Log of the About Page (POST)
  • Getting the Content of any Subject, Topic, Section, or Example (POST)
  • Getting the Content of any Subject, Topic, Section, or Example for Client (POST)
  • Adding & Changing the Content of any Subject, Topic, Section, or Example (POST)
  • Getting the Log of any Subject, Topic, Section, or Example (POST)
  • Changing the Log of any Subject, Topic, Section, or Example (POST)
  • Deleting any Subject, Topic, Section, or Example (POST)
  • Adding a Contributor (POST)
  • Deleting a Contributor (POST)
  • Grabbing a Contributor's Profile Information (POST)
  • Grabbing a Contributor's Security Question (POST)
  • Changing a Contributor's Profile Information (POST)
  • Changing a Contributor's Password (POST)
  • Changing a Contributor's Status (POST)
  • Changing a Contributor's Approval (POST)
  • Changing a Contributor's Rank Approval (POST)
  • Checking the Answer of a Security Question (POST)
  • Grabbing Administrator Information (POST)
  • Getting List of all Contributors (POST)
  • Getting List of Unapproved Contributors (POST)
  • Getting List of Non-Committee Members (POST)
  • Recording a Contributor's Live Session (POST)
  • Checking if a Contributor is Live (POST)
  • Removing a Contributor's Live Session (POST)
  • Checking the Existence of an Email (POST)
  • Checking Login Credentials (POST)
  • Adding a Contributor to the Committee (POST)
  • Checking if a Contributor is on the Committee (POST)
  • Removing a Contributor from the Committee (POST)
  • Counting the Number of Contributors (GET)
  • Counting the Number of Committee Members (GET)
• Running the Server
  • Apache Server (DEPRECATED)
  • NodeJS Server
• Future Plans
• License

I have to assume that you have npm, git, and java installed. In order to get started first copy the repository over to your local machine and inside the root directory of the project, as administrator run:

npm install -g bower gulp
npm install gulp gulp-install
gulp

This will handle the installation of all node_modules, bower_components, and build the necessary gulp files.

The database is setup according to the following ERR diagram:

Example builds can be found over at "/content/db".

To access the system direct your browser to "localhost" where you will encounter:

All navigation is completely controlled by the sidenav which is hidden by default on mobile displays (and small screens).

The pages corresponding to the about page or any subject, topic, section, or example take on the same design. Besides the sidenav and top nav, each page also contains a primary region where all content is placed. This content is specifically broken into small boxes that each contain a title and associated content. Such a box may or may not be hidden by default, but by simply clicking on the strip containing the title, the content can be shown and hidden respectively.

To access the system direct your browser to "localhost/login" where you will encounter:

As a first time user you will have to register a new account. Furthermore, if the system is of a fresh install the database will have to be manually accessed so as to change the "status" and "rank" values of the administrator to "1" and "admin" respectively.

Upon logging into the system you will hit something that looks like:

For any given page the bar found below the top nav:

provides all of the functionality to:

• view the content of any subject, topic, section, or example as is seen on the client side
• view the rendered changes that have not necessarily been pushed to the client side yet
• edit the content of any subject, topic, section, or example
• add a box with an associated title and body of content (only available in the edit view)
• approve the current changes to the content so as to push it live to the client side
• view the history of the current subject, topic, section, or example
• save any changes to the database permanently

It is important to note that any changes made on a page are not pushed to the database unless the save button is explicitly clicked. Moreover, for current changes to be pushed onto the client side the system uses a logarithmic scaling based on the number of active contributors to determine how many approvals are needed. If changes are made to the content of the page all previous approvals are reset by design to ensure that contributors do not provide approvals for content they may not have necessarily seen.

Under the edit mode you can take a page with a clean slate and add a box using the cms-bar to obtain:

You can add as many boxes as your heart desires with each having the capability to:

• edit the title and body content by directly clicking on the text
• add inline mathematical text by invoking the dollar sign delimiters, i.e. $\sum\limits_{n=0}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$ (same as Latex)
• add a centered mathematical environment that supports a multiline format with alignment $\eqalign{2x + 2y &= 1 \ 3x - 7y &= 5}$ (same as Latex)
• add a centered table that can be dynamically changed by inserting/removing rows and columns as needed
• add a centered image
• add a list (both ordered and unordered available)
• add a link
• add a note strictly for other contributors (will not appear on client side)
• move the selected box down
• move the selected box up
• delete itself
• toggle the display (this determines if the box will be hidden by default or not)
• show and hide the box content

Every page will have a button located at the top of the sidenav:

where subjects, topics, sections, or examples can be added (depending on where you are located). Upon clicking you will find something similar to:

It is here that new subjects, topics, sections, and examples can be added with the capability, like the current items, to have their names and order edited. Furthermore, each will have an associated approval and disapproval that functions in exactly the same manner as the content approval system. Therefore, an item will only be pushed to the client nav or deleted all together when the necessary number of approvals are given, both of which are permanent changes. It is important to note that like the content editing mode, any changes made to the sidenav are only pushed to the database when the button is explicitly clicked.

At the bottom right of each page you will find the button which provides the following functionality:

• logout as a contributor
• update profile information
• see all subjects, topics, sections, and examples that are missing your content approval currently
• approve/disapprove incoming contributors (only for committee members and administrator)
• provide an opinion on current non-committee members as to whether they should join the committee or not (only for committee members)
• add/remove a contributor from the committee and delete a contributor from the system (administrator only)

• The system constantly listens to a cookie change so as to detect a contributor's session. After an hour of inactivity a user will be navigated back to the login page so as to provide the necessary credentials once more.
• If a contributor tries to leave a page with unsaved changes, the system will prompt the contributor asking if they are sure about leaving the page (this excludes a page exit or reload).
• If another contributor has pushed new changes to the database on the current page, the system will prompt the contributor stating that the database has new content (checks every five minutes).

All styles associated to the website can be found inside the "/styles/dev" folder. This site is mobile-friendly and to make it easier to read, there exist different files for different screen widths.

All of the functionality associated to the actual website can be found inside the "/scripts/front-end" folder.

For all of the following "localhost" can remain if you are running a local build or replaced with the domain name.

To get all subjects, topics, sections, or examples available in the database you would call on:

localhost/api/:objs

where "objs" represents what we want to get which can be one of four things:

• subjects
• topics
• sections
• examples

To get the content of the about page you would call on:

localhost/api/cms/about/data

To get the content of the about page you would call on:

localhost/api/about/client

The difference between this and the previous call is that this does not grab the cms information for the client side as it is unnecessary.

To change the content of the about page you would call on:

localhost/api/cms/about/change

where you would be required to provide the JSON data that has the parameters:

• heading
• title
• content
• heading_cms
• title_cms
• content_cms
• cms_approval

To get the log of the about page you would call on:

localhost/api/want/about

alongside the JSON data that requires the parameter:

• id which is the id of the object.

To change the log of the about page you would call on:

localhost/api/change/about

alongside the JSON data that requires the parameters:

• id
• log where log represents the string containing all historical changes with splits based on "-----" (for events) and "_____" (for date and description).

To get the content of the requested item you would call on:

localhost/api/:obj/data/cms

where "obj" represents what we want to get which can be one of four things:

• subject
• topic
• section
• example alongside the JSON data that requires the parameter:
• param which is the id of the object.

To get the content of the requested item you would call on:

localhost/api/:obj/data/client

where "obj" represents what we want to get which can be one of four things:

• subject
• topic
• section
• example alongside the JSON data that requires the parameter:
• param which is the id of the object. The difference between this and the previous call is that this does not grab the cms information for the client side as it is unnecessary.

To add or change the content of the requested item you would call on:

localhost/api/:operation/:obj

where "obj" represents what we want to work with which can be one of four things:

• subject
• topic
• section
• example alongside the JSON data that requires the parameter:
• param which is the id of the object.

To get the log of the requested item you would call on:

localhost/api/want/:obj

where "obj" represents what we want to work with which can be one of four things:

• subject
• topic
• section
• example alongside the JSON data that requires the parameter:
• id which is the id of the object.

To change the log of the requested item you would call on:

localhost/api/change/:obj

where "obj" represents what we want to work with which can be one of four things:

• subject
• topic
• section
• example alongside the JSON data that requires the parameters:
• id
• log where log represents the string containing all historical changes with splits based on "-----" (for events) and "_____" (for date and description).

To delete the requested item from the database you would call on:

localhost/api/delete/:obj

where "obj" represents what we want to get which can be one of four things:

• subject
• topic
• section
• example alongside the JSON data that requires the parameter:
• param which is the id of the object.

To add a contributor to the system you would call on:

localhost/api/cms/contributor/add

alongside the JSON data that requires the parameters:

• email
• fname
• lname
• passwd
• question
• answer where by default a contributor is added with a status of "0". The password and answer are encrypted using the bcrypt library so as to provide anonymity, even from the administrator.

To delete a contributor from the system you would call on:

localhost/api/cms/contributor/remove

alongside the JSON data that requires the parameter:

• email

To grab a contributor's profile from the system you would call on:

localhost/api/cms/contributor/profile

alongside the JSON data that requires the parameter:

• email

To grab a contributor's security question from the system you would call on:

localhost/api/cms/contributor/security

alongside the JSON data that requires the parameter:

• email

To change a contributor's profile in the system you would call on:

localhost/api/cms/contributor/change/profile

alongside the JSON data that requires the parameters:

• email
• fname
• lname
• question
• answer

To change a contributor's password in the system you would call on:

localhost/api/cms/contributor/change/password

alongside the JSON data that requires the parameters:

• email
• password

To change a contributor's status in the system you would call on:

localhost/api/cms/contributor/change/status

alongside the JSON data that requires the parameters:

• email
• value

To change a contributor's approval in the system you would call on:

localhost/api/cms/contributor/change/approval

alongside the JSON data that requires the parameter:

• email
• approval
• del

To change a contributor's rank approval in the system you would call on:

localhost/api/cms/contributor/change/rankApproval

alongside the JSON data that requires the parameters:

• email
• rank_approval
• rank_disapproval

To check an answer to the security question you would call on:

localhost/api/cms/contributor/check/security

alongside the JSON data that requires the parameters:

• email
• answer

To grab the administrator's public information from the system you would call on:

localhost/api/cms/admin/info

To obtain the list of all contributors (besides the administrator) from the database you would call on:

localhost/api/cms/contributors/data

This strictly picks from the contributors that have a status of "1".

To obtain the list of unapproved contributors from the database you would call on:

localhost/api/cms/contributors/unapproved

This corresponds to all contributors that have a status of "0".

To obtain the list of non-committee members from the database you would call on:

localhost/api/cms/contributors/nonmember

This strictly picks from the contributors that have a status of "1".

To record a contributor's current session in the database you would call on:

localhost/api/cms/live/add

alongside the JSON data that requires the parameter:

• email

To check if a contributor is currently live you would call on:

localhost/api/cms/live/check

alongside the JSON data that requires the parameter:

• email

To remove a contributor's current session in the database you would call on:

localhost/api/cms/live/remove

alongside the JSON data that requires the parameter:

• email

To record a contributor's current session in the database you would call on:

localhost/api/cms/live/add

alongside the JSON data that requires the parameter:

• email

To check the login credentials against the database you would call on:

localhost/api/cms/check/login

alongside the JSON data that requires the parameter:

• email
• passwd

To add a contributor to the committee you would call on:

localhost/api/cms/committee/add

alongside the JSON data that requires the parameter:

• email

To check if a contributor is on the committee you would call on:

localhost/api/cms/committee/check

alongside the JSON data that requires the parameter:

• email

To remove a contributor from the committee you would call on:

localhost/api/cms/committee/remove

alongside the JSON data that requires the parameter:

• email This will not delete a contributor from the system, but rather lower the rank in the database.

To count the number of contributors in the database you would call on:

localhost/api/cms/count/contributors

This corresponds to all contributors that have a status of "1".

To count the number of committee members in the database you would call on:

localhost/api/cms/count/committee

Prior to running you need to modify the following code at "/api/config.php":

$mysql_hostname = "";
$mysql_user = "";
$mysql_password = "";
$mysql_database = "";

and put in your credentials for the database. To configure the port you need to find the following lines inside the Apache "httpd.conf" file:

Listen 0.0.0.0:80
Listen [::0]:80

and change "80" to whichever port you wish to use. With Apache you may also have to change the default path so in the same configuration file find:

DocumentRoot "path"

and replace "path" with the project path. Lastly in the same file also change:

<Directory "path">

"path" once again to the desired path. While still on the topic of Apache configuration make sure that the following modules are turned on:

core_module
so_module
watchdog_module
http_module
log_config_module
logio_module
version_module
unixd_module
access_compat_module
alias_module
auth_basic_module
authn_core_module
authn_file_module
authz_core_module
authz_host_module
authz_user_module
autoindex_module
dir_module
env_module
filter_module
mime_module
mpm_prefork_module
negotiation_module
php5_module
rewrite_module
setenvif_module
status_module
deflate_module

Now we need to minify the necessary files so in the root directory run:

node minify.js

Finally you can run the Apache service!

Prior to running you need to modify the following code at "/scripts/back-end/config.js":

"host": "",
"user": "",
"password": "",
"database": ""

and put in your credentials for the database and at "/app.js":

app.listen(8080, () => {
  console.log("The server is now listening!");
});

change "8080" to whichever port you wish to use. Now to minify all of the necessary documents and start the server run:

node app.js

at the root directory. If you see:

Everything has been minified!
The server is now listening!

the server has officially been launched and is listening on the port you provided.

• Add the subjects (these represent the main ones of interest, over time the list may evolve):
  • Precalculus
  • Integral Calculus
  • Linear Algebra
  • Vector Calculus
  • Complex Variables
  • Probability

Located at "LICENSE.md".