Search Our Web Design Blog...

Wednesday, January 25, 2012

WEB 1 Final Site requirements (updated)

specifics: 

  • 4+ pages
  • Professional Layout
  • Consistent Navigation
  • Client/Visitor appropriate colors, theme, images etc.
  • Use software of your choice to the best of your ability
  • Compare your site to another of a similar topic/theme, how does yours stack up? Our goal is for yours to be equally as impressive, professional, and functional.
  • It is often best to incorporate a variety of programs, styles, and techniques.  A well organized site may have a Flash element, Photoshop images/buttons, HTML layout tables/cells, and/or CSS all in one!!!!  Don't pigeon hole yourself into one style of design/code.

You need to design a site, using the program(s) of your choice on a (classroom appropriate) topic of your choice.

  • many of you have yet to turn in your wireframe/thumbnails.  Please check your grade online and do so if you have yet to.

Monday, January 23, 2012

snowpocalypse

In light of the snow days we are going to modify our final project.  The requirement is now 4 pages with extra credit for 5 or 6 pages.  The goal is still to create the most professional site you have yet to create.  Make a site that rivals an official site for your topic.

Wednesday, January 11, 2012

Final Site

Your layout is due today.  Make sure you turn in a thumbnail sketch of each of your 6 pages.  This can be done in text, using Illustrator, hand drawn, or ???  Please give these to Mr. G, or turn them in to the classes folder.

You should then start working on coding/building your site.

Remember this site should be professional, clean, and functional!

Tuesday, January 10, 2012



WEB 1 final project

specifics:
  • 6+ pages
  • Professional Layout
  • Consistent Navigation
  • Client/Visitor appropriate colors, theme, images etc.
  • Use software of your choice to the best of your ability
  • Compare your site to another of a similar topic/theme, how does yours stack up? Our goal is for yours to be equally as impressive, professional, and functional.
  • It is often best to incorporate a variety of programs, styles, and techniques.  A well organized site may have a Flash element, Photoshop images/buttons, HTML layout tables/cells, and/or CSS all in one!!!!  Don't pigeon hole yourself into one style of design/code.

You need to design a site, using the program(s) of your choice on a (classroom appropriate) topic of your choice.

  • To get started please answer the 8 questions here
  • Next you need to create a layout sketch or wireframe for each page in your site. You can do this by hand or using Balsamiq, a web based layout interface.

Wireframe your final

Today, please create something that tells me what your final is, include:
  • your topic,
  • the program(s) you are going to use,
  • what your 3 pages will be,
  • and what the layout will look like.
You can do this in text, drawing, on your computer with photoshop, balsamique etc.

WEB 2 email form code

PHP form to email explained

It is a common requirement to have a form on almost any web site.
In this article, we will create a PHP script that will send an email when a web form is submitted.
There are two parts for the web form:
  1. The HTML form code for the form. The HTML code below displays a standard form in the web browser. If you are new to HTML coding, please see: HTML form tutorial
  2. The PHP script for handling the form submission. The script receives the form submission and sends an email.

HTML code for the email form:
<form method="post" name="myemailform" action="form-to-email.php">
Enter Name: <input type="text" name="name">
Enter Email Address:    <input type="text" name="email">
Enter Message:  <textarea name="message">textarea>
<input type="submit" value="Send Form">
form>
The form contains the following fields:
name, email and message.
name and email are single-line text input fields where as message is a text area field (multi-line text input).
You can have different types of input fields in a form. Please see the HTML form input examples page for details.
On hitting the submit button, the form will be submitted to "form-to-email.php". This form is submitted through the POST method

Accessing the form submission data in the PHP script

Once your website visitor has submitted the form, the browser sends the form submission data to the script mentioned in the 'action' attribute of the form. (for the current form, the script is form-to-email.php)
Since we have the form submission method mentioned as POST in the form (method='post') we can access the form submission data through the $_POST[] array in the PHP script.
The following code gets the values submitted for the fields: name, email and message.
  $name = $_POST['name'];
  $visitor_email = $_POST['email'];
  $message = $_POST['message'];
?>

Composing the email message

Now, we can use the above PHP variables to compose an email message. Here is the code:
    $email_from = 'yourname@yourwebsite.com';
    $email_subject = "New Form submission";
    $email_body = "You have received a new message from the user $name.\n".
                            "Here is the message:\n $message".
?>
The 'From' address, the subject and the body of the email message are composed in the code above. Note the way the body of the message is composed using the variables.
If a visitor 'Anthony' submits the form, the email message will look like this:

"You have received a new message from the user Anthony.
Here is the message:
Hi,
Thanks for your great site. I love your site. Thanks and Bye.
Anthony."

Sending the email

The PHP function to send email is mail().
mail(to,subject,message,headers)
For more details, see the PHP mail() page.
The headers parameter is to provide additional mail parameters ( like the from address, CC, BCC etc)
Here is the code to send the email:
  $to = "yourname@yourwebsite.com";
  $headers = "From: $email_from \r\n";
  $headers .= "Reply-To: $visitor_email \r\n";
  mail($to,$email_subject,$email_body,$headers);
 ?>
Notice that we put your email address in the 'From' parameter and the visitor's email address in the 'Reply-To' parameter. The 'From' parameter should indicate the origin of the email. If you put the visitor's email address in the 'From' parameter, some email servers might reject the email thinking that you are impersonating someone.

Sending the email to more than one recipients

If you want to send the email to more than one recipients, then you just need to add these in the "$to" variable.
  $to = "name1@website-name.com, name2@website-name.com,name3@website-name.com";
  mail($to,$email_subject,$email_body,$headers);
?>
You can use the CC (carbon copy) and BCC (Blind Carbon Copy) parameters as well. The CC and BCC emails are added in the 'headers' parameter.
Sample code:
$to = "name1@website-name.com, name2@website-name.com,name3@website-name.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
$headers .= "Cc: someone@domain.com \r\n";
$headers .= "Bcc: someoneelse@domain.com \r\n";
mail($to,$email_subject,$email_body,$headers);
?>

Securing the form against email injection

Spammers are looking for exploitable email forms to send spam emails. They use the form handler script as a 'relay'. What they do is to submit the form with manipulated form values. To secure our form from such attacks, we need to validate the submitted form data.
All the values that go in the 'headers' parameter should be checked to see whether it contains \r or \n. The hackers insert these characters and add their own code to fool the function.
Here is the updated code:
function IsInjected($str)
{
    $injections = array('(\n+)',
           '(\r+)',
           '(\t+)',
           '(%0A+)',
           '(%0D+)',
           '(%08+)',
           '(%09+)'
           );
    $inject = join('|', $injections);
    $inject = "/$inject/i";
    if(preg_match($inject,$str))
    {
      return true;
    }
    else
    {
      return false;
    }
}
if(IsInjected($visitor_email))
{
    echo "Bad email value!";
    exit;
}
?>
In general, any value used in the header should be validated using the code above.
Better, complete validations could be done using the PHP form validation script here.

PHP form to email complete code

The link below contains the complete form, validation and emailing code.
Download the PHP form to email code