Übungsmaterial

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Erste Web-Seite der Übung</title>

</head>


<body bgcolor="#FFFF00">


<h1>Erste Web-Seite der Übung</h1>


<p>Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
</p>

<p><a href="http://www.postag.de/" target="_blank"
     >Weitere Informationen</a> finden Sie im Web</p>

<p align="center">
<a href="http://www.postag.de/" target="_blank"
   ><img src="illu_aktiegelb.jpg" border="0" 
         alt="Aktie Gelb Bild" ></a>
</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi">

<table summary="Eingabeformular">

<tr>
<td>Email: </td>
<td><input type="text" name="email" ></td>
</tr>

<tr>
<td>Vorname: </td>
<td><input type="text" name="vname" ></td>
</tr>

<tr>
<td>Nachname: </td>
<td><input type="text" name="nname" ></td>
</tr>

</table>

<input type="submit" value="Los gehts!">

<p>Falls Sie Probleme mit dem Formular 
haben wenden Sie sich bitte 
an den 
<a href="mailto:webmaster@uni-mannheim.de"
   >Web-Master</a>
</p>

</form>


</body>
</html>

XHTML

<!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 name="generator" content="HTML Tidy, see www.w3.org" />
<title>Erste Web-Seite der &Uuml;bung</title>
</head>
<body bgcolor="#FFFF00">
<h1>Erste Web-Seite der &Uuml;bung</h1>

<p>Die Aktie Gelb empfehlen wir Ihnen zum Kauf. Die Aktie Gelb
empfehlen wir Ihnen zum Kauf. Die Aktie Gelb empfehlen wir Ihnen
zum Kauf. Die Aktie Gelb empfehlen wir Ihnen zum Kauf. Die Aktie
Gelb empfehlen wir Ihnen zum Kauf. Die Aktie Gelb empfehlen wir
Ihnen zum Kauf.</p>

<p><a href="http://www.postag.de/" target="_blank">Weitere
Informationen</a> finden Sie im Web</p>

<p align="center"><a href="http://www.postag.de/"
target="_blank"><img src="illu_aktiegelb.jpg" border="0"
alt="Aktie Gelb Bild" /></a></p>

<form action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi">
<table summary="Eingabeformular">
<tr>
<td>Email:</td>
<td><input type="text" name="email" /></td>
</tr>

<tr>
<td>Vorname:</td>
<td><input type="text" name="vname" /></td>
</tr>

<tr>
<td>Nachname:</td>
<td><input type="text" name="nname" /></td>
</tr>
</table>

<input type="submit" value="Los gehts!" /> 

<p>Falls Sie Probleme mit dem Formular haben wenden Sie sich bitte
an den <a
href="mailto:webmaster@uni-mannheim.de">Web-Master</a></p>
</form>
</body>
</html>

CSS

<html>
<head>
<title>CSS Beispiele</title>

<link rel="STYLESHEET" type="text/css" href="cssueb.css">

<style type="text/css">

body { background: teal; }

</style>

</head>

<body>

<h1>Dies ist die erste Überschrift</h1>

<p class="zentriert">
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
<em>Hier steht der Text eines hervorgehobenen Satzes.</em>
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
<em>Hier steht der Text eines <em>hervorgehobenen</em> Satzes.</em>
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
</p>

<h2>Dies ist die zweite Überschrift</h2>

<p>
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
<a href="uebung.html">Hier steht der Text eines Links.</a>
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
</p>

<p class="zentriert" >
<a class="ueb" href="."><img src="illu_aktiegelb.jpg"></a>
</p>

</body>
</html>
body { font-family:  monospace;
       font-size: 20pt;
       background: blue !important ;
       color: yellow; 
     }

h1 { color: yellow; 
     font-size: xx-large;
     align: center;
   }

h2 { color: yellow; 
     font-size: x-large;
     align: center;
   }

em { font-weight: bold; }

em em { font-weight: bold; background: white; color: black }

p.zentriert { align: center; } 

a:link    { color: white; text-decoration: none; }
a:visited { color: fuchsia; text-decoration: none; }

a.ueb img { border: none; color: blue; }

JavaScript, DOM

<html>
<head>
<title>Java Script Übungen</title>

<style>
body { font-family:  monospace;
       font-size: 20pt; }
</style>

<script type="text/javascript" language="JavaScript">
<!--
function letzteAenderung() {
         document.write("<p> Letzte Änderung ");
         document.write(document.lastModified);
         document.write(" </p>");
}

function pruefeName( formobj ) {
      if ( formobj.myname.value.length == 0 ) {
         alert("Name zu kurz"); return false;
      }
     return true;
}

function oeffneName( formobj ) {
     window.open( formobj.myname.value, "datei");      }
     return true;
}

