Adressverwaltung Webanwendung

Einführung

In diesem Projekt lernst du, wie du eine neue Adresse erstellen und in einer Webanwendung verwalten kannst. Dabei werden die Implementierung eines Cascading Dropdowns für Bundesland und Stadt, die Formulareingabeüberprüfung, die Stillegung von Labels und das Rendern von neuen Adressen abgedeckt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Dropdown für die Bundesländer mit Daten aus der Datei data.js initialisierst
• Wie du die Funktionalität des Cascading Dropdowns für Bundesland und Stadt implementierst
• Wie du einem Klickereignis auf die Labels in der Tagliste hinzufügst, sodass das ausgewählte Label aktiviert und die anderen deaktiviert werden können
• Wie du die Felder Adresse, Kontaktperson und Telefonnummer vor dem Speichern einer neuen Adresse überprüfst
• Wie du einen neuen Adresselisteneintrag erstellst und der Adresseliste anhängst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Die DOM mithilfe von JavaScript zu manipulieren
• Benutzerinteraktionen und Ereignisse zu behandeln
• Formulareingabeüberprüfung und Datenverarbeitung umzusetzen
• HTML-Elemente dynamisch zu erstellen und anzuhängen

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

├── index.html
├── css
├── images
└── js
    ├── data.js
    └── index.js

Dabei gilt:

• index.html ist die Hauptseite.
• css ist der Ordner für die Styledateien.
• images ist der Ordner für Bilder.
• js/data.js enthält die Daten für die Bundesländer und Städte.
• js/index.js ist die JavaScript-Datei, die du vervollständigen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke des WebIDE, um das Projekt auszuführen.

Öffne anschließend "Web 8080" oben in der VM und aktualisiere die Seite manuell, um die Seite zu sehen.

Implementiere Cascading Dropdown für Bundesland und Stadt

In diesem Schritt wirst du lernen, wie du die Funktionalität des Cascading Dropdowns für Bundesland und Stadt implementierst.

1. Locate the provincechange() function in the js/index.js file. Suche die Funktion provincechange() in der Datei js/index.js.
2. This function is responsible for updating the city dropdown when a state is selected. Diese Funktion ist dafür verantwortlich, das Dropdown für die Städte zu aktualisieren, wenn ein Bundesland ausgewählt wird.
3. First, it gets a reference to the selected province dropdown element using document.getElementById("param_province"). Zunächst erhält es eine Referenz auf das ausgewählte Dropdown-Element für das Bundesland mithilfe von document.getElementById("param_province").
4. Then, it gets a reference to the city dropdown element using document.getElementById("param_city"). Dann erhält es eine Referenz auf das Dropdown-Element für die Städte mithilfe von document.getElementById("param_city").
5. Next, it retrieves the selected province index from the province dropdown using selectedProvince.value. Als Nächstes holt es sich den Index des ausgewählten Bundeslands aus dem Dropdown für die Bundesländer über selectedProvince.value.
6. It then uses the selected province index to access the corresponding cities from the towns array in the data.js file. Anschließend verwendet es den Index des ausgewählten Bundeslands, um auf die entsprechenden Städte im Array towns in der Datei data.js zuzugreifen.
7. Finally, it sets the length of the city dropdown options to the number of cities, and loops through the cities to set the text and value of each dropdown option. Schließlich setzt es die Anzahl der Optionen im Dropdown für die Städte auf die Anzahl der Städte und iteriert über die Städte, um den Text und den Wert jeder Dropdown-Option festzulegen.

// Implement the state-city cascading dropdown.
// Implementiere den Cascading Dropdown für Bundesland und Stadt.
function provincechange() {
  var selectedProvince = document.getElementById("param_province");
  var city = document.getElementById("param_city");
  var { value } = selectedProvince;
  var cities = towns[value];
  city.length = cities.length;
  for (var i = 0; i < cities.length; i++) {
    city.options[i].text = cities[i];
    city.options[i].value = i;
  }
}

Klickereignis zu Labels hinzufügen

In diesem Schritt wirst du lernen, wie du einem Label in der Tagliste ein Klickereignis hinzufügen kannst, das den Stil des ausgewählten Labels aktiviert und die anderen Labels deaktiviert.

