ePortfolio for CIS 4930: Internet Computing

With this assignment, although I had worked with Linux before, I finally understood how setting permissions worked using chmod. After the set up, part 1 of the assignment included creating this ePortfolio page. It was simple way of getting my feet wet with HTML and CSS in applying headers, lists, paragraphs, anchors, and tables.

Continuing on to part 2 of the assignment which involved developing a full page with a relatively large amount of freedom in terms of content, style, and layout. This freedom was somewhat overwhelming at first, but through it I was able to become much more comfortable to using different HTML tags including images and anchors to specific parts of a page through the assessment portion of the page. I also became comfortable making many different classes to edit specific elements with CSS. This page created a lot of room for creativity in terms of design and formatting through CSS. Although not as developed as I would like, I became more comfortable with CSS and will continue looking to improve to the level of quality of modern websites.

Part 3 of the assignment included created the assessment feedback page, and linking each response to the answer choice on the lesson page. This helped me better understand the capabilities and uses of anchor tags along with element IDs. I also was pushed to figure out how to implement certain formatting and functionality in the page through CSS in order to space out each feedback table and allow for no scrolling, while keeping the header so the user would have a smooth experience in seeing feedback for the assessment responses they selected without seeing all the feedback information on that page.

The last part of the assignment focused on developing the style sheet using CSS for the different pages in this assignment. Through this I was able to really get my feet wet and understand how CSS is used. For consistency of certain aspects of basic tags I standardized the fonts, colors, margins, weights, backgrounds, and styles. I also learned how to adjust certain effects such as the rollover color for links.

• Understand how to configure a web account and become familiar with SSH and transferring files with an SFTP client.
• Work with a Linux system using the command line to create folders and set permissions.
• Apply basic HTML and CSS to create a web page.
• Link between multiple HTML pages using anchor tags.

As the first part of this assignment, I created an HTML form for calculating a person's recommended daily water intake. Through this I became more confident and accustomed to the different form tags, including input fields, radio buttons, checkboxes, and dropdown boxes. I additionally edited and customized my continuing CSS style sheet, further growing my confidence with CSS and using it in combination with HTML classes.

Before implementing the JavaScript script for the water intake calculations, I created the structured flowchart to plan out and demonstrate the logic and decision control structure I would use. I believe this was helpful to have a clear idea of what I was intending the program to do in terms of checking and validating the input data and then processing it for the water intake recommendation. Through this I was able to better understand and become comfortable with applying the appropriate rules and symbols used when creating a structured flowchart. This flowchart is linked in the web page.

Finally, I implemented the code for the program based on the structured flowchart. The flowchart helped make the implementation of the program fairly straightforward in terms of the logic and control stucture. I became much more familiar and confident in using JavaScript to retrieve and process data from the HTML form, as well as use simple regular expressions to validate the information from user in order carry out the program correctly. I implemented error messages to appear above the corresponding form element if the program detected the data was invalid or missing when submitted. My approach was to separate the validation function from the water intake calculation function which made it simple to stop the program accordingly if there was any invalid data. If all the data is valid I handled the processing and calculations and output the corresponding result on the page.

• Understand how to create web forms and collect information from users.
• Create decision control structures to process data and output a meaningful result.
• Link JavaScript and HTML to create programs for processing user-input information using the DOM.
• Apply regular expressions to validate data collected from web forms.
• Implement a structured flowchart to prepare and present the processes and decision control structures of a program.

To begin this assignment, I created a simple form that included a text area for user input, as well as some text in p tags for outputting the results of the statistical calculations later. Afterwards, in the file's header I captured the data in an array and parsed it using the split() function. This assignment pushed me to have a strong understanding of JavaScript arrays and using array methods to process the data. I called the functions for each calculation and output the results accordingly.

The second and main part of the assignment involved developing the functions for the different statistical procedures. I became very familiar and stengthened myself in JavaScript functions. In developing the calculations for sum, mean, median, mode, range, maximum, minimum, variance, and standard deviation, I saw how certain calculations involved other intermediate calculations. I was then able to simply call other functions within functions as part of the calculations. For example, I was able to call the the findSum() function in the findVariance() function, the findMin() and findMax() functions in findRange(), and findVariance() in the findStandardDeviation() function. This method of development made it simple to reuse code and easily build on top of it. The findMode() was challenging and took several attempts and approaches and testing to find an algorithm that worked correctly in the different cases.

Finally, I carried out unit testing by using three different random data sets that covered different cases, especially for mode and median. I used google sheets with the same data sets and used the built-in functions to calculated the same procedures. I was able to compare that with the output of my program. At first there was a difference in the median results, but I was able to find my indexing error, and after fixing it I was able to see that my program output either the same results, or rounded forms of the google sheets results, seemingly very accurate in its calculations.

• Understand how to initialize and work with arrays in JavaScript, using array methods for statistical calculations.
• Develop repitition control structures for modular and reusable code.
• Parse numerical input data and process it using JavaScript functions in an external file.
• Conduct unit testing to ensure the accuracy and reliability of functions.