function show_props(obj, obj_name) { 
       var result = ""; 
       for (var i in obj) 
           result += obj_name + "." + i + " = " + obj[i] + "\n";
       alert(result); 
   } 

// -->
</script>


</head>
<body>

<form>
<input type="button" value="lime" name="farbwahl" 
       onClick="document.bgColor='lime';" > 
<input type="button" value="blue" name="farbwahl" 
       onClick="document.bgColor='blue';" > 
<input type="button" value="silver" name="farbwahl" 
       onClick="document.bgColor='silver';" > 
</form>

<p name="p1">Dies ist ein Text zum JavaScript Kurs</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi"
      onSubmit="return pruefeName(this);" >
Name: <input type="text" name="myname" size="30"><br>


<input type="submit" value="Ab die Post" > 
</form>



<form onSubmit="return oeffneName(this);" >
Name: <input type="text" name="myname" size="30"><br>


<input type="submit" value="Öffne Datei" > 
</form>


<form onSubmit="show_props(this.myname.value,this.myname.value);" >
Name: <input type="text" name="myname" size="30"><br>


<input type="submit" value="Show Properties" > 
</form>




<script type="text/javascript" language="JavaScript">
letzteAenderung();
</script>

</body>
</html>

XML, XSLT

zum Beispiel: kurs.xml, kurs.dtd, kurs.xsl, kurs.html

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE personal SYSTEM "kurs.dtd" >

<personal>

<mitarbeiter pnr="p123456" >
<name>Heiko Wolf</name>
<abteilung>Jux und Dollerei</abteilung>
</mitarbeiter>

<mitarbeiter pnr="p123457" >
<name>Steffan Krall</name>
<abteilung>Jux und Döllerei</abteilung>
<abteilung>Berufsakademie</abteilung>
</mitarbeiter>

</personal>
<?xml version="1.0" encoding="iso-8859-1" ?>

<!ELEMENT personal (mitarbeiter+) >

<!ELEMENT mitarbeiter (name,abteilung+) >
<!ATTLIST mitarbeiter pnr ID #REQUIRED >

