Entwicklung webbasierter Anwendungen (Praktikum 3)

Skript-AnfangEWA_PraktikumsAufgaben – Seite 12
Skript-EndeEWA_PraktikumsAufgaben – Seite 15

Fahrer

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

Kunde

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

Bestellung

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

Bäcker

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

CSS

/* 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;
}

Schlagwörter
Maximilian
Maximilian

Herzlich willkommen! Ich bin Max, ein Informatiker mit über 15 Jahren Berufserfahrung. Hier teile ich meine Leidenschaften, Erlebnisse und Perspektiven. Ich lade dich ein, gemeinsam mit mir auf eine Entdeckungsreise zu gehen.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.