Vorher müssen wir uns überlegen, was unser Chat denn alles brauch und was er können sollte. Bevor wir uns mit dem Design und den Programm Code beschäftigen, müssen wir uns noch folgendes runterladen und installieren Connector/Net, damit wir später auch eine Verbindung erstellen können.
Jetzt überlegen wir uns, welche Funktionen wir einbauen wollen. Als erstes bräuchten wir ein Formular für die Anmeldung, dann das eigentliche Chat-Fenster, dann sollte es noch Einstellungsmöglichkeiten geben und eine Chat-History und das wichtigste ist eine Datenbank, denn sonst funktioniert es später nicht. Aber heute geht es erst einmal nur um das Formular.

Wir öffnen unser Visual Studio, wer es noch nicht hat, der kann sich die Express Version kostenlos auf der Microsoft Seite herunterladen.
Das Projekt nennen wir jetzt der Einfachheit halber Online Chat.
So müsste die nackte Oberfläche der erstellten Form aussehen.
Für unser Formular brauchen wir jetzt zwei Label, zwei TextBoxen und noch zwei Buttons, die wir dann in der Form anordnen.
Label1 habe ich Benutzer genannt und Label2 Passwort. Die beiden TextBoxen werden rechts von den Labels platziert. In der zweiten TextBox, die neben dem Passwort steh, wollen wir nun noch eine Eigenschaft ändern, damit, wenn wir später das Passwort eingeben, niemand mitlesen kann. Also die TextBox2 anklicken und unter Eigenschaften PasswordChar ein Zeichen eingeben, das an Stelle des Passwortes erscheinen soll. Gebräuchlich sind hier Sternchen *.
Dann werden noch zwei Buttons eingefügt, zum Absenden und zum Abbrechen. Die Beschriftung können immer direkt bei den Eigenschaften unter Text geändert werden.
Und schon ist auch schon das Design fertig. Natürlich wird man damit keinen Schönheitswettbewerb gewinnen, aber zunächst soll es erst einmal nur seinen Zweck erfüllen.

Jetzt kann es auch schon zum Programm Code gehen. Aber bevor wir es vergessen, klicken wir auf Projekt -> Verweis hinzufügen … -> Durchsuchen. Nun müssen wir die Mysql.Data.dll suchen, die liegt in dem Ordner, den wir zu Anfang installieren sollten.
Wenn wir das getan haben, machen wir einen Doppelklick auf den Absenden Button und bekommen unsern Code zu sehen.

Als erstes importieren wir Mysql.Data.MysqlClient in unser Projekt, dafür müssen wir nur an den Anfang die kleine Zeile:

Jetzt kommt der ganze Code für das Formular, mit anschließender Erklärung zu den einzelnen Programmzeilen.

Wie oben schon erwähnt, importieren wir zuerst Mysql.Data.MysqlClient.
Die Klasse habe ich um genannt in loginForm. In dieser Klasse deklarieren wir zuerst mit Dim die MysqlConnection. Dann erstellen wir eine Funktion, die später dann eine Verbindung zu unserer Datenbank öffnen soll, damit wir mit ihr arbeiten können. In einem String werden alle Daten gespeichert, die wir für die Verbindung mit der Datenbank brauchen, Server, Username, Passwort und Datenbankname.

Jetzt kommt der eigentliche Hauptteil, der ausgeführt wird, wenn wir den Absende Button in unserem Formular drücken. Das beginnen wir mit Try, um eventuelle Fehlermeldungen abzufangen. Try bedeutet so viel wie versuchen. Wir rufen in diesem Try zuerst die Funktion Verbindung auf und erstellen einen neuen MySqlDataAdapter und unsere SQL Query, die in der Datenbank nach unseren Benutzeraccount suchen soll. Die Struktur der Datenbank werde ich im nächsten Artikel zeigen. Also die SELECT Anweisung erst einmal so hinnehmen.

