ITC 240 Web Apps

For Web Applications Programming I (ITC 240) in winter 2018 for my web design certificate at Seattle Central College with Bill Newman I created three web applications with Bootstrap themes and PHP: Widgets Original, Widgets, and Sprockets. Each one completes the requirements to include an authenticated login area with image upload, a MySQL database accessible through PHPMyAdmin, the ability to switch between themes, dynamic content that changes daily, and an authenticated contact form.

Widgets Original

Widgets Original is the first version of the web application I made, based on assignments in class. Since I wanted to use all components of the original theme’s design instead of stripping it to its core, I dug heavily into the HTML and learned a lot about how to create custom and common PHP files to feature the different sections available to me. By the end of the course, this site became my testing ground for the database, a resource for modifying code correctly in the other apps, and a repository for my extra credit assignments: footer images that change randomly and daily. It does not contain an authenticated login portal.

Widgets Original | See Widgets on Github 

Widgets

Widgets covers nearly all of the assignments from the course, includes common and custom PHP files, a page with daily content, one contact form, a login portal, databse, and an authenticated image upload. Widgets 2 can switch themes (and look good doing it!), accepts photo uploads (only pictures of goats with kittens, please!), and was the site I used to figure out to make sure everything looked good on every type of device.

Working on Widgets 2 was when I learned that the best way to test responsiveness is to show off your project to a friend on the bus and realize all of the parts you are missing!

Widgets | See Widgets 2 on Github 

Sprockets

Sprockets became my landing page for another project I wanted to create for myself: an easy-to-access site with dramaturgical information and production photos of the show I was directing at the time: Row Yr Boat (Achievement Unlocked) by Wesley K. Andrews at Annex Theatre. My colleague L. Nicol Cabe curated a ton of research for the actors as the dramaturg for the show. I wanted to distribute it to them in a format they could access at work, while traveling, or at home. Originally, I posted it as a simple HTML site with anchor tags. Sprockets was my opportunity to practice making a site that would be distributed more widely than just class, challenging me to make sure it stayed clean and professional. Two of the course assignments were to include two contact forms and a database of photos and content, which I used as a way to post production photos that the actors and designers could easily access. Recreating the login authentication process in this web app was valuable as well.

Sprockets | See Sprockets on Github 

Process

Creating three separate web applications and repeating the assignments was integral to my learning process. Each time I downloaded the theme, split the header and footer and config files into the includes folder, and grabbed snippets of PHP code, I got better at the process and gained a greater understanding of what we were creating. Although I got a little too invested in utilizing the design components because it bogged down my ability to focus wholly on PHP, worrying about what the final product looked like ended up pushing me to learn more about how dissect the code and craft the site in the way I wanted to. I definitely understand how a site’s code can become so personalized that it can become almost unreadable. I made frequent comments so that I could track what I was doing every week and not get lost throughout.

Categorized in: App Ideas, Case Study, UX/UI, Website Design