1. Locate the addClick() function in the js/index.js file. Suche die Funktion addClick() in der Datei js/index.js.
2. This function is responsible for adding the click event to the labels. Diese Funktion ist dafür verantwortlich, das Klickereignis den Labels hinzuzufügen.
3. First, it gets a reference to all the label elements using document.querySelectorAll(".mark a"). Zunächst erhält es eine Referenz auf alle Label-Elemente mithilfe von document.querySelectorAll(".mark a").
4. Then, it gets a reference to the param_mark input field, which will store the selected label's index. Dann erhält es eine Referenz auf das Eingabefeld param_mark, in dem der Index des ausgewählten Labels gespeichert wird.
5. Next, it loops through the label elements and adds a click event listener to each one. Als Nächstes iteriert es über die Label-Elemente und fügt jedem ein Klickereignis-Listener hinzu.
6. Inside the event listener, it first removes the active class from all the labels using labels.forEach((l) => l.classList.remove("active")). Innerhalb des Ereignis-Listeners entfernt es zunächst die Klasse active von allen Labels mithilfe von labels.forEach((l) => l.classList.remove("active")).
7. Then, it adds the active class to the clicked label using label.classList.add("active"). Dann fügt es der geklickten Marke die Klasse active hinzu mithilfe von label.classList.add("active").
8. Finally, it sets the value of the param_mark input field to the index of the clicked label. Schließlich setzt es den Wert des Eingabefelds param_mark auf den Index der geklickten Marke.

function addClick() {
  var labels = document.querySelectorAll(".mark a");
  var input = document.getElementById("param_mark");

  labels.forEach((label, index) => {
    label.addEventListener("click", () => {
      labels.forEach((l) => l.classList.remove("active"));
      label.classList.add("active");
      input.value = index;
    });
  });
}

Adressinformationen validieren und speichern

In diesem Schritt wirst du lernen, wie du die Adressinformationen überprüfst und die neue Adresse in die Adressliste speicherst.

1. Locate the saveInfo() function in the js/index.js file. Suche die Funktion saveInfo() in der Datei js/index.js.
2. This function is responsible for validating the input fields and saving the new address. Diese Funktion ist dafür verantwortlich, die Eingabefelder zu überprüfen und die neue Adresse zu speichern.
3. First, it retrieves the values of the province, city, address, mark, name, and phone number input fields. Zunächst holt es sich die Werte der Eingabefelder für das Bundesland, die Stadt, die Adresse, das Label, den Namen und die Telefonnummer.
4. It then checks if the province, address, name, or phone number fields are empty. If any of these required fields are empty, it displays a warning dialog. Dann überprüft es, ob die Felder für das Bundesland, die Adresse, den Namen oder die Telefonnummer leer sind. Wenn eines dieser erforderlichen Felder leer ist, wird ein Warnungsdialog angezeigt.
5. If all the required fields are filled, it creates a new list item element (<li>) and populates it with the address information. Wenn alle erforderlichen Felder ausgefüllt sind, erstellt es ein neues Listenelement (<li>) und füllt es mit den Adressinformationen.
6. The new address list item includes the label (based on the selected mark), the full address (province and city), the address, and the name and phone number. Das neue Adresslistenelement enthält das Label (basierend auf der ausgewählten Markierung), die vollständige Adresse (Bundesland und Stadt), die Adresse sowie den Namen und die Telefonnummer.
7. Finally, it appends the new address list item to the .address-list element and calls the back() function to redirect to the address management page. Schließlich fügt es das neue Adresslistenelement dem Element .address-list hinzu und ruft die Funktion back() auf, um zur Adressverwaltungseite umzuleiten.

function saveInfo() {
  var { value: provinceIdx, options: provinces } =
    document.getElementById("param_province");
  var { value: cityIdx, options: cities } =
    document.getElementById("param_city");
  var { value: address } = document.getElementById("param_address");
  var { value: markId } = document.getElementById("param_mark");
  var labelNodes = document.querySelectorAll(".mark a");
  var label = labelNodes[markId].text;
  var { value: name } = document.getElementById("param_name");
  var { value: phone } = document.getElementById("param_phone");

  if (provinceIdx === 0 || !address || !name || !phone) {
    document.querySelector(".warning-dialog").style.display = "block";
    return;
  }

  var addressListElement = document.querySelector(".address-list");
  var newAddressElement = document.createElement("li");
  newAddressElement.innerHTML = `
    <div class="show-area">
      <label class="school">${label}</label>
      <span>${provinces[provinceIdx].text}${cities[cityIdx].text}</span>
    </div>
    <div class="show-address">
      <span>${address}</span>
      <a><img src="./images/edit.png" /></a>
    </div>
    <div class="show-info">
      <span>${name}</span>
      <span>${phone}</span>
    </div>
  `;
  addressListElement.appendChild(newAddressElement);
  back();
}

Indem du diese Schritte folgst, hast du die Funktionalität "Neue Adresse hinzufügen" im Projekt erfolgreich implementiert. Herzlichen Glückwunsch!

Der finale Seiteneffekt sollte wie folgt aussehen:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.