Inhaltsverzeichnis - it.bszam.deit.bszam.de/BMI/1516FSMT2.pdf · Abbildung 13: HTML-Code Formular auswerten und Wert Runden In den folgenden Zeilen wird das berechnete Ergebnis angezeigt

BSZAM Fachschule

31.01.2017

Projektarbeit BMI 1 von 15 FSMT2

Thema:

Erstellen eines BMI – Rechners für eine Website

Betreff: 1516FSMT2_Schueler

Name: xxxx

Vorname: xxxx

Gruppe: xxxxxxx

Email: xxxxx

Firma: BSZAM

Datum: 2016.04.25 xxx Schule: BSZAM , FS, DB, IT Lehrer FRD

Inhaltsverzeichnis 15/16 Projekt – FSMT2 Malz Christian BMI – Rechner für eine Website ............................... 2

1. Auftrag – Lastenheft ................................................................................................... 2

2. Projektplanung BMI - WEB-Rechner ........................................................................... 2

a. Zielschwerpunkte der Gruppe: ................................................................................ 2

b. Netzwerk ................................................................................................................. 2

c. Benutzeroberfläche ................................................................................................. 3

d. Editiermodus ........................................................................................................... 3

e. Datenauswertung .................................................................................................... 4

3. Realisierung ................................................................................................................ 4

a. Bestandsaufnahme ................................................................................................. 4

b. Übersichtlichere/Strukturierte gestalten ................................................................... 5

c. Erstellen der Benutzeroberfläche auf der Website ................................................... 9

d. Verknüpfung der Website mit der Datenbank .......................................................... 9

e. HTML-Programmierung der Startseite: Index.html..................................................10

f. HTML-Programmierung der Auswahlseite: Index.php ............................................10

g. HTML-Programmierung der Seite Eingabe.php ......................................................11

h. HTML-Programmierung der Seite Berechnung.php ................................................11

i. HTML-Programmierung der Seite login.php ...........................................................12

j. HTML-Programmierung der Seite clear.php ...........................................................12

k. HTML-Programmierung der Seite analyse.php (Kraus) ..........................................13

4. Computerdaten: .........................................................................................................14

5. Bewertung .................................................................................................................14

mailto:[email protected]

BSZAM Fachschule

31.01.2017


15/16 Projekt – FSMT2 Malz Christian BMI – Rechner für eine Website

1. Auftrag – Lastenheft

Für den internen Bereich einer Schulwebsite soll eine Anwendung für die Berechnung des Bodymaßindex erstellt werden. Die errechneten Daten sollen auf einem zentralen Server in einer Datenbank gespeichert werden. Damit der Nutzer auf die Datenbank zugreifen kann, muss er sich mit einen Benutzernamen und Passwort registrieren.

2. Projektplanung BMI - WEB-Rechner

a. Zielschwerpunkte der Gruppe:

Berechnung des BMI durch Alter, Gewicht und Körpergröße Durchschnittswerte der Geschlechter können angezeigt werden Datenverwaltung Datenbankspeicherung für den jeweiligen Anwender Einfache und übersichtliche Benutzeroberfläche

b. Netzwerk

Netzwerkplan

Abbildung 1: Netzwerkplan BMI - Rechner

BSZAM Fachschule

31.01.2017


c. Benutzeroberfläche

Ablaufdiagramm

Homepage aufrufen (Extern: www.it.bszam.de/BMIServer) (Intern cisco01 Netzwerk: 172.17.21.2/BMIServer)

Körperanalyse starten Eingabe der persönlichen Körpermaße

Berechnen / Speicherung in Da-tenbank

Ausgabe des berechneten Wertes

d. Editiermodus

Ablaufdiagramm


Editiermodus (nur für Berechtigte)

Anmelden mit Benutzername: (user1234)

Kennwort: (1234) Einsicht der ausgerechneten Werte

Datensätze löschen

Anzeige der überarbeiteten Datensätze

http://www.it.bszam.de/BMIServer


BSZAM Fachschule

31.01.2017


e. Datenauswertung

Ablaufdiagramm


Datenauswertung

Einsicht der Durchschnittswerte

3. Realisierung

a. Bestandsaufnahme

Übernahme des aktuellen BMI – Rechners. Durchsicht des Aufbaus des Rechners und Herausarbeitung der Verbesserungen. Verbesserungen: Übersichtlicher/Strukturierter gestalten Bilder und Animationen einfügen Überflüssige Buttons entfernen Angenehme Hintergrundfarben anlegen Verteilen auf mehrere Fenster Unterteilen in mehrere Schritte


