Lab exercise 5: Contact form

Hidden sidebar header

Solution

Find the solution to this exercise here:

Solution

Related links

W3C Validator: validation tool:

W3C-validator

aXe DevTools: accessibility validation tool:

aXe DevTools

MDN Web Docs: HTML source:

MDN Web Docs

Google: we all use it:

Google

Hidden header

Goals of the exercise

The goals of the exercise are the following:

  • Understanding and working with Apache, MySQL and PHP.
  • Learning to add and edit PHP code in an existing HTML and CSS webproject.
  • Correct usage of forms and controls in HTML while also sending the submitted data to database.
  • Understanding the innate security risks when handling submitted form data.

Reflection

Easy

I had no issues adding an extra field to the submit form. Adding it to the database and retrieving it on the messages page is fairly straightforward aswell. Adding a new column in pHpMyAdmin was easy.

Hard

I spent a significant amount of time on getting the checkboxes to work in my portfolio. First I had to add the checkbox; then make sure that it is seen as a string and not an array. After that I had an issue where I get an error code after trying to submit a form with 0 checkboxes ticked. I tried to add a second hidden checkbox with a value of 0 but that had its own slew of issue. I did manage to fix the issue with PHPcode and then styled the thank you and messages page. Should be working alright now.

Unsure

I had some issues getting the CSS to work when I copied the form from the working environment (htdocs in xampp) to a live version. I believe I managed to fix it though.