Presentation is loading. Please wait.

Presentation is loading. Please wait.

Logins  You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not.  I've given you an account on des170.com:

Published byBlanche Gibbs Modified over 9 years ago

Similar presentations

Presentation on theme: "Logins  You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not.  I've given you an account on des170.com:"— Presentation transcript:

1

2 Logins  You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not.  I've given you an account on des170.com:  SFTP server: des170.com  Login:  Password:  Directory: web

3 Standard FormsStandard Forms  DW: insert> forms> form  Insert > form > Text field, text area, checkbox, radio button, select  Button  Standard Code

4 Code from last semester…Code from last semester… mail Email: Subject: Message: ---- save as mail.php in same directory, change $to line <?php $to = "YOURADDRESS@mail.com"; $email = $_REQUEST['email'] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail( $to, "Subject: $subject", $message, "From: $email" ); header( 'Location: thanks.html' ); ?>

5 Classic Form Processing Model  Web Application Development

6 AJAX  Asynchronous Javascript and XML  Except, xml isn’t cool anymore, it’s now trendy to use JSON to transfer data (JavaScript Object Notation)  “Data side” of the jQuery code we have been working with …  Pros/Cons

7 AJAX Form ProcessingAJAX Form Processing Still need the HTML, PHP (slightly modified), and some javascript… messageHandler.php: <?php $username = $_POST['username']; $phoneNumber = $_POST['phoneNumber']; $message = $_POST['message']; $email = $_POST['email']; // setup the mail headers $subject = 'New contact received through the website'; $to = 'YOUREMAIL@whatever.com'; // <-- put YOUR email address here. $from = $email; $headers = "From: $from". "\r\n". "Reply-to: $from". "\r\n". 'X-Mailer: PHP/'. phpversion(); $body = "New email received, details below\n\n"; $body.= "Full name: $username\n"; $body.= "Email address: $email\n"; $body.= "Phone number: $phoneNumber\n"; $body.= "------------------------------\n"; $body.= $message; //echo 'hello'; if (mail($to,$subject,$body,$headers)) { $returnMessage = "Thank you $username, we have received your message and reply to you as soon as possible."; $response = array('status'=>'success','message'=>$returnMessage); } else { $response = array('status'=>'error'); } header('HTTP/1.1 200 OK'); echo json_encode($response); ?>

8 HTML part 1HTML part 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Contact Form body { font-family: verdana; font-size:12px; } #container { margin:20px 20px 0px 20px; } #statusUpdate { margin-top:20px; border:1px solid #999; padding:10px; width:300px; color:#666; display:none; } #contactForm label { color:red; display:block; }

9 HTML part 2HTML part 2 Contact Me Full Name: Your Email Address: Phone Number: Your inquiry:

