מבוא ל-MVC - סרט חשוב - חובה לראות !!!

תמלול ההרצאה: מבוא ל-MVC - סרט חשוב - חובה לראות !!!

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

1. 00:03

   שלום לכולם וברוכים הבאים לקורס ASP.NET MVC. אז מה זה ASP.NET MVC? ASP.NET MVC זה טכנולוגיה מבית מייקרוסופט לפיתוח אתרי אינטרנט בצורה דינמית.

2. 00:18

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

3. 00:43

   בשנת 2002 כל המערכת של .NET יצאה לראשונה לעולם. אז פיתוח אתרי אינטרנט היה נקרא פשוט ASP.NET. באזור 2009 מיקרוסופט שינו הרבה דברים בטכנולוגיה של ASP.NET והוסיפו את ה-concept של MVC. בסרטון הזה אנחנו הולכים לראות מה זה בדיוק mvc שכמובן מתבסס על התשתית של

4. 01:07

   asp.net. אז mvc זה ראשי תיבות של מודל view קונטרולר ואנחנו הולכים לראות בדיוק מה זה אומר מודל view קונטרולר או mvc זה בעצם מה שנקרא design pattern זה מבנה כללי של מערכת או חלק ממערכת מבחינת הרכיבים שקיימים במערכת הקשרים השונים בין הרכיבים שקיימים ובעצם הווב הופך להיות

5. 01:35

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

6. 01:45

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

7. 02:00

   אז הuser רושם כתובת של אתר אינטרנט, בואו נניח שזה האתר שלנו, שאנחנו בנינו אותו במערכת של fp.net/mvc. ולכן הדפדפן שלו מייצר ריקווסט.

8. 02:11

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

9. 02:27

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

10. 02:43

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

11. 03:01

    אז הקונטרולר מייצר את המודל הזה, כנראה ממסד נתונים או מקובץ XML או מכל מאגר נתונים אחר, ומקבל בחזרה את הנתונים להצגה בדף. אז הקונטרולר פונה לחלק האחרון בדיזיין פאטרן mvc שזה בעצם ה-view וה-v ב-mvc ה-view מתאר את התצוגה עצמה מה בדיוק אנחנו רוצים

12. 03:27

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

13. 03:49

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

14. 04:08

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

15. 04:39

    בואו נוסיף קונטרולר נבצע add new controller ובוא נניח שאנחנו רוצים להציג מידע של מוצרים אז נקרא לקונטרולר הזה פרודקטס קונטרולר בואו נוסיף אותו סך הכל קונטרולר מבחינת המערכת זאת מחלקה רגילה לגמרי אנחנו רואים פה קלאס product controller שיורשת מהמחלקה של mvc שנקראת קונטרולר אז

16. 05:09

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

17. 05:30

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

18. 05:50

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

19. 06:04

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

20. 06:26

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

21. 06:42

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

22. 06:54

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

23. 07:09

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

24. 07:47

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

25. 08:04

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

26. 08:30

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

27. 09:23

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

28. 09:49

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

29. 10:23

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

30. 10:52

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

31. 11:05

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

32. 11:19

    לדוגמה אנחנו רוצים להציג איזה כותרת All Products. לאחר מכן אנחנו רוצים לייצר לעצמנו בוא נניח רשימה בולטים של כל המוצרים אז זה בעצם UL, אנחנו עכשיו רוצים לרוץ על כל המוצרים ולייצר אותם אנחנו נמצאים באזור שנקרא Vue, Vue זה בעצם קובץ שיש לו סיומת CSHTML. CS בגלל שאנחנו יכולים לכתוב בתוך הקובץ הזה

33. 11:52

    בפת C# ו-HTML כי אנחנו יכולים לכתוב גם תגיות HTML כמו שאתם רואים כאן. כאשר אנחנו כותבים תגית אנחנו פשוט פותחים סוגריים ואז המערכת יודעת שאנחנו בעצם בתגית.

34. 12:06

    כאשר אנחנו רוצים לכתוב c-sharp אנחנו כותבים שטרודל והמערכת יודעת שאנחנו עוברים ל-c-sharp. אז בואו נכתוב פה לולאת for each ונרוץ על המודל שקיבלנו מהקונטרולר.

35. 12:21

    כאן אנחנו רוצים להציג list item ובתוכו אנחנו רוצים להציג את ה-product name. פה בעצם סיימנו את התצוגה עצמה. בואו נחזור בחזרה.

36. 12:38

    אנחנו רואים שה-view מביא לנו בחזרה את התצוגה הזאת והקונטרולר מחזיר את זה ללקוח. אם נחזור בחזרה לפרזנטציה אנחנו רואים שהחזרה הזאת זה בדיוק החצב הזה.

37. 12:54

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

38. 13:06

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

39. 13:32

    אם אנחנו רוצים לראות מה קרה כאן על ידי די-באגינג, בואו נעצור, נשים כאן breakpoint ונלך ל-view ונשים גם כאן breakpoint.

40. 13:48

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

41. 14:08

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

42. 14:22

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

43. 14:46

    אנחנו בדיוק בשלב הזה. כעת אנחנו ממשיכים ואנחנו הולכים לבצע debug step over, מגיעים לאזור שבונה את המודל. כרגע המודל הונל.

44. 15:03

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

45. 15:33

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