Intro to Dynamic Web Pages

  • 5,949 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,949
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
35
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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