Nun erstellen wir eine neue Prozedur, die MySqlCommand. Der weisen wir unsere Verbindung und unseren Query String zu und lesen sie mit dem MySqlDataReader aus.
Wir erstellen nun eine IF Anweisung, um zu prüfen, ob es einen passenden Datensatz in unserer Datenbank zu finden ist. Ist dies nicht der Fall, wird eine MessageBox aufgepoppt, mit dem Inhalt: “Die Anmeldedaten sind nicht korrekt.”
Sollten sie einen Datensatz gefunden haben, geht es mit der ELSE Anweisung weiter, in der wir das eigentliche Chat Fenster starten. Und anschließend wird unser Login Fenster geschlossen.
Danach schließen wir die Datenbankverbindung wieder, beenden den Try und die Sub.
Da wir zwei Buttons haben, gehen wir noch einmal zurück zum Design und klicken doppelt auf abbrechen und der entsprechende Code wird eingefügt.
Indem schreiben wir nur die Anweisung, wenn jemand auf Abbrechen klickt, dann soll sich das Login Formular schließen.

Ich denke, das war für das Formular zunächst alles, hoffentlich habe ich nichts wesentliches vergessen, aber ich denke nicht. Bald geht es weiter mit dem zweiten Teil der Serie und erstellen dort die MySql Datenbank.

So nachdem das Programm nun installiert ist erstellen wir ein neues Projekt. Schon erstellt Visual Studio eine neue Form. Man kann sofort die grafische Benutzeroberfläche des Programms sehen und mit nur wenigen Klicks kann man sich die Elemente aus der Toolbox auf seiner Form platzieren. Geht alles super einfach, hat nur keinen großen Nutzen, so lange man nicht weis was man macht. Deswegen wollen wir uns mal den Code anschauen, dafür einfach einen Rechtsklick und auf Code anzeigen gehen, dann müsste folgender Code stehen.

In dieser Class Form1 schreiben wir unseren Code, damit wir später was in unserem Programm sehen.

Das ist nun der Code für unser erstes kleines Visual Basic Programm. So nun die Erklärung zum Code. Die Klasse habe ich erst einmal in HelloWorld umbenannt.
Als erstes beginnen wir mit Private, damit sagen wir, dass der Code der in diesem Modul steht, nur innerhalb genutzt werden kann und von außen kein Zugriff stattfinden kann. Mit Sub deklarieren wir nun den Namen, mit dem der Code der Sub Prozedur definiert wird. Wir benennen nun die Form1_Load in HelloWorld_Load um. Für das spätere Ergebnis, macht es keinen Unterschied, man sollte dennoch möglichst darauf achten, immer Namen zu vergeben, die direkt aussagen, wofür sie stehen. HelloWorld_Load zeigt, dass die Funktion ausgeführt wird, wenn das Fenster geladen wird.

Jetzt kommen wir zum eigentlichen Code. Als erstes weisen wir dem Programm/Fenster, das wir später sehen werden einen Namen zu, ganz einfach mit Me.Text = “Hello World”. Wir müssen Me verwenden, weil man nicht auf sich selbst verweisen kann, das lässt das Programm nicht zu. Als immer daran denken, Me zu verwenden, wenn es sich dabei um die Klasse handelt, in der gerade geschrieben wird.
Als nächstes bestimmen wir die Größe des Fensters, auch sehr einfach mit width, wie Breite und height, wie Höhe. Als nächstes wollen wir ein neues Label erstellen, dafür müssen wir zunächst die Variable Label1 mit Dim deklarieren und mit as new Label ein neues Label erzeugen.
Im nächsten Schritt fügen wir das neue Label in die Form ein mit Me.Control.Add(Label1). Jetzt können wir dem Label einen Text zuweisen, der dann später angezeigt werden soll. Dafür schreiben wir Label1.Text = “Hello World”.
Und schon ist das erste Programm fast fertig, denn jetzt muss es noch kompiliert werden, denn sonst wird das nichts. Also einfach mal auf den grünen Play Button Klicken und wenn ihr alles richtig gemacht habt, müsste sich nun das Programm mit der Ausgabe Hello World erscheinen.

Was ich noch vergessen hatte, in dem Code hatte ich einen Zeilenumbruch gemacht, damit es vernünftig aufs Bild passte, dafür muss man in Visual Basic einen Unterstrich machen, damit dem Kompilierer klar ist, dass die Zeile in der nächsten Zeile noch weiter geht.

