Skript-Anfang EWA_PraktikumsAufgaben – Seite 12 Skript-Ende EWA_PraktikumsAufgaben – Seite 15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="5" />
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
<title>Fahrer</title>
</head>
<body>
<header>
<h3 class="mainheader">Fahrer</h3>
</header>
<section>
<nav>
<ul>
<li class="navpunkt"><a href="bestellung.html">Bestellung</a></li>
<li class="navpunkt"><a href="kunde.html">Kunde</a></li>
<li class="navpunkt"><a href="baecker.html">Bäcker</a></li>
<li class="navpunkt active"><a href="fahrer.html">Fahrer</a></li>
<li class="navpunkt additional"><a href="bestellung.html">Neue Bestellung</a></li>
</ul>
</nav>
</section>
<section id="content">
<article class="lieferungen">
<form action="http://www.fbi.h-da.de/cgi-bin/Echo.pl" accept-charset="UTF-8" method="get">
<fieldset>
<legend>
<h4>Müller, Freßgasse 11, 65000 Frankfurt</h4>
</legend>
<section>
<p>Tonno, Calcone, Margherita, Hawai, Tonno</p>
<p data-gesamtpreis="13.0">Preis: 13,00 €</p>
<table>
<tr>
<th>gebacken</th>
<th>unterwegs</th>
<th>ausgeliefert</th>
</tr>
<tr>
<td><input type="radio" name="b1" value="4" onclick="this.form.submit();" /> </td>
<td><input type="radio" name="b1" value="5" checked="true" onclick="this.form.submit();" /> </td>
<td><input type="radio" name="b1" value="6" onclick="this.form.submit();" /> </td>
</tr>
</table>
</section>
</fieldset>
</form>
</article>
<article class="lieferungen">
<form action="http://www.fbi.h-da.de/cgi-bin/Echo.pl" accept-charset="UTF-8" method="get">
<fieldset>
<legend>
<h4>Meier, Hauptstr. 5</h4>
</legend>
<section>
<p>Tonno, Tonno, Margherita</p>
<p data-gesamtpreis="10.5">Preis: 10,50 €</p>
<table>
<tr>
<th>gebacken</th>
<th>unterwegs</th>
<th>ausgeliefert</th>
</tr>
<tr>
<td><input type="radio" name="b2" value="4" onclick="this.form.submit();" /> </td>
<td><input type="radio" name="b2" value="5" onclick="this.form.submit();" checked="true" /> </td>
<td><input type="radio" name="b2" value="6" onclick="this.form.submit();" /> </td>
</tr>
</table>
</section>
</fieldset>
</form>
</article>
</section>
<footer>© 2013 Best Pizza of Münster</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="5" />
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
<title>Kunde</title>
<!-- ae ä und oe ö und ue ü -->
</head>
<body>
<header>
<h3>Kunde</h3>
</header>
<section>
<nav>
<ul>
<li class="navpunkt"><a href="bestellung.html">Bestellung</a></li>
<li class="navpunkt active"><a href="kunde.html">Kunde</a></li>
<li class="navpunkt"><a href="baecker.html">Bäcker</a></li>
<li class="navpunkt"><a href="fahrer.html">Fahrer</a></li>
<li class="navpunkt additional"><a href="bestellung.html">Neue Bestellung</a></li>
</ul>
</nav>
</section>
<section id="content">
<form action="http://www.fbi.h-da.de/cgi-bin/Echo.pl" accept-charset="UTF-8" method="get" >
<table>
<tr>
<th></th>
<th>bestellt</th>
<th>im Ofen</th>
<th>fertig</th>
<th>unterwegs</th>
</tr>
<tr>
<td>Margherita</td>
<td><input type="radio" name="m1" value="1" onclick="this.form.submit();" disabled="disabled" /> </td>
<td><input type="radio" name="m1" value="2" onclick="this.form.submit();" disabled="disabled" /></td>
<td><input type="radio" name="m1" value="3" onclick="this.form.submit();" disabled="disabled" checked="true" /></td>
<td><input type="radio" name="m1" value="5" onclick="this.form.submit();" disabled="disabled" /></td>
</tr>
<tr>
<td>Salami</td>
<td><input type="radio" name="s1" value="1" onclick="this.form.submit();" disabled="disabled" /> </td>
<td><input type="radio" name="s1" value="2" onclick="this.form.submit();" disabled="disabled" checked="true" /></td>
<td><input type="radio" name="s1" value="3" onclick="this.form.submit();" disabled="disabled" /></td>
<td><input type="radio" name="s1" value="5" onclick="this.form.submit();" disabled="disabled" /></td>
</tr>
<tr>
<td>Tonno</td>
<td><input type="radio" name="t1" value="1" onclick="this.form.submit();" disabled="disabled" /> </td>
<td><input type="radio" name="t1" value="2" onclick="this.form.submit();" disabled="disabled" /></td>
<td><input type="radio" name="t1" value="3" onclick="this.form.submit();" disabled="disabled" checked="true" /></td>
<td><input type="radio" name="t1" value="5" onclick="this.form.submit();" disabled="disabled" /></td>
</tr>
<tr>
<td>Hawai</td>
<td><input type="radio" name="h1" value="1" onclick="this.form.submit();" disabled="disabled" /> </td>
<td><input type="radio" name="h1" value="2" onclick="this.form.submit();" disabled="disabled" checked="true"/></td>
<td><input type="radio" name="h1" value="3" onclick="this.form.submit();" disabled="disabled" /></td>
<td><input type="radio" name="h1" value="5" onclick="this.form.submit();" disabled="disabled" /></td>
</tr>
</table>
</form>
</section>
<footer>
© 2013 Best Pizza of Münster
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
<title>Bestellung</title>
<!-- ae ä und oe ö und ue ü -->
</head>
<body>
<header>
<h3>Bestellung</h3>
</header>
<section>
<nav>
<ul>
<li class="navpunkt active"><a href="bestellung.html">Bestellung</a></li>
<li class="navpunkt"><a href="kunde.html">Kunde</a></li>
<li class="navpunkt"><a href="baecker.html">Bäcker</a></li>
<li class="navpunkt"><a href="fahrer.html">Fahrer</a></li>
<li class="navpunkt additional"><a href="bestellung.html">Neue Bestellung</a></li>
</ul>
</nav>
</section>
<section id="content">
<section id="karte">
<header>
<h4>Speisekarte</h4>
</header>
<table>
<tr>
<td><img id="Margherita" data-name="Margherita" data-preis="4.0" src="pizza.png" alt="" title="Margherita Pizza" onclick="addToList(this)" /> </td>
<td class="pname">Margherita</td>
<td class="price">4,00€</td>
</tr>
<tr>
<td><img id="Salami" data-name="Salami" data-preis="4.5" src="pizza.png" alt="" title="Salami Pizza" onclick="addToList(this)" /> </td>
<td class="pname">Salami</td>
<td class="price">4,50€</td>
</tr>
<tr>
<td><img id="Hawai" data-name="Hawai" data-preis="5.5" src="pizza.png" alt="" title="Hawai Pizza" onclick="addToList(this)" /> </td>
<td class="pname">Hawai</td>
<td class="price">5,50€</td>
</tr>
</table>
</section>
<section id="warenkorb">
<header>
<h4>Warenkorb</h4>
</header>
<form id="bestellformular" action="http://www.fbi.h-da.de/cgi-bin/Echo.pl" accept-charset="UTF-8" method="post" >
<select id="bestellliste" name="selection[]" size="10" multiple></select>
<p><span id="gesamtpreis">0.0</span> €</p>
<section id="buttonfield">
<input id="adressfeld" type="text" name="adresse" value="" size="30" placeholder="Ihre Adresse" required="required" />
<input class="button" type="reset" onclick="clearAll()" name="reset" value="Alles löschen" />
<input class="button" type="button" onclick="clearSelected()" name="reset1" value="Auswahl löschen" />
<input class="button" type="button" onclick="selectAll(this)" name="submit1" value="Bestellen" />
</section>
</form>
</section>
</section>
<footer>© 2013 Best Pizza of Münster</footer>
<script type="text/javascript">
function selectAll(myForm)
{
var liste = document.getElementById('bestellliste');
for (var i=0;i<liste.length;i++)
{
liste.options[i].selected = true;
}
if (liste.length>=1)
{
document.forms['bestellformular'].submit();
}
else
{
alert('Keine Pizzen ausgewählt');
}
}
function addToList(Pizza)
{
var preis=Pizza.getAttribute('data-preis');
var pname = Pizza.getAttribute('data-name');
var liste = document.getElementById('bestellliste');
var newNode = document.createElement('option');
var newText = document.createTextNode(pname);
newNode.appendChild(newText);
liste.appendChild(newNode);
document.getElementById('gesamtpreis').innerHTML = (parseFloat(document.getElementById('gesamtpreis').innerHTML) + parseFloat(preis)).toFixed(2);
}
function clearAll()
{
document.getElementById('gesamtpreis').innerHTML ='0.0';
var liste = document.getElementById('bestellliste');
for (var i=0;i<liste.length;i++)
{
liste.remove(i);
i--;
}
document.getElementById('adresse').innerHTML='';
}
function clearSelected()
{
var liste = document.getElementById('bestellliste');
for (var i=0;i<liste.length;i++)
{
if (liste.options[i].selected)
{
var Pizza = document.getElementById(liste.options[i].value);
var preis=Pizza.getAttribute('data-preis');
document.getElementById('gesamtpreis').innerHTML = (parseFloat(document.getElementById('gesamtpreis').innerHTML) - parseFloat(preis)).toFixed(2);
liste.remove(i);
i--;
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="5" />
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
<title>Bäcker</title>
<!-- ae ä und oe ö und ue ü -->
</head>
<body>
<header>
<h3 class="mainheader">Bäcker</h3>
</header>
<section>
<nav>
<ul>
<li class="navpunkt"><a href="bestellung.html">Bestellung</a></li>
<li class="navpunkt"><a href="kunde.html">Kunde</a></li>
<li class="navpunkt active"><a href="baecker.html">Bäcker</a></li>
<li class="navpunkt"><a href="fahrer.html">Fahrer</a></li>
<li class="navpunkt additional"><a href="bestellung.html">Neue Bestellung</a></li>
</ul>
</nav>
</section>
<section id="content">
<form action="http://www.fbi.h-da.de/cgi-bin/Echo.pl" accept-charset="UTF-8" method="get">
<table>
<tr>
<th></th>
<th>bestellt</th>
<th>im Ofen</th>
<th>fertig</th>
</tr>
<tr>
<td>Margherita</td>
<td><input type="radio" name="m1" value="1" checked="true" onclick="this.form.submit();" /> </td>
<td><input type="radio" name="m1" value="2" onclick="this.form.submit();" /></td>
<td><input type="radio" name="m1" value="3" onclick="this.form.submit();" /></td>
</tr>
<tr>
<td>Margherita</td>
<td><input type="radio" name="m2" value="1" onclick="this.form.submit();" /> </td>
<td><input type="radio" name="m2" value="2" checked="true" onclick="this.form.submit();" /></td>
<td><input type="radio" name="m2" value="3" onclick="this.form.submit();" /></td>
</tr>
<tr>
<td>Hawai</td>
<td><input type="radio" name="h1" value="1" onclick="this.form.submit();" /> </td>
<td><input type="radio" name="h1" value="2" checked="true" onclick="this.form.submit();" /></td>
<td><input type="radio" name="h1" value="3" onclick="this.form.submit();" /></td>
</tr>
</table>
</form>
</section>
<footer>© 2013 Best Pizza of Münster</footer>
</body>
</html>
/* keine Default Abstände */
*
{
padding:0pt;
margin:0pt;
font:1em Verdana;
}
body {
color:black;
background-color: WhiteSmoke;
font:1em Verdana;
}
table
{
width:100%;
padding:5%;
}
tr{
text-align:right;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
padding: 0px;
background: #580000;
color: #eee;
border-top: 3px solid black;
padding: 1% 0%;
text-align: center;
}
header
{
clear: both;
text-align:left;
color: white;
background-color: #580000;
font:2em Verdana;
padding-left: 10%;
text-shadow:2px 2px 2px black; /* CSS3 */
}
article
{
display: inline-block;
width: 10em;
border: 1px outset grey;
margin:5px;
}
nav {
padding:0px 0px;
width: 100%;
display: block;
text-align:center;
float:left;
background-color: darkgrey;
}
nav li
{
font-size: 1.5ex;
display: inline-block;
padding:1em;
background-color: darkgrey;
}
nav ul
{
padding-left: 10%;
list-style:none;
text-align: left;
}
a:link, a:visited
{
color: black;
text-decoration: none;
}
a:hover
{
color:black;
}
.pname
{
width:30%;
}
.price
{
width:30%;
text-align:right;
}
.lieferungen
{
width:100%;
display: block;
}
.button {
padding:2% 2%;
font:0.75em Verdana;
}
#bestellformular
{
text-align:right;
}
#bestellliste
{
width:100%;
}
#adressfeld
{
width:100%;
margin:2% 0%;
}
#buttonfield
{
text-align:center;
margin:5%;
}
#warenkorb
{
min-width: 300px;
width:40%;
display: inline-block;
vertical-align: top;
border: 5px outset grey;
}
#karte
{
min-width: 300px;
background-image: url(tex.jpg);
width:40%;
display: inline-block;
vertical-align: top;
border: 5px outset grey;
}
#content
{
width: 80%;
display: block;
margin: 5% 10%;
}
.active
{
background-color: WhiteSmoke;
}
.additional
{
background-color: grey;
}
