SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
20-5555: Programming for Excel and the Web


20-5555: Web Programming - PHP Tutorial 2

The object of this session is to gain further experience with the use of HTML forms and
PHP.
We first look at the HTML side of things. Here is a list of the most common form
elements that are available:


TEXTBOX (3 types)
       <input type="text" name="person" value="Bill" size="16">
       <input type="password" name="person" value="dews" >
       <input type="hidden" name="age" value="99">



Referred to in PHP using the name attribute. Value is default value for the first two
and the value passed on for the third. Size is box width. The hidden type allows you
to pass any additional information to your PHP script – but it will not be visible on the
HTML form.


RADIO BUTTON (OPTION BUTTON)
       <input type="radio" name="color" value="red" checked>Red
       <input type="radio" name="color" value="green">Green
       <input type="radio" name="color" value="blue">Blue



Provides a means of choosing one from a few options (mutually-exclusive). All must
have the same name – this is used by PHP. The name becomes the PHP variable, and
the value is what this variable will contain. The one with the checked attribute is
the one initially selected.


CHECKBOX
       <input type="checkbox" value="yes" name="Milk" checked>with Milk


Provides a means of supplying a yes/no choice. The checked property means it is
checked initially. The PHP variable will be the name attribute and the value passed on
will be either the contents of the value attribute, if the box is checked, or nothing if
it is not checked.


BUTTONS
       <input type="submit" value="submit Me">
       <input type="reset" value="Reset Form">
       <input type="button" value="Click Me" onclick="Javascript:abc()">



There are three basic types of button – a submit button, that will submit a form, a
reset button that will restore defaults, and a button that can be linked to a Javascript
function.


                                                                                           1
PHP: Tutorial 2


OPTION LIST
       <select name="colour" size="6">
             <option value="red" SELECTED>Red</option>
             <option value="green">Green</option>
             <option value="blue">Blue</option>
             <option value="orange">Orange</option>
             <option value="pink">Pink</option>
             .
             .
             .
       </select>




This is a drop-list – useful for when there are too many options to use option buttons.
As before, the name provides PHP with the variable name and the value with the
value that is passed on. The one with the selected attribute is the default. Size
gives the number of rows visible at any one time in the drop-list.



TEXTAREA
       <textarea cols="12" rows="22" name="memo">Default text</textarea>




This is a ‘memo’ field – a text-entry box allowing multi-line entry. The cols and
rows attributes give the dimensions of the box, and the name is the variable
containing the text entered. “Default text” is the text that initially appears in the box,
and may be blank.




2
20-5555: Programming for Excel and the Web


An example of an HTML form that includes all of the above:

<html><head><title>20-5555: PHP Tut2, Example 1</title>
</head>
<body>
<h1>20-5555: Web Programming</h1>
<h2>PHP Tutorial 2 - Exercise 1</h2>
<hr size="1">
<h3>Example of a web form including all common form elements</h3>
<p></p>
<table cellpadding="10" cellspacing="0" border="1" bgcolor="#ffdab9">
<tr><td>
<form action="Tut2Ex1.php" method="post">
<input type="hidden" name="SecretWord" value="supercalifragilistic">
Your Name please: <input type="text" name="Ex1_name" value="Algernon">
<p>
Enter a password: <input type="password" value="dews"
name="Ex1_password">
<p>
Pick a colour:
<input type="radio" value="red" name="Ex1_colour" checked>Red&nbsp;&nbsp;
<input type="radio" value="green" name="Ex1_colour">Green&nbsp;&nbsp;
<input type="radio" value="blue" name="Ex1_colour">Blue
<p>
Do you like
<input type="checkbox" value="yes" name="Ex1_sugar"> sugar,
<input type="checkbox" value="yes" name="Ex1_milk" checked> milk with your coffee?
<p>
<input type="button" value="Click me" onclick="Javascript:alert('OW!n
What did you do that for??!')">
<p>
What's your favourite item of clothing?:
<select name="Ex1_BestDuds" size="2">
      <option value="trousers" SELECTED>Trousers</option>
      <option value="hat">Hat</option>
      <option value="G-string">G-String</option>
      <option value="Leotard">Leotard</option>
      <option value="Birthday Suit">Birthday Suit</option>
