PracticU

מחיקת מוצר קיים בנוד NodeJS

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › מחיקת מוצר קיים בנוד NodeJS
מילון מושגים:
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
POST - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או לעדכן משאב, למשל שליחת טופס.
DELETE - פקודת SQL למחיקת שורות מטבלה. גם שיטת HTTP לבקשת מחיקה של משאב בשרת.
GET - שיטת HTTP לבקשת מידע מהשרת בלי לשנות אותו. הפרמטרים מועברים בדרך כלל בכתובת.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
PUT - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או להחליף משאב קיים במלואו.
AJAX - טכניקה שמאפשרת לדף אינטרנט לשלוח ולקבל נתונים מהשרת ברקע ולעדכן את התצוגה בלי לטעון מחדש.

מחיקת מוצר קיים בנוד NodeJS
הפעולה האחרונה באתר היא מחיקת מוצר. ההרצאה בונה דף אישור שמציג את פרטי המוצר, ואחריו ראוט POST שמוחק את המוצר ואת קובץ התמונה שלו.
השלבים העיקריים
1. קישור מחיקה: בדף הפרטים מוסיפים קישור delete לנתיב /products/delete/ ואחריו ה-id.
2. ראוט GET: מעתיקים את ה-GET של ה-edit ומשנים ל-delete. אם המוצר לא קיים, לא מחזירים 404 אלא מבצעים redirect לרשימת המוצרים, כי אין מה למחוק. אם קיים, מבצעים render לדף delete עם המוצר.
3. דף האישור: משכפלים את details.ejs ל-delete.ejs, ושואלים "Are you sure you want to delete this product?" עם השם, המחיר, המלאי והתמונה. מוחקים את הקישורים edit ו-delete, ומשאירים back to list מחוץ לטופס.
4. טופס: action שמצביע על /products/delete/ עם ה-id, ו-method="post". טופס HTML תומך רק ב-GET וב-POST, לא ב-put, patch או delete. את אלה אפשר היה להשתמש רק עם AJAX.
5. ראוט POST: router.post ל-/delete/:id. מקבלים את ה-id, ו-await ל-deleteProduct של ה-products logic. אין צורך בולידציה.
6. מחיקת התמונה: מבצעים require ל-fs, בודקים אם קיים קובץ בנתיב assets/images/products/<id>.jpg, ואם כן מוחקים אותו ב-unlink. אם המחיקה נכשלת, אין מה לעשות מלבד להשאיר את הקובץ. בסיום עושים redirect לרשימה.
7. בדיקה: מוחקים את ה-Pitch, והמוצר והתמונה נעלמים. אחר כך מוחקים את הבננה, ונשארים 78 מוצרים.
שימו לב
מוצר שיש לו הזמנות בטבלאות אחרות לא יימחק ממסד הנתונים, ומתקבלת קריסה בצד השרת. בפרודקשן צריך להציג במקרה כזה הודעה כללית ולא מידע על מסד הנתונים, ועל כך בנושא האבטחה.
בסוף הקורס נבנה אתר שלם ב-Node.js ו-Express עם EJS: דף בית, About, רשימה, פרטים, הוספה, עריכה ומחיקה של מוצרים.

פרקי ההרצאה: מחיקת מוצר קיים בנוד NodeJS

  1. 00:00

    לינק מחיקה ודף אישור

  2. 00:44

    ראוט get לדף המחיקה

  3. 01:23

    בדיקה אם המוצר קיים

  4. 02:20

    דף delete על בסיס details

  5. 03:08

    פרטי המוצר ולחצן Back to List

  6. 03:51

    טופס post למחיקת המוצר

  7. 04:34

    טפסים תומכים רק ב-get ו-post

  8. 05:30

    בדיקת דף אישור המחיקה

תמלול ההרצאה: מחיקת מוצר קיים בנוד NodeJS

