Interactive Web design 3

34
حات ف ص م ي م ص ت ة ي ل ع ا ف ت ل ا ب ي و ل اBy Eng. Aws Nabeel Email: [email protected] http://www.aws-nabeel.com

Transcript of Interactive Web design 3

Page 1: Interactive Web design 3

تصميم صفحات الويب التفاعلية

By Eng. Aws Nabeel

Email: [email protected]

http://www.aws-nabeel.com

Page 2: Interactive Web design 3

2

PHP BASIC SYNTAX

PHP Stand for “PHP: Hypertext Preprocessor”.

PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic content, databases, session tracking, even build entire e-commerce sites.

Page 3: Interactive Web design 3

3

WEB BROWSERS

It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.

Page 4: Interactive Web design 3

4

COMMON USES OF PHP: PHP performs system functions, i.e. from files on a system it can create, open, read, write, and close them.

PHP can handle forms, i.e. gather data from files, save data to a file, thru email you can send data, return data to the user.

You add, delete, modify elements within your database thru PHP. Access cookies variables and set cookies. Using PHP, you can restrict users to access some pages of your website.

It can encrypt data.

Page 5: Interactive Web design 3

5

CHARACTERISTICS OF PHP Five important characteristics make PHP's practical

SimplicityPrformanceSecurityFlexibilityFamiliarity

Page 6: Interactive Web design 3

6

PHP CODE <?php ?> or the shorthand PHP tag that requires shorthand support to be enabled on your server... <? ?>

Page 7: Interactive Web design 3

7

"HELLO OMAN" SCRIPT IN PHP:

<html> <head> <title>Hello Oman</title> <body> <?php echo "Hello, Oman!";?> </body> </html>

Page 8: Interactive Web design 3

8

HOW TO SAVE YOUR PHP PAGES ?

If you have PHP inserted into your HTML and want the web browser to interpret it correctly, then you must save the file with a .php extension, instead of the standard .html extension.

So be sure to check that you are saving your files correctly. Instead of index.html, it should be index.php if there is PHP code in the file.

Page 9: Interactive Web design 3

9

THE SEMICOLON ! As you may or may not have noticed in the above example, there was a semicolon after the line of PHP code.

The semicolon signifies the end of a PHP statement and should never be forgotten.

Page 10: Interactive Web design 3

10

WHITE SPACE As with HTML, whitespace is ignored between PHP statements.

This means it is OK to have one line of PHP code, then 20 lines of blank space before the next line of PHP code.

You can also press tab to indent your code and the PHP interpreter will ignore those spaces as well.

Page 11: Interactive Web design 3

11

PHP - VARIABLES A variable is a means a value, such as text string "Hello World!" or the integer value 4.

A variable can then be reused throughout your code, instead of having to type out the actual value over and over again. In PHP you define a variable with the following form:

$variable_name = Value; If you forget that dollar sign at the beginning, it will not work. This is a common mistake for new PHP programmers!

Page 12: Interactive Web design 3

12

A QUICK VARIABLE EXAMPLE Say that we wanted to store the values Hello world and 4.

How would we go about doing this?

We would first want to make a variable name and then set that equal to the value we want. See example for the correct way to do this.

Page 13: Interactive Web design 3

13

PHP CODE <?php $hello = "Hello World!"; $a_number = 4; $anotherNumber = 8; ?>

Page 14: Interactive Web design 3

14

PHP VARIABLE NAMINGThere are a few rules that you need to follow when choosing a name for your PHP variables.

PHP variables must start with a letter or underscore "_“

PHP variables may only be comprised of alpha-numeric characters and underscores. a-z, A-Z, 0-9, or _

Variables with more than one word should be separated with underscores. $my_variable

Variables with more than one word can also be distinguished with capitalization. $myVariable

Page 15: Interactive Web design 3

15

PHP - ECHO

As you saw in the previous slide, the PHP function echo is a means of outputting text to the web browser.

Throughout your PHP career you will be using the echo function more than any other. So let's give it a solid information.

Page 16: Interactive Web design 3

16

OUTPUTTING A STRING To output a string, like we have done in previous lessons, use the PHP echo function.

You can place either a string variable, like we do below, to create a string that the echo function will output.

Page 17: Interactive Web design 3

17

PHP CODE <?php $myString = "Hello!"; echo $myString; echo "<h5>I love using PHP!</h5>"; ?>

Page 18: Interactive Web design 3

18

OUTPUTTING A STRING In the above example we output "Hello!" . The text we are outputting is being sent to the user in the form of a web page, so it is important that we use proper HTML syntax!