<!ELEMENT name (#PCDATA) >
<!ELEMENT abteilung (#PCDATA) >
<?xml version="1.0" encoding="iso-8859-1" ?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0" >

<xsl:template match="personal" >
<xsl:apply-templates />
</xsl:template>

</xsl:stylesheet>
Mitarbeiterkartei


Heiko Wolf
Jux und Dollerei



Steffan Krall
Jux und Döllerei
Berufsakademie
<?xml version="1.0" encoding="iso-8859-1" ?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0" >

<xsl:template match="personal" >
<html>
<head><title>Mitarbeiterkartei</title>
</head>
<body>
<xsl:apply-templates select="mitarbeiter" />
</body>
</html>
</xsl:template>

<xsl:template match="mitarbeiter">
<p>
<b>
<xsl:apply-templates select="name" />
</b>
<br />
Abteilung: 
<xsl:apply-templates select="abteilung" />
</p>
</xsl:template>

</xsl:stylesheet>
<html><head><title>Mitarbeiterkartei</title>
</head><body><p><b>Heiko Wolf</b><br>
Abteilung: 
Jux und Dollerei</p><p><b>Steffan Krall</b><br>
Abteilung: 
Jux und D&ouml;llereiBerufsakademie</p></body></html>

HTTP, Apache

.htaccess:

AuthUserFile /home/kredel/web-passwort
AuthGroupFile /home/kredel/group

AuthName "Wer sind Sie?"
AuthType Basic

require valid-user

web-passwort:

karl:GFbtHauumP/1Q

Perl

tuwas.pl:

#print "Wie ist dein Name ? ";
#$name=<STDIN>;
#chop($name);
#print "Hallo $name !\n";

@a=(33,55,77,99);

$a[111111]=11;

print "Ergebnis ", $a[111111], "\n"; 

%b=('a',1,'b','2 3  3 3','c',3,'d',4);

$b{'abcdefg'}=22;

print "Ergebnis ", $b{'abcdefg'}, "\n";

gaestebuch:

eingabe=Ja%20wo%20wird%20denn%20Fr%E4ulein%20Voigt%20sein%3F%3F%0D%0AManuela%20Voigt%20ist%20heute%20MAL%20WIEDER%20nicht%20anwesend
name=
Eintragen=Eintragen
datum=Fri%20Nov%20%209%2014%3A51%3A34%202001
=
eingabe=Ja%20wo%20wird%20denn%20Fr%E4ulein%20Thon%20sein%3F%3F%0D%0AUlrike%20Thon%20ist%20heute%20MAL%20WIEDER%20nicht%20anwesend
name=
Eintragen=Eintragen
datum=Fri%20Nov%20%209%2014%3A50%3A53%202001
=
eingabe=Ich%20war%20hier%21%0D%0AEcht%20coole%20Seite%21%0D%0AGratuliere%21
name=Martin
Eintragen=Eintragen
datum=Fri%20Nov%20%209%2014%3A43%3A26%202001
=
eingabe=Die%20erste%20Nachricht%20des%20neuen%20G%E4stebuchs.%0D%0ASuper%20gemacht%20%21
name=Karl%20Dall
Eintragen=Eintragen
datum=Fri%20Nov%20%209%2014%3A41%3A59%202001
=
eingabe=Ich%20war%20hier%21%0D%0AEcht%20coole%20Seite%21%0D%0AGratuliere%21
name=Martin
Eintragen=Eintragen
datum=Fri%20Nov%20%209%2014%3A40%3A03%202001
=

ex-gb.pl:

#!/usr/bin/perl

use strict;
use CGI qw/:standard *table/;
use Fcntl qw/:flock/;

sub fehler {
    my $err = "@_";
    print "\n", h1("Unerwarteter Fehler"), "\n", p($err), "\n", end_html;
}

my(
    $GBuch,   # Name der Gästebuch-Datei
    $MaxGB,   # Maximale Anzahl von Einträgen in GB
    $GBTitel, # Titel des Gästebuchs
    $akt,     # neuer Eintrag
    @inhalt,  # Inhalt des Gästebuchs
    $eintrag  # ein Eintrag im Gästebuch
);

$GBTitel = "Gästebuch von Heinz Kredel an der BA";
$GBuch   = "/home/kredel/gb-ba ";
$MaxGB   = 100;

print header();
print start_html({-title=>"$GBTitel", -bgcolor=>'aqua'});
print "\n", h1($GBTitel), "\n";

$akt = CGI->new();

if ($akt->param('eingabe')) {
   $akt->param("datum", scalar localtime);
   @inhalt = ($akt);
}

open(GBUCH,"+< $GBuch") || fehler("$GBuch kann nicht geöffnet werden.");
flock(GBUCH, LOCK_EX) || fehler("$GBuch kann nicht exclusiv verwendet werden");
while (!eof(GBUCH) && @inhalt < $MaxGB) {
      $eintrag = CGI->new(\*GBUCH);
      push @inhalt, $eintrag;
}

seek(GBUCH, 0, 0 ) || fehler("$GBuch kann nicht zurückgesetzt werden.");
foreach $eintrag (@inhalt) {
     $eintrag->save(\*GBUCH);
}
truncate(GBUCH, tell(GBUCH));
close(GBUCH);

print "\n", p("Dies ist die Beschreibung des Gästebuchs."), "\n";
print "\n<a href='http://itlab5.ba-mannheim.de/~ba/'>Kurs-Home</a>,\n";
print "\n<a href='http://itlab5.ba-mannheim.de/~kredel/'>Home</a>\n";

print "\n", hr, "\n", start_form();
print start_table();
print "<tr><td valign='top'>&nbsp;<br>Nachricht: </td>\n<td valign='top'>",
      $akt->textarea(-NAME => "eingabe",
                     -OVERRIDE => 1,
                     -ROWS => "4",
                     -COLS => "50",
                     -VALUE => "" ), 
#                     -VALUE => "Hier bitte Nachricht eingeben." ), 
#                     -VALUE => $akt->param('eingabe') ), 
      "</td></tr>\n";
print "<tr><td>Name: </td>\n<td>", 
      $akt->textfield(-NAME => "name",
                      -OVERRIDE => 1,
                      -SIZE => "50",
                      -VALUE => $akt->param('name')), 
      "</td></tr>\n";
print "<tr><td>", $akt->reset("Löschen"), "</td>\n<td>",
      $akt->submit("Eintragen"),"</td></tr>\n";
print end_table();
print "\n", end_form(), "\n", hr, "\n";

print h2("Bisherige Einträge"), "\n";
foreach $eintrag (@inhalt) {
     print p($eintrag->param("eingabe")), "\n";
     print p({-ALIGN => "right"}, 
             $eintrag->param("name"),
             " @ ", 
             $eintrag->param("datum"), 
            ), "\n";
}
print hr, "\n", end_html, "\n";

PHP

versuch.phtml:

<html>
<head>
<title>Eine Seite mit PHP</title>
</head>
<body bgcolor="lime">
<h1>Eine Seite mit PHP</h1>

<?php 

  print "<p>QUERY_STRING = " . "$QUERY_STRING </p>\n";
  print "<p>y = " . "$y </p>\n";
  print "<p>b = " . "$b </p>\n";

  phpinfo();

?>

</body>
</html>

mitzahl.phtml:

<?php 
 $filename=$SCRIPT_FILENAME;
 $counter_start="1";
 function counter() {
      global $filename, $counter_start;
      $counter_dir="/tmp/";
      $counter_db=$counter_dir . "kredel-zaehler.dbm";
      if (file_exists("$counter_db")) {
         $db=dba_open($counter_db,"w","gdbm");
         if ( dba_exists($filename,$db) ) {
            $cnt = dba_fetch($filename,$db);
            if ($counter_start=="1") { $cnt++; }
            else { $cnt=$counter_start; }
            dba_replace($filename,$cnt,$db);
         }
         else {
               $cnt=$counter_start;
               dba_insert($filename,$cnt,$db);
         }
         dba_close($db);
         return "$cnt";
      }
      else {
            echo "Attempt to create file: " . $counter_db;
            $cnt=$counter_start;
            $db=dba_open($counter_db,"n","gdbm");
            dba_insert($filename,$cnt,$db);
            dba_close($db);
            return "$cnt";
      }
 }
?>
<html>
<head>
<title>Eine Seite mit einem PHP DBA-Zähler</title>
</head>
<body bgcolor="lime">
<h1>Eine Seite mit einem PHP DBA-Zähler</h1>

<p>
Dies ist ein Paragraph.
</p>

<?php 

  print "<h3>" . counter() . " Zugriffe";
  print "</h3>\n";

?>

</body>
</html>

index.php:

<?php 
 $filename=$SCRIPT_FILENAME;
 $counter_start="1";
 function counter() {
      global $filename, $counter_start;
      $counter_dir="/tmp/";
      $counter_db=$counter_dir . "kredel-zaehler.dbm";
      if (file_exists("$counter_db")) {
         $db=dba_open($counter_db,"w","gdbm");
         if ( dba_exists($filename,$db) ) {
            $cnt = dba_fetch($filename,$db);
            if ($counter_start=="1") { $cnt++; }
            else { $cnt=$counter_start; }
            dba_replace($filename,$cnt,$db);
         }
         else {
               $cnt=$counter_start;
               dba_insert($filename,$cnt,$db);
         }
         dba_close($db);
         return "$cnt";
      }
      else {
            echo "Attempt to create file: " . $counter_db;
            $cnt=$counter_start;
            $db=dba_open($counter_db,"n","gdbm");
            dba_insert($filename,$cnt,$db);
            dba_close($db);
            return "$cnt";
      }
 }

 function modified() {
     global $filename;
     return date("D d M Y H:i:s", filectime($filename) );
 }
?>
<html>
<head>
<title>Mein erster Web-Server</title>
</head>
<body bgcolor="white">
<h1>Hallo von meinem ersten Web-Server</h1>
<p>Hier ist mein 
   <a href="ex-gb.pl">Gästebuch</a>.
</p> 
<p>Hier ist eine Seite mit 
   <a href="mysql.php">MySQL</a>.
</p> 
<?php 

  print "<h3>" . counter() . " Zugriffe</h3>\n";
  print "<h3>letzte Änderung am " . modified() . "</h3>\n";

  print "<p>" . exec("/bin/ls -l") . "</p>";
?>
</body>
</html>

MySQL

mysql.php:

<?php 
$filename=$SCRIPT_FILENAME;
$counter_start="1";
function counter() {
   global $filename;
   $cnt = 1;
   $result = dbquery("SELECT count FROM zaehler WHERE file='$filename'"); 
   $num = mysql_num_rows($result);
   if ($num > 0) {
      $cnt = mysql_result($result, 0, 'count');
      if ($counter_start > 1) { $cnt = $counter_start; } 
      $cnt++;
      $result=dbquery("UPDATE zaehler SET count='$cnt' WHERE file='$filename'");
   } 
   else {
      $result=dbquery("INSERT INTO zaehler (file,count) VALUES ('$filename','$cnt')");
   }
   return $cnt;
}

function dbquery($sql) {
     mysql_connect('localhost','tit00a00','tit00a00');
     mysql_select_db('tit00a00');
     $result=@mysql_query($sql);
     if (mysql_error()) {
        print "<b>MySQL ERROR:</b> " . mysql_error() . "<br>\n";
        $result = "";
     }
     mysql_close();
     return $result;
}
?>
<html>
<head>
<title>Meine erste Seite mit MySQL</title>
</head>
<body bgcolor="white">
<h1>Hallo von meiner ersten Seite mit MySQL</h1>
<?php 
  print "<h3>MySQL Counter: </h3>\n";
  print "<h3>" . counter() . " Zugriffe</h3>\n";
?>
</body>
</html>

© Universität Mannheim, Rechenzentrum, 1998-2001.

Heinz Kredel
Last modified: Fri Dec 7 13:51:10 CET 2001