הוספת מוצר חדש
href ל-/products/create, ובעיצוב ממקמים אותו בצד עם position: absolute (למשל top 150 ו-right 20).router.get לנתיב /create בלי async, שמבצע רק render ל-products/create. הוא מחזיר דף למילוי פרטים, ולא מוסיף כלום. זה לא שירות restful, ולכן יש ראוט אחד לתצוגת הטופס ואחר לשליחתו.details.ejs ל-create.ejs ובונים form עם method="post" ו-enctype="multipart/form-data" כדי לתמוך בתמונה. בפנים: input מסוג text לשם, number למחיר עם step שמאפשר ערכים עשרוניים, number למלאי, input מסוג file בשם image עם accept ל-jpeg, וכפתור submit שכתוב עליו add. לכל input חייב להיות name, אחרת הוא לא נשלח.npm i עבור express-fileupload ו-body-parser. ב-app.js מבצעים require לשניהם, ואז server.use(fileUpload()) ו-server.use(bodyParser.urlencoded({ extended: true })). כך אקספרס קולטת קבצים ונתוני טופס, שאינם JSON.router.post לנתיב /create, אסינכרוני, עם try/catch. יוצרים מוצר משדות request.body (name, price, stock), ומוסיפים אותו למסד הנתונים עם await ל-addProductAsync.request.files, לוקחים את הקובץ בשם image, מחשבים את הסיומת מ-lastIndexOf של נקודה, ושומרים עם file.mv לתיקיית assets/images/products בשם added-product.id ואחריו הסיומת.response.redirect לרשימת המוצרים. זה מחזיר ללקוח סטטוס 3xx ומורה לו לגלוש למקום אחר.create יחסי לקונטרולר, ולכן הכתובת המלאה היא /products/create. שם התמונה נקבע מקוד המוצר. אם נותנים שמות UUID, שם התמונה יישמר במסד הנתונים ולא ייגזר מה-ID.פרקי ההרצאה: הוספת מוצר חדש
תמלול ההרצאה: הוספת מוצר חדש
הטקסט המלא של הדקות הראשונות בהרצאה «הוספת מוצר חדש» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת אנחנו רוצים לאפשר למשתמש להוסיף מוצר חדש. אנחנו מתחילים קודם כל עם הלינק שדרכו הוא מוסיף מוצר חדש. אז בואו ניגש לכאן ונניח שיש לנו פה איזה שהוא לינק של create a new product ואנחנו רוצים לתת לו איזשהו עיצוב בשביל להזיז אותו טיפה הצידה בוא נניח שלא יהיה בדיוק מעל הטבלה.
create new product לינק ובואו ניתן לו href שמאפשר לגלוש ל/products/create שעדיין כמובן אין לנו שום דבר בלינק הזה בואו ניקח את הקלאס נשים ונגדיר לו שהפוזישן שלו הוא אבסולוט top 150 וה-right נניח.
זה בעצם מאפשר לנו לשים אותו טיפה בצד. בואו נראה קודם כל איך רואים את הלינק הזה. אז אם אנחנו הולכים למוצרים, יש לנו פה את הלינק. ברגע שאני מרחף עליו, כבר פה למטה אני רואה שהוא מפנה אותי לproducts.create שעדיין אין לי ראוט כזה.
אז אנחנו כמובן מופנים לפייג' 404. בואו נבנה ראוט כזה. אז אנחנו חוזרים בחזרה ואנחנו רוצים לגשת לקונטרולר שלנו. בקונטרולר אנחנו רוצים לבנות ראוט שמאפשר to get something.
בואו ניקח רגע את זה, נשים פה ונסגור אותו. עכשיו, למה get? הרי אנחנו רוצים להוסיף מוצר חדש. למה בעצם אנחנו הולכים ל-get? שכאשר אנחנו מתעסקים בטמפלייטינג אנג'ן אנחנו מחזירים דפים והיוזר עכשיו רוצה קודם כל לראות דף שבו הוא יכול להוסיף מוצר חדש ורק כשהוא לוחץ על לחצן ההוספה אז בעצם המוצר נשלח לסרבר.
בסרבר לצורך כך אנחנו בונים שני ראוטים ראוט אחד מקבל דף שרק מאפשר ליוזר למלא בו פרטים בואו נגיד וזה נקרא קריאייט.
למה קריאייט? כי כל הראוטים שנמצאים פה בפרודקטס קונטרולר, השמות הם יחסיים לזה. אז זה בדיוק מתאים ל-/products/create.
אנחנו לא צריכים פה אסינק, אפשר את זה להוריד. כל מה שאנחנו רוצים זה רספונס.רנדר ולומר שאנחנו רוצים את תיקיית פרודקטס בתוך views, קריאייט, איזשהו view שכבר אנחנו הולכים לבנות שנקרא קריאייט.
אז קודם כל הלינק יביא רק את ה-view הזה, שימו לב שזה get request. אחר כך הלחצן יבצע פוסט ריקווסט וזה יהיה בראוט אחר. ככה זה עובד, זה לא רסטפול סרוויס שיש פה רק ראוט אחד של בוא תוסיף לי מוצר, יש פה עוד ראוט של אני רוצה לקבל דף להוספת המוצר, אני רוצה לראות את הדף הזה.
כנ"ל גם בעדכון לדוגמה שנראה בהמשך. אז קודם כל מה אנחנו צריכים עכשיו לעשות כאשר אנחנו רוצים לראות את הדף הזה? בואו ניגש פה לאחד מהם, נניח ל-details ונשכפל אותו עבור create.
כאן בעצם אנחנו רוצים ליצור לעצמנו view שמאפשר להוסיף מוצר חדש. בואו נמחק את זה ונרשום add עכשיו אנחנו יכולים לקלוט את המידע ולהוסיף אותו ב-Ajax על ידי Javascript או משהו כזה או אנחנו יכולים לבנות פורם בכדי שלא יהיה לנו הרבה קוד בקליינט כרגע כ-Javascript Client Side בואו נבנה את זה כפורם ונשלח את המידע בצורה כזאת משהו שעדיין לא יצאנו לעשות
כאמור כל הקורס הזה הוא Server Site Node.js אבל בגלל שאנחנו מתעסקים כרגע עם E.J.S אז אנחנו חשוב שנראה גם את החלק של ה-HTML. מיותר לציין שאם יש לכם איזשהו חוסר ב-HTML כמובן לפני כל הסרטונים האלה של ה-IJS חשוב לעשות איזה review ולהשלים טיפה את ה-HTML אבל אני מניח שאתם כבר שוחים ב-HTML אם אתם כבר בסרטון הזה.
אז אנחנו ב-HTML רוצים פורום שמאפשר ליוזר לקלוט מידע. אקשן אנחנו רוצים לגלוש לפרודקטס סלאש קריאייט אבל רגע פרודקטס סלאש קריאייט זה בעצם הראוט הזה לא בדיוק הראוט הזה הוא גט הטופס צריך להיות פוסט אז אנחנו באים לפה ואומרים לו מתוד פוסט
ויש לנו עכשיו טופס שאם אנחנו מקליקים על לחצן submit בתוך הטופס אז הוא אמור לגלוש בפוסט ריקווסט, הוא לא יגיע לפה, הוא יגיע לראוט אחר שתכף נבנה.
אבל בואו נשלים את הטופס קודם כל. אנחנו רוצים עבור מוצר להביא גם תמונה, כי למוצר יש תמונה. אז הנה יש לנו פה את ה-N type שראינו בעבר, מולטי פארט פורם דאטה, זה מאפשר לטופס לתמוך בתמונות.
איזה רכיבים יש בתוך הטופס? בואו ניקח אינפוט עבור השם של המוצר type text יש לנו כאן placeholder name מה בעצם אנחנו רוצים מהיוזר זה רק עבור השם בואו נראה פה איזה שתי שורות ניקח את כל זה נשכפל אבל הפעם אנחנו רוצים number אנחנו רוצים שהוא ייתן לנו פרייס וניתן לו כאן step זה מאפשר להכניס
גם ערכים של נקודה עשרונית ב-number של ה-HTML, אנחנו צריכים האמת לכל input גם name, חובה אם אנחנו שולחים את זה בסדמית של טופס. זה השם של המוצר, name זה ה-price שאנחנו רוצים של המוצר.
יש לנו עוד אחד עבור ה-stock, stock הוא מספר שלם אז אין צורך בזה, ה-name שלו זה stock, ואנחנו רוצים עוד אחד input, typefile כמו שלמדנו בעבר איך אנחנו מעלים תמונות לשרת name זה image זה התמונה של המוצר accept אנחנו רוצים בעצם סיומות של מוצרים בואו ניקח כרגע נאפשר רק jpeg כי בוא נניח שכל המוצרים שלנו הם jpeg אז
נאפשר כל התמונות שלנו jpeg נאפשר גם הפעם רק jpeg כמובן אפשר כל סיומת שאנחנו רוצים בנוסף, מה שאנחנו רוצים זה איזשהו לחצן submit, button זה by default submit, וכתוב עליו add. הנה יש לנו כרגע את הטופס, בואו נבדוק, הוא בעצם מביא לנו אותו, נעצור, נריץ,
נרפרש, יש לנו פה create a new product, וכמובן שכדאי לנו להוסיף לו טיפה עיצוב, את זה אנחנו נבצע ב-CSS, בואו נחזור ל-CSS, ונגיד כזה דבר אם יש לנו אינפוטים ובטנים אז אנחנו רוצים font size נניח extra large נגדיל את הגופנים שלהם שיתאימו לשאר הטקסטים ספציפית עבור בואו ננסה אפילו
300 פיקסלים נראה איך זה מבצע פרש קצת לא הכי מתאים no file selected אולי נבצע 400 אוקיי נניח שזה בסדר נראה לי 300 יותר הגיוני נבצע כזה דבר אם אתה input file type file font size יש לנו הוא אנישיאל, תן לי, no file chosen, בסדר, נניח שזה מספק אותנו כרגע, סוג של עיצוב ממש פשוט, נראה פה גם איזה שתי שורות,
יופי. אז יש לנו כרגע טופס, אנחנו יכולים למלא אותו בפרטים, לבחור איזושהי תמונה, ללחוץ על לחצן add, אבל אין לנו כרגע ראוט כזה, אז הוא אומר לי product create, ווואלה, הוא לא מצליח לייצר או למצוא שום ראוט שמתאים
לפוסט שלנו. אנחנו רוצים בשלב הזה לגשת ולבנות את מה שצריך בקונטרולר עבור הוספה של מוצר חדש. הדבר הראשון שאנחנו צריכים להבין זה שאם