1. Intro
to
Dynamic
Web
Pages
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

2. Contents
• IntroducAon
to
Programming
Concepts
• Web
ApplicaAon
Development
– Architecture
– StaAc
vs.
Dynamic
Web
Pages?
– Client-­‐side
vs.
Server-­‐side
scripAng
• PHP
Programming
– Embedding
PHP
into
Web
Pages
– xhtml
forms
and
user
input
via
GET
– Examples
of
Web
ApplicaAons

3. INTRODUCTION
TO
PROGRAMMING

4. Program?
• Computer
program,
applicaAon,
is
just
a
list
of
instrucAons
to
the
computer
• Program
gets
input
from
the
user
• Program
has
visible
output

5. Machine
Language
• Program
is
just
an
instrucAons
to
the
CPU
• CPU
understands
only
machine
language
• Machine
language
is
very
hard
to
implement.

6. Programming
Language
• Because
machine
language
is
so
hard
to
use
we
use
some
programming
language
• The
computer
understands
only
machine
language,
so
there
is
a
barrier
between
the
programming
language
and
machine
language
• Programming
language
can
be
compiled
to
machine
language

7. Problem

8. SoluAon

9. Programming
Languages
• There
are
lot
of
different
programming
languages
• C++,
PHP,
Java,
C,
...
• All
these
programming
languages
have
same
principals.

10. Three
Basic
Rules
• 1)
Sequence
• 2)
Choice
• 3)
Repeat

11. Sequence
• Statements
are
executed
in
the
same
sequence
as
they
are
listed
in
the
source
code.
1. print to the screen "what is your name"!
2. read user input to variable NAME!
3. print to the screen "You have a great name, "!
4. print NAME!
5. print "!"!

12. Choice
• With
choice
one
can
choose
what
sentences
are
executed
based
on
condiAon.
1. print to the screen "what is your name"!
2. read user input to variable NAME!
3. if(NAME = "Jussi")!
4. print to the screen "You have a silly name, "!
5. else!
6. print to the screen "You have a great name, "!
7. print NAME!
8. print "!"!

13. Repeat
• With
repeat
one
can
repeat
statements.
!
1. print to the screen "what is your name"!
2. read user input to variable NAME!
3. while(NAME = "Jussi")!
4. print "This program is forbidden from Jussi"!
5. print "Give other name: "!
6. read user input to variable NAME!
7. print to the screen "You have a great name, "!
8. print NAME!
9. print "!"!

14. What
is
the
output?
i = 0!
while(i < 10)!
print to the screen "Hello!"!
i = i + 1!

15. Example
print to the screen "Give your name"!
put the user input into variable NAME!
print to the screen "Give number"!
put the user input into variable NUMBER!
if(NUMBER < 1)!
print to the screen "You have to give positive number"!
else!
i = 0!
while(i < NUMBER)!
print NAME!
i = i + 1!
!
!

16. Pseudocode
to
PHP
• Previous
examples
used
pseudocode
(not
real
programming
language)
• Examples
are
quite
close
to
real
programming
languages,
like
PHP

17. Print
• PrinAng
to
the
screen
• Pseudocode
– print to the screen "Give your name"
• PHP
– print "Give your name";!

18. User
Input
• GeXng
user
input
• Pseudocode
– put the user input into variable NAME!
• PHP
– $name = fgets(STDIN);

19. Simple
Example
with
PHP
<?php!
!
print "Give your name: ";!
$name = fgets(STDIN);!
print "You have a nice name: ";!
print $name;!
!
?>!

20. More
Complicated
Example:
PHP
<?php!
!
print "Give your name: ";!
$name = fgets(STDIN);!
print "Give number: ";!
$number = fgets(STDIN);!
!
if($number < 1)!
{!
print "You have to give positive number";!
}!
else!
{!
$i = 0;!
while($i < $number)!
{!
print $name;!
$i = $i + 1;!
}!
}!
!
?>!
!

21. Exercises
hZp://Anyurl.com/my-­‐exercises

22. WEB
APP
BASIC
CONCEPTS

23. Intro
to
HTTP
• HTTP
(Hypertext
transfer
protocol)
is
a
stateless
protocol,
which
is
meant
to
transfer
informaAon
on
intranets
and
World
Wide
Web.
– RFC2616:
– hZp://www.w3.org/Protocols/rfc2616/rfc2616.html
• HTTP
is
a
request
/
response
standard
between
client
and
server

