Fachinformatiker für Systemintegration YSQL14C ILS 2021 auf StudyAid.de

Fachinformatiker für Systemintegration YSQL14C ILS 2021 Cover - Fachinformatiker für Systemintegration YSQL14C ILS 2021

4.30

4,30 €

PHP und MySQL - Ajax

1. Nehmen Sie die Übung mit den Lottozahlen aus dem ersten Kapitel (ajax1.php, script.jsund lottozahlen1.php) des Hefts und modifizieren Sie diese Webseite so, dass die Lottozahlen als nummerierte Aufzählungsliste angezeigt werden. Folgende Schritte sind zu tun:
a)Benennen Sie die Datei ajax1.php in ajaxeinsendeaufgabe1.php, die Datei script.js in scripteinsendeaufgabe1.js und die Datei lottozahlen1.php in lottozahleneinsendeaufgabe1.php um.
b)Da die Formatierungen mit CSS erfolgen, kopieren Sie auch die CSS-Datei aus dem ersten Kapitel und verwenden Sie diese in der Einsendeaufgabe.
c)Referenzieren Sie in der Datei ajaxeinsendeaufgabe1.php die JavaScript-Datei scripteinsendeaufgabe1.js statt script.js.
d)In der JavaScript-Datei scripteinsendeaufgabe1.js geben Sie in deropen()-Methode lottozahleneinsendeaufgabe1.php stattlottozahlen1.php an.
e)In der PHP-Datei lottozahleneinsendeaufgabe1.php bereiten Sie die Lotto-zahlen als nummerierte HTML-Aufzählungsliste (mit den Tags <ol> und<li>) auf. Die wird dann nach der Anzeige über innerHTML automatisch vom Browser interpretiert (auch wenn das per Ajax nachgeladen wird).
Schicken Sie die Dateien ajaxeinsendeaufgabe1.php, scripteinsendeaufgabe1.jsund lottozahleneinsendeaufgabe1.php sowie die CSS-Datei im Quellcode oder als Ausdruck und einen Screenshot ein.

2.
a)Erstellen Sie zuerst die folgende Webseite ajaxeinsendeaufgabe2.php:
b)Erstellen Sie ein Verzeichnis img im Projektverzeichnis und fügen Sie dort drei Bilder mit den Namen b1.jpg, b2.jpg und b3.jpg ein, die in der Webseite ange-zeigt werden sollen. Verwenden Sie in dem Beispiel ebenfalls eine CSS-Datei zum Formatieren – auch der Bilder, wenn das notwendig ist.
Schicken Sie einen Screenshot der Webseite ein (noch ohne Funktionalität).