הטקסט המלא של הדקות הראשונות בהרצאה «מחיקת מוצר קיים בנוד NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:03

    הדבר האחרון שנשאר לנו לבצע זה לאפשר למשתמש למחוק מוצר. כאן אנחנו רוצים לגשת שוב פעם ל-Details ולהוסיף למשתמש עוד לינק שיאפשר to delete את המוצר.

  2. 00:25

    במובן אנחנו רוצים להפנות אותו לאיזה דף שישאל אותו אם אתה באמת רוצה למחוק את המוצר הזה, להציג לו את הפרטים של המוצר ואז רק אם המיוזר מאשר שהמוצר יימחק.

  3. 00:38

    יש לנו כאן את הפרודקס delete, יש לנו את ה-id, לאן זה מפנה אותנו? כאן אנחנו רוצים לגשת לקונטרולר ולבנות שוב פעם משהו דומה למה שעשינו מקודם. בואו נעתיק קודם כל את הגט של ה-edit שהוא מאוד דומה לגט של ה-delete.

  4. 01:04

    במקום edit יש לנו delete, יש לנו את ה-id כי אנחנו רוצים לקבל אותו, הנה ה-id שלו, ואנחנו רוצים לבצע מחיקה של המוצר. אז דבר ראשון, מה שכדאי לבצע זה לראות האם באמת קיים לנו מוצר כזה.

  5. 01:26

    בואו נבצע שאלה. אם not product, סורי, רגע, זה אמור להיות פה. אם not product, מה שאנחנו רוצים זה או להחזיר לו 404 או להפנות אותו נניח לכל המוצרים.

  6. 01:46

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

  7. 02:06

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

  8. 02:30

    אז בואו נבנה את דף ה-delete הזה שלמעשה הוא דומה לדף ה-details הזה. אם אני חושב נכון, בואו נשכפל את ה-details, מה יכול להיות רע? delete.

  9. 02:50

    ומה שאנחנו רוצים לעשות זה לשאול את המשתמש של ה-RU-Tool You want to delete this product? ולתת לו כאן את כל המידע לגבי המוצר למחיקה. יש לנו את השם שלו, את ה-Price, את ה-Stock, יש לנו את התמונה, יש לנו כאן גם אפשרות לתת לו Back to List, אנחנו לא רוצים את אלה, לא הגיוני שמפה הוא יעשה לי edit או delete

  10. 03:35

    ואנחנו כן רוצים לעטוף את כל המידע הזה באיזשהו form למרות שלא בהכרח היינו חייבים לעטוף הכל היינו יכולים לעטוף רק חלק אבל בואו נעטוף את זה באיזשהו form אני רוצה רגע לראות אבל ב-create זה היה מחוץ ל-form סבבה אז גם פה זה יהיה מחוץ ל-form רק בשביל לשמור על אחידות.

  11. 04:06

    פורם אמור to action ל-products/delete עם ה-ID של המוצר. בואו ניקח כאן product ID, המתוד ו-post. שוב, לפורם יש רק get או post, אין לו put, patch ו-delete.

  12. 04:34

    זה שייך לעולם ה-HTML. לכן הקונטרולרים שלנו, כאשר אנחנו שולחים בחזרת המידע, הנה אנחנו יכולים לראות את זה גם פה, עשינו פוסט אפילו שרצינו to add it כי זה לא restful service אנחנו לא שולחים את המידע על ידי אג'קס או משהו כזה שכן יש שם אפשרות להשתמש בפוסט,

  13. 04:57

    פוט, פאץ' ודיליט בגלל שזה פורם זה רק פוסט או גט ולכן אנחנו מחויבים להשתמש או בגט או בפוסטים פה.

  14. 05:06

    אז בואו נסתכל מה עוד נשאר לנו יש לנו פה את כל המידע של המוצר כאן אנחנו רוצים איזשהו לחצן יגיד למשתמש delete יש לנו כאן למטה את ה-back to list נראה לי שפה יש לנו רק את הפוטר אני לא רואה עוד איזה משהו נוסף ואנחנו יכולים לגשת ולבנות את הפונקציית פוסט הזאת אבל לפני זה בואו נבדוק עד כאן איך זה עובד

  15. 05:38

    אני הולך לצ'אי אני עומד delete אני לוחץ על delete וכמובן ששכחתי להריץ את זה שוב פעם פרודקט שי דיליט יופי אריו שוי רנטו דיליט טיס פרודקט בלה בלה בלה הנה לחצן דיליט

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: עריכה ועדכון של מוצר קיים בנוד NodeJS

ההרצאה הבאה: הכרות עם האתר הפרוץ שלנו - Insecure Website Review

הרצאות קשורות מקורסים אחרים

  • מחיקת מוצר בריאקט
  • מחיקת VPC - ב-AWS
  • תיעוד של מחיקת קובץ
  • גלישה ל-Route שאינו קיים

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React