Controls - פקדים נפוצים - חלק 2

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.

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

מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

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

HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.

Controls - פקדים נפוצים - חלק 2

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

העלאת קבצים

1. FileUpload: הרכיב מאפשר ללקוח לבחור קובץ במחשב שלו. בצד השרת אפשר לקרוא את הקובץ ולשמור אותו.

2. שמירה בצד השרת: הפונקציה SaveAs מקבלת נתיב מלא ושומרת את הקובץ שהלקוח בחר. הנתיב המלא מתקבל מ-Server.MapPath("~/MyFiles/"), כי לא ידוע איפה האתר יושב על השרת. צריך להוסיף סלאש בין התיקייה לשם הקובץ.

3. שם ייחודי לקובץ: שמות קבצים של לקוחות יכולים להתנגש. לכן נותנים שם שנוצר על ידי Guid.NewGuid().ToString() ומצמידים לו את הסיומת המקורית. הסיומת נלקחת מהמיקום של הנקודה האחרונה בשם הקובץ, בעזרת LastIndexOf ו-Substring.

רשימות

1. BulletedList: רכיב שמציג רשימה, עם פריטים מוגדרים בתוכו. המאפיין BulletStyle קובע אם הסימון יהיה ריבוע, מספרים או סימון אחר. הרכיב מתורגם ל-ul או ol.

2. CheckBoxList: רכיב אחד שמייצר רשימה של צ'קבוקסים. בקוד בודקים כל פריט עם לולאה על Items.Count ומוסיפים את הטקסט של הפריטים שנבחרו. זה קצר יותר מבדיקה נפרדת לכל צ'קבוקס.

3. RadioButtonList: הרשימה נותנת קבוצת רדיו אחת, ולכן נבחר רק פריט אחד. לקבלת הבחירה מספיק שורה אחת: SelectedItem.Text. בקבוצה של רדיו בודדים צריך לבדוק כל אחד בנפרד.

Repeater ו-XML

1. הקובץ: נתונים נשמרים בקובץ XML בתיקיית App_Data. התיקייה הזאת מיועדת לנתונים טקסטואליים, ואין בה להציג תמונות.

2. טעינה: DataSet קורא את הקובץ עם ReadXml, והריפיטר מקבל אותו כמקור נתונים. קריאה ל-DataBind מציגה את הנתונים.

3. תבניות: HeaderTemplate מופיע פעם אחת בתחילת הרשימה, ItemTemplate מופיע לכל שורה, ו-FooterTemplate מופיע פעם אחת בסוף. בתוך ItemTemplate שולפים שדה עם DataBinder.Eval או עם Container.DataItem.

4. עיצוב: אותה רשימה אפשר להציג כ-ul או כ-ol. בדוגמה שונה הסוג מ-disc ל-lower-roman, וה-HTML שמגיע ללקוח משתנה בהתאם.

הסטודנט יודע בסוף השיעור לשמור קובץ שהועלה לשרת בשם ייחודי, לבנות רשימה מכל סוג ולהציג נתוני XML בעזרת Repeater.

השיעור הבא בקורס: פרוטוקול HTTP הסבר על Request

פרקי ההרצאה: Controls - פקדים נפוצים - חלק 2

תמלול ההרצאה: Controls - פקדים נפוצים - חלק 2

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

