הצגת מידע באתר בצורת כרטיסיות

תמלול ההרצאה: הצגת מידע באתר בצורת כרטיסיות

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

1. 00:02

   אז אחרי שהצגנו לפחות את השמות של המוצרים והוצאנו את ה-URLים לקובץ קונפיגורציה אחד כללי שתומך גם ב-Development וגם ב-Production, אנחנו רוצים עכשיו לחזור לייצור הזה.

2. 00:19

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

3. 00:31

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

4. 00:49

   נניח אם הייתי יוצר פה איזושהי טייבל אז לטבלה אולי יש THead וב-THead יש TH, טייבל הדר, ואנחנו רוצים להציג את השם של המוצר ואולי יש לנו גם את המחיר ואולי יש לנו גם את הכמות במלאי ואז היינו יכולים ללכת וליצור T-Body וזה הגוף של הטבלה ופה אנחנו רוצים להתחיל לשכפל

5. 01:18

   את השורות אז היינו לוקחים את הקוד הזה ששכפל לנו ספנים ופשוט אומרים לו תשמע במקום ספן תשכפל לי בואו נשכפל פה tr ואז בתוך הtr אולי היה כדאי לרדת פה שורה היינו יכולים להגדיר את הtds של הtr ופה בעצם היה p.name נשכפל לp.price

6. 01:54

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

7. 02:17

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

8. 02:37

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

9. 02:57

   אז אני אוסיף כאן עם הפלוס, אני אוסיף קומפוננטה חדשה create נגדיר אותה כ-functional component נשים אותה בתוך product area ונקרא לה product card כלומר כרטיס אחד ויחיד ואנחנו רוצים שיהיה לה props כי אנחנו רוצים לקבל את המוצר מחוץ לקומפוננטה אלינו כלומר ה-parent שלנו זה ה-product list הוא ה-parent הוא הולך להביא לנו את המוצרים ומוצר שהוא מביא לי נכנס לפרופס

10. 03:36

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

11. 04:13

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

12. 04:46

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

13. 05:16

    אורייט? אז יש לנו פה שני אזורים. נניח דיו ראשונה, דיו שנייה, בואו נחזור ונבנה לעצמנו שני אזורים. הנה דיו ראשונה, הנה דיו שנייה.

14. 05:31

    בתוך הדיו הראשונה אנחנו רוצים להציג את מה שראינו פה. יש לנו את ה-Name, יש לנו Price ויש לנו Stock. אז אנחנו יכולים לגשת ל-Props שקיבלנו, שמה יושב לו המוצר שהביאו לנו, והנה ה-Name שלו, הנה ה-Price שלו, הנה ה-Stock שלו.

15. 05:58

    בואו נרד פה איזה שורה אולי, וגם פה, ואולי נגדיר שפה יושבת המילה Price, וזה דולר, ובואו נגדיר שפה יושבת המילה Stock, וכל אלה נמצאים בדיב הראשונה.

16. 06:26

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

17. 06:35

    אנחנו משתמשים בקומפוננטה מפה, מהפרודקט ליסט, אנחנו לא מציגים אותה כטבלה, בואו נעשה את זה פה אולי ופשוט נייצר לעצמנו בדיוק את אותו הדבר כמו מקודם, היה לנו זה dist.state.products ויש לנו פה map עבור כל מוצר, מה אתה אמור ליצור לי?

18. 07:03

    אתה אמור ליצור תגית product hard מסוג הקומפוננטה שבנינו בצורה כזאת. עכשיו קודם כל הוא צועק עליי הוא אומר לי תשמע אתה בעצם אמרת לי שיש לך props ולא הבאת לי אותו.

19. 07:23

    props שלנו נקרא product תן לי את המוצר איזה מוצר אתה רוצה שאני אעביר לתוך הקומפוננטה המוצר שלנו זה אותו אלמנט p שאנחנו משכפלים