43
IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST 210: PHP BASICS IST 210: Organization of Data IST210 1

Embed Size (px)

Citation preview

Page 1: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 1

IST 210: PHP BASICSIST 210: Organization of Data

Page 2: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 2

Previous Classes Review

HTML Basics

Page 3: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 3

Place Your Page on Web• Step 1. Go to your webspace folder

• Open any folder. On the left-hand side, expand Computer, click on “IST UP Webspace”.

• Step 2. Place your helloWorld.html in the webspace folder

• Step 3. Open a browser, visit

my.up.ist.psu.edu/YourPSUID/helloWorld.html

If I put helloWorld.html file on my desktop, does this work?

Page 4: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 4

IST 210: PHP BASICSIST 210: Organization of Data

Page 5: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 5

How A Web Server Works

http://my.up.ist.psu.edu/zul17/HelloWorld.html

Find the IP address of the server my.up.ist.psu.edu

Send the request to the server

HelloWorld.html<html>

<body>

Hello World!

</body>

</html>

Get file: helloworld.htmlFrom folder zul17Return to user

User Web Server

Page 6: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 6

Problems with HTML• Static pages

• Cannot provide dynamic contents based on user preferences and interest

• Users often need different things in different conditions• Google• Facebook• ANGEL, webmail

Page 7: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 7

Dynamic Web Contents• Through scripts (e.g., PHP)

• Programs that can generate dynamic HTML results

• Two types of scripts• Client side: running inside a browser• Server side: running inside a web server

Page 8: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 8

Hello World in PHPhttp://my.up.ist.psu.edu/zul17/helloworld.php

<html><body>

<?phpecho "Hello World!";

?></body>

</html>

<html>

<body>

Hello World!

</body>

</html>

Page 9: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 9

Dynamic PHP Example: Show Datehttp://my.up.ist.psu.edu/zul17/date.php

<html><body><?php echo "Today is: ".date("m/d/y") ?></body></html>

<html>

<body>

Today is: 08/27/12

</body>

</html>

Page 10: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 10

How It Works: More Details• When a browser requests an HTML file, the HTTP

server returns the file • When a browser requests an PHP file

• The web server passes the request to a PHP interpreter• The PHP interpreter reads the PHP file, line by line, and

executes the scripts in the file• Finally, the executed result is returned to the web server, which

delivers HTML contents to the browser

Page 11: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 11

Differences Between PHP and HTML• Which language is used for display format?

• HTML

• Which language is programming language?• PHP

• Which runs on the client side (the system on which the page is being viewed) ?• HTML

• Which runs on the server side (the system from which the page comes)?• PHP

Page 12: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 12

PHP and HTML• HTML

• is a language used to describe to a browser how to display text and other objects in a browser window

• NOT a programming language• works on a client computer (the system on which the page is being

viewed)

• PHP • is a scripting language, and can be used to create HTML page• runs on the server (the system from which the page comes)• is a full-fledged programming language

• programming languages: C, C++, C#, JAVA, Python

Page 13: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 13

About PHP• Created in 1994 by Rasmu Lerdorf• A simple set of Common Gateway Interface binaries

written in the C programming language• Originally used to track visits to his online resume

“Personal Home Page tools” • PHP:

• Originally: Personal Home Page; • Now: Hypertext Preprocessor

• PHP is used as the server-side programming language on 75% of all Web sites• E.G. Facebook, Wikipedia

Page 14: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 14

PHP – Getting started• PHP code segments are mixed with HTML source• Escaping from HTML (To tell PHP processor: this is

PHP code)• A PHP parser starts to execute codes when it

encounters a start tag• The parser does not process non-PHP code• Two options indicating the embedded PHP codes

<?php … ?> (<? … ?>)

<script language=“php”> … </script>

<html><body><?php echo "Today is: ".date("m/d/y") ?></body></html>

Page 15: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 15

PHP – Getting Started

• Step 1. Open a NotePad++• Step 2. Input codes• Step 3. Save it to

“helloworld.php” to your webspace

• Step 4. Open a web browser, and visit• http://

my.up.ist.psu.edu/PSUID/helloworld.php

<html><body>

<?php

echo "Hello World!";?>

</body></html>

Try it

Page 16: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 16

PHP Must Work Through a Web Server

• Find the helloworld.php file in your webspace• Double Click the file in the folder and see what happens

• Now visit through your web browser:http://my.up.ist.psu.edu/PSUID/helloworld.php

• What happened? • PHP must work thru a web server!

• Try “View Page Source”

Page 17: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 17

echo – deep dive.

<html><body>

<?phpecho

"Hello World!";?>

</body></html>

echo means “print it to html”Double quotes pair “” define a stringSemicolon ; means the end of a sentence

Semicolon

Page 18: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 18

echo

<?phpecho "Hello

World!";?>HTML is not a strict language.It is OK to only have PHP part.

Page 19: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 19

echo

<html><body>

<?phpecho "<h1>Hello

World!<h1>";?>

</body></html>

Try it

Page 20: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 20

echo: Exercise 1

<html><body>

<?phpecho “<h1>Hello

World!<h1>";?>

</body></html>

Think

How to modify codes to get the output on the right ?• Penn State in bold

Page 21: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 21

echo: Exercise 1 Answer

<html><body><?php

echo "Welcome to <b>Penn State</b> <br>";

?></body>

</html>

How to modify codes to get the output on the right ?• Penn State in bold

Page 22: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 22

echo: Exercise 2

<html><body>

<?phpecho “<h1>Hello

World!<h1>";?>

</body></html>

Think

How to modify codes to get the output on the right ?• A break after “Penn State”• Red in color red

Page 23: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 23

