ePortfolio for CIS 4930: Internet Computing

⟡ Joanna Mijares ⟡



Assignment 1

    The purpose of Assignment 1 was to get us acquainted with the basics of website development and design in a hands-on way. We started off by creating our own personal websites hosted via the Computer Science Department's Server. Using a Secure File Transfer Protocol (SFTP) tool, such as FileZilla, we then were able to securely save and transfer files from our own computers to the website. Robust text editors can be used to edit the actual content of the web page files, and we can write information directly onto our sites.

    It's also important to be aware of the permissions awarded to each page you create. Files can either be read(r), written(w), or executed(x) by the file owner(you), a group, or the general public. Generally speaking, your website should let you read, write, and execute but you should be careful with what permissions are given to a group or the public.

    We were required to use HTML and CSS to shape every detail of this site. Unique HTML tags can be used to create a diverse array of features for our sites so that we garner experience in creating dynamic web pages. We use a variety of HTML tags to create features like paragraphs, headings, tables, links, assessment questions, and more. Properly utilizing and spacing these features is what creates a readable and functional website. A CSS style sheet is used to then "decorate" the HTML code and make it look more presentable and professional. Changing features like background color, text color, text size, font, margins, padding, and more can help to refine your site beyond the homogeneity of standard black and white webpages.

    I thoroughly enjoyed this assignment, and I hope that is reflected in my work. Although I've built several sites with website-building platforms, was my very first exposure with building a website from scratch. Being able to experience each aspect of the creation of this site has been challenging yet satisfying, and I'm excited for my future assignments in this course.

⟡ ⟡ ⟡

     Learning Objectives:

  • Applying the syntax of HTML and CSS in website building.
  • Creating new webpages and editing website content via a text editor.
  • Connecting to a server via an SFTP tool and edit files and folders.
  • Understanding how website permissions function.


Assignment 2

    The purpose of Assignment 2 was to apply what we've learned thus far in HTML and CSS to add JavaScript programs to our sites. Programs and scripting allow for more complex interations between the users and the sites they visit. Rather than reading a static webpage and just clicking links, users should now be able to input data and receive some sort of response or calculation in return.

    It's important that we understand how JavaScript works and how the Document Object Model (DOM) logic functions. The DOM is how objects in our sites are manipulated dynamically and accessed via programs. My program was a platform that recommended different reptiles to users based on their different inputs. I learned how to take certain user input and connect it to or disconnect it from certain results.

    We were also required to understand exactly how our programs and the logic within them flowed in order to create visualizations of our code using Visio. Micosoft's Visio is a unique platform that uses different shapes to represent different logical steps in a code. For example, a capsule shape represents the beginning and ending of a code. A paralellogram means an input or output, a diamond means a decision, and a rectangle means a process. In my own code, I learned how the different inputs I was asking for connected in a big-picture way and was able to map it out dynamically.

⟡ ⟡ ⟡

     Learning Objectives:

  • Create working JavaScript programs that users can interact with on your sites.
  • Collect user data and use/ manipulate it to achieve an output.
  • Understand how the flow of your code works.
  • Visualize every decision and step in your code using Visio.


Assignment 3

    The purpose of Assignment 3 was to familiarize us with JavaScript and its structures even more than before. We were required to create multiple functions in a separate JavaScript file and then import that to our index.html file. That file contained several functions for different statistical formulas we needed to figure out how to implement.

    In my opinion, there is no better way to learn something than by doing something, and having to implement several functions by hand helped aquaint me with the intricacies of JavaScript. The wide variety of functions required knowledge of many different keywords and static methods that come with JavaScript, such as sort() and the Math library. It was necessary to understand how to write for loops and if else statements in this language, since they were a large part of implementing functions.

    After creating these functions, we were required to take in user input, place it in an array, and use this input in our functions to get the statistical results. Creating forms and taking in input isn't necessarily new, but it was more complex with more moving parts behind the scenes when it came to implementing all of the functions. I ended up putting all of the results in a table structure.

⟡ ⟡ ⟡

     Learning Objectives:

  • Grow more familiar with JavaScript structures and functions.
  • Utilize user input to create an array that interacts with functions.
  • Understand how to create functions that follow a specific formula.
  • Output data derived from several functions.


