Intro  to  Dynamic  Web  Pages  

Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  

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  

INTRODUCTION  TO  PROGRAMMING  

Program?  

•  Computer  program,  applicaAon,  is  just  a  list  of  instrucAons  to  the  computer  

•  Program  gets  input  from  the  user  •  Program  has  visible  output  

Machine  Language  

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

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  

Problem  

SoluAon  

Programming  Languages  

•  There  are  lot  of  different  programming  languages  

•  C++,  PHP,  Java,  C,  ...  •  All  these  programming  languages  have  same  principals.  

Three  Basic  Rules  

•  1)  Sequence  •  2)  Choice  •  3)  Repeat  

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 "!"!

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 "!"!

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 "!"!

What  is  the  output?  

i = 0!while(i < 10)! print to the screen "Hello!"! i = i + 1!

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!!!

Pseudocode  to  PHP  

•  Previous  examples  used  pseudocode  (not  real  programming  language)  

•  Examples  are  quite  close  to  real  programming  languages,  like  PHP  

Print  

•  PrinAng  to  the  screen  •  Pseudocode  –  print to the screen "Give your name"  

•  PHP  –  print "Give your name";!

User  Input  

•  GeXng  user  input  •  Pseudocode  –  put the user input into variable NAME!

•  PHP  –  $name = fgets(STDIN);  

Simple  Example  with  PHP  

<?php!!print "Give your name: ";!$name = fgets(STDIN);!print "You have a nice name: ";!print $name;!!?>!

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;! }!}!!?>!!

Exercises  

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

WEB  APP  BASIC  CONCEPTS  

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  

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  

Request  and  Response  

Client  User-­‐agent:  Firefox  

Client  Apache  HTTP  Server  

request  

response  

Response  when  Dealing  with  Scripts  

Three-­‐Aered  Web  Site:  LAMP  Client  User-­‐agent:  Firefox  

Server  Apache  HTTP  Server  

example  request  GET / HTTP/1.1!Host: www.tamk.fi!User-Agent: Mozilla/5.0 (Mac..)!...!!

response  

Database  MySQL  

PHP  

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.  

Server  Side  Techniques  

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

Client  Side  Techniques  

•  Requires  that  the  client  supports  the  technique  

•  JavaScript,  Applet,  Flash…  

PHP:  HYPERTEXT  PREPROCESSOR  

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  

PHP  in  Command  Line  

Running  the  same  Program  via  Web  Browser  

The  Source  Code  of  the  Web  Page  

Problem?  

•  The  problem  here  is  that  the  output  is  not  valid  (x)html!  

•  The  output  of  the  PHP-­‐program  should  be  (x)html!  

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";!?>!!!

Result  

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

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>!!

EXAMPLE:  SIMPLE  SLOT  MACHINE  

Exercises  

USER  INPUT  VIA  GET  

User  Input  in  CLI  

•  PHP  CLI  –  $name = fgets(STDIN);!

•  PHP  WEB  –  $name = $_GET['key'];!

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

Result?  

Giving  user  input  

Giving  user  input  

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>!    

Example  

Example  

USER  INPUT  VIA  FORMS  

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>!

form.html  

Result:  myprogram.php  

EXERCISES