echo: Exercise 2 Answer

<html><body><?php

echo "Welcome to <b>Penn State</b> <br>";

echo "I like <font color=red> red </font>";

?></body>

</html>

How to modify codes to get the output on the right ?• A break after “Penn State”• Red in color red

Page 24: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 24

echo

<html><body>

This is HTML part. <br>Hello world in HTML. <br><?php

echo "Hello World in PHP!<br>";

?>Back to HTML again! <br><?php

echo "Hello World in PHP again!";

?></body>

</html>

Try it

Multiple PHP segments

Page 25: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 25

echo

• echo — Output one or more strings• String is defined in a pair of " "• String concatenate using .

<html><body>

<?phpecho "Welcome "."<br>"."Hello World";

?></body></html>

Try it

Page 26: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 26

echo

echo "Welcome "."<br>"."Hello World";

echo "Welcome <br> Hello World";

echo "Welcome";echo "<br>";echo "Hello World";

Page 27: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 27

Variables• Data types

• Similar to C++ or Java• Int, Float, Boolean, String• Array (next class), Object (not covered in our class)

• Variables: a symbol or name that stands for a value• PHP variables start with $• You can use variables without defining the type

• $x = 5;• $pi = 3.14;• $name = "George";

• Name your variables in meaningful ways• $s = "matrix" vs. $servername = “matrix”

• Case sensitive!• More data types

• http://php.net/manual/en/language.types.php

Page 28: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 28

Variables

<html><body>

<?php$x = 1; //integer$y = 2.2; //float$z = "hello"; //stringecho "x is $x"; echo "x is ".$x;

?></body>

</html>

1. Create a test.php in your webspace2. Input following codes3. Visit through web browser

http://my.up.ist.psu.edu/PSUID/test.php

Try it

$x can be put insides quotes or outside quotes.When $x is outside of quotes, remember to use . to concatenate two strings

Page 29: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 29

Variables: Exercise 1

<html><body>

<?php$x = 1; //integer$y = 2.2; //float$z = “hello”; //stringecho "x is $x";

?></body>

</html>

Think

How to modify codes to get the output on the right?

Page 30: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 30

Variables: Exercise 1 Answer

<html><body>

<?php$x = 1; //integer$y = 2.2; //float$z = "hello"; //stringecho "x is $x <br>";echo "y is $y <br>";echo "z is $z <br>";

?></body>

</html>

How to modify codes to get the output on the right?

Page 31: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 31

Variables: Exercise 2

<html><body>

<?php$x = 1; //integer$y = 2.2; //float$z = “hello”; //stringecho "z is $z";

?></body>

</html>

Think

How to modify codes to get the output on the right?

Page 32: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 32

Variables: Exercise 2 Answer

<html><body>

<?php$x = 1; //integer$y = 2.2; //float$z = "hello"; //stringecho "z is \" $z \"";

?></body>

</html>

How to modify codes to get the output on the right?

Page 33: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 33

Variables: Exercise 3

<html><body>

<?php$name = "John";echo "My name is

$Name."; ?>

</body></html>

Debug

Name is not shown. Where is the bug?

Page 34: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 34

Variables: Exercise 3 Answer

<html><body>

<?php$name = "John";echo "My name is

$name."; ?>

</body></html>

Variable name is sensitive. Should be $name not $Name

Page 35: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 35

Variables: Exercise 4

<html><body>

<?php$x = "Penn State";echo "I love $x";

?></body>

</html>

Think

How to make the string in bold?

Page 36: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 36

Variables: Exercise 4 Answer

<html><body>

<?php$x = "Penn State";echo "I love <b> $x

</b>"; ?>

</body></html>

Page 37: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 41

Expressions• Any legal combination of symbols that represents a

value• Each programming language and application has its own rules

for what is legal and illegal• Every expression consists of at least one operand and

can have one or more operators • Operands are values• Operators are symbols that represent particular actions

• Examples• 5+3• $x*$y• $x > $y • $x <> $y• $x == $y

• More:• http://www.w3schools.com/php/php_operators.asp

A==B: boolean result, true or falseA=B: assign variable B’s value to

variable AA very common mistake:if (x = 1) then … This is always true!

Page 38: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 42

Functions

<html><body><?php echo "Today is: ".date("m/d/y") ?></body></html>

1. Create a date.php in your webspace

2. Visit it through web browser

Try it

Page 39: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 43

Functions

<html><body><?php echo "Today is: ".date("m/d/y") ?></body></html>

1. Create a date.php in your webspace

2. Visit it through web browser

Try it

Page 40: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 44

Functions

<html><body><?php echo "Today is: ".date("m/d/y") ?></body></html>

1. Create a date.php in your webspace

2. Visit it through web browser

Try it

String concatenation

Page 41: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 46

Functions<?php <html>

<body><?php

echo "Today is: ".date("m/d/y").”<br>”;echo “A random number in

[1,10]”.rand(1,10).”<br>”;$name = "John";echo "The length of string \" $name \" is

".strlen($name); ?>

</body></html>?> More string functions

http://php.net/manual/en/book.strings.phpMore math functionshttp://php.net/manual/en/ref.math.php

Page 42: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 47

Learn more about PHP• Reference websites

• http://en.wikibooks.org/wiki/PHP• http://php.net/manual/en/index.php

• Learn from experience• Try it yourself!• Try different ways to write the codes.• Learn from debugging

• Learn from examples• Search “php echo” on google• http://php.net/manual/en/function.echo.php• Learn from the example

Page 43: IST 210: PHP BASICS IST 210: Organization of Data IST210 1

IST210 48

Reminder• Assignment 2 due on Monday Sept 14th 11:59PM!