1.1 HTML-Quellcode
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Raumbuchung</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Besprechungsraum</h1>
<form action="buchung.php" method="post">
<fieldset>
<legend>Raumbuchung</legend>
<table>
<tr>
<td><label for="persNr">Personalnummer: </label></td>
<td><input type="text" id="persNr" name="personalnummer"></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="raum">Besprechungsraum: </label></td>
<td><select id="raum" name="raum" size="1">
<option>Raum I</option>
<option>Raum II</option>
<option>Raum III</option>
<option>Raum IV</option>
</select></td>
<td><label for="datum">Datum:</label></td>
<td><input type="date" id="datum" name="datum"></td>
</tr>
<tr>
<td><label for="beginn">Beginn</label></td>
<td><input type="time" id="beginn" name="beginn"></td>
<td><label for="ende">Ende</label></td>
<td><input type="time" id="ende" name="ende"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Catering</legend>
<table>
<tr>
<td>Catering: </td>
<td><input type="radio" id="ja" name="catering" value="1" checked>
<label for="ja">Ja</label></td>
<td><input type="radio" id="nein" name="catering" value="0">
<label for="nein">Nein</label></td>
</tr>
<tr>
<td><label for="anzahl">Anzahl Personen: </label></td>
<td><input type="number" min="2" max="8" id="anzahl" name="anzahl"></td>
<td></td>
</tr>
</table>
</fieldset>
<button type="submit">Reserviere</button>
</form>
</body>
</html>
1.1.1 Responive Webdesign
Das Webdesign passt sich an verschiedene Darstellungsgrößen auf den Ausgabegeräten in Bezug auf Auflösung und Bedienung an.
1.2.1
INSERT INTO buchung (buchungsNr,persNr,raum,datum,beginn,ende) VALUES ('3','20082','4','2020-05-22','9:00','15:30');
1.2.2
SELECT buchungsNr FROM buchung WHERE datum='2020-05-22' AND raum='2';
1.2.3