BSZAM Fachschule

31.01.2017


b. Übersichtlichere/Strukturierte gestalten

Alter BMI – Rechner

Überarbeiteter BMI – Rechner Startseite

Abbildung 3: Überarbeiteter BMI – Rechner Firefox Abbildung 4: Überarbeiteter BMI – Rechner Opera

Abbildung 2: Alter BMI - Rechner

BSZAM Fachschule

31.01.2017


Als Beispiel: In Abbildung 2 zu sehen ist der alte BMI – Rechner. Dieser war zum Zeitpunkt der Übernahme sehr unübersichtlich und schlecht strukturiert. Wir haben uns dafür entschie-den diesen dann strukturiert wie eine Tabelle aufzubauen. In Abbildung 3 zusehen ist die erste Seite des BMI – Rechners auf der Schulhomepage www.it.bszam.de/BMIServer. Diese Seite wurde mit den Browser „Firefox“ aufgerufen. Dort sind die Umrisse der Tabelle noch zu erken-nen. In Abbildung 4 wurde die gleiche Homepage mit dem Browser „Opera“ aufgerufen. Hier werden die Umrisse nicht angezeigt so wie es eigentlich angedacht ist. Somit stellt jeder Brow-ser die Ansicht verschieden dar. Zudem haben wir die Funktion „Tabelle anlegen“ und „Benut-zer löschen“ entfernt. Mit dem jeweiligen Button kommt man in das nächste Menü – Fenster.

Ansicht Eingabe Körperdaten Hier kann der Anwender seine Daten wie Name, Alter, Geschlecht, Körpergröße und Gewicht eingeben. Diese Werte sind für die spätere Berechnung notwendig.

Abbildung 4: Ansicht Eingabe Körperdaten


BSZAM Fachschule

31.01.2017


Ansicht der berechneten Werte Durch das Betätigen des Buttons „Berechnen“ werden die eingegebenen Daten ver-rechnet und folgende Ansicht erscheint. Hier werden die vom Anwender eingegebe-nen Daten nochmals aufgezählt, sowie die Werte für des Normal- und Idealgewichts und der Body-Maß-Index angezeigt. Außerdem findet man unten eine Tabelle über die verschiedenen BMI-Bereiche.

Abbildung 5: Ansicht Berechnungsergebnis

Ansicht Login-Bereich zum Editieren der Daten Durch das anmelden kann man die in der Datenbank abgelegten Daten einsehen und gegebenenfalls Daten löschen.

Abbildung 6: Ansicht Login-Bereich

BSZAM Fachschule

31.01.2017


Ansicht Daten editieren Hier können die in der Datenbank abgelegten Daten angesehen und bei Bedarf ge-löscht werden. Zum Löschen bieten sich drei Möglichkeiten:

- Datensatz nach ID löschen Hier kann die gewünschte ID welche gelöscht werden soll eingegeben wer-den

- Falsche Datensätze löschen Hier werden sämtliche Datensätze gelöscht bei denen der BMI den Wert „0“ hat oder als Name „Vorname“ eingetragen ist.

- Alle Datensätze löschen Hier werden alle Datensätze in der Datenbank gelöscht.

Abbildung 7: Ansicht Daten editieren

Ansicht Datenauswertung

Hier werden die Durchschnittswerte der Frauen und Männer, sowie der Gesamtdur-schnitt der Daten in der Datenbank angezeigt.

Abbildung 8: Ansicht Datenauswertung

BSZAM Fachschule

31.01.2017


c. Erstellen der Benutzeroberfläche auf der Website

Für die leichtere Bedienung haben wir uns für die schrittweise Funktion (siehe Ablauf-diagramm Punkt 2 d) entschieden.

d. Verknüpfung der Website mit der Datenbank

Um die errechneten Werte zu Speichern muss der BMI - Rechner auf der Website mit der Datenbank verknüpft werden. Realisiert wird dies über die Sprache HTML. Die zu-gehörige Datenbank wurde von der Gruppe Körner/Herrmann erstellt.

BSZAM Fachschule

31.01.2017


e. HTML-Programmierung der Startseite: Index.html

