Below you will find a discussion of the design of Save.


Save was written using PHP, JavaScript, SQL, HTML, and CSS. PHP was mainly used for back-end data manipulation, and JavaScript was mainly used for the front-end display of graphs and manipulation of already-loaded HTML. Save was implemented using the MVC (Model-View-Controller) method. This means that data storage (Model), HTML display (View), and backend manipulation (Controller) were segregated to ease the writing understanding of the code. The data storage was accomplished using a PHPMyAdmin database that lives on the same public server as the main files live. In general, we leveraged the framework of problem set 7 of CS50 to build the basics of our website.


Within the main directory "finalproject" exists a directory called "includes" that is home to configuration.php, which configures the web page, functions.php, which contains important functions for implementing the basic architecture of the website. We made use of the configuration file (config.php) and many of the functions that live in functions.php, including render (to display web page forms), query (to make SQL queries), and redirect (to direct to controller files). Also there exists constants.php, which contains the constants relating to the database and the server.


Inside the next directory, "templates," exist all of the forms required to display the web pages. Notably, apology.php was recycled from problem set 7, as it was a convenient way to indicate an error in user behavior. We created two specific apology forms (called apology_limits.php and apology_expenses.php). We found that when the user clicks the "back" link after a bad input on the limits and expenses pages, the "other" radio button was still selected after going back, which was not desirable for the design of the page. The new apology files avoid this problem. The home page, index_form.php, contains all the links to the different forms. The file graphs_form.php is the web page form that allows for the display of all the graphs. In this file we encoded PHP arrays as JavaScript arrays in order to display them in charts that are written in JavaScript. This is why we included script tags within the PHP file, since it was necessary to do the conversion in the intermediate step (graphs_form.php) between the backend PHP file graphs.php and the frontend JavaScript file scripts.js.


Inside the next directory, "public," exist all of the forms required to execute the backend data manipulation in PHP. The files expenses.php and limits.php perform two main functions. First, they take the inputted expenses and limits and input them into the MySQL database using the query function. Second, they create arrays of categories of expenses and limits, respectively. These arrays are then rendered to the respective forms, expenses_form.php and limits_form.php, to display the drop down menus. One specific design aspect of expenses.php is that it accepts custom inputs that contain only alphanumeric characters or underscores. Whitespace characters cause problems with SQL queries, meaning that the custom category names can only have alphanumeric characters and underscores. In register.php, besides basic user input checking is the framework for the mail verification system. We decided to implement a verification system to help prevent bots from easily overrunning the server. On the technical side, the PHPMailer system used allows the programmer to modify the host and port to change from which mail server the message will be sent. We decided to use ISP's SMTP server because it was more convenient and could be a dedicated account. In verify.php, we used the function rand() to generate pseudo-random verification numbers to be sent in the body of e-mails to users. Export.php creates a .sql file that is used to backup the MySQL database. When the user clicks on the Dropbox icon, the .sql file is created and is then dumped into one variable to prepare for export. The Dropbox button links to the Dropbox drop-in app that saves the file in Dropbox.


The file graphs.php creates arrays that are used in the display of the charts. This file is very large, but can be more easily digested by breaking it down by the array that is created. In all, eight arrays are created. We wanted to do all of the backend manipulation of the data in the PHP file, so that the arrays rendered to the graphs form were ready for encoding in JavaScript and display in charts. An example of one of the arrays is "expenses_monthly array," the first one in the file. This array is indexed by month, starting from the first month of expenses. The value of each index represents the total expense in that month. As will be described later, this array (once encoded into JavaScript), can be directly passed into the chart format, which is an advantageous design aspect.


Within the directory "public" exists a directory "js." Inside "js" are libraries that allowed us to implement many of our design features. First is the jQuery library, which was vital to our manipulation of the DOM with JavaScript. Also, we used Chart.min.js to create different charts of user spending behavior. The file scripts.js had two functions: first was to manipulate the HTML on the limits form and expenses form, and second was to create all the charts on the graphs form. The functionality of scripts.js is based on event listeners at the beginning of the function that trigger functions defined later in the file. This framework is similar to the framework of problem set 8. The first two functions in that file, change() and category(), address the issue of manipulating the HTML on the limits form and expenses form. It was important to us to correctly address the issues of the user's clicking on the "other" radio button and how the web page would react to it. Specifically, when the "other" button is pressed, a custom category input field appears and any selected category in the drop down menu is deselected. When a category is again selected, the custom category input field disappears and "other" button is deselected.


The last four functions, all beginning with "view_", display the charts on the graphs form web page. We designed these functions to minimize array manipulation. All of the array manipulation was done in graphs.php, and the arrays were then encoded in JavaScript in graphs_form.php. Each of the arrays was then used in one of the parts of the data (either labels or datasets). We designed it so that the file just takes the array (either just an array or the array indexed to a certain value) to allow the functions to be easier to read, with a focus on the chart formatting as opposed to the data in the chart.


Lastly, in the main directory there exists a .sql file that contains all of the SQL commands for the pre-populated database, with the one sample user created for illustrative purposes. Even though the database lives on a public domain and doesn't need to be populated by the user (as it would be if the database were on the localhost), we thought that it would be beneficial to include it.