יצירת Layout

תמלול ההרצאה: יצירת Layout

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

1. 00:00

   כעת אנחנו עוברים לנושא שנקרא Layout. Layout זה מידע שאנחנו רוצים שיהיה תקף לכל מיני Views שיש לנו בלי לכתוב את המידע הזה שוב ושוב באותו View.

2. 00:14

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

3. 00:30

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

4. 00:54

   אותו בכל הדפים אז יש לנו כרגע מחלקה שנקראת product זה המודל שלנו בואו נוסיף controller עבור המוצרים יש לנו פה פונקציית אינדקס בוא נניח שהיא ניגשת לדאטאבייס ומביאה לנו מוצר אחד יש לנו פה product שווה new product יש לנו פה product ID בוא נניח 100 יש לנו פה product name יש לנו פה price ואנחנו רוצים לשלוח את המוצר הזה ל-view

5. 01:39

   כעת בואו ניצור view נוסיף view עבור האינדקס create a strongly type view אפשר להגיד שהוא נמצא בתוך name space שנקרא layout בתוך תקייה שנקראת מודלס והמוצר שלנו נקרא פרודקט המחלקה נקראת פרודקט בואו נציג את הפרטים של המוצר יש לנו פה פרודקט דיטיילס יש לנו פה את הפרודקט ניים זה נמצא במודל פרודקט ניים יש לנו פה את הפרייס וזה נמצא בפרייס ויש לנו פה את

6. 02:49

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

7. 03:26

   עכשיו בואו נסתכל רגע על ה-Page View Source ונראה שבעצם מה שרשמנו בתוך ה-View שלנו זה מה שהלקוח קיבל וזה לא מסמך תקני של ה-HTML יכול להיות שיש איזשהו דפדפן שלא יסכים להציג את הפרטים האלה כי הוא יגיד רגע רגע ה-HTML צריך תגית HTML המידע שאתם רוצים להציג צריך להיות בתוך תגית Body איפה כל התגיות האלה?

8. 03:53

   אז כמובן שיטה אחת הייתה להגדיר את המידע הזה כאן זאת אומרת לפתוח פה תגית HTML תגזור אותה ובתוכה תגיד head וbody וכולי אבל אז זה אומר שאנחנו צריכים לחזור על הקוד הזה בכל הקבצים שאנחנו בונים בכל הviews שאנחנו בונים זה כמובן לא הגיוני שנחזור על קוד ולכן מה שחשוב לעשות זה להגדיר layout שזה דף שמחזיק את הסידור הזה ואנחנו רוצים שכל view ידע לקחת את המידע הזה מאותו דף

9. 04:29

   layout ולשלב את המידע הכללי במידע הספציפי שה-view חושף ללקוח. אוקיי, אז איך עושים את זה? מה שאנחנו צריכים לעשות קודם כל זה להוסיף דף נפרד עבור ה-Layout.

10. 04:45

    הדף הזה צריך להיות בתיקיית Views. נהוג שבתוך התיקיית Views נפתח עוד תיקייה ונקרא לה Shared, שבה יש מידע שמשותף לכל ה-Views. בתוך Shared נוסיף View, נקרא לו UnderlineLayout, נהוג ש-Layouts יתחילו בתו Underline, אין צורך להגדיר Strongly Type, נגדיר אותו בצורה כזאת ניפטר מכל מה שנמצא בתוכו ונגדיר בתוכו את

11. 05:27

    מה שאנחנו רוצים שיהיה משותף לכל הדפים לדוגמה תגית Doctype שמגדירה לדפדפן שאנחנו נמצאים בגרסה בוא נניח של html 5 לאחר מכן יש לנו תגית html בתוכה יש לנו את ה-head בתוך ה-head בוא נגדיר איזשהו סטייל בתוך הסטייל נגדיר body background color light blue לאחר

12. 06:14

    מכן יש לנו תגיד body ובתוך ה-body יש איזושהי div כללית אנחנו רוצים שהמידע הזה בוא נניח ישוכפל לכל הדפים אבל איפה בדיוק בתוך המידע הזה אנחנו רוצים לשתול את התוכן של ה-view שאליו הלקוח גלש או שאותו הלקוח רוצה לקבל אז יש לנו פקודה ב-mvc שנקראת render body