In our second echo statement we use echo to write a valid Header 5 HTML statement. To do this we simply put the <h5> at the beginning of the string and closed it at the end of the string. Just because you're using PHP to make web pages does not mean you can forget about HTML syntax!

Page 19: Interactive Web design 3

19

ECHOING VARIABLES Echoing variables is very easy. The PHP developers put in some extra work to make the common task of echoing all variables nearly easy No quotations are required.

Below is the correct format for echoing a variable.

Page 20: Interactive Web design 3

20

PHP CODE: <?php $my_string = "Hello Bob. My name is: "; $my_number = 4; $my_letter = a; echo $my_string; echo $my_number; echo $my_letter; ?>

Page 21: Interactive Web design 3

21

THE INCLUDE FUNCTION Without understanding much about the details of PHP, you can save yourself a great deal of time with the use of the PHP include function.

The include function takes a file name and simply inserts that file's contents into the script that calls used the include function.

Page 22: Interactive Web design 3

22

THE INCLUDE FUNCTION Why is this a cool thing?

Well, first of all, this means that you can type up a common header or menu file that you want all your web pages to include.

When you add a new page to your site, instead of having to update the links on several web pages, you can simply change the Menu file.

Page 23: Interactive Web design 3

23

AN INCLUDE EXAMPLE Say we wanted to create a common menu file that all our pages will use.

A common practice for naming files that are to be included is to use the ".php" extension.

Since we want to create a common menu let's save it as "menu.php".

Page 24: Interactive Web design 3

24

MENU.PHP CODE: <html><body><a href="http://www.example.com/index.php">Home</a> -<a href="http://www.example.com/about.php">About Us</a> -<a href="http://www.example.com/links.php">Links</a> -<a href="http://www.example.com/contact.php">Contact Us</a> <br /></body></html>

Page 25: Interactive Web design 3

25

AN INCLUDE EXAMPLE

Save the above file as "menu.php".

Now create a new file, "index.php" in the same directory as "menu.php".

Here we will take advantage of the include function to add our common menu.

Page 26: Interactive Web design 3

26

INDEX.PHP CODE: <?php include("menu.php"); ?><html<body><p>This is my home page that uses a common menu to save me time when I addnew pages to my website!</p></body></html>

Page 27: Interactive Web design 3

27

PHP REQUIRE FUNCTION Just like the previous lesson, the require function is used to include a file into your PHP code.

However there is one huge difference between the two functions, though it might not seem that big of a deal.

Page 28: Interactive Web design 3

28

REQUIRE VS INCLUDE PHP Code: <?php include("noFileExistsHere.php"); echo "Hello World!"; ?> Display: Warning: main(noFileExistsHere.php): failed to open stream: No such file or directory in /home/websiteName/FolderName/tizagScript.php on line 2 Warning: main(): Failed opening 'noFileExistsHere.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/websiteName/FolderName/tizagScript.php on line 2 Hello World!

Page 29: Interactive Web design 3

29

REQUIRE VS INCLUDE PHP Code: <?php require("noFileExistsHere.php"); echo "Hello World!"; ?> Display: Warning: main(noFileExistsHere.php): failed to open stream: No such file or directory in /home/websiteName/FolderName/tizagScript.php on line 2 Fatal error: main(): Failed opening required 'noFileExistsHere.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/websiteName/FolderName/tizagScript.php on line 2

Page 30: Interactive Web design 3

30

USING PHP WITH HTML FORMS Creating the HTML Form order.html Code: <html><body> <h4>Order Form</h4> <form> <select> <option>Car</option> <option>Mobile</option> <option>Laptop</option> </select> Quantity: <input type="text" /> <input type="submit" /> </form> </body></html>

Page 31: Interactive Web design 3

31

ORDER.HTML CODE: <html><body> <h4>Tizag Art Supply Order Form</h4> <form action="process.php" method="post"> <select name="item"> <option>Paint</option> <option>Brushes</option> <option>Erasers</option> </select> Quantity: <input name="quantity" type="text" /> <input type="submit" /> </form> </body></html>

Page 32: Interactive Web design 3

32

PROCESS.PHP CODE: <html><body> <?php $quantity = $_POST['quantity']; $item = $_POST['item']; echo "You ordered ". $quantity . " " . $item . ".<br />"; echo "Thank you for ordering from our Supplies!"; ?> </body></html>

Page 33: Interactive Web design 3

CONFIGURING A PHP TESTING SERVER

Page 34: Interactive Web design 3

34

CREATING AND TESTING A PHP-BASED WEB PAGE

We will create a very simple php page to test our local server