Web Dev 5

Web Dev 5 assignment

Web Dev 5 is going to be an assignment heavy on your pre-learning of content we are going to cover in Cawd later after vacation.  Independent learning is a key focus in our industry, to get and stay “good”.

There are two main elements you are going to learn about this week:

  1. Php
  2. Form validation two ways
    • Javascript
    • html5
  3. How to use a submit button / action to submit data

Php

What is php?  It is a server side scripting/programming language.  It only works on a server with php installed (almost all of them). It will not run locally unless you setup web server software on your local machine.

Learn how to code php (at least the basics) and learn how to use the mail function.  

Form validation

There are two main ways you can validate form data.  Validating data ensures “good data” is submitted to a website.  This week we are mostly concerned if any data is submitted.

Javascript validation will test the data before it leaves the web browser and goes to the server.  This is an industry standard and lets you ensure that the user has typed in data before the form submits.  Very customizable.

A new way to validate data is through new html5 form validation.  There are now some built in pieces of functionality through html5 which also validate information a user has typed in before the form is submitted.  Less customizable, but is pretty dummy proof.

What you will create

I want you to create an email contact form.  You will create 4 inputs:

  • A text input to collect a “to” field for an email.
  • A text input to collect a “subject” field for an email.
  • A textarea input to collect a “message” field for an email.
  • A “submit button” which runs the action attribute in the form.  This is slightly different than the standard “input button” we have been using.  Learn how to control it.

Validate the inputs so each field includes at least some data.  I do not want this form filled out and the email sent if there is no subject, or no message.  This is the main test I will be doing on your project this week.  I want your email form to fail gracefully with a visual message that the user has forgotten to fill out the “subject” of the email form, for example.

Maybe an alert box pop up? (Kinda of old fashioned, but acceptable).  Maybe change the focus of the browser back to the input they are missing?  Maybe change the focus of the browser AND include a red border to the input they are missing?

Mail the information and setup a success page so when the email is sent, the user is brought back to the original form with the values blanked.  It will be as if we are ready to send a new email.

How I will grade

I will open up your project and test it out.  I will give “bad” info (such as a missing subject, or missing message), and the email should not be sent.  Give me a visual indicator/message of where I missed the correct input. 

I will give “good” info and the email should be sent.  I will then be checking the email I receive.  If formatted well, you will do well.  Test this with your own email account before you are “done”!

Half of you will be graded on my phone (Nexus 5), half on my iMac.  Ensure your styles work for all types of mediums.

** 50% of this project’s work time is during our vacation.  This is going to be great for some, while others will close their eyes and deal with this upon your return from vacation.  To me, this would be a terrible idea which would create undue stress, but you are a college student, just get it done.

(Respect to the students that get it done before vacation, or dare I say during the game day.)

Deliverable

Setup an index.html that auto loads with your contact form.  All associated files (.php, css, images) will go in as well.  

You are going to upload this project to your “webDev” folder to a folder called “week_05″.

  • Assigned April 19th (3pm)
  • Due May 3rd (3pm) – two days after we return from vacation
 
 
Copyright © 2004 - 17 cawd by Steven Herr. All rights reserved.