Let’s Build Verschlüsselung: Benutzeroberfläche

05. Februar 2017 von | Kategorie(n): Programmierung
Schlagwörter: // // // // //

Let’s Build Verschlüsselung: Benutzeroberfläche

Jetzt, wo der arbeitende Teil der Verschlüsselung fertiggestellt ist, ist es an der Zeit, die Benutzeroberfläche zu erstellen, damit das Verschlüsseln und Entschlüsseln von Wörtern und Texten für jedermann machbar ist. Die Skripte im Hintergrund wurden von mir in den vorherigen Artikeln zu dieser Reihe in PHP realisiert, daher macht es Sinn eine Weboberfläche für die Verschlüsselung zu erstellen.

Warum ein Webinterface?

Dafür gibt es mehrere Gründe: Zum einen bietet es sich an, da – wie bereits oben erwähnt – HTML und PHP (und ganz wenig CSS) super zusammenarbeiten. Zum anderen ist eine Benutzeroberfläche im Internet für jeden, der einen Brower besitzt, zugänglich und der Gerätetyp spielt dabei eine eher untergeordnete Rolle.

Wie soll das User Interface aussehen?

Ich denke, es braucht nicht mehr als eine Textbox (<textarea>),  zwei Buttons (<input type=“submit“ />) für die Ver- und Entschlüsselung sowie ein Textfeld (<input type=“text“>) für den Schlüssel. Das Ganze sollte ein Formular sein. Ich hoffe, es war einigermaßen verständlich, ansonsten habe ich unten einen Screenshot eingebunden.

Allerdings möchte ich nicht, dass die komplette Seite (und somit auch das UI) aktualisiert wird, wenn man das HTML-Formular absendet. Wäre dies der Fall, so würde der Klartext verschwinden und nur noch der Geheimtext wäre zusehen. Zwar wäre dies nicht weiter schlimm, dennoch empfinde ich es als unschön, folglich möchte ich eine Aktualisierung verhindern. Der einfachste Weg führt über einen Frame (<iframe>), was vielleicht nicht die schönste, aber einfachste Lösung ist.

Screenshot:

 UI der Verschlüsselung

Quelltext

Ich schätze, zum Quelltext muss nicht viel gesagt werden. Wer HTML beherrscht und auch etwas Ahnung hat bezüglich CSS, hat mit dem Code keine Probleme.

<html>
<head>
	<link rel="stylesheet" href="style.css">
	<meta name="viewport" content="width=device-width" />
</head>
<body>
	<h1>Verschlüsselung</h1>
	<form action="encryption.php" method="POST" target="outFrame">
		<table border="1">
			<tr>
				<td colspan="3"> 
					<textarea name="text" rows="5"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="in" value="verschlüsseln"/>
				</td>
				<td>
					<input type="submit" name="out" value="entschlüsseln"/>
				</td>
				<td> 
					Key: <input id="key" type="text" name="key" value="0" /> 
				</td>
		</table>
	</form>	
	<iframe name="outFrame" id="outFrame"></iframe>
	
	<p id="version"> © Tim Poerschke </p>
</body>
</html>
* {
	margin: 0;
	padding: 0;
}

body {
	margin: 4px;
}

h1 {
	margin: 10px 0 0 0;
} 

table { 
	width: 100%;
	max-width: 320px;
}

textarea {
	height: 100px;
	width: 100%;
	padding: 2px;
}

#key {
	width: 60px;
}

#outFrame {
	clear: both;
	display: block;
	border: none;
	max-width: 600px;
}

#version {
	position: absolute;
	bottom: 0px;
	font-size: 12px;
	background: lightgrey;
}

Danke fürs Lesen! Senf dazugeben, ist ganz einfach. Scroll runter 🙂

Was denkst du über diesen Post?
  • Gut (0)
  • Hilfreich (1)
  • Nicht gut (0)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

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

16 − 8 =