PracticU

Embedding Dynamic Data

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › Embedding Dynamic Data
מילון מושגים:
קונטרולר - רכיב שמתווך בין הממשק לבין הלוגיקה והנתונים, מקבל בקשות ומחליט כיצד לטפל בהן (למשל בדפוס MVC).
תבנית - מבנה בסיסי מוכן שממנו יוצרים פריטים דומים, כמו תבנית עמוד או תבנית מסמך.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
View - רכיב שאחראי על הצגת המידע למשתמש (התצוגה) בדפוס MVC. גם טבלה וירטואלית מבוססת שאילתה במסד נתונים.
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.
MySQL - מערכת ניהול מסדי נתונים יחסיים בקוד פתוח, נפוצה מאוד באתרים וביישומי אינטרנט.
npm - מנהל החבילות של Node.js, המשמש להתקנה ולניהול ספריות JavaScript בפרויקט.
JSON - פורמט טקסט קריא לייצוג נתונים מובְנים כזוגות מפתח-ערך, נפוץ להחלפת מידע בין שרת ללקוח.
Embedding Dynamic Data
עד עכשיו שילבנו רק views בצורה דינמית, ולא מידע. ההרצאה מראה איך להעביר נתון מה-business logic דרך הקונטרולר לתוך תבנית, במקום לכתוב אותו קבוע בקוד ה-HTML.
איך זה עובד
1. הבעיה: בדף הבית כתוב בקוד קבוע "10% discount on all products". האחוז עשוי להשתנות מיום ליום, ולכן הוא צריך להגיע ממסד הנתונים או מה-business logic.
2. פונקציה בשכבת הלוגיקה: ב-ProductsLogic מוסיפים פונקציה getCurrentPercent שמדמה גישה למסד הנתונים ומחזירה כרגע 12. חשוב לחשוף אותה החוצה, אחרת היא נשארת אפורה ולא בשימוש.
3. שליחה דרך הקונטרולר: הקונטרולר מבצע את ה-render של הדף, ולכן הוא מביא את הערך למשתנה currentPercent ומעביר אובייקט לפונקציית render. כל משתנה באובייקט נגיש מתוך ה-view. מספיק לכתוב את שם המשתנה, בלי currentPercent: currentPercent.
4. הצגה בדף: בדף הבית משתמשים בתגית של הדפסה בצד שרת, עם סימן שווה, ורושמים בתוכה את שם המשתנה. את סימן האחוז עצמו כותבים מחוץ לתגית.
5. פתרון קריסה: ההרצאה נתקלת בשגיאה כי MySQL לא מותקן. לכן מריצים npm i mysql, בודקים ש-XAMPP רץ, ומגדירים ב-app.js את global.config שנטען מ-config.json. אחרי רענון מוצג 12%.
פקודות והגדרות
- npm i mysql
- global.config = require("./config.json") ב-app.js
- getCurrentPercent ב-ProductsLogic, ו-currentPercent באובייקט שמועבר ל-render
בסיום אפשר להעביר מידע דינמי מהלוגיקה לתבנית ולהציג אותו בדף.
השיעור הבא בקורס: Using the locals Object

פרקי ההרצאה: Embedding Dynamic Data

  1. 00:00

    אחוז הנחה שכתוב בהארד קוד

  2. 00:44

    פונקציית getCurrentPercent בלוגיקה

  3. 01:43

    העברת המידע דרך הקונטרולר

  4. 02:25

    העברת אובייקט לפונקציית render

  5. 03:04

    שימוש במשתנה בתוך התבנית

תמלול ההרצאה: Embedding Dynamic Data

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

  1. 00:03

    כעת אנחנו רוצים לשלב מידע דינמי מה שלא באמת עשינו מה שעשינו זה רק שילבנו views בצורה דינמי אז בואו נראה איזה מידע אנחנו רואים שאנחנו רוצים או שיכולים לשלב יש לנו את דף הבית יש לנו את הבאוט אנחנו מסתכלים על דף הבית ואנחנו רואים פה פסקה מעניינת only now 10% discount on all products אבל איך בדיוק כתבנו את ה10% האלה אנחנו כתבנו אותם בהארד קודד בתוך הטמפלייט בתוך ה html יכול

  2. 00:42

    להיות שהיום זה 10% ויכול להיות שמחר זה בכלל 20% ומחרתיים זה יהיה 7% אנחנו רוצים שהמידע הזה יגיע כביכול נניח מדאטאבייס או לפחות מהביזנס לוג'יק אנחנו רוצים לגשת לביזנס לוג'יק עכשיו ובואו נבנה כאן אפילו איזושהי פונקציה get פרסנט גט קורנט פרסנט ונניח שאנחנו ניגשים לדאטאבייס ויש שם את האחוז הזה או שמחשבים

  3. 01:18

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

  4. 01:43

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

  5. 02:02

    אז בואו ניגש פה למעלה ונביא את ה-products logic require. נלך ל-business logic. ולפרודקטס לוג'יק וניקח כאן איזשהו משתנה, בואו נקרא לו קורנט פרסנט וניגש לפרודקטס לוג'יק נקודה גט קורנט פרסנט בצורה כזאת ועכשיו נבוא לפה

  6. 02:40

    ונעביר אובייקט לתוך פונקציית הרנדר. כל משתנה שאנחנו מביאים בתוך האובייקט הזה נגיש מתוך ה-vue שעבורו אנחנו עושים רנדר. אז נניח שיש לנו פה את המשתנה current% וכמובן אנחנו לא צריכים לרשום current% שווה current% כי ב-JavaScript אנחנו כבר יודעים שמספיק שרשמנו רק את השם שלו וזה כבר הופך להיות משתנה בשם current% באובייקט.

  7. 03:12

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

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

ההרצאה הקודמת: יצירת Partial View בנוד NodeJS

ההרצאה הבאה: Using the locals Object

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

  • Dynamic Registration
  • תרגול Dynamic Class
  • Data Contracts
  • Reactive Form - Dynamic Validators

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

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