1 / 81

Programming Methodology and Web Rapid Prototyping (Session 3)

Programming Methodology and Web Rapid Prototyping (Session 3). TC101 , 5 Sessions course, Conducted by Solvith http://solvith.com/ACJC. Warm up. Which of this is a correct way to start a PHP code block <SCRIPT LANGUAGE=" php "> <!—PHP  <% <?PHP <!PHP. Warm up.

cecilia-lancaster
Télécharger la présentation

Programming Methodology and Web Rapid Prototyping (Session 3)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming Methodology and Web Rapid Prototyping (Session 3) TC101 , 5 Sessions course, Conducted by Solvith http://solvith.com/ACJC Solvith PHP Course- James Song (81273798)

  2. Warm up Which of this is a correct way to start a PHP code block • <SCRIPT LANGUAGE="php"> • <!—PHP • <% • <?PHP • <!PHP

  3. Warm up What is the output for this code ? <?php $myarr=array(“b”=>2,2=>”b”); $myarrb=array(3,2,1,0); echo $myarrb[$myarr[“b”]]; ?>

  4. Warm up What is the output for this code ? <?php function confuse($b,$a) { $b=$a; $a=$b; return $b; } $a=1; $b=2; confuse($b,$a); $b=confuse($a,$b); echo($a+$b); ?>

  5. Lesson Objectives Session 4 [3 Aug] (Changed*) • Consultation (20 mins) • HTML Basic (Part 2) (1 hour) • PHP AND HTML Interactivity (1 hour) • Consultation (20 mins) • String Functions In PHP (1 hour) • Consultation (20 mins) Solvith PHP Course- James Song (81273798)

  6. Lists • Lists are used to organize items in the browser window: • Unordered list: Bulleted list (most popular), list items with no particular order • Ordered list: Numbered list

  7. Lists • HTML supports two types of Lists: • Ordered Lists (OL): e.g. 1,2,3 • UnOrdered Lists (UL): e.g. bullets. • Basic Syntax: <UL> <LI>Item 1 <LI>Item 2 </UL>

  8. Unordered list: • Unordered list: Bulleted list (most popular), lists items with no particular order Fruit <UL> <LI> Banana <LI>Grape </UL> • Fruit • Banana • Grape

  9. Ordered list: • Numbered list: Fruit <ol> <LI> Banana <LI>Grape </OL> Fruit • Banana • Grape

  10. Hyperlinks (Anchor Tag): • Hyperlinks are used for linking: • within the same page (Named tags) • To another page in your web site (Relative Link or local link) • To another page outside your web site (Absolute or remote link) • Email Link • Hyper Links: are highlighted and underlined text. When you click on it, it takes you to another page on the web. <A command=“target”>highlighted text</A>

  11. Hyperlinks: • Absolute Link: These are links to another page outside of your web site. These links specify the entire URL of the page: <A HREF=“http://www.nyu.edu/”>NYU Web Site</A> NYU Web Site

  12. Hyperlinks: • Relative Link: These are links to another page in your site so you do not have to specify the entire URL. <A HREF=“index.html”>Go back to main page</A> Go back to main page

  13. Targeted Links • A tag includes a target attribute. If you specify target=“_blank”, a new browser window will be opened. • <A HREF=“http://www.nyu.edu” target="_blank”> NYU</A> • More on this when we get to frames...

  14. Email Link: • You can someone at: <a href=“mailto:jj1@nyu.edu”>Send email to J.J.</A>

  15. HTML Tables • Tables represent a simple mechanism for creating rows and columns of data. • This is a great tool for laying out the content of any web page, especially when you omit the border by using: • … border = “0”… • Tables are very widely used and supported by all common browsers. • Tables use a very simple tag structure.

  16. Backgrounds • Use < body bgcolor = “…” > for a background color with a hex version of a web-safe color: <body bgcolor = “ccffff”> • For a tiled background using an image file: <BODY background="backgroundPicture.gif">

  17. HTML - Tables • Tables tags starts with • <TABLE> tag, then • <TR> defines table rows. • Each <TR> represents one row in the table. • The number of rows is determined by the number of <TR> • <TD> Table data or <TH> Table Header can follow the <TR> tag • The number of cells in each row is determined by the number of <TH> (Table Header) and/or <TD> (Table data) tags contained within that row. • <TH> text will be in bold, and centered • <table> </table>

  18. Basic Tag Structure <TABLE> <TR > <TH>Ticker</TH> <TH>Price</TH> </TR> <TR> <TD>MSFT</TD> <TD>71 1/16</TD> </TR> <TR> <TD>KO</TD> <TD>46 15/16</TD> </TR> </TABLE> TR: Table Row TH: Table Heading TD: Table Data Every <TD> must have a matching </TD>. Every <TR> must have a matching </TR>.

  19. Table Attributes <TABLE ALIGN=“left" BORDER=0 BGCOLOR=“cyan“ width=600 cellpadding=0 cellspacing=0> • Align: "left", "center" or "right“ - "left" is the default • Border: thickness of the border in pixels - 0 for no borders • Bgcolor: is background color in HEX or as a name color • Background=url (works with IE only) • Cellpading=n (n is number of pixels (space) between cell content and its border • Cellspacing=n (n is number of pixels (space) between cells) • Height=n (height of table in pixels or percentages 100%) • Width=n (Width of table in pixels or percentages 100%)

  20. Scrolling text using the <marquee> tag <html> <head><title> scrolling text</title></head> <marquee><font face=”sand">Welcome to my website! Be sure to visit again!</marquee> </body> </html>

  21. Images <imgsrc= "logoblue.gif" width="153" height="31" border="0" alt="W I R E D"> • Image Attributes • src: URL or filename for the image • width/height: not required • border: not required. • alt: recommended for users running a text browser.

  22. Images <imgsrc= "logoblue.gif" width="153" height="31" border="0" alt="W I R E D"> • Image Attributes • src: URL or filename for the image • width/height: not required • border: not required. • alt: recommended for users running a text browser.

  23. What are forms? • <form> is just another kind of HTML tag • HTML forms are used to create (rather primitive) GUIs on Web pages • Usually the purpose is to ask the user for information • The information is then sent back to the server • A form is an area that can contain form elements • The syntax is: <form parameters>...form elements...</form> • Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc • Other kinds of HTML tags can be mixed in with the form elements • A form usually contains a Submit button to send the information in he form elements to the server • The form’s parameters tell JavaScript how to send the information to the server (there are two different ways it could be sent) • Forms can be used for other things, such as a GUI for simple programs

  24. Forms and JavaScript • The JavaScript language can be used to make pages that “do something” • You can use JavaScript to write complete programs, but... • Usually you just use snippets of JavaScript here and there throughout your Web page • JavaScript code snippets can be attached to various form elements • For example, you might want to check that azipcodefield contains a 5-digit integer before you send that information to the server • Microsoft sometimes calls JavaScript “active scripting” • HTML forms can be used without JavaScript, and JavaScript can be used without HTML forms, but they work well together • JavaScript for HTML is covered in a separate lecture

  25. The <form> tag • The <form arguments> ... </form> tag encloses form elements (and probably other HTML as well) • The arguments to form tell what to do with the user input • action="url" (required) • Specifies where to send the data when the Submit button is clicked • method="get" (default) • Form data is sent as a URL with ?form_data info appended to the end • Can be used only if data is all ASCII and not more than 100 characters • method="post" • Form data is sent in the body of the URL request • Cannot be bookmarked by most browsers • target="target" • Tells where to open the page sent as a result of the request • target=_blank means open in a new window • target=_top means use the same window

  26. The<input>tag • Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is • type can be text, checkbox, radio, password, hidden, submit, reset, button, file,or image • Other common input tag arguments include: • name: the name of the element • value: the “value” of the element; used in different ways for different values of type • readonly: the value cannot be changed • disabled: the user can’t do anything with this element • Other arguments are defined for the input tag but have meaning only for certain values of type

  27. Text input A text field: <input type="text" name="textfield" value="with an initial value"> A multi-line text field <textarea name="textarea" cols="24" rows="2">Hello</textarea> A password field: <input type="password" name="textfield3" value="secret"> • Note that two of these use the input tag, but one uses textarea

  28. A submit button: <input type="submit" name="Submit" value="Submit"> A reset button: <input type="reset" name="Submit2" value="Reset"> A plain button: <input type="button" name="Submit3" value="Push Me"> submit: send data reset: restore all form elements to their initial state button: take some action as specified by JavaScript Buttons • Note that the type is input, not “button”

  29. A checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked> type: "checkbox" name: used to reference this form element from JavaScript value: value to be returned when element is checked Note that there is no text associated with the checkbox—you have to supply text in the surrounding HTML Checkboxes

  30. Radio buttons:<br><input type="radio" name="radiobutton" value="myValue1">male<br><input type="radio" name="radiobutton" value="myValue2" checked>female If two or more radio buttons have the same name, the user can only select one of them at a time This is how you make a radio button “group” If you ask for the value of that name, you will get the value specified for the selected radio button As with checkboxes, radio buttons do not contain any text Radio buttons

  31. A menu or list:<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option></select> Additional arguments: size: the number of items visible in the list (default is"1") multiple: if set to "true", any number of items may be selected (default is"false") Drop-down menu or list

  32. <input type="hidden" name="hiddenField" value="nyah"> &lt;-- right there, don't you see it? What good is this? All input fields are sent back to the server, including hidden fields This is a way to include information that the user doesn’t need to see (or that you don’t want her to see) The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted Hidden fields

  33. A complete example • <html><head><title>Get Identity</title><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"></head><body><p><b>Who are you?</b></p><form method="post" action=""> <p>Name: <input type="text" name="textfield"> </p> <p>Gender: <input type="radio" name="gender" value="m">Male <input type="radio" name="gender" value="f">Female</p> </form></body></html>

  34. How forms work User requests a particular URL XHTML Page supplied with Form User fills in form and submits. Another URL is requested and the Form data is sent to this page either in URL or as a separate piece of data. User Web Server XHTML Response

  35. XHTML Form • The form is enclosed in form tags.. <form action=“path/to/submit/page” method=“get”> <!–- form contents --> </form>

  36. Form tags • action=“…” is the page that the form should submit its data to. • method=“…” is the method by which the form data is submitted. The option are either get or post. If the method is get the data is passed in the url string, if the method is post it is passed as a separate file.

  37. Form fields: text input • Use a text input within form tags for a single line freeform text input. <label for=“fn">First Name</label> <input type="text" name="firstname" id=“fn" size="20"/>

  38. Form tags • name=“…” is the name of the field. You will use this name in PHP to access the data. • id=“…” is label reference string – this should be the same as that referenced in the <label> tag. • size=“…” is the length of the displayed text box (number of characters).

  39. Form fields: password input • Use a starred text input for passwords. <label for=“pw">Password</label> <input type=“password" name=“passwd" id=“pw" size="20"/>

  40. Form fields: text input • If you need more than 1 line to enter data, use a textarea. <label for="desc">Description</label> <textarea name=“description” id=“desc“ rows=“10” cols=“30”> Default text goes here… </textarea>

  41. Form fields: text area • name=“…” is the name of the field. You will use this name in PHP to access the data. • id=“…” is label reference string – this should be the same as that referenced in the <label> tag. • rows=“…” cols=“..” is the size of the displayed text box.

  42. Form fields: drop down <label for="tn">Where do you live?</label> <select name="town" id="tn"> <option value="swindon">Swindon</option> <option value="london” selected="selected">London</option> <option value=“bristol">Bristol</option> </select>

  43. Form fields: drop down • name=“…” is the name of the field. • id=“…” is label reference string. • <option value=“…” is the actual data sent back to PHP if the option is selected. • <option>…</option> is the value displayed to the user. • selected=“selected” this option is selected by default.

  44. Form fields: radio buttons <input type="radio" name="age" id="u30“ checked=“checked” value="Under30" /> <label for="u30">Under 30</label> <br /> <input type="radio" name="age" id="thirty40" value="30to40" /> <label for="thirty40">30 to 40</label>

  45. Form fields: radio buttons • name=“…” is the name of the field. All radio boxes with the same name are grouped with only one selectable at a time. • id=“…” is label reference string. • value=“…” is the actual data sent back to PHP if the option is selected. • checked=“checked” this option is selected by default.

  46. Form fields: check boxes What colours do you like?<br /> <input type="checkbox" name="colour[]" id="r" checked="checked" value="red" /> <label for="r">Red</label> <br /> <input type="checkbox" name="colour[]" id="b" value="blue" /> <label for="b">Blue</label>

  47. Form fields: check boxes • name=“…” is the name of the field. Multiple checkboxes can be selected, so if the button are given the same name, they will overwrite previous values. The exception is if the name is given with square brackets – an array is returned to PHP. • id=“…” is label reference string. • value=“…” is the actual data sent back to PHP if the option is selected. • checked=“checked” this option is selected by default.

  48. Hidden Fields <input type="hidden" name="hidden_value" value="My Hidden Value" /> • name=“…” is the name of the field. • value=“…” is the actual data sent back to PHP.

  49. Submit button.. • A submit button for the form can be created with the code: <input type="submit" name="submit" value="Submit" />

  50. Fieldset • In XHTML 1.0, all inputs must be grouped within the form into fieldsets. These represent logical divisions through larger forms. For short forms, all inputs are contained in a single fieldset. <form> <fieldset> <input … /> <input … /> </fieldset> <fieldset> <input … /> <input … /> </fieldset> </form>

More Related