יצירת דף About
בלי כתוביותעם כתוביות
מילון מושגים:
Northwind - מסד נתונים לדוגמה של מיקרוסופט, המדמה חברת מסחר ומשמש ללימוד ולהדגמת שאילתות SQL.
קונטרולר - רכיב שמתווך בין הממשק לבין הלוגיקה והנתונים, מקבל בקשות ומחליט כיצד לטפל בהן (למשל בדפוס MVC).
אתר אינטרנט - אוסף של דפים ומשאבים מקושרים המתארחים תחת כתובת אחת ומוגשים דרך דפדפן.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
יצירת דף About
בהרצאה מוסיפים לאתר Northwind דף שני, דף About, על בסיס דף הבית שכבר קיים, ומחברים אותו לקונטרולר כך שאפשר לגלוש אליו.
השלבים העיקריים
1. שכפול דף הבית: מעתיקים את קובץ הדף הראשי (Ctrl-C, Ctrl-V) ומשנים את השם ל-About. הקוד המשוכפל נשאר כרגע כמו שהוא, והמרצה מציין שאת השכפולים יטפלו בהמשך.
2. שינוי התוכן: במקום "welcome to Northwind website" כותבים
exotic products from around the world, ומחליפים את התמונה בלוגו האמיתי של Northwind, בקובץ logo.jpg.3. הוספת נתיב בקונטרולר: משכפלים את הנתיב הקיים של דף הבית, ומגדירים שגלישה ל-about מחזירה את הקובץ
about.ejs מתיקיית ה-views, מתוך ה-layout.4. בדיקה: עוצרים את הריצה, מריצים מחדש ומרעננים. גם דף הבית וגם דף ה-About נטענים כראוי.
שימו לב
הקוד שחוזר על עצמו בין הדפים הוא בעיה שנפתור בהרצאה הבאה, כדי לא לכתוב בכל דף שוב ושוב את מה שכבר כתוב בדפים האחרים.
בסיום יש לכם שני דפים עובדים באתר, ואתם יודעים להוסיף דף חדש על ידי שכפול דף קיים וחיבורו לקונטרולר.
השיעור הבא בקורס: יצירת Partial View בנוד NodeJS
פרקי ההרצאה: יצירת דף About
תמלול ההרצאה: יצירת דף About
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת דף About» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו רוצים עכשיו להוסיף את דף ה-About, בואו רגע נסגור את הכל, ניגש לדף הבית, Ctrl-C, Ctrl-V, נשנה את זה ל-About, ולמרות שיש לנו פה הרבה שכפולים, אנחנו בהמשך נטפל בכל השכפולים האלה.
ומה שאנחנו רוצים זה לגשת לפה, ובמקום Welcome to Northwind Website, בואו נכתוב Exotic Products from around the world כי זה מה שאנחנו מתעסקים איתו ויש לנו כאן תמונה אחרת בואו ניתן את about בואו ניתן את הלוגו.
לוגו נקודה jpeg ובמקרה הכנתי פה מבעוד מועד בואו נלך לכאן את הלוגו האמיתי של Northwind ככה זה נראה. אז יש לנו כרגע את הדף עם ההגדרות הספציפיות שלו ואנחנו רוצים ללכת לקונטרולר שלנו לשכפל את