יצירת דף הבית
server.set('view engine', 'ejs') אומר ל-Express באיזה מנוע עובדים. כברירת מחדל הדפים מחפשים בתיקייה views בתיקייה הראשית. אם התיקייה במקום אחר, מוסיפים server.set('views', ...) עם הנתיב.views לתת-תיקיות לפי נושאים, למשל לקוחות, ספקים או מוצרים. דפים כלליים כמו דף הבית ו-About נכנסים לתיקייה layout.home.ejs בתיקיית layout. הסיומת אינה HTML כי EJS יכול לרוץ בשרת. כרגע הדף מכיל HTML בלבד: header עם Northwind Website, footer עם all rights reserved, main עם welcome ופסקה על הנחה של 10 אחוז, תמונה מ-assets/images/home.png ו-nav עם קישורים ל-home, products ו-about.layoutController עם express.Router, שחושף את הראוטר החוצה. בראוט הראשי router.get('/', ...) קוראים ל-response.render('layout/home'). הפונקציה render מריצה את הדף בשרת, משלבת בו מידע דינמי (כרגע אין) ומחזירה אותו ללקוח. אין צורך לכתוב את הסיומת.app.js ומשתמשים בו עם server.use, כך שהוא מופעל כשגולשים לכתובת הראשית ולא ל-API.styles.css בתיקייה הראשית עם רקע, גודל גופן, יישור טקסט למרכז, קישורים תמיד בכחול, nav במיקום absolute 20 פיקסלים משמאל ומלמעלה, ו-footer במיקום fixed 20 פיקסלים מלמטה. מקשרים אותו בדף עם link rel="stylesheet".pages או general.פרקי ההרצאה: יצירת דף הבית
תמלול ההרצאה: יצירת דף הבית
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת דף הבית» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז פה אנחנו מתחילים לבנות את האתר שלנו ואת הטמפלייט פייג'ד שאנחנו רוצים לשלב בהם מידע ולהחזיר למשתמש. בואו נתחיל לראות מה אנחנו עושים. השלב הראשון אנחנו צריכים לומר לאקספרס על ידי סרבר יוז, לא יוז סליחה, סרבר סט, שאנחנו משתמשים ב-VueEngine, אקספרס תומכת ב-VueEngine, ואנחנו צריכים להגיד לה שהוויו אנג'ן שלנו
זה EJS. צריך להגיד לה בדיוק איזה ויו אנג'ן אנחנו משתמשים. עכשיו, איך פועל ויו אנג'ן? יש לנו כאן צורך באיזושהי תיקייה נוספת שאנחנו מגדירים, שב-Default המערכת מחפשת תיקייה ב-Rooted Directory שנקראת Views.
בתוך התיקייה הזאת אנחנו שמים את ה-Templating, את כל הדפים שאנחנו רוצים להכניס בהם HTML ומידע דינמי. אז ברגע שהגדרנו את זה Node.js או Express ליתר דיוק יודעת לחפש את הדפים אוטומטית בתיקיית Views.
אם היינו רוצים להגדיר שהדפים האלה נמצאים בתיקייה אחרת, היינו צריכים להוסיף Server.Set.Views ואז איפה בדיוק נמצאת התיקייה האחרת. דוגמא dear name ושם יש לנו תיקייה some other views folder איזושהי תיקייה שאתם רוצים ליצור בנוסף אבל בגלל שהviews שלנו נמצאת בתיקייה של הרות דירקטורי אנחנו לא באמת צריכים
את ההגדרה הזאת וההגדרה הזאת מספקת שפשוט אנחנו משתמשים ב-EJS מה עכשיו אנחנו רוצים לבצע אנחנו רוצים לגשת לתיקיית views ולהתחיל לבנות בתוכה את הדפים אבל כמובן באתר יש לנו הרבה דפים שונים אין לנו רק איזה שניים שלושה דפים יכול להיות שיש לנו את דף הבית ויש לנו דף
אודות וצור קשר ויש לנו דף שמתעסק במוצרים ולקוחות וספקים אז מה שנכון לבצע זה לחלק את views לתתי תיקיות כל הדפים שמתעסקים נניח עם לקוחות יהיו בתיקייה customers כל הדפים שמתעסקים באדמיניסטרטור יהיו באדמין, כל הדפים שמתעסקים במוצרים יהיו בפרודקטס.
אז בואו נבנה כאן איזושהי תיקיית לייאוט, כזאת סידור כללי שבה יהיה נניח את דף הבית, דף אודות, דפים כלליים כאלה ועוד כל מיני דברים שקשורים ללייאוט עצמו של האתר, לסידור הכללי של האתר, ואחר כך נוסיף עוד תיקיות אם נצטרך, לדוגמה תיקייה שמתעסקת במוצרים.
בתוך תיקיית לייאוט אנחנו רוצים את דף הבית. אז בואו נייצר קובץ שנקרא Home. הסיומות של הדפים שלנו, בגלל שאנחנו משתמשים ב-EJS, יהיו EJS.
בואו נבנה כאן דף HTML, נקרא לזה EJS בתור כותרת כללית, והנה יש לנו את הדף הראשון. שימו לב שהדף שלנו לא סיום את ה-HTML, כי HTML לא מסוגל לרוץ בצד של השרת.
Js כן מסוגל ומחזיר ללקוח גם את התגיות שיש לנו וגם את המידע הדינמי שאנחנו הולכים לשתול בתוכו. אז מה המידע שאנחנו רוצים לשתול בתוך ה-HTML?
ראשית בואו ניקח איזושהי כותרת ובואו נניח שהכותרת שלנו תכיל הגדרה כללית כמו Northwind Web Site. נניח שיש לנו אפילו כאן איזה header בצורה כזאת.
בואו ניקח כאן פוטר, כותרת תחתונה, איזושהי פסקה ובואו נניח שיש לנו All Rights Reserved עם סימן של זכויות יוצרים כזה. זה הפוטר שלנו.
בואו נניח שיש לנו כאן את המיין, את האזור הראשי של האתר ובואו נניח שבמיין באזור הראשי של האתר שלנו יושב h2 ויש לנו פה Welcome to Northwind Website ויש לנו כאן פסקה Only Now 10% Discount on All Products ובואו ניקח כאן איזושהי תמונה ובתמונה אנחנו רוצים לגשת לתיקיית Assets שתכף נבנה לעצמנו Images Home PNG.
תמונות נהוג שהן יהיו בתוך Assets Images באתר שלנו. בואו נייצר לעצמנו פה תיקיית Assets, בתוכה נייצר תיקיית Images והכנתי פה איזושהי תמונה, נשים אותה בתיקיית Images וזאת תהיה תמונה של דף הבית שלנו.
מה עוד אנחנו רוצים? בואו נניח שיש לנו צורך באיזשהו תפריט, נשים אותו אולי כאן למעלה, נב, ומה שאנחנו רוצים בתוך הנב שלנו זה קודם כל תפריט לדף הבית וה href של דף הבית זה זה.
בואו ניקח כאן איזה span וניקח דף מוצרים, נגדיר כאן products ובואו נניח שהולך להיות לנו עוד דף, about, זה הדפים שהולכים להיות לנו ו-slash about.
טוב, הנה יש לנו אפילו תפריט בדף הבית, אין לנו עדיין עיצוב כאן. בואו נראה מה עוד חסר. יש לנו כאן את המיין, יש לנו את הכותרת העליונה, הכותרת התחתונה, נראה לי שזה בסדר.
עכשיו אנחנו רוצים לומר למערכת בדיוק היא מחזירה את הדף הזה, דף הבית, שזה מה שיש בו בלי כמובן שום עיצוב כרגע.