00:02
אוקיי, הרכיב הבא שלנו הוא רכיב שנקרא File Upload. File Upload זה רכיב שמסוגל לאפשר למשתמש לבחור קובץ. בואו נריץ, נגיע ל-File Upload, ונראה שיש לי פה לחצן Browse, ואני מסוגל לבחור איזה קובץ שאני רוצה במחשב של הלקוח.
00:37
בחרתי קובץ, ביצעתי Open, והקובץ רק מוצג לי כאן בתיבה הזאת, בתיבת הטקסט שלידו. הרכיב הזה גם מאפשר לי לקרוא את הקובץ הזה בצד השרת, ואפילו כמובן גם לשמור אותו בצד השרת.
00:54
בעזרת הרכיב הזה אנחנו יכולים להעלות קבצים מצד הלקוח לצד השרת כמו תמונות וכולי. אוקיי, בואו נראה איך אני לוקח את הקובץ ושומר אותו בצד של השרת. מה שנעשה זה נגדיר לידו איזשהו לחצן לצורך שמירת התמונה.
01:36
נגיע לדיזיין ונלחץ דאבל קליק על הלחצן בכדי להגיע לקוד ה-C-Sharp שלו שמתבצע בצד של השרת. בואו שוב פעם נסתכל איך נקרא רכיב ה-file-upload.
01:53
אז יש לו ID, נשאיר את ה-ID הזה כדפולט כרגע, למרות שבמציאות הייתי נותן לו איזשהו שם משמעותי. נעתיק את ה-ID, קופי.
02:05
בעזרתו אני יכול להגיע בצד השרת לרכיב עצמו. נחזור ל-c-sharp ואני רואה שיש לי כאן גישה לרכיב. יש לי פונקציה שנקראת save as. פונקציה, ואת אומרת לי דבר כזה: תן לי שם של קובץ כמובן עם נתיב מלא, ואני אשמור לך את הקובץ שהלקוח בחר.
02:31
בגלל שהקוד הזה, כשאנחנו רואים פה ב-C-Sharp רץ בצד השרת, אז השמירה של הקובץ תתבצע בצד השרת. אז בואו נגדיר בשרת שלנו תיקייה חדשה שנקראת MyFiles, ואני רוצה בתוכה לשמור את הקובץ שהלקוח בחר.
02:58
איך אנחנו עושים את זה? בואו נגדיר כאן String, שזה מידע טקסטואלי, משתנה שמכיל לי מידע טקסטואלי, שנקרא Path.
03:15
and file name בשביל להגיע לנתיב של my files אני צריך לדעת איפה התיקייה הזאתי my files בדיוק נמצאת במחשב השרת הבעיה היא שאני לא יודע איפה האתר שלי בכלל נמצא במחשב השרת מפני שכאשר אני מעלה את האתר שלי למחשב השרת כמו שראינו בסרטוט הזה אז הקבצים שלי והתיקייה של האתר נמצאים איפשהו במחשב השרת שאין לי שום אפשרות לדעת איפה זה נמצא מפני שמחשב השרת לרוב לא שלי
03:56
ואני מעלה את זה לשרת ציבורי ששמים לי אותה באיזושהי תיקייה. איך אני יודע בדיוק איפה הדבר הזה יושב? אז ישנה פקודה ב-sp.net, או יותר נכון פונקציה, שנקראת mapPath.
04:12
פונקציה אבותי אומרת לי תן לי תיקייה בתוך האתר שלך ואני אחזיר לך את הנתיב המלא לתיקייה הזאת כולל התיקייה עצמה. כל מה שאני צריך לתת ל-MapPath זה את השם של התיקייה שלי MyFiles ו-MapPath תחזיר לי את הנתיב המלא לתיקייה הזאת, כולל שם התיקייה.
04:41
בשביל לשמור קובץ אבל אני צריך גם את השם של הקובץ, ולכן נשרשר אותה עם file-upload1.file name. עכשיו יש לי את הנתיב המלא אליו אני רוצה לשמור, ביחד עם שם הקובץ שהמשתמש בחר, ואת זה אני שומר דרך לרכיב הפייל Upload שמחזיק לי את הקובץ עצמו.
05:11
בואו נבדוק איך זה עובד. אז אני מריץ את האתר, נגלול למטה לרכיב, קודם כל נבחר קובץ, נבחר את גרינסטון, נבצע Open, ואז נלחץ על לחצן Save.
05:44
קודם כל אני רואה שמשהו בצד השערה תתבצע ודף חזר. בסדר, בואו נסגור את הדפדפן, נחזור, נבחר את התיקייה ונלחץ על אייקון Refresh. אני רואה שיש לי את הפייל גרינסטון נמצא כאן.
06:09
יש לנו פה איזושהי טעות קלה שכבר אנחנו נתקן אותה. מה שקרה זה שהוא חשב שמי פיילס ביחד עם השם גרינסטון זה השם של הקובץ, והסיבה לזה היא כי היינו צריכים להוסיף ביניהם סלאש בכדי לומר למערכת זה הנתיב ואז משורשר אליו שם של קובץ.
06:38
בואו נמחק את הקובץ הזה ונשמור ונבצע שוב פעם את אותה הרצה. נבחר את אותו הקובץ, סייב, נסגור את הדפדפן, נבחר את התיקייה ונרפרש.
07:18
ועכשיו באמת השם greenstone.bmp, שזה הקובץ שבחרתי, הגיע לצד השרת לתוך התיקייה my files. כך המשתמש יכול להעלות תמונות, קורות חיים, קבצים שונים, כל מה שהוא רוצה.
07:35
בואו נראה עוד משהו מעניין בקשר לזה. ישנה בעיה מאוד ידועה בעולם ה-Web שניתנת לפתרון בקלות, והיא אומרת דבר כזה: יכול להיות שלקוח אחד בוחר לי שם של קובץ והעליתי אותו לתיקייה שלי ולקוח אחר איפשהו בעולם בחר אצלו במחשב שם של קובץ שהוא בדיוק אותו השם שכבר לקוח הראשון בחר כמובן שאני לא יכול להעלות שני קבצים בעלי אותו שם
08:05
לאותה תיקייה וזה בעצם ייצור לי בעיה מפני שלקוחות יכולים להעלות איזה קבצים שהם רוצים אין לי שליטה על השמות שלהם אבל מה שיש לי שליטה ומה השם שאני יכול להחליט עבור הקובץ הזה.
08:21
ומה שאני רוצה לעשות, אני רוצה לתת שם ייחודי עבור הקובץ שאני מעלה. איך אני יכול לעשות את זה? ישנו רכיב שנקרא גוויד.
08:35
גוויד זה קיצור של Global Unique Identifier. בואו ניצור אובייקט ממנו, נגיע לתיקייה ובתוכה אנחנו לא ניתן את השם שהמשתמש, השם הקובץ המקורי של המשתמש, אלא נלך לגלובל יוניק איידנטיפייר ונגיד לו 2 סטרינג.
09:22
כלומר, תהפוך לי את הערך שלך למחרוזת. פה האמת, אנחנו צריכים לעשות משהו שהוא טיפה שונה ליתר דיוק, good.new good. עכשיו אני רוצה לשמור את הסיומת.
09:46
הסיומת הקודמת שבחרתי הייתה bmp. בואו נסתכל מה אמרתי פה כרגע. אמרתי שהנתיב ושם הקובץ החדש שאני רוצה זה