HTML, CSS, interaktive services og PHP

Niels Olof Bouvin

Oversigt

Kursusplan

Uge Emne Obligatorisk opgave
15 Introduktion, HTML, CSS, PHP til og med arrays Design en blog (HTML, CSS)
16 Forms, funktioner, OO, filer
17 Persistens, DataObject, SQL Input via forms; dynamisk indhold; objekter
18 Cookies, sessions Persistens
19 Billeder og andre medieformer Login, brugere
20 XML Håndtering af billeder
21 Websitedesign på OO vis RSS feed
Eksamen
En detaljeret (skriftlig) beskrivelse af det projekt, som I ønsker at udvikle i løbet fagpakkens tredje del. Bestået/ikke bestået

Oversigt

Hvad er World Wide Web?

WWW arkitektur

World Wide Webs overordnede arkitektur

WWW er klient/server

WWW er client/server

URL – Uniform Resource Locator

Uniform Resource Locator

HTML – HyperText Markup Language

HTML eksempel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simpel side</title>
  </head>
  <body>
    <h1>Overskrift</h1>

    <p>Et kortere tekstafsnit</p>

    <ul>
      <li>Element 1</li>
      <li>Element 2</li>
    </ul>
  </body>
</html>

HTML standarder

Placering af filer på WWW serveren

Server-Side Includes (Apache)

Server-side includes 
AddHandler server-parsed .shtml

Eksempel på Server-Side Includes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Hypermedier 2002</title>
    <!--#include virtual="elements/meta.html" -->
  </head>
  <body>

    <h1>Hypermedier 2002</h1>
    <!--#include virtual="elements/menu.html" -->
    <h2>Overskrift</h2>
    <p>Tekst, tekst, tekst, ...</p>


    <!--#include virtual="elements/footer.html" -->
  </body>
</html>

Eksempel på Server-Side Includes

elements/footer.html

      </td>
    </tr>
        <tr>
          <td colspan="2" align="right">
           <!--#config timefmt="%d-%b-%Y %T %Z" -->
           <p class="footer">Sidst ændret: 
             <!--#echo var="LAST_MODIFIED" --></p>
          </td>
        </tr>
      </tbody>
    </table>

Stylesheets

Dokument træ (DOM)

Et simpelt DOM eksempel

Kobling af stylesheet og data

CSS: Cascading Style Sheets

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css"/>
    <title>Simpel side</title>
  </head>
  <body>
    <h1>Test side for CSS</h1>
    <p>Tekst og tekst og tekst og tekst</p>
  </body>
</html>

Cascade

Media types

CSS er overordentligt fleksibelt

Eksempler på CSS sheets

http://www.w3.org/StyleSheets/Core/Modernist

Et CSS screen shot

Eksempler på CSS sheets

http://www.w3.org/StyleSheets/Core/Ultramarine

Et CSS screen shot

CSS – Internt Specificeret

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
      body { color: red }
      h1 { color: blue }
    </style>
    <title>Simpel side</title>
  </head>
  <body>
    <h1>Test side for CSS</h1>
    <p>Tekst og <span style="color: yellow;">tekst</span> og tekst og tekst</p>
  </body>
</html>

CSS eksempler på syntaks

h1, h2, h3, h4, h5 {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   margin-left: 0;
   color: #0000AA;
}

h1 {
   font-weight: bold;
   font-size: 28pt;
   line-height: 36pt;
}
h2 {
   font-style: italic;
   font-size: 18pt;
}

body {
   background-color: #EBEBF3;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: #000088;
}

p {
   margin-left: 5%;
   margin-right: 5%;
   text-align: justify;
}

ul {
   margin-left: 5%;
   margin-right: 5%;
}

.vigtigt {
   color: yellow;
}