Assignment 4

    The purpose of Assignment 4 was to integrate jQuery and Bootstrap in a previously existing site. We were tasked with taking our websites and data input from Assignment 2 and making a new and improved version of it. These new webpages needed to also be responsive and aesthetically pleasing on several devices, including but not limited to mobile and desktop.

    I made the mistake of assuming this would be easier than usual since we already created Assignent 2's logic and structure. I was very wrong! This assignment required critical thinking and high amounts of engagement in order to understand how to take what already existed in the original HTML and CSS of my site and transitioning it to use the jQuery library and Bootstrap features.

    The biggest changes I made were implenenting Bootstrap form elements, like form-control and input-group, in order to rework the data input sections of my site. This also made input validation easier since there were built-in ways to show the user that their input was invalid. Another big change was using jQuery for dynamic actions on the site, such as hiding and showing elements and detecting when the user changed an answer choice, clicked a button, or typed something in. This allowed me to dynamically respond to the user's inputs as they wrote their answers in the site. I also needed to make all elements of the site able to scale based on what device they were being viewed on.

⟡ ⟡ ⟡

     Learning Objectives:

  • Change an existing website that uses HTML and JavaScript into a site that also uses jQuery and Bootstrap.
  • Create a responsive webpage that works on several screen sizes and resolutions.
  • Use jQuery to create dynamic elements that respond to user input and interact with the user to make their experience more smooth.
  • Use Bootstrap to create responsive elements, like form elements and resized media.


Assignment 5

    The purpose of Assignment 5 was to create another quiz. But unlike our previous quiz-creation assignment way back in Assignment 1, this time we needed to combine PHP script with HTML, Bootstrap, jQuery, and whatever else we used. In my case I took my quiz from Assignment 1 and gave it a complete visual makeover with jQuery and Bootstrap. I then used PHP to take the user input and create a results page.

    The results page had to be directly correlated with the user's actual responses and provide feedback based on their answer choice. All user data, including their names, final score, and all answer choices were saved to a csv file. This csv file was then used in order to display statstics and performance information about all of the users who took my quiz.

    On the admin.php page I summarized all users' scores and answers in one table, the average percentage correct for each question in another table, and the min score, max score, and average score in a third table. I honestly had the most difficulty figuring this particular page out. Transferring data from the csv file into tables and equations was a hard task for me. I'm very grateful for StackOverflow, W3Schools, and to the examples on the Professor's site!

⟡ ⟡ ⟡

     Learning Objectives:

  • Use PHP to translate user input to a readable results page
  • Understand the unique commands and abilities of PHP
  • Combine existing HTML script with PHP
  • Make a user-friendly quiz and provide the user with their unique results


Assignment 6

    The purpose of Assignment 6 was to create a database and use its contents to populate a webpage. This database then had to be editable via the webpage using PHP and MySQL. I chose to make a cat breed list and populated it with several different breeds. Users are able to edit the cat's breed, origin country, lifespan, color(s), and average weight.

    Users have almost full-reign to edit anything in the database, but I had to put measures in place to prevent malicious injections, including "preparing" my inputs and using real_escape_string(). These two methods help in ensuring that any malicious inputs are simply read in as strings.

    One of the most difficult parts of this assignment for me was the process of allowing users to edit and insert data. There were a lot of new and unique commands that I had never worked with before, and it got a bit more complex than I was used to since I had to deal with many files at once. But thanks to Example 19 from Albert's Website, I was able to get through it!

⟡ ⟡ ⟡

     Learning Objectives:

  • Use MySQL, PHP, and several other languages to create an interactive page
  • Properly create and edit a database
  • Learn how to display a database and its updated contents on a webpage using MySQL and PHP
  • Allow users to insert, change, and edit a database via an interface
  • Create an ER Diagram from your database


Assignment 7

    The purpose of Assignment 7 was to expand upon our experiences in using MySQL and PHP by introducing AJAX to the mix. AJAX stands for Asynchronous JavaScript and XML, and its used in trying to make websites more immediately responsive and user-friendly. My implementation of Assignment 7 was based on Albert's example 14.

    My data from my CatBreeds table created in Assignment 6 was applied to this assignment. My database table was converted to a JSON table, which corresponds with AJAX techniques. This data was processed in a fetchJSON file, and then actually used and applied in my index file.

    I chose to place all of my cat breed names into a dropdown list, which was automatically updated based on what cats are currently in the table. Selecting a cat name will automatically load up its data and display it on the page in a table.

⟡ ⟡ ⟡

     Learning Objectives:

  • Learn AJAX techniques and implement them into our existing Assignment 6
  • Transfer data from your server to the website using JSON or XML
  • Understand how to make MySQL data into JSON data

© 2024 Joanna Mijares