Also schreiben wir:
Dividend : Divisor = Quotient
Nun wollen wir nicht länger drum rum reden und mit der ersten kleinen Aufgabe beginnen.

72:6 = 12
6
12
12
0

Zuerst ist zu beachten, dass wir von links nach rechts rechnen. Wir nehmen die erste Zahl die 7, die 6 passt genau einmal rein, deswegen schreiben wir jetzt die 6 unter die 7. Die 1 kommt hinter dem Gleichheitszeichen. Als nächstes unterstreichen wir die 6 und bilden die Differenz, also den Unterschied zwischen 7 und 6, der ist 1. Der wird nun direkt unter die 6 geschrieben und nun holen wir die nächste Zahl herunter und schreiben sie neben die 1.
Jetzt müssen wir wieder schauen, wie oft die 6 in die 12 passt, genau 2 mal, ohne Rest. Also können wir wieder unterstreichen und eine 0 hinschreiben und die 2 kommt hinter die 1 oben neben dem Gleichheitszeichen.
Das wäre geschafft, war aber auch noch nicht wirklich schwierig, aber es gibt Besonderheiten, die in der nächsten Aufgabe klarer werden.
Denn wenn der Dividend kleiner ist als der Divisor, müssen wir eine weitere Zahl dazu holen.

126:6 = 21
12
  6
  6
  0

Wollen wir hier die erste Zahl nehmen, die 1, dann stellen wir fest, das der Divisior, die 6 viel größer ist, deswegen nehmen wir die 2 auch noch mit dazu. Damit ist der Dividend wieder größer und wir können wie im ersten Beispiel rechnen.

Leider sind die Zahlen nicht immer so glatt und so kann schnell auch mal eine Kommazahl heraus kommen, das zeig ich euch an einem weiteren Beispiel.

231,00:4 = 57,75
20
 31
 28
  30
  28
   20
   20
    0

Um direkt zu verdeutlichen, habe ich unsere Zahl mit zwei weiteren Nullen hinter dem Komma ausgestattet. Das ist erlaubt, nur schreibt man sie normalerweise nicht hin. Zunächst haben wir die 20, und wir bekommen 5 raus, die wir oben hin schreiben, dann geht es weiter 28, wir bekommen 7 heraus und schreiben so auch oben hin. Die Differenz ist nun 3. Entweder schreiben wir jetzt 57 als Ergebnis mit Rest 3, oder wir rechnen noch weiter und weil wir alle Füchse sind, machen wir weiter.

Jetzt haben wir die 3 dort stehen, können aber damit nicht rechnen, weil sie kleiner ist als die 4, oben stehen auch keine Zahlen mehr, als müssen wir uns einer der Nullen dazu holen, die ich zum besseren Verständnis dorthin geschrieben habe. Wichtig ist, das wir eine Zahl genommen haben, die hinter dem Komma steht, also müssen wir hinter unserem Ergebnis auch ein Komma setzen, sonst könnten wir was falsches heraus bekommen. Jetzt rechnen wir einfach wie gewohnt weiter, die Hürde mit dem Komma ist genommen.

Als erstes erstellen wir die Funktion namenGenerator() und legen zwei Variablen vornamen und nachnamen an und weisen ihnen zwei Strings mit Vornamen und Nachnamen zu. Die werden dann mit der Split() Funktion geteilt und in ein Array umgewandelt. Durch die For-Schleife generieren wir eine Zufallszahl mit Math.random() und runden das mit Math.round() ab. Das multiplizieren wir dann mit der Anzahl der Array Elemente -1, weil die Zählung ab 0 beginnt. Würden wir das nicht machen, würde ein undefined erscheinen, wenn bei 10 Array Elementen eine 10 generiert würde, da ja nur von 0 bis 9 gezählt würde. Die generierte Zahl gibt dann eine zufällige Indexposition unseres Arrays an.
Im nächsten Schritt weisen wir zwei Formularfeldern die Werte von den Variablen vornamen und nachnamen zu.
Jetzt erstellen wir das HTML Formular und schon ist der Namen Generator fertig.

Jetzt fügen wir das alles zusammen.

