מדריך 3: httpClient באנגולר - put

תוכלו למצוא גרסה אנגלית טובה לא פחות של המדריך בכתובת Angular app with PHP backend: part 3 (PUT)

מדריך זה הוא השלישי בסדרת המדריכים שמלמדת כיצד להשתמש ב-httpClient של Angular כדי לתקשר ב-AJAX עם צד השרת של האפליקציה. במדריך זה, נערוך את המידע באמצעות המתודה put.

לחצו כדי לראות את הקוד בפעולה

1. ה-HTML של הטופס

זוכרים את הרשימה שמציגה את שם המכונית ומחירה (אם אינכם יודעים במה מדובר אז נא להתחיל במדריך הראשון בסדרה), את הרשימה הזו נערוך כדי להוסיף יכולות של טופס הכוללות: אפשרות לעריכת המחיר והשם של כל פריט בנפרד. נוסף לכפתור שלחיצה עליו שולחת את המידע הערוך להמשך טיפול בצד הקלאס של הקומפוננטה.

src/app/app.component.html

<div id="theList">
  <h2>The list</h2>

  <div class="list-group">
    <div *ngFor="let item of cars;let i = index;" class="list-group-item row">
      <div class="col-md-4">
        <input type="text"
               [(ngModel)]="cars[i].model"
               class="form-control"
               required
               pattern="^[a-zA-Z]+$"
               #model="ngModel"
               [ngClass]="{ 'is-invalid': model.touched && model.invalid }">
      </div>
      <div class="col-md-4">
        <input type="number"
               [(ngModel)]="cars[i].price"
               class="form-control"
               required
               #price="ngModel"
               [ngClass]="{ 'is-invalid': price.touched && price.invalid }">
      </div>
      <div class="col-md-4">
        <input type="button"
               value="Update"
               class="btn btn-success btn-sm"
               [disabled]="model.invalid || price.invalid"
               (click)="updateCar(model, price, item.id)">
      </div>
    </div>
  </div>
</div>

כל אחד מהפריטים (כל מכונית במערך המכוניות) מודפס בשורה נפרדת של הרשימה.

הערכים של השדות קשורים בקשירה דו-כיוונית באמצעות ngModel לפריט ברשימה.

לשדות מחיר ושם הצמדתי local reference (ראה הסולמית ב-#model וב-price#).

קיימת ולידציה בטופס שמוודאת את תקינות הפרטים לדוגמה האם השם תקין, ובמידה והנתונים אינם תקינים השדה שאינו תקין מקבל קלאס is-invalid, שהוא קלאס של bootstrap, שיצבע את שולי השדה באדום.

ניתן ללחוץ על הכפתור רק במידה והנתונים בשדות תקינים אחרת השדה מקבל את ההגדרה disabled.

לחיצה על הכפתור מעבירה את המידע לקומפוננטה להמשך טיפול באמצעות המתודה updateCar. כשהמידע שעובר הוא מה-local reference.

2. קוד הקומפוננטה

במדריך זה, נוסיף לקומפוננטה את המתודה updateCar שקולטת את הערכים שמוזנים לטופס, ונרשמת למתודה update אשר ב-service. מכיוון שהמידע שמקורו בטופס מתקבל באמצעות-local reference אנחנו ממצים את ערך השדות באמצעות התכונה value.

src/app/app.component.ts

updateCar(name, price, id) {
    this.resetAlerts();

    this.carService.update({ model: name.value, price: price.value, id: +id })
      .subscribe(
        (res) => {
          this.cars    = res;
          this.success = 'Updated successfully';
        },
        (err) => this.error = err
      );
}

ההרשמה מתבצעת באמצעות subscribe בגלל שהמתודה update היא observable.

הצפי הוא לאחת משתי אפשרויות של מידע שיוחזר מה- observable:

• במקרה של שגיאה, נדווח למשתמש על שגיאה שארעה על ידי אכלוס המשתנה error.
• במקרה של הצלחה, נדווח למשתמש על הצלחת העברת הנתונים באמצעות המשתנה success. וגם נעדכן את רשימת המכוניות ברשימה המעודכנת שיחזיר ה-service.

3. ה-service

נוסיף ל-service את המתודה update שקולטת את המידע מהקומפוננטה, ומשדרת אותו לצד השרת באמצעות המתודה put של httpClient.

update(car: Car): Observable {
    return this.http.put(`${this.baseUrl}/update`, { data: car })
      .pipe(map((res) => {
        const theCar = this.cars.find((item) => {
          return +item['id'] === +car['id'];
        });
        if (theCar) {
          theCar['price'] = +car['price'];
          theCar['model'] = car['model'];
        }
        return this.cars;
      }),
      catchError(this.handleError));
}

המתודה שמשמשת לשידור המידע לצד השרת היא put שמקבלת את נתיב ה-url בתור פרמטר ראשון ואת האובייקט car שמכיל את המידע שהתקבל מהקומפוננטה.

המידע שמוחזר מצד השרת כולל מידע ב-header על הצלחת או כישלון הפעולה.

המתודה update צריכה להחזיר את רשימת המכוניות המעודכנת. לשם כך, השתמשתי בfind על רשימת המכוניות כדי לסנן את המכונית הרלוונטית לפי id, ואת המכונית הזו עדכנתי, ורק אז החזרתי את רשימת המכוניות.

בשגיאות מטפלת הפונקציה handleError.

4. צד השרת

זה קוד ה-PHP שמטפל בעדכון כל אחד מהפריטים בצד השרת:

<?php
require 'connect.php';

// Get the posted data.
$postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata))
{
  // Extract the data.
  $request = json_decode($postdata);
	
  // Validate.
  if ((int)$request->data->id < 1 || trim($request->data->model) == '' || (int)$request->data->price < 1) {
    return http_response_code(400);
  }
    
  // Sanitize.
  $id    = mysqli_real_escape_string($con, (int)$request->data->id);
  $model = mysqli_real_escape_string($con, trim($request->data->model));
  $price = mysqli_real_escape_string($con, (int)$request->data->price);

  // Update.
  $sql = "UPDATE `cars` SET `model`='$model',`price`='$price' WHERE `id` = '{$id}' LIMIT 1";

  if(mysqli_query($con, $sql))
  {
    http_response_code(204);
  }
  else
  {
    return http_response_code(422);
  }  
}

במקרה של שגיאה מוחזר קוד ממשפחת ה-400.

במקרה של הצלחה מוחזר קוד תגובה 204 , שאומר שהפעולה הצליחה אבל ללא החזרת מידע בגוף התגובה (payload).

במדריך הבא נלמד כיצד למחוק פריטים מהרשימה.

במדריך הבא נלמד כיצד למחוק מכוניות מהרשימה.

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים