מדריך 4: httpClient באנגולר - delete

לגרסה האנגלית של המדריך Angular app with PHP backend: part 4 (DELETE)

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

מדריכים נוספים בסדרה:

1. Observable באנגולר - לא חובה אבל מומלץ מאוד
2. הבאת נתונים מצד השרת באמצעות המתודה get
3. יצירת רשומה חדשה באמצעות המתודה post
4. עדכון רשומה קיימת באמצעות המתודה put
5. מחיקת רשומה באמצעות המתודה delete
6. ההקשר הרחב REST API

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

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)">
         
        <input type="button"
               value="Delete"
               class="btn btn-danger btn-sm"
               (click)="deleteCar(item.id)">

      </div>
    </div>
  </div>
</div>

כל פריט של הרשימה מודפס בשורה נפרדת.

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

2. קוד הקלאס של הקומפוננטה

במדריך זה, נוסיף לקומפוננטה את המתודה deleteCar שקולטת את ה-id של הפריט שמעוניינים למחוק, ונרשמת למתודה delete שמספק ה-service.

src/app/app.component.ts

deleteCar(id) {
    this.resetAlerts();
    this.carService.delete(+id)
      .subscribe(
        (res: Car[]) => {
          this.cars = res;
          this.success = 'Deleted successfully';
        },
        (err) => this.error = err
      );
  }
}

השימוש ב- subscribe בגלל שהמתודה delete היא observable.

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

3. ה-service האנגולרי

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

delete(id: number): Observable {
    const params = new HttpParams()
      .set('id', id.toString());

    return this.http.delete(`${this.baseUrl}/delete`, { params: params })
      .pipe(map(res => {
        const filteredCars = this.cars.filter((car) => {
          return +car['id'] !== +id;
        });
        return this.cars = filteredCars;
      }),
      catchError(this.handleError));
}

המתודה שמשמשת לשידור המידע לצד השרת היא delete שמקבלת את נתיב ה-url בתור פרמטר ראשון ואת הפרמטר params אשר מכיל את ה-id של הפריט שמיועד למחיקה.

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

במקרה של הצלחת המחיקה, המתודה filter משאירה מהעותק של רשימת המכוניות שמוחזק ב-service את כל הפריטים מלבד זה שעבר מחיקה.

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

4. צד השרת

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

<?php
require 'connect.php';

// Extract, validate and sanitize the id.
$id = ($_GET['id'] !== null && (int)$_GET['id'] > 0)? mysqli_real_escape_string($con, (int)$_GET['id']) : false;

if(!$id)
{
  return http_response_code(400);
}

// Delete.
$sql = "DELETE FROM `cars` WHERE `id` ='{$id}' LIMIT 1";

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

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

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

במדריך הבא נסביר את הארכיטקטורה של REST API שלפיה עקרונותיה נכתב צד השרת של האפליקציה.

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

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