10 The JavascriptThe Javascript jQuery(document).ready(function() { jQuery('#submitButton').click(function() { var theName = jQuery('#theName').val(); var theNumber = jQuery('#theNumber').val(); var theMessage = jQuery('#theMessage').val(); var theEmail = jQuery("#theEmail").val(); jQuery.post("messageHandler.php", { username: theName, phoneNumber: theNumber, message: theMessage, email: theEmail }, function(data) { if (data.status == 'success') { jQuery("#statusUpdate").html(data.message); jQuery("#statusUpdate").fadeIn(500); } else { jQuery("#statusUpdate").css('color','#ff0000'); jQuery("#statusUpdate").html('Sorry, there was an error sending you message.'); jQuery("#statusUpdate").fadeIn(500); } },"json" ); });

11 Validdation  Almost always done client side (perhaps also server side), with javascript  jQuery simplifies this tedious task  Example: if (theName == '') { jQuery("#theName").after(' Please fill in your first name. '); jQuery("#theName").focus(); return false; }

12 All ValidationAll Validation  Add before messageHandler post in the javascript – check for errors before data is sent // remove any error messages jQuery("#contactForm").find('label').remove(); // first validate the form var apos=theEmail.indexOf("@"); dotpos=theEmail.lastIndexOf("."); if (apos < 1 || dotpos-apos < 2 ) { // email address lacks an '@' symbol or a '.' jQuery("#theEmail").after(' Please enter a valid email address. '); jQuery("#theEmail").focus(); return false; } if (theName == '') { jQuery("#theName").after(' Please fill in your first name. '); jQuery("#theName").focus(); return false; } if (theNumber == '') { jQuery("#theNumber").after(' Please fill in your phone number. '); jQuery("#theNumber").focus(); return false; } if (theMessage == '') { jQuery("#theMessage").after(' Please enter a message. '); jQuery("#theMessage").focus(); return false; }

13 Homework  Research form stylizing CSS (customizing the look, color, focus css form forms) – try to make something unusual.  Forms can be beautiful: http://www.mattdempsey.com/#contactme  Create a contact form that has additional fields than what was shown in this demo, at least 3 additional fields (try to use more than just standard text boxes)  Create a beautiful stylized form (perhaps the look of your portfolio layout), with validation, that sends a formatted email.  Nov 1,3 – work time. Due Nov 8. Must post on des170.com because you cannot use ajax between domains. Email link.

Download ppt "Logins  You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not.  I've given you an account on des170.com:"

Similar presentations

JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.

JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Using Outlook 2010. Benefits of Using Outlook Now – Better formatting of HTML mail (with bullets, fonts, etc.) – Great calendar, ability to send meeting.

Using Outlook Benefits of Using Outlook Now – Better formatting of HTML mail (with bullets, fonts, etc.) – Great calendar, ability to send meeting.
The Way to Success … Sta rt Sta rt Ak Technologies Mo. +91-94264 50998 | 98253 78685 . Visit.

The Way to Success … Sta rt Sta rt Ak Technologies Mo | Visit.
Form Validation. Learning Objectives By the end of this lecture, you should be able to: – Describe what is meant by ‘form validation’ – Understand why.

Form Validation. Learning Objectives By the end of this lecture, you should be able to: – Describe what is meant by ‘form validation’ – Understand why.
(Email) Basics Apr 2011 Public Computer Center Moore Memorial Library | Greene, NY.

( ) Basics Apr 2011 Public Computer Center Moore Memorial Library | Greene, NY.
Chapter 6 Basic forms 1. Forms and query string 2 form : a group of user input (UI) controls that accepts information from the user and sends the information.

Chapter 6 Basic forms 1. Forms and query string 2 form : a group of user input (UI) controls that accepts information from the user and sends the information.
Basic Calendar Something that would make your web page look very nice is a basic calendar. A basic calendar shows the currents days of the month. This.

Basic Calendar Something that would make your web page look very nice is a basic calendar. A basic calendar shows the currents days of the month. This.
>> PHP: JS Integration & Emails. function validate() { } Inserting / Uploading Items to DB Web-Based Systems - Misbhauddin type=“submit” 2 1.

>> PHP: JS Integration & s. function validate() { } Inserting / Uploading Items to DB Web-Based Systems - Misbhauddin type=“submit” 2 1.
How to Establish a Blog. What is a Blog A blog is a collection of informational articles/ideas intended to update a viewer on new information associated.

How to Establish a Blog. What is a Blog A blog is a collection of informational articles/ideas intended to update a viewer on new information associated.
Cooperating Teachers: How to Reset Your Password in Tk20 Use this after your initial account set up if you cannot remember your TK20 password.

Cooperating Teachers: How to Reset Your Password in Tk20 Use this after your initial account set up if you cannot remember your TK20 password.
Training for ESF Schools Website 7. NEWSLETTER. Training for ESF Schools Website Create Newsletter Issue 1 To create Newsletter Issue, click on ‘Create.

Training for ESF Schools Website 7. NEWSLETTER. Training for ESF Schools Website Create Newsletter Issue 1 To create Newsletter Issue, click on ‘Create.
Setting up Email in Outlook Express. Select “Tools” from the toolbar menu.

Setting up in Outlook Express. Select “Tools” from the toolbar menu.
Microsoft ® Office Word 2007 Training Mail Merge II: Use the Ribbon and perform a complex mail merge [Your company name] presents:

Microsoft ® Office Word 2007 Training Mail Merge II: Use the Ribbon and perform a complex mail merge [Your company name] presents:
Free Powerpoint Templates Page 1 MICROSOFT OFFICE OUTLOOK 2007 PRESENTED BY: BRANDO P. DUMALI.

Free Powerpoint Templates Page 1 MICROSOFT OFFICE OUTLOOK 2007 PRESENTED BY: BRANDO P. DUMALI.
Email. If the PHP server is an email server or is aware of which server is the email server, then one can write code that emails information. –For example,

. If the PHP server is an server or is aware of which server is the server, then one can write code that s information. –For example,
Logins  You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not.  I've given you an account on des170.com:

Logins  You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not.  I've given you an account on des170.com:
Club/Student E-mail Mobile Device Syncing Last updated : 28 May 2014.

Club/Student Mobile Device Syncing Last updated : 28 May 2014.
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.

Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.

Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.

Similar presentations

Ads by Google