Dynamic Web Pages Ch 2 V1.0


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dynamic Web Pages Ch 2 V1.0

  1. 1. Chapter 2 Sending form details via emails
  2. 2. PHP Sending E-mails <ul><li>PHP allows you to send e-mails directly from a script. </li></ul><ul><li>The PHP mail() Function </li></ul><ul><li>The PHP mail() function is used to send emails from inside a script. </li></ul>
  3. 3. Syntax <ul><li>Note: For the mail functions to be available, PHP requires an installed and working email system. The program to be used is defined by the configuration settings in the php.ini file. Read more in our PHP Mail reference . </li></ul>
  4. 4. PHP Simple E-Mail <ul><li>This can be used to check if the server is setup correctly. </li></ul>
  5. 5. Sending Emails - 1 <ul><li>1 st check that SMTP is installed. Through the window component wizard. Highlight IIS and click on details. </li></ul><ul><li>If the SMTP is ticked then it is installed if not you need to install it. </li></ul>
  6. 6. Sending Emails - 2 <ul><li>Overview: </li></ul><ul><ul><li>In this task you will create a message sent page that will transfer the data to an email. </li></ul></ul><ul><ul><li>The page that obtains the email data is the contact.php page. You will add a table with no borders and a form to send the information to the message_sent.php page. </li></ul></ul>
  7. 7. Sending Emails - 3 <ul><li>Open the generic_template.php and save it as message_sent.php </li></ul><ul><li>Looks like this </li></ul><ul><li>Make it look like this, with link to index.php. </li></ul>
  8. 8. Sending Emails – 4 <ul><li>Add the php code as shown. </li></ul>
  9. 9. Sending Emails - 5 <ul><li>Open contact.php and change it to look like this. Details on the next slide. </li></ul>
  10. 10. Sending Emails - 6 <ul><li>Position the insertion point below the image caption, and choose Insert > Form > Form to create a new form. </li></ul><ul><li>Without moving the insertion point, choose Insert > Table, providing the following settings. Click OK. </li></ul><ul><ul><li>Rows: 4 </li></ul></ul><ul><ul><li>Columns: 2 </li></ul></ul><ul><ul><li>Width: 95 Percent </li></ul></ul><ul><ul><li>Border: 0 </li></ul></ul><ul><ul><li>Cell Padding: 3 </li></ul></ul><ul><ul><li>Cell Spacing: 0 </li></ul></ul>
  11. 11. Sending Emails - 7 <ul><li>Select the <table> tag using the tag selector, and use the Property inspector to change its bgcolor (background color) attribute to #eeeeee, which is a light gray. </li></ul><ul><li>In the right column of the table insert the following; </li></ul><ul><ul><li>Two text fields called, </li></ul></ul><ul><ul><ul><li>emailAddress </li></ul></ul></ul><ul><ul><ul><li>subject </li></ul></ul></ul><ul><ul><li>One text area called body </li></ul></ul><ul><ul><li>A Submit button </li></ul></ul><ul><li>In the first three cells of the left column, enter the following text: </li></ul><ul><ul><li>Your Email Address </li></ul></ul><ul><ul><li>Subject </li></ul></ul><ul><ul><li>Message Body </li></ul></ul>
  12. 12. Sending Emails - 8 <ul><li>Select the text area and give it the following specifications; </li></ul><ul><ul><li>Char Width :55 </li></ul></ul><ul><ul><li>Num Lines as 6, and Wrap as Virtual. </li></ul></ul><ul><li>Select the form in the tag selector, in the Property inspector set: </li></ul><ul><ul><li>Name = frm_message </li></ul></ul><ul><ul><li>Action = messageSent.php </li></ul></ul><ul><ul><li>Method = POST </li></ul></ul><ul><li>Insert a Heading 2 element above the table that reads, “Send Us a Message.” </li></ul>
  13. 13. Client-Side Form Validation <ul><li>Open contact.php </li></ul><ul><li>Select the submit button </li></ul><ul><li>In the behaviours panels add a behaviour as shown. </li></ul>
  14. 14. Client-Side Form Validation <ul><li>In the Validate form dialog as shown set the fields as </li></ul><ul><ul><li>emailAddress: Required as an email </li></ul></ul><ul><ul><li>Subject: Required as anything </li></ul></ul><ul><ul><li>Body: Required as anything. </li></ul></ul><ul><li>Resulting with the dialog shown below. </li></ul>
  15. 15. Client-Side Form Validation <ul><li>Notice the behaviours panel should look like this when you highlight the submit button. </li></ul><ul><li>Save and test the validation. </li></ul>
  16. 16. Lab 2 - 1 <ul><li>Overview: </li></ul><ul><ul><li>Create a html form with client-side validation </li></ul></ul><ul><ul><li>Create an action page to send an email. </li></ul></ul><ul><li>Your overview instructions located in the next section of the book: lab section. </li></ul><ul><li>Your two pages will look like the following 2 slides. </li></ul>
  17. 17. Sendemail.php
  18. 18. Sendemail_action.php
  19. 19. Sample of email sent
  20. 20. Lab 2 - 1 <ul><li>Open server_side_scripting site </li></ul><ul><li>Open tourtemplate.php. </li></ul><ul><li>Change to Split view. </li></ul><ul><li>In the Design view pane, click on the link Or email us. </li></ul><ul><li>In the Property inspector change the link to link to sendemail.php. Hit the enter key after putting in the link (if you don’t hit enter, the value will not be saved). </li></ul><ul><li>Save tourtemplate.php. </li></ul>
  21. 21. Lab 2 - 2 <ul><li>Create an Email Form Page </li></ul><ul><ul><li>Save tourtemplate.php as sendemail.php. </li></ul></ul><ul><ul><li>Replace the generic left heading with Send Email. </li></ul></ul><ul><ul><li>Replace the generic Left Side Text with the text “Fill in the values in the form and submit the form to send an email to us. Thank you for your interest.” </li></ul></ul><ul><ul><li>Create a new form below the text. </li></ul></ul><ul><ul><ul><li>Name the form email. </li></ul></ul></ul><ul><ul><ul><li>Set the action to sendemail_action.php. </li></ul></ul></ul><ul><ul><ul><li>Make sure that the Method is Post. </li></ul></ul></ul>
  22. 22. Lab 2 - 3 <ul><li>Create a table inside the form with 2 columns and 4 rows. </li></ul><ul><ul><li>Type in the labels as shown in the table below. </li></ul></ul><ul><ul><ul><li>From Address </li></ul></ul></ul><ul><ul><ul><li>Subject </li></ul></ul></ul><ul><ul><ul><li>Message Body </li></ul></ul></ul><ul><ul><li>In the second column, </li></ul></ul><ul><ul><ul><li>first row put a text field and name it from </li></ul></ul></ul><ul><ul><ul><li>With a width of 30 and max of 50. </li></ul></ul></ul><ul><ul><li>In the second row, </li></ul></ul><ul><ul><ul><li>put a text field and name it subject </li></ul></ul></ul><ul><ul><ul><li>with the same width and max. </li></ul></ul></ul><ul><ul><li>In the third row, </li></ul></ul><ul><ul><ul><li>put a textarea control and name it message </li></ul></ul></ul><ul><ul><ul><li>with a width of 40 and 10 rows. </li></ul></ul></ul><ul><ul><li>In the last row, </li></ul></ul><ul><ul><li>first column put a submit button control </li></ul></ul><ul><ul><li>with a label of Send Email. </li></ul></ul>
  23. 23. Lab 2 – 4 <ul><li>Create Action Page </li></ul><ul><ul><li>Create a new page from tourtemplate.php </li></ul></ul><ul><ul><ul><li>name : sendemail_action.php. </li></ul></ul></ul><ul><ul><li>Note that the email link now points to sendemail.php. </li></ul></ul><ul><li>Change the left section title to Email Complete and the text to “Thank you for your email.” </li></ul><ul><li>In bindings, create 3 new Request variables: </li></ul><ul><ul><li>from </li></ul></ul><ul><ul><li>subject </li></ul></ul><ul><ul><li>message </li></ul></ul>
  24. 24. Lab 2 - 5 <ul><li>In Code view make space between the heading and the text. Type the following php code. </li></ul>
  25. 25. Lab 2 - 6 <ul><li>Replace your email address with mine. The From address would normally be hard coded with the site’s email address. </li></ul><ul><li>Save the page. </li></ul><ul><li>Preview the sendemail.php page. Fill out the form and submit it using your email address as the sender. </li></ul>
  26. 26. Lab 2 - 7 <ul><li>Client Side Validation </li></ul><ul><ul><li>Return to Dreamweaver and the sendemail.php page. </li></ul></ul><ul><ul><li>Select the Submit button. </li></ul></ul><ul><ul><li>In the Behaviours panel, click Add Behaviour and choose Validate Form. </li></ul></ul><ul><ul><li>Make all of the fields are required and validate the email address. </li></ul></ul><ul><li>Save the page. </li></ul><ul><li>Preview sendemail.php. </li></ul><ul><li>Check that validation is working by trying to submit an empty form and also try an invalid email address format. </li></ul>