A:link {color: #006600}
A:visited {color: #990000}
A:active {color: #FF0000}

Oversigt

Statiske websider

Statiske websider

Interaktive services på WWW

Input fra brugeren: Common Gateway Interface – CGI

CGI scripts

Udviklingen af CGI programmer

#!/usr/local/bin/perl

if ($ENV{'REQUEST_METHOD'} eq "POST") {
    $form = <STDIN>
} else {
    $form = $ENV{'QUERY_STRING'};
}

@pairs = split(/&/,$form);

($dummy,$query) = split(/=/,shift(@pairs));
$query =~ s/\+/ /g;
$query =~ s/\s//g;
if ($query eq "") {
    $query = "http://www.daimi.aau.dk/~bouvin/DHMWWW/v1.2/help.html";
}

print "Content-Type: text/html\n\n";
print "<HTML>\n<head>\n<title>DHM/WWW v1.2</title>\n</head>\n<frameset border=0 rows=\"0,*\">\n<frame src=\"http://www.daimi.aau.dk/cgi-bouvin/hiddenpage.pl?URL=$query\" name=\"hidden_frame\" scrolling=\"no\">\n<frame src=\"javascript:''\" name=\"shown_frame\">\n</frameset>\n</HTML>";

Oversigt

Dynamiske websider

Dynamiske websider

Server-Side Scripting – PHP

PHP – karakteristika

PHP – karakteristika

PHP i forhold til sprog, som I (måske) kender

PHP i anvendelse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simpel side</title>
  </head>
  <body>
    <p>To og to giver <?php print 2+2; ?></p>
  </body>
</html>

Variabler i PHP

Eksempler på variabler og assignment

 <?php
    $name = "Paul";
    print "Your name is $name\n";
    $name2 = $name;
    $age = 20;
    print "Your name is $name2, and your age is $age\n";
    print 'Goodbye, $name!\n';
?>

Basale sprogkonstruktioner

if-sætninger og kodeblokke

 <?php
    $age = 20;
    if ($age < 18) {
        print "You're young - enjoy it!\n";
    } else {
        print "You're not under 18\n";
    }

    if ($age >= 18 && $age < 50) {
        print "You're in the prime of your life\n";
    } else {
        print "You're not in the prime of your life\n";
    }

    if ($age >= 50) {
        print "You can retire soon - hurrah!\n";
    } else {
        print "You cannot retire soon :( ";
    }
?>

For løkker i PHP

<?php
    for ($i = 1; $i < 10; $i = $i + 1) {
        print "Number $i\n";
    }
?>

PHP og typer

<?php
  $tal = 10; $tekst = "12";
  $sum = $tal + $tekst;
  print $sum; // udskriver 22
?>

Blanding af PHP og HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>PHP i HTML</title>
  </head>
  <body>
    <?php $tekst = "Tjuhej, hvor det går!"; ?>
    <p>Simpelt eksempel: <?php print $tekst; ?></p>
    <?php print "<p>Simpelt eksempel: $tekst</p>\n"; ?>
    <?php print<<<EOT
      <p>Simpelt eksempel: $tekst</p>
EOT;
?>
  </body>
</html>

Blanding af PHP og HTML

<?php
    if ($foo == $bar) {
        print "<p>Lots of stuff here</p>";
        print "<p>Lots of stuff here</p>";
        print "<p>Lots of stuff here</p>";
        print "<p>Lots of stuff here</p>";
        print "<p>Lots of stuff here</p>";
    }
?>

er ækvivalent, men ikke så nemt at læse som

<?php
    if ($foo == $bar) {
?>
    <p>Lots of stuff here</p>
    <p>Lots of stuff here</p>
    <p>Lots of stuff here</p>
    <p>Lots of stuff here</p>
    <p>Lots of stuff here</p>
<?php
    }
?>

Oversigt

Funktioner i PHP

Funktioner i PHP

<?php
    $tekst = "Min tekst";
    print strlen($tekst); // udskriver '9'
    print substr($tekst, 1); // udskriver 'in tekst'
    print substr($tekst, 0, 3); // udskriver 'Min'
    print substr($tekst, 4); // udskriver 'tekst'
    print substr($tekst, -5); // udskriver 'tekst'
?>

Egne funktioner

<?php
function foo() {
  return 1;
}

print foo();// udskriver "1"
?>
<?php
function hello($target) {
  print "Hello $target!\n";
}
hello("World"); // udskriver "Hello World!"
?>

Standard værdier for argumenter

<?php
function hello($target = "World") {
  print "Hello $target!\n";
}
hello();        // udskriver "Hello World!"
hello("Class"); // udskriver "Hello Class!"
?>

Oversigt

Arrays i PHP

<?php
$myarray = array("Første", "Anden", "Tredje");
$size = count($myarray);
print_r($myarray);
?>

giver som output

Array
(
    [0] => Første
    [1] => Anden
    [2] => Tredje
)

Arrays som hashmaps

<?php
$myfirstarray = array("Første", "Anden", "Tredje");
$mysecondarray = array ( 0 => "Første",
                         1 => "Anden",
                         2 => "Tredje" );
$mythirdarray[] = "Første";
$mythirdarray[] = "Anden";
$mythirdarray[] = "Tredje";
?>

Arrays som hashmaps

<?php
$myarray = array ( "foo" => "Første",
                   "bar" => "Anden",
                   "baz" => "Tredje" );
$myotherarray["foo"] = "Første";
$myotherarray["bar"] = "Anden";
$myotherarray["baz"] = "Tredje";

print_r ($myarray);
print $myarray["foo"] . "\n";
?>
Array
(
    [foo] => Første
    [bar] => Anden
    [baz] => Tredje
)
Første

Iteration

<?php
$myarray = array("foo" => "Første", "bar" => "Anden", "baz" => "Tredje");
foreach($myarray as $val) {
  print "$val\n";
}
foreach($myarray as $key => $val) {
  print "$key = $val\n";
}
?>
Første
Anden
Tredje
foo = Første
bar = Anden
baz = Tredje

Multidimensionelle arrays

<?php
$capitalcities['England'] =
  array("Capital"=>"London", "Population"=>40000000, "NationalSport"=>"Cricket");
$capitalcities['Wales'] =
  array("Capital"=>"Cardiff", "Population"=>5000000, "NationalSport"=>"Rugby");
$capitalcities['Scotland'] =
  array("Capital"=>"Edinburgh", "Population"=>8000000, "NationalSport"=>"Football");
print $capitalcities["Wales"]["NationalSport"] . "\n"; // udskriver Rugby
?>

Prædefinerede arrays i PHP

Simpelt PHP eksempel

action.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simpel form</title>
  </head>
  <body>
    <form action="action.php" method="post">
      Your name: <input type="text" name="name"/><br/>
      Your age:  <input type="text" name="age"/><br/>
      <input type="submit"/><br/>
    </form>
  </body>
</html>

Simpelt PHP eksempel

action.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Greetings</title>
  </head>
  <body>
    <h2>Greetings</h2>
    <p>Hi 
     <?php print $_POST['name']; ?>. you are <?php print $_POST['age']; ?> years old.</p>
  </body>
</html>

Simpelt PHP eksempel

resultat (minus lidt typografi (og fem år))

Eksempel på PHP form
Eksempel på kørsel af PHP form

Opsummering