|
Description: This assignment teaches the basic process of creating folders on the UF server and setting permissions for folders, HTML files, and CSS files. Additionally, you are asked to create two main pages from scratch: a page for all assignments in CIS4930 (i.e. this current page) and the actual content for this first assignment: a mock web-based lesson. Using HTML, CSS, and JavaScript, you build the mock website’s layout by using tags to fill out the information and assessment section. Likewise, you incorporate CSS to make the page appear more visually appealing. |
|
What Was Learned: This assignment involved practicing webpage creation skills using HTML, CSS, and JavaScript (optional). Though, in order to learn the inner-workings of how mark-up languages such as HTML truly function, the assignment forbids the use of frameworks or libraries. Raw HTML, CSS, and JavaScript are required for this assignment as learning about tags, classes, and scripts allow you to build a greater foundation for when more abstracted tools (such as frameworks) do not behave the way you wish. Developing these skills will help in debugging problems since you will be able to look into the raw code and figure out the specificity of styles or what styling a tag has. More specifically, I learned how to use tags such as < p > and < ul > in HTML to format my site and make sure that the information presented is formatted in a neat, clean way. Additionally, by using CSS, I was able to implement classes and styling to certain tags which made the content appear cohesive and unique. As mentioned before, the restraint on being able to use frameworks pushed me to get into the practice of researching HTML/CSS documentation which increased my understanding on web-based languages and my problem-solving skills. It was this sentiment that also allowed me to learn about JavaScript and figure out how to store and retrieve information. |
|
Learning Objectives:
|
|
Description: This assignment is focused on using JavaScript and the Document Object Model (DOM) to create an interactive form for users. The purpose of the form is to collect meaningful data and process it in such a way that the output is insightful and custom to the user’s inputs. This must be done without the assistance of libraries or authoring tools. The use of the DOM allows for greater control over the look and functions of the site. Additionally, Javascript allows the form to have a decision structure, which is illustrated through the attachment of a Microsoft Visio flowchart. Furthermore, this assignment requires an understanding of how to create basic HTML form processors. These include radio buttons, textboxes, checkboxes, and dropdown boxes. Integrating these into the form allows the site to feel professional and well-structured in terms of data collection. |
|
What Was Learned: I learned quite a bit about Javascript and the DOM in this assignment. In terms of Javascript, I was able to pick up the syntax of it fairly quickly as it is similar to Java. The notion that there are no explicit variable types was useful since I was able to either return the user’s information when it was valid or “ERROR” when it failed the validation checks. Furthermore, I was able to combine Javascript and DOM to efficiently iterate and check each checkbox by using a for loop and the document.getElementById() call. IDs became an important concept in this assignment. I made sure to label each important tag with an easily identifiable ID to make locating and evaluating it through Javascript/ the DOM easier. Additionally, I gained a stronger grasp of formatting in HTML/CSS. I made the question boxes shift over to the left to make room for the error box, and I made it shift back once the error was gone. This took a while for me to figure out, but it allowed me to understand what certain styles (e.g. justify-content, align-items, display) do to a tag. |
|
Learning Objectives:
|
|
Description: This assignment builds off of the content learned in Assignment 2, where we learned the basics of JavaScript, by introducing repetition control structures (loops) and arrays. This assignment is focused on building a statistics calculator where a user can enter a string of integers and have information regarding the set`s count, sum, mean, median, mode, max, min, range, variance, and standard deviation displayed back to them. An array is used to collect and store the user`s input, and a separate JavaScript file is used to compute each statistic. Loops are implemented to iterate through the numbers and run calculations on the set. |
|
What Was Learned: I learned about how JavaScript handles arrays and how it interacts with the DOM. I had to ensure that, when calling functions on an array such as sort(), it is not actually affecting the array since arrays are passed by reference in JavaScript. As a result, I learned about functions such as slice() and how to sort a function to be in increasing or decreasing order. Furthermore, I learned about how to parse information into an array from a textarea tag. I had experience with delimiters in other languages, so I was able to pick it up in JavaScript relatively quickly. Lastly, since we were allowed to use Bootstrap in this assignment, I learned about Bootstrap`s tools and built-in features through its online documentation. I was able to incorporate Bootstrap tables, collapse panels, and carousels into this assignment. |
|
Learning Objectives:
|
|
Description: This assignment focuses on the inclusion of libraries into our client-side web pages. In particular, the main task was to redo Assignment 2 with the libraries Bootstrap and JQuery. These two libraries mainly build off of the existing tools we have been using (e.g. CSS and JavaScript) and serve as an easier way to create smooth visuals and manipulate page elements. The assignment encouraged the use of Bootstrap`s built-in components to visually create a more organized/responsive web page, and the use of JQuery`s simplified DOM manipulation capabilities to handle computations and the logic behind form validation. |
|
What Was Learned: I learned how to incorporate styling libraries such as Bootstrap with my current knowledge of CSS. I encountered some stylistic differences when it came to using Bootstrap`s components, but I was able to make them appear to my liking by adding additional styling in my own stylesheet that visually manipulated Bootstrap`s components. I gained more knowledge with containers/styling beyond tables such as accordions, cards, forms, and tooltips. In terms of JQuery, I was able to learn a more simplified way of interacting with my web page as the syntax is more concise and straightforward than raw JavaScript. It was significantly easier to set up the error checking with my checkbox question through JQuery since I could have it so it would detect if a checkbox was checked and then disabled the appropriate checkboxes as a result. Additionally, being able to filter the specific components of my page was useful and the ability to serialize my form made it easy to check if the form was altered again after it was submitted. |
|
Learning Objectives:
|
|
Description: This assignment marks the shift from client-side web pages to server-side sites. Using previous knowledge of HTML and CSS, this assignment is focusing on PHP which is a server-side scripting language. The given task is to develop a quiz that contains question types such as radio buttons, drop-downs, text boxes, and checkboxes. Once the quiz has been finished, this PHP page should redirect to a processing page where the information will be extracted and verified to determine the user’s quiz score and appropriate feedback. The information is then inserted into an Excel file to be easily readable. Lastly, an administrator page is implemented which reads from the Excel file and displays data on individual performance, individual question difficulty, and an overall summary of how users did on the quiz. |
|
What Was Learned: This assignment taught me about the basics of PHP syntax and how to access, manipulate, and store information from a PHP file. I was able to get a grasp on how PHP operated as it reminded me of how C++ operates in terms of its logic. Likewise, the use of the “echo” command proved to be quite useful in communicating the results found in the PHP section of code to the HTML section of code, where the data needed to be displayed. Additionally, I learned how to store information in an Excel file. I found this to be an easier process than reading a CSV in C++. For instance, I learned about PHP’s str_getcsv function which greatly simplified the issue I had with the commas in certain answers being treated as separate data cells in the CSV file. Furthermore, I also learned about maintaining security when it comes to web page forms. I had to verify that the information being passed to the process.php file was directly coming from index.php. If it was not, then the page will not load and an appropriate error message will be displayed. Additionally, I had to make sure that any textbox questions had “htmlspecialchars” surrounding the POST request as it ensured that people could not type in code that would execute malicious commands. |
|
Learning Objectives:
|
|
Description: This assignment dealt with using a MySQL database to interact with and store information. A primary focus is placed on retrieving data from the database, adding to it, allowing the option to edit an existing record, and giving the option to delete an existing record. Additionally, the database table’s structure must be represented in the form of an entity relationship diagram (ERD). Lastly, research on SQL security must be made and the database should have certain security precautions/measures implemented to prevent malicious attacks. |
|
What Was Learned: This assignment taught me about SQL syntax and how information can be transferred between the different languages we have learned up to this point. For me to display an existing song’s information, I had to first use JQuery to listen for the new song selection. I then had to learn how to send an AJAX request from JQuery to a separate PHP file that will take in the song ID and retrieve the song's information. It would then store all the information in the return body which would, through JQuery, be placed in the appropriate tags within the HTML file. This process took a while to work, but it taught me about how JQuery, AJAX, PHP, and HTML interact with one another. I also learned more about SQL security and how certain measures can help thwart SQL injections and other attacks. I accomplished this by learning how to sanitize user inputs by validating the user’s input before sending a request to the PHP, and by using functions such as htmlspecialchars() and mysqli_real_escape_string() which prevents malicious scripts from being executed. Furthermore, I added a conditional statement on each PHP file that checks if the request is coming from index.php. If it is not, then it will redirect back to index.php and not execute any SQL commands with the passed in data. I also learned about prepared statements which involves separating the SQL statement and the actual passed-in data. This makes it so the database server treats the information as data and not code. Otherwise, users could type in code and execute it on the server. Lastly, I made it so the database credentials were not visible in the file and are instead in a separate private file that other PHP files will have to include if they wish to retrieve the user credentials. |
|
Learning Objectives:
|
|
Description: This assignment is relatively simple and mainly focuses on AJAX and creating an asynchronous website experience. More specifically, the task is to update the table created in Assignment 6 and incorporate AJAX into it. A user should be able to filter the responses in the table based on user action. JavaScript/JQuery must be used in conjunction with PHP to build the AJAX technique. |
|
What Was Learned: I learned more about how AJAX can be used to create an asynchronous and smooth user experience. I used AJAX previously in Assignment 6 to load a stored record from the database into an “Edit” form, but I wanted to see how AJAX worked with creating a live filtering textbox. It was relatively simple for me since I used AJAX before, but there were subtle differences such as the response from the PHP file needing to be HTML instead of JSON. This was because I was rebuilding the table’s HTML structure to only display records that matched the search. |
|
Learning Objectives:
|