Jetzt muss man nur noch mit der Maus über die Formularfelder fahren und schon wird ein Vorname und ein Nachname generiert. Um noch mehr Namen anzulegen brauch man einfach nur die ganzen Namen in die Strings schreiben und mit einem Komma und Leerzeichen trennen.

Zunächst erstellen wir die Variable aktuellesDatum und setzen mit new Date() das aktuelle Datum. Mit den folgenden Variablen werden dann die Werte verarbeitet. getDate() für den Tag, getMonth() für den aktuellen Monat, getFullYear() für das aktuelle Jahr, das gleiche machen wir mit der Uhrzeit.
Um jetzt zu verhindern, dass einstellige Werte ausgegeben werden, wie zum Beispiel bei den ersten neun Tagen im Monat oder den Monaten Januar bis September, stellen wir den Werten mit den If-Schleifen immer eine Null voran. Bei der Funktion getMonth() gibt es die Besonderheit, dass wir den Wert mit 1 addieren müssen, das hat den Grund, dass von Januar an mit 0 begonnen wird. August wäre demnach 7, deswegen dann +1.
Und im letzten Abschnitt wird das Datum nach persönlichen Wünschen erstellt. So sieht die Ausgabe des oberen Scriptes aus.

Jetzt möchten wir, dass die Monate als Text ausgegeben werden und nicht als Ziffer. Dafür erstellen wir ein neues Array, dass wir dann mit den zwölf Monaten füllen. Beginnend mit 0, deswegen können wir nun die +1 wieder löschen. Bei der Ausgabe müssen wir nur noch den Arrayname angeben und die Variable Monat hinein schreiben.

Da durch die Zerlegung des Strings ein Array haben, können wir die Namen nun einzeln ansprechen mit dem passenden Index.
Die Ausgabe hierzu ist:

Natürlich können wir uns auch das ganze Array mit einem Mal ausgeben lassen dafür reicht es wenn wir den Namen des Arrays angeben ohne Index.

Die Ausgabe ist:

Neben dem Trennungszeichen, können wir auch das Limit des Array bestimmen, dafür müssen wir in der Split-Funktion folgende Werte angeben:

Jetzt würde das Array nur noch 2 Elemente zurück geben, da wir sie auf 2 begrenzt haben.

Diese Basis einer binären Zahl ist 2 und die des dezimalen Zahlensystems ist 10. Wir fangen erst einmal klein an und nehmen die Zahl 36.

36 : 2 = 18 Rest 0
18 : 2 = 9 Rest 0
9 : 2 = 8 Rest 1
4 : 2 = 2 Rest 0
2 : 2 = 1 Rest 0
1 : 2 = 0 Rest 1

Da wir eine dezimale Zahl in eine Binärzahl umwandeln wollen, müssen wir die 36 durch die Basis des anderen Zahlensystems teilen, also die 2. Wenn ein Rest bleibt schreiben wir die 1 hin, sonst kommt die 0. Das machen wir so lange, bis wir zu 1:2 kommen, hier kommt immer Rest 1 Raus. Es ist wichtig, dass dieser Rechenschritt immer gemacht wird, denn nun müssen wir die Zahl von unten nach oben lesen. Das Ergebnis unserer Umwandlung lautet: 100100

Eine weitere Zahl, jetzt ein wenig schwerer: 345.

345 : 2 = 172 Rest 1
172 : 2 = 86 Rest 0
86 : 2 = 43 Rest 0
43 : 2 = 21 Rest 1
21 : 2 = 10 Rest 1
10 : 2 = 5 Rest 0
5 : 2 = 2 Rest 1
2 : 2 = 1 Rest 0
1 : 2 = 1 Rest 1

Wenn wir jetzt wieder die Zahl von unten nach oben lesen kommt 101011001 heraus.
Jetzt gehen wir noch einen Schritt weiter und rechnen eine Zahl mit Komma um.

17,8 soll dafür als Beispiel dienen. Zunächst rechnen wir die 17 aus und dann was hinter dem Komma steht.

17 : 2 = 8 Rest 1
8 : 2 = 4 Rest 0
4 : 2 = 2 Rest 0
2 : 2 = 1 Rest 0
1 : 2 = 2 Rest 1

