My first paragraph.
tag 1. Use the Windows Notepad++ to type the following html code and save it in a file named “testing_html.html”. 2. Store this file under the following path into your machine: C:\wamp\www\lab1 3. To edit the file using Notepad++, right click on the file icon and choose “Edit with Notepad++”. 4. Write the next tags in your file:
Welcome to Web Lab.
Second Semester 2017.
Instructor Asma Khtoom.
5. To preview the newly created html file do the following: a. Click once on the WampServer icon on the Windows taskbar. b. Choose “localhost” from the menu. c. You show be able to see the “lab1” folder under “Your Project” in the default localhost page. d. Navigate inside the folder to view its contents. e. Click on the project file you would like to preview.This is
a paragraph
with line breaks
Element The HTMLelement defines preformatted text. The text inside aelement is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
The pre tag preserves both spaces and line breaks:
My Bonnie lies over the ocean.[Task5]. HTML Formatting Elements HTML uses elements like and for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
- Bold text - Italic text - underlined text -strike through over text - Subscript text - Superscript text
Try this:
Instructor: Asma’a Khtoom.
Page |5
This text is normal.
This text is bold.
This text is italic
This is subscripted text.
This is superscripted text.
This is a parragraph.
Version2.0 is not yet available!
This text is bold and italic
[Task6]. HTML Character Entities Some characters are reserved in HTML. If you use the less than () signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML.
Instructor: Asma’a Khtoom.
Page |6
A character entity looks like this: &entity_name; OR &#entity_number; To display a less than sign (
Image Maps
coords Attribute Values Value
Description
x1,y1,x2,y2
Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect")
x,y,radius
Specifies the coordinates of the circle center and the radius (for shape="circle")
Instructor: Asma’a Khtoom.
3
Try thisClick on the sun or on one of the planets to watch it closer:
Linking to E-mail Addresses
Try thisThis is an email link: SendMail
Instructor: Asma’a Khtoom.
4
Homework:
Q1 .Write the code to view the next page.
You should create four pages: Home page : include image and welcome message News page: include nested lists (orderd and unordered list) about any news. Contact: include an email link About: contain paragraph about you (name,id,mobile number,university name)
Q2. Write the code to view the next page. Each link open location as follow: Pictures: open your computer picture folder. Projects: open html page contain definition list of 3 project. Social: open html page contain three ordered list with three images about social media sites.
Instructor: Asma’a Khtoom.
5
Lab (4) Web Applications Development HTML Tables Objectives:
Creating HTML Tables Learn the different attributes of tables such as: caption, colspan, rowspan and others. Create Frames and use it in your HTML page.
Defining an HTML Table An HTML table is defined with the
| tag. By default, table headings are bold and centered. A table data/cell is defined with the | tag.
Note: The | elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc. Instructor: Asma’a Khtoom. 1|Page Tasks: 1. Double Border Table, Coloring and width table, th, td { border: solid; border-width: 3px; border-color : red;} th { color : green;} td { color : blue;} ……… write the code of your table here. 2. Single Border Table Ex. table, th, td { border: solid ; border-collapse: collapse; //single line border border-width: 3px; border-color : red;} th { color : green;} td { color : blue;} Instructor: Asma’a Khtoom. 2|Page 3. Table Cell Padding and cell spacing Cell padding specifies the space between the cell content and its borders. The cellspacing attribute specifies the space, in pixels, between cells. Or try this
Instructor: Asma’a Khtoom. 3|Page 5. align Attribute The align attribute specifies the horizontal alignment of the content in a cell.
6. valign Attribute The valign attribute specifies the vertical alignment of the content in a cell. Try this
Instructor: Asma’a Khtoom. 4|Page 7. rowspan and colspan Attributes To combine /merge adjacent cells to create larger cell for data. rowspan: This attribute specifies the number of rows a cell should merged. colspan: This attribute specifies the number of columns a cell should merged. Example1: rowspan attribute
5|Page Write code for each: 1. A table that has a cell with an image and text in its content. 2. A table that has a cell with a link in its content. 3. A table that has a cell with a table in its content. Defining an HTML iframe element The tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. 1. iframe Attributes Attribute Value Description src url Specifies the address of the document to embed height pixels Specifies the height of an width pixels Specifies the width of an scrolling yes no auto text Specifies whether or not to display scrollbars name Specifies the name of an Task. Create 3 html files : mm.html , bb.html and cc.html , write the next code in each one: 1. mm.html Hello Change Instructor: Asma’a Khtoom. 6|Page 2. bb.html Welcome Hello with iframes Homework: Q1. Observe the output of the following piece of code:
Q2.Write the required code to create the following output: Table1. 2. Table2. Instructor: Asma’a Khtoom. 8|Page Lab (5) Web Applications Development HTML Forms Objectives: To understand the using of HTML Forms To learn how to create forms, forms methods and other attributes. Before starting your lab: create text file called action.php and write the next code in it: The Element The HTML element defines a form that is used to collect user input. An HTML form contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. First name: Last name: If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php". Instructor: Asma’a Khtoom.Page |1 Form Attributes Attribute Action Attribute Method Attribute Name Attribute enctype Attribute usage The action attribute defines the action to be performed when the form is submitted Specifies the HTTP method (GET or POST) to be used when submitting the form data. Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. specifies how the form-data should be encoded when submitting it to the server. can be used only if method="post". 1. Action attribute Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data: If the action attribute is omitted, the action is set to the current page. 2. Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: when GET is used, the submitted form data will be visible in the page address field: /action_page.php?firstname=Mickey&lastname=Mouse or: GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too. Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. POST has no size limitations, and can be used to send large amounts of data. Instructor: Asma’a Khtoom. Page |2 3. Enctype method Value Description application/x-www-formurlencoded Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values) multipart/form-data No characters are encoded. This value is required when you are using forms that have a file upload control text/plain Spaces are converted to "+" symbols, but no special characters are encoded The Element The element is the most important form element. The element can be displayed in several ways, depending on the type attribute. Type text radio Description Defines a one-line text input field Defines a radio button (selecting one of many choices) submit Defines a submit button (for submitting the form) checkbox password Button reset image file hidden Defines Defines Defines Defines Defines Defines Defines a checkbox (selecting many choices) a password field (characters are masked) a clickable button a reset button (resets all form values to default values) an image as the submit button a file-select field and a "Browse..." button (for file uploads) a hidden input field Instructor: Asma’a Khtoom. Page |3 Text Input defines a one-line input field for text input: Try this. The code The output First name: Last name: Radio Button Input defines a radio button. Radio buttons let a user select ONE of a limited number of choices. Try this. Male Female Other The output: Instructor: Asma’a Khtoom. Page |4 Checkbox Input Try this. And draw the output. The code output I have a bike I have a car The Submit Button defines a button for submitting the form data to a formhandler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: Try this. The Code The output First name: Last name: File Select a file: Instructor: Asma’a Khtoom. Page |5 6. hidden First name: Notice that the hidden field above is not shown to a user. Task2. Write the php code to print the following: 2. echo statements: void echo(st1,st2,st3,……….); Is used to output one or more string and return nothing. Can contain html tags. If it used to print single string the ( ) are optional. If it used to print more than one string don’t use ( ). Instructor: Asma’a Khtoom. 2|Page Task3. Write the next code and determine what the output is? The code The output Variables in PHP 1. PHP Data Types You don’t have to determine the data type of a variable when it is declared. PHP supports the following data types: String Integer Float (floating point numbers - also called double) Boolean Array Object NULL 2. Declaring Variables. A variable starts with the $ sign, followed by the name of the variable. When you assign a text value to a variable, put quotes around the value. Task4. Write the next code and determine what the output is? 3. Constants Declaration. Constants are like variables except that once they are defined they cannot be changed or undefined. A valid constant name starts with a letter or underscore (no $ sign before the constant name) to create a constant, use the define() function. Syntax define(name, value, case-insensitive) name: Specifies the name of the constant value: Specifies the value of the constant case-insensitive: Specifies whether the constant name should be caseinsensitive. Default is false Example1. creates a constant with a case-sensitive name: Output Example2.creates a constant with a case-insensitive name: Instructor: Asma’a Khtoom. Output 4|Page Constants are Global Constants can be used across the entire function. Concatenation in PHP You can concat two values together using the dot ( . ) Example: $txt2 = "WEB Lab"; echo "Study PHP at " . $txt2 . " "; Functions in PHP 1. Creating and calling functions Syntax function functionName() { code to be executed; } A user defined function declaration starts with the word "function": A function name can start with a letter or underscore (not a number) Function names are NOT case-sensitive Example1. Function without parameters Output Instructor: Asma’a Khtoom. 5|Page Example2. Function with parameters Output Example3. Function with parameters Output Example4. Function with parameters Example5. PHP Default Argument Value The following example shows how to use a default parameter. If we call the function setHeight() without arguments it takes the default value as argument: Instructor: Asma’a Khtoom. 6|Page Output Example6. PHP Functions - Returning values Instructor: Asma’a Khtoom. 7|Page Variables Scope in PHP 1. Local scope A variable declared within a function has a LOCAL SCOPE and can only be accessed within that function: Example Output 2. Global scope A variable declared outside a function has a GLOBAL SCOPE and can only be accessed outside a function: Example1: $x = 5; // global scope function myTest() { // using x inside this function will generate an error echo " Variable x inside function is: $x "; } myTest(); echo "Variable x outside function is: $x "; ?> OutputInstructor: Asma’a Khtoom. 8|Page Using Global variables in Functions Method1. The global keyword is used to access a global variable from within a function. To do this, use the global keyword before the variables (inside the function): Example2: Output Method2. PHP also stores all global variables in an array called $GLOBALS[index]. The index holds the name of the variable. This array is also accessible from within functions and can be used to update global variables directly. Example3: 3. Static scope Normally, when a function is completed/executed, all of its variables are deleted. However, sometimes we want a local variable NOT to be deleted. We need it for a further job. To do this, use the static keyword when you first declare the variable: Instructor: Asma’a Khtoom. 9|Page Example: Note: The variable is still local to the function. 4. Parameter scope The parameter is local to function. Example: Arrays in PHP 1. Indexed Arrays Arrays with a numeric index .There are two ways to create indexed arrays: 1. The index can be assigned automatically (index always starts at 0), like this: $cars = array("Volvo", "BMW", "Toyota"); or 2. the index can be assigned manually: Instructor: Asma’a Khtoom. 10 | Page $cars[0] = "Volvo"; $cars[1] = "BMW"; $cars[2] = "Toyota"; Example1. Output The count Function Get The Length of an Array - The count() Function Example2. Output Loop through an Indexed Array To loop through and print all the values of an indexed array, you could use for loop. Example3. Example3.using for each loop Output Instructor: Asma’a Khtoom. 11 | Page 2. Associative Arrays Associative arrays are arrays that use named keys that you assign to them. There are two ways to create an associative array: 1. $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43"); or: 2. $age['Peter'] = "35"; $age['Ben'] = "37"; $age['Joe'] = "43"; The named keys can then be used in a script; key can be number or string The value can be of any type. Example. $color=array(1=>”Red”,”b”=>”blue”,”g”=>”green”); Example1. Output Foreach loop through an Associative Array To loop through and print all the values of an associative array, you could use a foreach loop. Example2. Sort Functions for Arrays in PHP PHP array sort functions: 1. sort() - sort arrays in ascending order rsort() - sort arrays in descending order asort() - sort associative arrays in ascending order, according to the value ksort() - sort associative arrays in ascending order, according to the key arsort() - sort associative arrays in descending order, according to the value krsort() - sort associative arrays in descending order, according to the key Sort Array in Ascending Order - sort() To sorts the elements of the $cars array in ascending alphabetical order: Example To sorts the elements of the $numbers array in ascending numerical order: Example 2. Sort Array in Descending Order - rsort() To sorts the elements of the $cars array in descending alphabetical order: Example To sorts the elements of the $numbers array in descending numerical order: Example 3. Sort Array (Ascending Order), According to Value - asort() To sorts an associative array in ascending order, according to the value: Example 4. Sort Array (Ascending Order), According to Key - ksort() To sorts an associative array in ascending order, according to the key: Example 5. Sort Array (Descending Order), According to Value - arsort() To sorts an associative array in descending order, according to the value: Example Instructor: Asma’a Khtoom. 14 | Page 6. Sort Array (Descending Order), According to Key - krsort() To sorts an associative array in descending order, according to the key: Example Instructor: Asma’a Khtoom. 15 | Page Lab (7) Web Applications Development PHP Basics Objectives: To introduce different functions in PHP PHP empty Function The empty() function is used to check whether a variable is empty or not. Syntax empty(var_name) Return value FALSE if var_name has a non-empty and non-zero value. List of empty things : "0" (0 as a string) 0 (0 as an integer) "" (an empty string) NULL FALSE "" (an empty string) array() (an empty array) $var_name; (a variable declared but without a value in a class) Example: Output: String Functions 1. PHP strip_tags Function The strip_tags() function strips a string from HTML, XML, and PHP tags. all tags will be removed. Output: Instructor: Asma’a Khtoom. 2|Page 2. PHP stripslashes Function Remove the backslash: Output: 3. PHP trim Function Remove characters from both sides of a string ("He" in "Hello" and "d!" in "World"): Output: 4. PHP strpos Function finds the position of the first occurrence of a string inside another string. Output: Instructor: Asma’a Khtoom. 3|Page 5. PHP str_split Function The str_split() function splits a string into an array. Output: Output: 6. PHP str_replace Function function replaces some characters with some other characters in a string. It is case-sensitive search. In this example, we search for the string "Hello World!", find the value "world" and then replace the value with "Peter". Output:Instructor: Asma’a Khtoom. 4|Page Ex2. Using str_replace() with an array and a count variable: Output: 7. PHP str_ireplace Function Function replaces some characters with some other characters in a string. This function is case-insensitive. Output: Instructor: Asma’a Khtoom. 5|Page 8. PHP htmlspecialchars Function Converts some predefined characters to HTML entities. The predefined characters are: & (ampersand) becomes & " (double quote) becomes " ' (single quote) becomes ' < (less than) becomes < > (greater than) becomes > Example1. Convert the predefined characters "" (greater than) to HTML entities: Output: The HTML output of the code above will be (View Source): This is some bold text. Instructor: Asma’a Khtoom. 6|Page Lab (8) Web Applications Development Form Handling in PHP Objectives: How to handle a form data. Know php global variables How to validate form using php PHP Global Variables - Superglobals 1. PHP $_SERVER: $_SERVER is a PHP super global variable which holds information about headers, paths, and script locations. $_SERVER['REQUEST_METHOD']: Returns the request method used to access the page (such as POST). $_SERVER['PHP_SELF']: Returns the filename of the currently executing script. 2. PHP $_REQUEST: is used to collect data after submitting an HTML form. 3. PHP $_POST: is widely used to collect form data after submitting an HTML form with method="post". 4. PHP $_GET: can also be used to collect form data after submitting an HTML form with method="get". Form Handling Example1. Part1. Create this web page. c.html Php contact form Instructor: Asma’a Khtoom. 1| Page Name: Email: Phone: Message: Part2. Create php file called “one.php” in www root to hold the data sent by submit button. To display the submitted data you could simply echo all the variables. Your email address is: Output: Example 2: Modify the one.php file as follows: Instructor: Asma’a Khtoom. 2| Page Example 3: Modify the one.php file as follows: Task1: Write a code to check if the user enter the name or not. If the name entered print it, if not ask the user to enter it. Task2. Design a form to enter the user name and age, then when you submit the form the output like the next one appeared in anew page. Welcome Asma’a! You are 34 years old. Instructor: Asma’a Khtoom. 3| Page Form Validation Create the next form first in a "test_form.php" file. PHP Form Validation Example * required field. Name: * Password: Gender: * Female Male * Submit You’re Input: Validation rules for the form above are as follows: Name Required Must only contain letters and whitespace Password Must consist of more than 8 characters. Comment Optional. Multi-line input field (textarea) Gender Required. Must select one Instructor: Asma’a Khtoom. 4| Page Example1: Instructor: Asma’a Khtoom. 5| Page PHP Form Validation ExampleSuggest Documents | |||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