</select>
<p>
<textarea cols="60" rows="5" name="Ex1_Comment">Enter a comment or two
here ..</textarea>
<p>
<input type="submit" value="Send me your sorry life!"><input
type="reset">
</form>
</td></tr>
</table>
</body>
</html>




                                                                               3
PHP: Tutorial 2

RESULT BELOW … [See what happens if you change to ‘method’ attribute of the FORM
tag to ‘get’ instead of ‘post’]




Now for the PHP code that the form links to (Tut2Ex1.php) …




4
20-5555: Programming for Excel and the Web



 <html><head><title>20-5555: PHP Tut2, Example 1</title>
 </head>
 <body>
 <h1>20-5555: Web Programming</h1>
 <h2>PHP Tutorial 2 - Exercise 1</h2>
 <hr size=1>
 Results of the form ..<p></p>
 <table cellpadding=10 cellspacing=0 border=1 bgcolor="#ffdab9">
 <tr><td>
 <?php
 #OK to parse
 $SecretWord=$_REQUEST['SecretWord'];
 $Ex1_name=$_REQUEST['Ex1_name'];
 $Ex1_password=$_REQUEST['Ex1_password'];
 $Ex1_colour=$_REQUEST['Ex1_colour'];
 $Ex1_sugar=$_REQUEST['Ex1_sugar'];
 $Ex1_milk=$_REQUEST['Ex1_milk'];
 $Ex1_BestDuds=$_REQUEST['Ex1_BestDuds'];
 $Ex1_Comment=$_REQUEST['Ex1_Comment'];
 print "Hidden field "SecretWord": $SecretWord<br>n";
 print "Your name: $Ex1_name<br>n";
 print "Your password: $Ex1_password<br>n";
 print "Your colour: $Ex1_colour<br>n";
 print "You like sugar in your coffee - $Ex1_sugar<br>n";
 print "You like milk in your coffee - $Ex1_milk<br>n";
 print "Favourite item of clothing is - $Ex1_BestDuds<br>n";
 print "Comment: $Ex1_Comment<br>n";
 ?>
 </td></tr>
 </table>
 </body>
 </html>

Note the use of the global $_REQUEST array to get the contents of each form field.

with this result (for example) ….




                                                                                     5
PHP: Tutorial 2


FORM VALIDATION
To validate a form you use Javascript. When the form is submitted you want to be
able to check the form fields for valid data before they are sent to the server. This will
help to reduce unnecessary communication and ease bandwidth. You do this by
adding something like the following to the <FORM> tag:
       <FORM …      onsubmit=”return ValidateForm(this)”>
This re-directs control to a Javascript function (in this case called ‘ValidateForm’)
passing it a reference to the form from which it is called (this). This function must
generate a return value of ‘True’ or ‘False’ and the form is only submitted if the value
is ‘True’. It is then up to the Javascript function to extract each item of information
from the form and validate its contents.
Here is an example - add the following to the <head> section of the html page:

<script language="JavaScript1.1">
<!--
function CheckForm(f) {
      //check the textbox Ex1_name
      msg="";
      msg2="";
      name=f.Ex1_name.value;
      if (name == "") {
            msg += "You must enter your name!";
      }
      for (j=0; j<f.Ex1_colour.length; j++) {
            if (f.Ex1_colour[j].checked) {
                  colourchosen=f.Ex1_colour[j].value;
            }
      }
      if (f.Ex1_sugar.checked) {
            likesugar=true
      } else {
            likesugar=false
      }
      if (f.Ex1_milk.checked) {
            likemilk=true
      } else {
            likemilk=false
      }
      j=f.Ex1_BestDuds.selectedIndex;
      clotheschosen=f.Ex1_BestDuds.options[j].value
      msg2 = "Your name is " + name + "n";
      msg2 += "The colour you chose is " + colourchosen + "n";
      msg2 += "You like sugar : " + likesugar + "n";
      msg2 += "You like milk : " + likemilk + "n";
      msg2 += "Your favourite item of clothing is " + clotheschosen + "n";
      alert (msg2);
      if (msg != "") {
            alert (msg);
            return false;
      } else {
            return true;
      }
}
//-->
</script>