3. Wir haben in Aufgabe 2 eine Webseite mit mehreren Bildern in einer Tabelle vorbe-reitet, bei denen Eventhandler in der externen JavaScript-Datei registriert werden, die dort eingebunden wird. Mit den aufgerufenen Funktionen sollte beim Überstrei-chen eines Bildes mit der Maus in der Zelle daneben eine Zusatzinformation ange-zeigt werden. Wenn der Mauszeiger den Bereich wieder verlässt, wird der Anzeige-bereich gelöscht. Erstellen Sie zuerst im Projektverzeichnis ein Unterverzeichnis lib/js und dort eine Datei ajaxeinsendeaufgabe2.js, die ja in der Webseite selbst refe-renziert wird. Die JavaScript-Datei wird nun ein paar sehr interessante Stellen ent-halten.
a)Erzeugen Sie in der Datei zuerst ein XHR-Objekt und weisen dieses einer Variable mit Namen resOb zu.
b)Registrieren Sie bei jedem Bild eine anonyme Funktion für den Fall, dass der Mauszeiger den Bildbereich überstreicht. Dazu verwenden Sie den Eventhandler onmouseover. Zum Zugriff auf ein Bild verwenden Siedocument.getElementsByTagName(). Die Registrierung erfolgt wie immer erst nach dem vollständigen Erstellen des DOM-Baums – also in dem Abschnittwindow.onload = function() {...}.
c)Rufen Sie in jedem der anonymen Callbacks bei einem Bild eine FunktionsndReq() auf, der Sie einen Parameter übergeben sollen. Auf jedem Bildbereich wird also ein spezifischer Parameter der Funktion übergeben. Dieser dient in der aufgerufenen Funktion dann zur Steuerung, welche Information angezeigt wird und wo diese angezeigt wird. Die Tabelle enthält dazu in der zweiten Spalte Zel-len mit jeweils einer spezifischen ID. Diese ID ist nach einem gewissen Muster
vergeben, die eine Unterscheidung über einen einfachen nummerischen Algo-rithmus erlaubt, der an dem an die Funktion sndReq() übergebenen Parameter orientiert ist. Sie können also auf dem ersten Bild sndReq(0) aufrufen, auf dem zweiten sndReq(1) usw.
d)Definieren Sie im Skript nun eine Funktion sndReq() mit einem Übergabe-parameter, den Sie mit i bezeichnen (function sndReq(i) { ...}).
e)Da wir der Funktion sndReq() einen Parameter übergeben, können wir im Inneren der Funktion diesen Parameter wie gesagt dazu nutzen, gezielt per Ajax eine spezifische Textdatei auszuwählen, die je nach Parameter unterschiedlich angefordert wird. Dazu verwenden Sie im Inneren der Funktion eine switch-case-Anweisung, die den Parameter i als Testwert verwendet. Hier ist bereits der zentrale Part dessen, was Sie tun müssen:
f)Registrieren Sie in der Funktion sndReq() eine anonyme Funktion beim Event-handler onreadystatechange des XHR-Objekts. Wir können in der regis-trierten Funktion dann eine Funktion handleResponse() aufrufen, der wir einen Parameter übergeben. Und zwar den Wert, der bereits an sndReq() über-geben wurde. Wir reichen damit den Wert von i also weiter. Das geht so:
g)Der Wert dieses Parameters i wird in der Funktion handleResponse() zumZusammensetzen der ID genutzt, die die Tabellenzelle spezifiziert, inderdie Antwort des Servers angezeigt werden soll (document.getElementById("info" + i).innerHTML = resOb.responseText;). Diese ID war ja bewusst so gewählt, dass man sie über einen einfachen nummerischen Algorithmus aus dem Übergabeparameter-wert an sndReq() bestimmen kann. Das führt dazu, dass für das erste Bild daraus document.getElementById("info0").innerHTML wird, für das zweite Bild document.getElementById("info1").innerHTML usw.
h)Registrieren Sie bei jedem Bild eine anonyme Funktion für den Fall, dass der Mauszeiger den Bildbereich verlässt. Dazu verwenden Sie den Eventhandleronmouseout. Zum Zugriff auf ein Bild verwenden Sie auch wiederdocument.getElementsByTagName(). Rufen Sie dort eine Funktion out() auf.
i)Definieren Sie die Funktion out(), die einfach alle Anzeigebereiche leert. Wir brauchen hier keine individuelle Logik!
j)Erzeugen Sie die angeforderten Textdateien info0.txt, info1.txt und info2.txt mit sinnvollen Textinformationen.Schicken Sie die gesamten Quelltexte und insbesondere die JavaScript-Datei und die Textdateien sowie einen Screenshot ein, bei dem sich der Mauszeiger über einem Bild befindet und eine Zusatzinformation angezeigt wird.
4. Laden Sie in der aktuellsten Version des Praxisprojekts eine Bilddatei auf den Server und machen Sie einen Screenshot vom erfolgreichen Upload. Sie haben dazu nach dem Upload eine gewisse Zeit zur Verfügung, in der die Meldung angezeigt wird. Schicken Sie den Screenshot ein.

Diese Lösung enthält 1 Dateien: (zip) ~1.04 MB

Diese Lösung zu Deinen Favoriten hinzufügen?

Diese Lösung zum Warenkorb hinzufügen?

YSQL14C.zip ~ 1.04 MB

Siehe in der Beschreibung.

Weitere Information: 20.11.2024 - 22:57:05

	Kategorie:	Technik und Informatik
	Eingestellt am:	11.02.2022 von x1M4nu
	Letzte Aktualisierung:	11.02.2022
	0 Bewertung
	Studium:	Fachinformatiker Schwerpunkt Systemintegration
	Bisher verkauft:	15 mal
	Bisher aufgerufen:	685 mal
	Prüfungs-/Lernheft-Code:	YSQL14C
	Benotung:	1

Enthaltene Schlagworte:

Fachinformatiker Systemintegration 2021 ILS YSQL14C YSQL14C

Verkäufer:x1M4nu

Mitglied seit 2022

Alle Artikel anzeigen (14)

Alle Artikel durchsuchen

Eine Frage stellen

Verdienst: zw. 250-500€

x1M4nu abonnieren

Es folgen bereits 4 User!

Bewertungen

noch keine Bewertungen vorhanden

Benötigst Du Hilfe?

Solltest du Hilfe benötigen, dann wende dich bitte an unseren Support. Wir helfen dir gerne weiter!

Was ist StudyAid.de?

StudyAid.de ist eine Plattform um selbst erstellte Musterlösungen, Einsendeaufgaben oder Lernhilfen zu verkaufen.

Jeder kann mitmachen. StudyAid.de ist sicher, schnell, komfortabel und 100% kostenlos.

Rechtliches

Für diesen Artikel ist der Verkäufer verantwortlich.

Sollte mal etwas nicht passen, kannst Du gerne hier einen Verstoß melden oder Dich einfach an unseren Support wenden.

Alle Preise verstehen sich inkl. der gesetzlichen MwSt.

Mehr von x1M4nu