Kurze Beschreibung für den BMI – Rechner auf der Startseite. Der hier gelb hinterlegte Link öffnet ein neues Fenster mit dem BMI – Rechner.

Abbildung 9: HTML-Code Startseite

f. HTML-Programmierung der Auswahlseite: Index.php

Zeile 19 – 21 sind die Befehle für den Button zum Starten der Körperanalyse. Zeile 26 – 28 sind die Befehle für den Button Daten editieren. Zeile 32 – 34 sind die Befehle für den Button Auswertung ansehen.

Abbildung 10: HTML-Code Auswahlseite

Hier sind die Befehle aufgelistet für das Bild wie in Abbildung 3 zusehen. Zum einen der Zugriff auf das Bild und die Einstellungen für die Höhe und Breite.

Abbildung 11HTML-Code Einfügen eines Bildes

BSZAM Fachschule

31.01.2017


g. HTML-Programmierung der Seite Eingabe.php

Zeile 15 – 17 sind die Befehle für die Eingabe des Namens. Zeile 19 – 20 sind die Befehle für die Eingabe des Alters. Zeile 22 – 27 sind die Befehle für den Button Geschlecht. Zeile 28 – 29 sind die Befehle für die Eingabe der Körpergröße. Zeile 32 – 33 sind die Befehle für die Eingabe des Gewichtes.

Abbildung 12: HTML-Code Eingabe der Körpermaße

h. HTML-Programmierung der Seite Berechnung.php

Hier wird in die Variable $bmi der berechnete Wert abgespeichert. Mit dem Befehl $_GET werden die Werte von der vorherigen Seite abgefragt. In Zeile 11 wird der Errechnete Wert auf zwei Stellen genau gerundet.

Abbildung 13: HTML-Code Formular auswerten und Wert Runden

In den folgenden Zeilen wird das berechnete Ergebnis angezeigt.

Abbildung 14: HTML-Code Berechnungsergebnis anzeigen

In Zeile 30 – 53 werden die von Anwender eingegeben Werte nochmals ausgegeben.

Abbildung 15: HTML-Code Ausgabe der Werte

BSZAM Fachschule

31.01.2017


In Zeile 98 – 125 wird eine Tabelle ausgegeben mit den Einteilungen für den Bodymaßindex.

Abbildung 16: HTML-Code BMI Tabelle anzeigen

Hier ist die Schnittstelle für die Übergabe der Werte in die Datenbank.

Abbildung 17: HTML-Code Werte in Datenbank speichern

i. HTML-Programmierung der Seite login.php

In diesen Zeilen wird das Fenster Login programmiert. Mit einer kurzen Beschreibung als Text und den Eingabefelder Benutzer und Passwort.

Abbildung 18: HTML-Code Login-Bereich

j. HTML-Programmierung der Seite clear.php

Mit diesem Befehl werden alle Datensätze in der Datenbank gelöscht.

Abbildung 19: Alle Datensätze löschen

BSZAM Fachschule

31.01.2017


Mit diesen Zeilen werden sämtliche Datensätze gelöscht bei denen der BMI den Wert „0“ hat oder als Name „Vorname“ eingetragen ist.

Abbildung 20: HTML-Code falsche Datensätze löschen

Mit Hilfe dieses Befehls kann die gewünschte ID, welche gelöscht werden soll, eingegeben werden.

Abbildung 21: nach ID löschen

k. HTML-Programmierung der Seite analyse.php (Kraus)

Mit diesen Befehlen werden die Durchschnittswerte der Frauen und Männer, sowie der Ge-samtdurschnitt der Daten in der Datenbank angezeigt.

Abbildung 22: HTML-Code Auswertung Durchschnitt Frauen

Abbildung 23: HTML-Code Auswertung Durchschnitt gesamt

Abbildung 24: HTML-Code Auswertung Durchschnitt Männer

BSZAM Fachschule

31.01.2017


4. Computerdaten:

5. Bewertung

Meilenstein Projekt Termin Bewertung

Auftrag - EMAIL 01.11.2015 2. EX

BSZAM Fachschule

31.01.2017


Realisierung/Funktion - Email

01.02.2016 3. EX

Abgabe 26.04.2016 2. SA IT

Documents

Inhaltsverzeichnis - it.bszam.deit.bszam.de/BMI/1516FSMT2.pdf · Abbildung 13: HTML-Code Formular auswerten und Wert Runden In den folgenden Zeilen wird das berechnete Ergebnis angezeigt