To start this assignment, I chose to integrate Bootstrap first to my assignment 2 webpage. I chose to not use my css stylesheet and instead rely on Bootstrap classes. I was able to become very familiar with the various classes that Bootstrap implements for the different form elements and basic html tags. Through this I was able to easily apply formatting to the elements while Bootstrap handled all the specific details of spacing, colors, and grid arrangement. I was able to realize the power and benefits of using Bootstrap over css by itself.

I continued by applying jQuery to my previous script for the water intake calculations and input validation. I learned the convenience that comes with using the jQuery selectors and how jQuery functions not only shorten the code but faciliate implementing complex effects and dynamically changing the html and css of elements. Although for a simple webpage like this one the difference was not very drastic, I definitely understand and can see how beneficial jQuery can be for developing more complex webpages with different features that need to respond dynamically for the user.

• Revise Assignment 2 by integrating Bootstrap and jQuery.
• Understand and apply the Bootstrap framework for styling and creating a responsive webpage.
• Employ jQuery for dynamic aspects of the user experience to replace traditional DOM.
• Build a webpage with responsive web design to accomodate for different screen sizes.

To start with this assignment, I chose to recreate the assignment 1 quiz, now using an HTML form and using Bootstrap/jQuery for styling and input validation. I was able to create a more visually appealing quiz, much quicker than before. I also noticed I was much more comfortable and confident with these tools and was able to write my code more cleanly.

When creating the quiz results page to process the data, I was able to apply PHP and become familiar with its functions, syntax, and using POST. It was fairly easy to pick up and I found it similar to other languages like C++ or Python. I had some trouble when attempting to run it and got an 500 error in the browser. But I realized that it was a syntax mistake that caused the error. Additionally, I was surprised by how well PHP and HTML can work together when having to display the customized feedback for the user. It was important to also know how to test, clean, and validated the input data in PHP.

Finally, I was able to store the data in a CSV file, and then use and process that data to provide statistics. Storing the data was very straightforward, however reading the data correctly for processing took some time to understand and I had to play with it until I was able to have it work properly. Again, I realized through this how well and powerful PHP can be when incorporating it with HTML.

• Collect quiz information from the user.
• Store user-input data in a CSV file on the server using PHP.
• Use PHP for server-side programming to provide user with custom feedback.
• Summarize information across all users and items using PHP on the server side and display it.

Beginning this assignment by creating a table in my MySQL database that I had previously created was fairly simply. Working with MySQL Workbench made the process simple, after having worked with it in class. I decided on a simple student information table that would make it straightforward to meet all the requirements when creating a form to add to it later. Using MySQL Workbench to create an ERD was also easy through reverse engineering the database.

For creating the web pages to display the table, and include the forms for working with it was not intimidating as I feel I am becoming fairly confident with using HTML alongside Bootstrap/jQuery. Our in-class examples were helpful in knowing how to connect to the database, fetch data from the table, and then process it or display it easily through PHP and HTML. The trickiest part to implement were including the Edit and Delete features for the records. Originally, I had formatted the table to include a form to select the individual record with a radio button, and then separate submit buttons that would call the respective PHP file for editing or deleting the record. I eventually discovered how to include simple links to carry this out in an easier and more commonly-seen way to implement this.

Finally, as part of the assignment I found that a method of addressing SQL injection is through MySQL prepared statements and bound parameters. This prepares the SQL statement ahead of time for the database and specifies the data types of the parameters, which are bound later. It was simple to implement, and a neat way to protect my database from potential attacks.

• Implement basic database technology alsongside server-side technology.
• Employ MySQL as the relational database and use PHP mysqli functions for operations.
• Apply basics of MySQL to create and interact with a database and a table.
• Understand how to create and interpret an entity-relationship diagram.
• Rsearch SQL injection and address it in code.

For this assignment, I implemented AJAX in order to add functionality to my assignment 6 website. I included new options to filter the records of the table by the gender, major, and graduation year data. I used Bootstrap to design the filter controls in a collapsible form. I've come to enjoy and feel more and more confident using Bootstrap for the front end. This form has a button to apply the filters that calls a JavaScript function. This function collects the data in a FormData object and converts it to JSON and uses XMLHttpRequest to send a POST request to the server. The most difficult part of this assignment was correctly converting and sending the form data to the server. It took me quite some time of researching and trial-and-error to implement this correctly, as the data I was attempting to send was stored in arrays, and I struggled to find documentation for processing it properly.

After figuring out how to send the POST request, implementing the PHP to process the request from the database was fairly straightforward after the previous assignment. Parsing through the input JSON data to construct the sql request properly was probably the more challenging part of this process, but it was also straighforward to implement and test for errors in MySQL Workbench. The PHP sends back the response data, after processing it, which the JavaScript function inserts into the proper HTML element for the table body.

• Understand the purpose of AJAX and ways to use the technique.
• Implement AJAX to allow users to filter table data.
• Design filter controls for the user using HTML forms and Bootstrap.
• Employ JavaScript and PHP to accomplish filtering without reloading the page.
• Use JSON or XML for transferring data between the client and server.