and change the form tag to this:



6
20-5555: Programming for Excel and the Web

<form action="Tut2Ex1.php" method="post" onsubmit="return CheckForm(this);">

When running the program now, a typical response would be:




The Javascript can intercept the data from the form and process them before being
submitted to PHP. After clicking ‘OK’ on this alert box, the form is submitted and the
previous response is obtained from PHP.
If, however, the name field is empty, we get




in this case AFTER the previous box had appeared (that’s just the way the Javascript is
written) and the form is NOT submitted to PHP.




TRY:
•   Adding a text field that asks for the person’s age. The Javascript should check that
    a positive number < 120 has been entered.
•   Changing the way the form works so that the output appears in a new window. To
    do this, you can execute a line of Javascript of the form ..

    newWindow=window.open(url,"newWin","toolbar=no,scrollbars=yes,
    width=600,height=800")
    (all on one line). The url parameter will reference the PHP script, but must also
    pass on the full set of form data values, as a query string. Your Javascript must
    therefore construct this, so that (for example)
    url=myscript.php?name=george&colour=red&sugar=false& ….
It is normal practice that when your code opens a new window, it should also provide
a means of closing it! Again a simple bit of Javascript will do this ..
Text link: <a href="Javascript:self.close()">Close this window</a>
Button:
<form><input type="button" value="Close Window" onclick="self.close()"></form>




                                                                                         7

Contenu connexe

Tendances

The Django Book - Chapter 7 forms
The Django Book - Chapter 7 formsThe Django Book - Chapter 7 forms
The Django Book - Chapter 7 formsVincent Chien
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validationMaitree Patel
 
Php forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligetiPhp forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligetiNaveen Kumar Veligeti
 
HTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson IIIHTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson IIIjeffcarlj
 
Form validation server side
Form validation server side Form validation server side
Form validation server side Mudasir Syed
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio videoSaad Sheikh
 
Html basics 11 form validation
Html basics 11 form validationHtml basics 11 form validation
Html basics 11 form validationH K
 
HTML Forms Tutorial
HTML Forms TutorialHTML Forms Tutorial
HTML Forms TutorialProdigyView
 
CGI::Prototype (NPW 2006)
CGI::Prototype (NPW 2006)CGI::Prototype (NPW 2006)
CGI::Prototype (NPW 2006)brian d foy
 
Web programming manual
Web programming manualWeb programming manual
Web programming manualShobha Kumar
 

Tendances (14)

The Django Book - Chapter 7 forms
The Django Book - Chapter 7 formsThe Django Book - Chapter 7 forms
The Django Book - Chapter 7 forms
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
 
Php forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligetiPhp forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligeti
 
Html form
Html formHtml form
Html form
 
HTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson IIIHTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson III
 
Form validation server side
Form validation server side Form validation server side
Form validation server side
 
Html 4
Html   4Html   4
Html 4
 
html forms
html formshtml forms
html forms
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
Html basics 11 form validation
Html basics 11 form validationHtml basics 11 form validation
Html basics 11 form validation
 
Elm intro
Elm introElm intro
Elm intro
 
HTML Forms Tutorial
HTML Forms TutorialHTML Forms Tutorial
HTML Forms Tutorial
 
CGI::Prototype (NPW 2006)
CGI::Prototype (NPW 2006)CGI::Prototype (NPW 2006)
CGI::Prototype (NPW 2006)
 
Web programming manual
Web programming manualWeb programming manual
Web programming manual
 

Similaire à phptut2

03-forms.ppt.pptx
03-forms.ppt.pptx03-forms.ppt.pptx
03-forms.ppt.pptxThắng It
 
20 html-forms
20 html-forms20 html-forms
20 html-formsKumar
 
Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_Shivanand Algundi
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypesVarun C M
 
Ôn tập KTTMDT
Ôn tập KTTMDTÔn tập KTTMDT
Ôn tập KTTMDTmrcoffee282
 
14922 java script built (1)
14922 java script built (1)14922 java script built (1)
14922 java script built (1)dineshrana201992
 
Html basics 10 form
Html basics 10 formHtml basics 10 form
Html basics 10 formH K
 
Practical PHP by example Jan Leth-Kjaer
Practical PHP by example   Jan Leth-KjaerPractical PHP by example   Jan Leth-Kjaer
Practical PHP by example Jan Leth-KjaerCOMMON Europe
 
Java script frame window
Java script frame windowJava script frame window
Java script frame windowH K
 
Ex[1].3 php db connectivity
Ex[1].3 php db connectivityEx[1].3 php db connectivity
Ex[1].3 php db connectivityMouli Chandira
 
JavaScript lesson 1.pptx
JavaScript lesson 1.pptxJavaScript lesson 1.pptx
JavaScript lesson 1.pptxMuqaddarNiazi1
 
Synapse india complain sharing info about php chaptr 26
Synapse india complain sharing info about php chaptr 26Synapse india complain sharing info about php chaptr 26
Synapse india complain sharing info about php chaptr 26SynapseindiaComplaints
 

Similaire à phptut2 (20)

03-forms.ppt.pptx
03-forms.ppt.pptx03-forms.ppt.pptx
03-forms.ppt.pptx
 
Why study java script
Why study java scriptWhy study java script
Why study java script
 
20 html-forms
20 html-forms20 html-forms
20 html-forms
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
Ôn tập KTTMDT
Ôn tập KTTMDTÔn tập KTTMDT
Ôn tập KTTMDT
 
14922 java script built (1)
14922 java script built (1)14922 java script built (1)
14922 java script built (1)
 
Html basics 10 form
Html basics 10 formHtml basics 10 form
Html basics 10 form
 
PHP - Introduction to PHP Forms
PHP - Introduction to PHP FormsPHP - Introduction to PHP Forms
PHP - Introduction to PHP Forms
 
JavaScript Training
JavaScript TrainingJavaScript Training
JavaScript Training
 
Practical PHP by example Jan Leth-Kjaer
Practical PHP by example   Jan Leth-KjaerPractical PHP by example   Jan Leth-Kjaer
Practical PHP by example Jan Leth-Kjaer
 
1cst
1cst1cst
1cst
 
Synapse india basic php development part 1
Synapse india basic php development part 1Synapse india basic php development part 1
Synapse india basic php development part 1
 
Java script frame window
Java script frame windowJava script frame window
Java script frame window
 
PHP Scripting
PHP ScriptingPHP Scripting
PHP Scripting
 
Ex[1].3 php db connectivity
Ex[1].3 php db connectivityEx[1].3 php db connectivity
Ex[1].3 php db connectivity
 
Form
FormForm
Form
 
JavaScript lesson 1.pptx
JavaScript lesson 1.pptxJavaScript lesson 1.pptx
JavaScript lesson 1.pptx
 
Synapse india complain sharing info about php chaptr 26
Synapse india complain sharing info about php chaptr 26Synapse india complain sharing info about php chaptr 26
Synapse india complain sharing info about php chaptr 26
 

Plus de tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 

Plus de tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Dernier

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Dernier (20)

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

phptut2

  • 1. 20-5555: Programming for Excel and the Web 20-5555: Web Programming - PHP Tutorial 2 The object of this session is to gain further experience with the use of HTML forms and PHP. We first look at the HTML side of things. Here is a list of the most common form elements that are available: TEXTBOX (3 types) <input type="text" name="person" value="Bill" size="16"> <input type="password" name="person" value="dews" > <input type="hidden" name="age" value="99"> Referred to in PHP using the name attribute. Value is default value for the first two and the value passed on for the third. Size is box width. The hidden type allows you to pass any additional information to your PHP script – but it will not be visible on the HTML form. RADIO BUTTON (OPTION BUTTON) <input type="radio" name="color" value="red" checked>Red <input type="radio" name="color" value="green">Green <input type="radio" name="color" value="blue">Blue Provides a means of choosing one from a few options (mutually-exclusive). All must have the same name – this is used by PHP. The name becomes the PHP variable, and the value is what this variable will contain. The one with the checked attribute is the one initially selected. CHECKBOX <input type="checkbox" value="yes" name="Milk" checked>with Milk Provides a means of supplying a yes/no choice. The checked property means it is checked initially. The PHP variable will be the name attribute and the value passed on will be either the contents of the value attribute, if the box is checked, or nothing if it is not checked. BUTTONS <input type="submit" value="submit Me"> <input type="reset" value="Reset Form"> <input type="button" value="Click Me" onclick="Javascript:abc()"> There are three basic types of button – a submit button, that will submit a form, a reset button that will restore defaults, and a button that can be linked to a Javascript function. 1
  • 2. PHP: Tutorial 2 OPTION LIST <select name="colour" size="6"> <option value="red" SELECTED>Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="orange">Orange</option> <option value="pink">Pink</option> . . . </select> This is a drop-list – useful for when there are too many options to use option buttons. As before, the name provides PHP with the variable name and the value with the value that is passed on. The one with the selected attribute is the default. Size gives the number of rows visible at any one time in the drop-list. TEXTAREA <textarea cols="12" rows="22" name="memo">Default text</textarea> This is a ‘memo’ field – a text-entry box allowing multi-line entry. The cols and rows attributes give the dimensions of the box, and the name is the variable containing the text entered. “Default text” is the text that initially appears in the box, and may be blank. 2
  • 3. 20-5555: Programming for Excel and the Web An example of an HTML form that includes all of the above: <html><head><title>20-5555: PHP Tut2, Example 1</title> </head> <body> <h1>20-5555: Web Programming</h1> <h2>PHP Tutorial 2 - Exercise 1</h2> <hr size="1"> <h3>Example of a web form including all common form elements</h3> <p></p> <table cellpadding="10" cellspacing="0" border="1" bgcolor="#ffdab9"> <tr><td> <form action="Tut2Ex1.php" method="post"> <input type="hidden" name="SecretWord" value="supercalifragilistic"> Your Name please: <input type="text" name="Ex1_name" value="Algernon"> <p> Enter a password: <input type="password" value="dews" name="Ex1_password"> <p> Pick a colour: <input type="radio" value="red" name="Ex1_colour" checked>Red&nbsp;&nbsp; <input type="radio" value="green" name="Ex1_colour">Green&nbsp;&nbsp; <input type="radio" value="blue" name="Ex1_colour">Blue <p> Do you like <input type="checkbox" value="yes" name="Ex1_sugar"> sugar, <input type="checkbox" value="yes" name="Ex1_milk" checked> milk with your coffee? <p> <input type="button" value="Click me" onclick="Javascript:alert('OW!n What did you do that for??!')"> <p> What's your favourite item of clothing?: <select name="Ex1_BestDuds" size="2"> <option value="trousers" SELECTED>Trousers</option> <option value="hat">Hat</option> <option value="G-string">G-String</option> <option value="Leotard">Leotard</option> <option value="Birthday Suit">Birthday Suit</option> </select> <p> <textarea cols="60" rows="5" name="Ex1_Comment">Enter a comment or two here ..</textarea> <p> <input type="submit" value="Send me your sorry life!"><input type="reset"> </form> </td></tr> </table> </body> </html> 3
  • 4. PHP: Tutorial 2 RESULT BELOW … [See what happens if you change to ‘method’ attribute of the FORM tag to ‘get’ instead of ‘post’] Now for the PHP code that the form links to (Tut2Ex1.php) … 4
  • 5. 20-5555: Programming for Excel and the Web <html><head><title>20-5555: PHP Tut2, Example 1</title> </head> <body> <h1>20-5555: Web Programming</h1> <h2>PHP Tutorial 2 - Exercise 1</h2> <hr size=1> Results of the form ..<p></p> <table cellpadding=10 cellspacing=0 border=1 bgcolor="#ffdab9"> <tr><td> <?php #OK to parse $SecretWord=$_REQUEST['SecretWord']; $Ex1_name=$_REQUEST['Ex1_name']; $Ex1_password=$_REQUEST['Ex1_password']; $Ex1_colour=$_REQUEST['Ex1_colour']; $Ex1_sugar=$_REQUEST['Ex1_sugar']; $Ex1_milk=$_REQUEST['Ex1_milk']; $Ex1_BestDuds=$_REQUEST['Ex1_BestDuds']; $Ex1_Comment=$_REQUEST['Ex1_Comment']; print "Hidden field "SecretWord": $SecretWord<br>n"; print "Your name: $Ex1_name<br>n"; print "Your password: $Ex1_password<br>n"; print "Your colour: $Ex1_colour<br>n"; print "You like sugar in your coffee - $Ex1_sugar<br>n"; print "You like milk in your coffee - $Ex1_milk<br>n"; print "Favourite item of clothing is - $Ex1_BestDuds<br>n"; print "Comment: $Ex1_Comment<br>n"; ?> </td></tr> </table> </body> </html> Note the use of the global $_REQUEST array to get the contents of each form field. with this result (for example) …. 5
  • 6. PHP: Tutorial 2 FORM VALIDATION To validate a form you use Javascript. When the form is submitted you want to be able to check the form fields for valid data before they are sent to the server. This will help to reduce unnecessary communication and ease bandwidth. You do this by adding something like the following to the <FORM> tag: <FORM … onsubmit=”return ValidateForm(this)”> This re-directs control to a Javascript function (in this case called ‘ValidateForm’) passing it a reference to the form from which it is called (this). This function must generate a return value of ‘True’ or ‘False’ and the form is only submitted if the value is ‘True’. It is then up to the Javascript function to extract each item of information from the form and validate its contents. Here is an example - add the following to the <head> section of the html page: <script language="JavaScript1.1"> <!-- function CheckForm(f) { //check the textbox Ex1_name msg=""; msg2=""; name=f.Ex1_name.value; if (name == "") { msg += "You must enter your name!"; } for (j=0; j<f.Ex1_colour.length; j++) { if (f.Ex1_colour[j].checked) { colourchosen=f.Ex1_colour[j].value; } } if (f.Ex1_sugar.checked) { likesugar=true } else { likesugar=false } if (f.Ex1_milk.checked) { likemilk=true } else { likemilk=false } j=f.Ex1_BestDuds.selectedIndex; clotheschosen=f.Ex1_BestDuds.options[j].value msg2 = "Your name is " + name + "n"; msg2 += "The colour you chose is " + colourchosen + "n"; msg2 += "You like sugar : " + likesugar + "n"; msg2 += "You like milk : " + likemilk + "n"; msg2 += "Your favourite item of clothing is " + clotheschosen + "n"; alert (msg2); if (msg != "") { alert (msg); return false; } else { return true; } } //--> </script> and change the form tag to this: 6
  • 7. 20-5555: Programming for Excel and the Web <form action="Tut2Ex1.php" method="post" onsubmit="return CheckForm(this);"> When running the program now, a typical response would be: The Javascript can intercept the data from the form and process them before being submitted to PHP. After clicking ‘OK’ on this alert box, the form is submitted and the previous response is obtained from PHP. If, however, the name field is empty, we get in this case AFTER the previous box had appeared (that’s just the way the Javascript is written) and the form is NOT submitted to PHP. TRY: • Adding a text field that asks for the person’s age. The Javascript should check that a positive number < 120 has been entered. • Changing the way the form works so that the output appears in a new window. To do this, you can execute a line of Javascript of the form .. newWindow=window.open(url,"newWin","toolbar=no,scrollbars=yes, width=600,height=800") (all on one line). The url parameter will reference the PHP script, but must also pass on the full set of form data values, as a query string. Your Javascript must therefore construct this, so that (for example) url=myscript.php?name=george&colour=red&sugar=false& …. It is normal practice that when your code opens a new window, it should also provide a means of closing it! Again a simple bit of Javascript will do this .. Text link: <a href="Javascript:self.close()">Close this window</a> Button: <form><input type="button" value="Close Window" onclick="self.close()"></form> 7