0,8 x 2 = 0,6 + 1
0,6 x 2 = 0,2 + 1
0,2 x 2 = 0,4 + 0
0,4 x 2 = 0,8 + 0
0,8 x 2 = 0,6 + 1
0,6 x 2 = 0,2 + 1
0,2 x 2 = …….

Das könnte jetzt immer weiter so gehen, bis zum umfallen könnten wir die Nachkommastellen berechnen, deswegen mache ich jetzt Schluss. Hierbei ist zu beachten, dass die Nachkommastellen nicht von unten nach oben, sondern von oben nach unten gelesen werden. Das Ergebnis ist: 10001,110011…
Da wir das nun gründlich besprochen haben geht es weiter in die andere Richtung.

Wir wandeln jetzt einfach mal die Binärzahl 1011011010 um.
Dafür müssen wir die Wertigkeiten der einzelnen Stellen kennen.

Der Wert steigt von rechts nach links um das doppelte. Jetzt brauchen wir einfach nur die Werte addieren, dort wo eine 1 steht.
512 + 128 + 64 + 16 + 8 + 2 = 730
Wie ihr seht, ist es sehr einfach die Zahlen umzuwandeln.

Als erstes überlegen wir uns, welche Daten verarbeitet werden müssen, da nehmen wir einfach wieder ein Adressbuch. Für den Anfang ist es leicht nachzuvollziehen. Vorab möchte ich noch erwähnen, das hier keine Sicherheitskomponenten intigriert sind, das werde ich gesondert in einem anderen Artikel beschreiben.

So zunächst unser Formular. Dafür brauchen wir Vorname, Nachname, Adresse, Postleitzahl und die Telefonnummer. Dafür erstellen wir eine Datei, die ich einfach mal adressbuch.html nenne.

So unser Formular ist nun fertig. Die Daten, die wir in das Formular eintragen, werden mit POST übertragen.

Jetzt müssen wir eine Datenbankverbindung erstellen, damit wir später die ganzen Daten auch verarbeiten können. Dafür erstellen wir eine Datei db_connect.php. Den Code nehmen wir einfach aus dem Artikel, den ich hier geschrieben habe: MySQL Datenbankverbindungen erstellen

Jetzt kommen wir zur eigentlichen Datei, da wo die ganze Action passiert. Hier müssen alle Werte übergeben werden und dann in die Datenbank geschrieben werden.

Und schon können wir die Datenbank füllen. Mit der If-Schleife fangen wir die Formular Absendungen ab, die keinen Inhalt haben. Also es müssen mindestens drei Zeichen in dem Feld Vorname und Nachname eingetragen werden. Natürlich könnte man nun drei Leerzeichen eintippen und man würde einen Eintrag hinzufügen. Dafür gibt es den PHP Befehl trim(), der entfernt Leerzeichen am Anfang und Ende von Strings.

Das ist nun ein erster Einblick, wie Daten über ein Formular verarbeitet werden können, so könnte ein einfaches Script zum Hinzufügen von Daten. Aber Vorsicht, das Script bietet keine Sicherheiten, also nur für private Zwecke benutzen.

Ein sicheres Passwort sollte immer Großbuchstaben, Kleinbuchstaben, Zahlen und Sonderzeichen enthalten und eine Mindestlänge von 8 Zeichen nicht unterschreiten.
Jetzt erst einmal ein Beispiel, wie man so etwas angehen könnte.
Unser Passwort könnte lauten: MkBwa17A8Ja.
Auf dem ersten Blick sieht es sicher aus, aber auch viel zu kompliziert, um es sich zu merken. Aber nur so lange, bis man das System kennt, wie es aufgebaut ist.
Denn aus MkBwa17A8Ja. wird:
Mein kleiner Bruder wird am 17 August 8 Jahre alt.

Ein anderes Beispiel könnte sein: A24.DiWudkdW,dvGb.
Dahinter verbirgt sich der Satz: Am 24. Dezember ist Weihnachten und dann kommt der Weihnachtsmann, der viele Geschenke bringt.

Wie man sieht, ist es recht einfach so ein kompliziertes Passwort zu generieren, ohne sich dabei einen Knoten ins Gehirn zu machen. Man baut sich nur eine kleine Eselsbrücke, die einem ans Erinnern hilft.