יצירת אתר עם ריבוי שפות ב-NodeJS
div לתוכן, jQuery וקובץ index.js. בתוך $(document).ready נקראת הפונקציה getContent, שמבצעת קריאת Ajax לראוט content בשרת ומציבה את התשובה ב-div עם ה-id content. בשרת הראוט מחזיר בינתיים some content.div בשם flags עם שתי תמונות img, דגל אנגלית ודגל עברית, מתיקיית assets/images.data-language עם הערך en או he. מאפיינים שמתחילים ב-data- שמורים למתכנת, שייכים לתקן HTML5 והדפדפן לא מתריע עליהם.img בתוך #flags, וקוראים את הערך עם data('language').document.cookie את language עם הערך שנבחר ותאריך תפוגה של שנה קדימה (בעזרת toUTCString), ומיד קוראים שוב ל-getContent.request.cookies.language. אם אין cookie, או שהערך הוא en, מחזירים תוכן באנגלית, ואם הערך he מחזירים תוכן בעברית. ברירת המחדל נקבעת על ידינו, כאן אנגלית.language ומשנה את התוכן מיד.פרקי ההרצאה: יצירת אתר עם ריבוי שפות ב-NodeJS
תמלול ההרצאה: יצירת אתר עם ריבוי שפות ב-NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת אתר עם ריבוי שפות ב-NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז בואו נראה דוגמה שהיא real-life example לשימוש בcookies ואז נבין מה זה בעצם נותן לנו. אז יש לנו פה אתר שהוא כבר אתר מוכן. יש לנו כאן דף html, יש לנו כאן איזושהי div, מה שאנחנו עושים כשאנחנו מריצים את האתר הזה אז אנחנו רואים קודם כל שהוא משתמש ב-jQuery ויש לנו פה את קובץ האינדקס של צד ה-client.
יש לנו פה את הפונקציה דוקיומנט רדי של jQuery שכל מה שהיא אומרת זה אני רצה רק אחרי שה-HTML סיים להתען.
ואז יש פה קריאה לפונקציה מקומית get-content שהיא מבצעת קריאת אג'אקס לשרת דרך jQuery ל-route-content וכשהוא מביא את ה-Response את התוכן אז אנחנו מכניסים אותו בעזרת jQuery לתוך תגית content עם ה-id-content זה סימן של ID ב-JQuery, אם אתם לא ממש יודעים JQuery, לא קרה כלום.
זו שפה ממש קלה או טכנולוגיה ממש קלה שאפשר להשלים אותה ממש בקלות, או שפשוט אפשר להבין ממה שכתוב פה גם מה זה בעצם עושה.
סימן דולר, זאת הפונקציה המרכזית של JQuery. בצד של השרת יש לנו סך הכל את ה-Route Content ואנחנו מחזירים בואו קודם כל נעריץ את זה, נבצע התקנה ראשית של אקספרס, אני רואה שעדיין אין לנו פה את ה-Node Modules ויש לנו פה גם התקנה של ה-Cookie Purser שתכף נשתמש איתו ואנחנו רוצים להעריץ את זה.
Node App, Go, המערכת רצה, בואו נבצע גלישה ויש לנו Some Content. התוכן הזה שאנחנו רואים כאן הגיע מהאתר, סאם קונטנט, ברגע שביצענו גלישה לדף הבית הוא טוען אוטומטית את הג'אווה סקריפט, יש לי פה קריאה לפונקציה הזאת, היא הולכת לראוט, מביאה תוכן דינמי ומציגה אותו.
אני רוצה להוסיף עוד דבר אחד קטן וזה בעצם אפשרות להביא תוכן כתלות בשפה מסוימת, נניח עברית, אנגלית, ערבית, רוסית, צרפתית.
יש לנו כאן שני דגלים דגל של ארצות הברית דגל של ישראל ואנחנו רוצים להציג את הדגלים האלה בדף ה html וכאשר היוזר בוחר דגל אנחנו רוצים להביא לו תוכן שמותאם לשפה שהוא בחר יש לנו כאן div וניתן לה id div flags יש לנו כאן ing english זה הדגל הראשון בואו נגדיר שאנחנו
ב-assets images ויש לנו דגל שנקרא enpng נשכפל יש לנו כאן את hebrew he והקוד ומה שאנחנו רוצים לעשות זה שהקוד של ה-JavaScript המקומי ידע איזה תוכן להביא כתלות בתמונה שלחצו עליו.
אז איך אנחנו נדע על איזה תמונה לחצו? אני הולך בעזרת jQuery להירשם בבת אחת לשתי התמונות. אז מה שאני אעשה, אני אגדיר כאן משתנה, נקרא לו data language, נקרא לו data lang שווה ל-EN.
וdata lang שווה he ומה זה בעצם מאפיין data מקף שאנחנו יכולים לתת אנחנו יכולים להמציא פה אפילו נקרא לזה language המצאנו איזשהו מאפיין כל המאפיינים שמתחילים בdata מקף זה מאפיינים ששמורים למתכנת המתכנת יכול להמציא מאפיין וזה ממש שייך לתקן של html 5 כך שאנחנו יכולים בתור מתכנתים להשתמש בכל מיני מאפיינים שבא לנו.
כולם חייבים להתחיל אבל בדי תם הכף, הדפדפן לא ייתן שום שגיאות על המאפיינים האלה כי בידוע שהמתכנת ממציא אותם. אז יש לנו פה language, English ו-language Hebrew, אנחנו יכולים עכשיו לגשת ל-JavaScript של האינדקס ולהירשם, בואו נבצע את זה פה למעלה בעזרת jQuery
ל-id div flags זאת הזאת שקיימת פה וכל סלקטור או כל תגית שנמצאת בתוכה, כל תגית אימג' שנמצאת בתוכה והיוזר לוחץ על קליק על התגית הזאת אנחנו רוצים לבצע את הפונקציה הזאת שקודם כל בואו נבדוק שהיא אכן עובדת.
נרפרש, הנה שני הדגלים טסט הראשון, טסט השני. אם יש לנו את היכולת לתפוס את האירוע בואו נראה אנחנו יכולים לתפוס את המשתנה data language.
ניקח פה const language שווה ובעזרת jQuery ניגש לאובייקט הנוכחי שהעלה את האירוע למאפיין שנקרא data language ונציג את הלנגוויג'. נרפרש, הנה אנחנו רואים שהצלחנו להשיג e n ו-h e.
אנחנו רוצים עכשיו לבצע את הדבר הבא, אנחנו רוצים לשמור את זה כקוקי ולצורך כך כמובן שאני לא רוצה שהקוקי ייעלם בסיום הגלישה הנוכחית כשהאוזר יסגור את הדפדפן אז בואו ניגש ליצירה של התאריך הנוכחי לאחר מכן נוסיף לו שנה קדימה