יצירת עמוד עבור המוצר
products-controller.js, מביאים אליו express, את ה-products logic ואת מודל המוצר, בונים express.Router וחושפים אותו עם module.exports.router.get לנתיב /list, עם פונקציה אסינכרונית ו-try/catch. בינתיים ב-catch רק מדפיסים את השגיאה. הטיפול בשגיאות מול הלקוח יגיע בהמשך. בתוך ה-try מביאים את המוצרים עם await ל-getAllProductsAsync ועושים render של products/list, עם המוצרים כמשתנה.app.js: משכפלים את שורת ה-use ורושמים שגלישה ל-/products מועברת ל-products controller. הנתיב בקונטרולר יחסי, ולכן הכתובת המלאה היא /products/list.list.ejs בתיקיית products על בסיס דף הבית. ה-include של header ו-footer צריכים לעלות תיקייה אחת ולהגיע ל-layout. מוסיפים H2 שמציג את מספר המוצרים דרך length של המשתנה, וכך מוצג למשל 77 מוצרים.for (const p of products) בתגית צד-שרת, פותחים ב-TR ומשתילים TD עם p.name, p.price ו-p.stock. חוזרים לצד הלקוח בכתיבת תגית HTML רגילה, ולצד השרת בתגית עם אחוז.1px solid blue, ומיישרים את התא הראשון לשמאל.פרקי ההרצאה: יצירת עמוד עבור המוצר
תמלול ההרצאה: יצירת עמוד עבור המוצר
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת עמוד עבור המוצר» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת סוף סוף אנחנו רוצים להגיע להארד קור ובעצם לשלב את המוצרים באתר. אנחנו רוצים שהדף הזה יעבוד ויביא לנו את המוצרים ממסד הנתונים ואנחנו רוצים לראות אותם בואו נניח בטבלה.
אז לצורך כך בואו נתחיל הפעם מהצד של הקונטרולר. בואו נצרף עוד קונטרולר, נקרא לו product controller.js ואנחנו רוצים להתחיל להביא את הדברים הדרושים יש לנו כאן const express require express והדבר הראשון אנחנו רוצים גם לגשת לפרודקט לוג'יק כי כמובן אנחנו צריכים את כל המוצרים require לך בבקשה לביזנס לוג'יק ותביא לי
את הפרודקט לוג'יק אנחנו רוצים את המוצר פרודקט הספציפי כלומר את המודל שלנו Require, לך לתיקיית המודל ותביא לנו את המוצר, בואו נבנה את הראוטר, יש לנו כאן את express.router, נחשוף אותו החוצה, module exports router ואנחנו יכולים עכשיו לגשת ולהתחיל לבנות
את הראוטים השונים. אז יש לנו router.get, אם גולשים לנתיב שהוא יחסי למה שאנחנו הולכים לרשום ב-app.js שזה בעצם המוצרים אז אנחנו רוצים לגשת ולבנות פונקציה אסינכרונית.
הנה היא, היא מקבלת כמובן request.response ואנחנו רוצים פה try catch. ב-catch כרגע מה שאני אעשה זה console.error רק נציג את השגיאה על המסך בהמשך נטפל איך בדיוק אנחנו מחזירים שגיאות ללקוח.
נבנה פה products await לפרודקטס לוג'יק נקודה get all products async בצורה כזאת ואנחנו רוצים to ריספונס רנדר ואנחנו רוצים אם היוזר גולש לפרודקטס סלאש ליסט לדוגמה אז אנחנו רוצים להביא לו כל המוצרים האלה מה בעצם עשינו פה כאן אמרנו לאן היוזר גולש פרודקטס סלאש ליסט שימו לב שאנחנו לא בונים כרגע ארסט פול סרוויס
היוזר הוא לא כרגע שירות או ליתר דיוק מישהו שרוצה מאיתנו את השירות של רק המוצרים, הוא רוצה דף של מוצרים. אנחנו בענייני טמפלייטינג אנג'ן, אנחנו רוצים לייצר לו דף כבר מוכן.
כמובן שאם יש לנו רסטפול סרוויס, מה שאין לנו כרגע בפרויקט הזה, אבל אם יש לנו רסטפול סרוויס בפרויקט הזה או בפרויקט אחר, יכולים מפה לבצע גלישה ל-Restful Service כמו שראינו בעבר עם המיקרו סרוויסס לדוגמה ולהביא משם רק את המוצרים זה בסדר אבל שימו לב שאנחנו בונים כרגע מערכת שהיא דפים בצד של השרת יוזר גולש לפרודקט סלאש ליסט
הוא כנראה רוצה את רשימת המוצרים אז אנחנו מביאים לו לא משנה איך אם אנחנו גולשים ל-Restful סרוויס אחר או אם יש לנו בעצם את הביזנס לוג'יק אצלנו, מביאים רשימה של מוצרים ושותלים לו את זה בתוך הדף.
כאשר אנחנו הולכים עוד שנייה לבנות את הדף, אז בדף אנחנו הולכים לבצע הצגה של המוצרים. ככה זה עובד בטמפליטינג אנג'ן. שימו לב רק שעוד לא טיפלנו במנגנון השגיאות. אז בואו ניגש כרגע ונבנה את הדף עצמו.
כאן יש לנו את כל הנושא של ה-views, אבל אנחנו כבר לא נמצאים באזור הכללי של דפים כלליים כמו דף בית, אבאוט, כותרת וכולי שהם היו ה-Layout, אלא אנחנו רוצים לבנות את כל הדפים שקשורים ל-Products.
וב-Products אנחנו רוצים איזשהו דף שיתאר את ה-List עצמו. זה בעצם מה שכתבנו כאן, Render Products List. בואו ניגש ונבנה לעצמנו דף, יש לנו כאן list.ejs וניקח, האמת אולי ניקח את דף הבית ctrl-a, ctrl-c ופשוט נשנה את מה שצריך.
כן, יש לנו פה את הכותרת ואת הפוטר, באזור של המיין הולך להיות לנו משהו אחר, אבל שאני לא אשכח, בואו כבר ניגש לפה ונגדיר את ה-Products Controller Wire בתיקיית ה-Controllers, יש לנו את Products Controller ואנחנו רוצים לשכפל את כל ה-Use הזה ולרשום לו פה אם ה-User גולש ל-Products תן ל-Products את השליטה לאיפשהו
בפרודקט ואז הפרודקט קונטרולר יקבל את השליטה ובפרודקט קונטרולר אנחנו רואים שזה בעצם הנתיב היחסי. זאת אומרת שזה אומר לנו אם היוזר גולש ל/products אנחנו רוצים to render את product/list לא אם היוזר גולש ל/products/list כמו שתיארתי בהתחלה ואז אנחנו הולכים להביא לו את הדף הזה.
מה בעצם אנחנו רוצים להביא לו בדף? אז ראשית, ה-Header EJS, ה-Partial Header לא נמצא באותה תיקייה שלנו.
אנחנו רוצים לעלות תיקייה אחת למעלה, להגיע ל-Layout ובתוכו להגיע ל-Header. אותו הדבר אנחנו רוצים ב-Footer.