PracticU

הוספת תמונה למוצר

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › הוספת תמונה למוצר
מילון מושגים:
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
Northwind - מסד נתונים לדוגמה של מיקרוסופט, המדמה חברת מסחר ומשמש ללימוד ולהדגמת שאילתות SQL.
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.
שרת - מחשב או תוכנה שמספקים שירות למחשבים אחרים (לקוחות) ברשת, למשל אחסון קבצים, אתר אינטרנט או מסד נתונים, ומגיבים לבקשות שלהם.
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.

הוספת תמונה למוצר
ההרצאה משפרת את מראה טבלת המוצרים: צבעי שורות לסירוגין ועמודת תמונות, כשכל תמונה נבחרת לפי קוד המוצר.
השלבים העיקריים
1. צבעים בטבלה: ב-CSS מגדירים צבע רקע לשורות זוגיות ולשורות אי-זוגיות (למשל light green ו-light pink), ושורת הכותרת הראשונה ב-thead מקבלת light gray.
2. התמונות: ל-Northwind אין תמונות מוצרים, ולכן המרצה הכין מראש 77 תמונות והעלה אותן לתיקיית assets/images/products. שם כל קובץ הוא קוד המוצר.
3. עמודה חדשה: מוסיפים עמודה image ותא עם תגית IMG בעלת הקלאס ProductImage.
4. עיצוב התמונה: ב-CSS קובעים רוחב וגובה של 50 פיקסלים, יישור אנכי לאמצע, גבול 1px solid black ושוליים של חמישה פיקסלים.
5. מקור התמונה: ב-src כותבים את הנתיב לתיקיית התמונות ובתוכו, בתגית צד-שרת עם סימן שווה, את p.id ואחריו .jpg. מכיוון שהקוד בתוך הלולאה, כל מוצר מקבל את התמונה שלו.
אחרי רענון מוצגת לכל מוצר התמונה שלו, ואפשר עכשיו לשלב נתונים דינמיים גם בנתיבי קבצים ובעיצוב הטבלה.
השיעור הבא בקורס: טיפול בשגיאות צד שרת בנוד NodeJS

פרקי ההרצאה: הוספת תמונה למוצר

  1. 00:00

    צביעת שורות זוגיות בטבלה

  2. 00:50

    עיצוב כותרת הטבלה

  3. 01:31

    תמונות המוצרים של Northwind

  4. 02:29

    תמונות לפי קוד המוצר

תמלול ההרצאה: הוספת תמונה למוצר

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

  1. 00:03

    בואו טיפה נעשיר את ה-UI בקצת יותר צבעים ותמונות. דבר ראשון, ניגש ונייצר לעצמנו tr אנחנו רוצים nth of type נגדיר אותו כ-even יש לנו כאן background color ניקח light green בואו ניקח את זה ואותו הדבר עבור עוד, וניקח לייט פרין פה, נראה איך זה משפיע על הטבלה שלנו.

  2. 01:00

    כמו שאתם רואים אני לא מגיע כל כך מתחום העיצוב, את זה אנחנו רוצים טיפה לשנות נניח לאיזה אפור או משהו אחר, זה אומר שאנחנו רוצים את t-head בתוכו יש לנו t-r, First Child, Background Color, Light Gray נניח.

  3. 01:33

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

  4. 01:49

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

  5. 02:12

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

  6. 02:29

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

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

ההרצאה הקודמת: יצירת עמוד עבור המוצר

ההרצאה הבאה: טיפול בשגיאות צד שרת בנוד NodeJS

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

  • מצלמה - חלק 1 - צילום תמונה
  • הצגת תמונה ב-React
  • הוספת VMkernel
  • הוספת Request לטסט

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

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