24. Clients
and
Servers
• Client
– Client
makes
a
hZp
request.
– Client
can
be
a
web
browser,
spider
or
other
end-­‐user
tool
– Client
is
referred
as
a
user
agent
• Server
– Stores
informaAon
and
makes
them
available
to
the
client
– Gives
hZp
response
to
the
client

25. Request
and
Response
Client
Client
User-­‐agent:
Firefox
Apache
HTTP
Server
request
response

26. Response
when
Dealing
with
Scripts

27. Three-­‐Aered
Web
Site:
LAMP
Client
example
request
Server
User-­‐agent:
Firefox
GET / HTTP/1.1! Apache
HTTP
Server
Host: www.tamk.fi!
User-Agent: Mozilla/5.0 (Mac..)!
...!
!
response
PHP
Database
MySQL

28. Server
Side
Techniques
• Server
side
scripAng
requires
installaAon
on
the
server
side
• Typically
client
sees
only
xhtml
and
it
is
unaware
that
the
xhtml
was
produced
by
a
server
side
script
• Does
not
require
any
installaAons
or
add-­‐ons
on
the
client.

29. Server
Side
Techniques
• PHP
• Java
EE:
Servlet,
JSP
• .NET
• CGI
/
Perl
(Very
old)
• Ruby
• …

30. Client
Side
Techniques
• Requires
that
the
client
supports
the
technique
• JavaScript,
Applet,
Flash…

31. PHP:
HYPERTEXT
PREPROCESSOR

32. IntroducAon
to
PHP
• PHP
is
a
computer
scripAng
language.
• Originally
designed
for
producing
dynamic
web
pages
• Appeared
in
1995
• PHP
Group
is
responsible
for
the
language,
no
formal
specificaAon
• Free
soeware
• Runs
on
most
operaAng
systems
and
plaforms
• URL:
hZp://www.php.net

33. PHP
in
Command
Line

34. Running
the
same
Program
via
Web
Browser

35. The
Source
Code
of
the
Web
Page

36. Problem?
• The
problem
here
is
that
the
output
is
not
valid
(x)html!
• The
output
of
the
PHP-­‐program
should
be
(x)
html!

37. One
possible
soluAon
<?php!
print "<html>n";!
print " <head><title>Example</title></head>n";!
print " <body>n";!
!
$now = date("d.m.Y");!
print " <p>" . $now . "</p>n";!
!
print " </body>n";!
print "</html>n";!
?>!
!
!

38. Result

39. Easier
way
<html>!
<head><title>Example</title></head>!
<body>!
<p>!
<?php!
$now = date("d.m.Y");!
print $now;!
?> !
</p> !
</body>!
</html>!
!

40. Valid
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"!
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!
<html xmlns="http://www.w3.org/1999/xhtml">!
<head>!
<title>Example</title>!
<meta http-equiv="content-type" content="application/xhtml+xml;
charset=utf-8" />!
</head> !
<body>!
<p>!
<?php!
$now = date("d.m.Y");!
print $now;!
?> !
</p> !
</body>!
</html>!
!

41. EXAMPLE:
SIMPLE
SLOT
MACHINE

42. Exercises

43. USER
INPUT
VIA
GET

44. User
Input
in
CLI
• PHP
CLI
– $name = fgets(STDIN);!
• PHP
WEB
– $name = $_GET['key'];!

45. Example
<html>!
<head><title>Example</title></head>!
<body>!
!
<?php!
$userInput = $_GET['key'];!
print $userInput;!
?>!
!
</body>!
</html>!

46. Result?

47. Giving
user
input

48. Giving
user
input

49. Example
<html>!
<head><title>Example</title></head>!
<body>!
!
<?php!
$name = $_GET['name'];!
$age = $_GET['age'];!
print "Your name is " . $name;!
print " and your are " . $age;!
print " years old.";!
?>!
!
</body>!
</html>!

50. Example

51. Example

52. USER
INPUT
VIA
FORMS

53. Simple
StaAc
Web
Page
with
Form:
form.html!
<html>!
<head>!
<title>Get-example</title>!
</head>!
<body>!
!<h1>Fill the form</h1>!
!<form action="myprogram.php" method="GET">!
!<p>Name!
!<input type="text" name="name" /></p>!
<p>Age!
!<input type="text" name="age" /></p>!
!<input type="submit" value="Send" />!
!</form>!
!!
</html>!

54. form.html

55. Result:
myprogram.php

56. EXERCISES