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

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

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

Visual Studio - סביבת פיתוח משולבת (IDE) של מיקרוסופט לכתיבה, ניפוי והרצה של קוד, בעיקר בשפות .NET.

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

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

C# - שפת תכנות מונחית עצמים של מיקרוסופט, המשמשת בעיקר לפיתוח יישומים על פלטפורמת .NET.

IIS - שרת האינטרנט של מיקרוסופט (Internet Information Services), המריץ אתרים ויישומי אינטרנט על Windows.

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

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

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

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

השיעור פותח את מודול ASP.NET: איך פותחים פרויקט ב-Visual Studio, מה ההבדל בין Web Application ל-Web Site, ואיך דף ASPX הופך ל-HTML שהדפדפן מקבל.

פתיחת פרויקט ודף ראשון

1. Web Application מול Web Site: Web Application יוצר סולושן וסביבת פיתוח מחמירה יותר במרחבי השמות. Web Site הוא תיקייה של קבצים בלי סולושן ובלי מרחבי שמות משלו, והוא פחות מחמיר בפיתוח. בשיעור עובדים עם Empty Website כדי שלא ייווצרו קבצים מיותרים.

2. מיקום הפרויקט: בוחרים File System ולא HTTP. פרויקט בכתובת HTTP יושב ברשת וחשוף לכולם, וזה לא רצוי בזמן הפיתוח.

3. Webform: דף עם סיומת ASPX הוא המקביל ל-HTML ב-ASP.NET. הוא מכיל HTML רגיל ורכיבי ASP.NET, ולצידו קובץ C# שרץ בצד השרת.

4. IIS: תוכנת השרת מאזינה לבקשות, מאתרת את הדף, מריצה אותו ומחזירה ללקוח HTML. דף HTML רגיל נשאר סטטי, ואילו דף ASPX יכול להשתנות לפי הלקוח.

איך זה עובד

ASP.NET מעדכנת את דף ה-ASPX בצד השרת, ואז נשלח ללקוח HTML טהור. רכיבי ASP.NET מתורגמים (רנדרינג) לתגיות HTML מקבילות: Label הופך ל-span, TextBox הופך ל-input מסוג text, ו-Button הופך ל-input מסוג submit.

רכיב HTML רגיל אינו נגיש מקוד C#. כדי לגשת אליו בצד השרת, צריך רכיב ASP.NET עם ID ועם runat="server". הרכיב מתורגם בסוף ל-HTML שהדפדפן מבין, והשרת יכול לעדכן את הערכים שלו לפני התרגום.

רכיבים נפוצים

1. Label, TextBox ו-Button: כל אחד מקבל ID ו-runat="server". הלחצן שולח את הטופס לשרת, והאירוע שלו נכתב ב-C#. רכיב צד שרת חייב להיות בתוך טופס שגם הוא מוגדר כ-runat="server".

2. CheckBox ו-RadioButton: ה-checkbox מתורגם ל-input וללייבל מקושר, כך שלחיצה על הטקסט מסמנת את הריבוע. לקבוצת רדיו נותנים GroupName זהה לכל הפריטים, וכך רק אחד מהם נבחר.

3. DropDownList ו-ListBox: הפריטים נכתבים כ-ListItem עם Text ו-Value. לשרת נשלח ה-Value של הפריט הנבחר ולא הטקסט. המאפיין Selected קובע פריט ברירת מחדל, ו-Rows קובע כמה שורות מוצגות ב-ListBox.

4. Image ו-HyperLink: Image מקבל ImageUrl, ו-HyperLink מקבל NavigateUrl. המאפיין Target עם הערך Blank פותח את הקישור בחלון חדש.

5. HiddenField ו-Calendar: HiddenField מתורגם ל-input מסוג hidden. הוא לא נראה במסך, אבל הערך שלו נשלח לשרת יחד עם שאר הפרמטרים. Calendar הוא רכיב אחד פשוט מבחינת הקוד, אבל הוא מתורגם לטבלה גדולה מאוד של HTML.

דיבאג

מציבים breakpoint ומריצים שורה אחרי שורה. בכל ריצה לשרת, גם בטעינה הראשונה וגם בלחיצה על לחצן, מתבצע Page Load. אם לחצו על לחצן, מתבצע אחריו גם האירוע של הלחצן.

בסוף השיעור הסטודנט יודע לפתוח פרויקט ASP.NET, להוסיף דף Webform, ולחבר רכיב צד שרת לקוד C# שמעדכן אותו.

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

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

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

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

00:00
שלום, אז אנחנו עוברים למודול ASP.NET. במודול ASP.NET אנחנו הולכים לראות איך לבנות אפליקציות Web בעזרת שפת ASP.NET. דבר ראשון, יש לנו את Visual Studio, ואנחנו הולכים ללמוד איך לפתוח פרויקט או פרויקטים ב-Visual Studio.
00:20
בואו נסתכל על השלבים שצריכים להתבצע בשביל לפתוח פרויקטים. כמובן אנחנו הולכים לפייל בכדי לפתוח פרויקט, אבל יש לנו כאן שני סוגים של פרויקטים.
00:36
אני יכול ללכת ל-New Project, בניו פרוג'קט ב-C-Sharp לבחור Web ואז דרך זה לפתוח ASP.NET Web Application. זאת אפשרות אחת, בואו נעשה קאנסל.
00:57
אפשרות שנייה, פייל New Web Site. גם כאן אני הולך ל-C-Sharp ואני יכול לפתוח ASP.NET Web Site. אז מה ההבדל בין ASP.NET Web Application לבין ASP.NET Web Site?
01:17
אז יש מספר הבדלים, המרכזיים שבהם זה שב-ASP.NET Web Application המערכת יוצרת לי סביבת פיתוח שהיא קצת יותר מחמירה מבחינת מרחבי השמות שקיימים בתוך סביבת הפיתוח, אנחנו נדבר על זה בהמשך, ובנוסף יש לי קובץ שמאגד לי את כל הקבצים של הפרויקט.
01:42
הקובץ הזה נקרא קובץ סולושן. כאשר אני נמצא ב-sp.net ובסייט, מה שקורה אצלנו כאן, אין לי קובץ שמאגד לי את כל קבצי הפרויקט שהוא ביחד איתי, כאילו כל הקבצים פשוט שוכבים להם בתיקייה.
01:58
בנוסף, אין לי מרחבי שמות ששייכים לפרויקט שלי. הפרויקט הזה הוא פחות מחמיר מבחינת הפיתוח. זה הפרויקט שאנחנו נעבוד איתו. אז בואו נפתח Visual C-Sharp ונבחר ב-asp.net Empty Website כדי שלא יהיה לנו שום קבצים שמייקרוסופט מוסיפים לנו.
02:20
אנחנו רוצים דף ריק. הדבר הבא שאני עושה, אני בוחר ב-Web Location File System. יש לי כאן אפשרות לבחור גם HTTP לדוגמה. אם הייתי בוחר HTTP, אני רואה שהמיקום שווישואל סטודיו הולכת לשמור לי את הפרויקט מתחיל ב-http://.
02:48
אנחנו כבר יודעים שהדבר הזה זה נתיב לוגי שקיים איפשהו ברשת. מה זה אומר? זה אומר שהפרויקט שלי יכול לשבת מיידית ברשת, או ברשת הפנימית או ברשת החיצונית, אבל זה אומר שהוא חשוף לכל העולם.
03:07
זה לא בדיוק דבר רצוי כאשר אני בזמן הפיתוח, מפני שכאשר אני מפתח את האתר שלי, עדיין אני לא רוצה שהאתר שלי יהיה חשוף לכל העולם. לכן לא כדאי לבחור בזמן הפיתוח ב-HTTP.
03:23
זה אומר בעצם שהפרויקט שלי חשוף בפרוטוקול HTTP, שזה הפרוטוקול הנפוץ להעברת קבצים באינטרנט. יש לי אפשרות לבצע את אותו הדבר בפרוטוקול FTP, שזה אומר File Transfer Protocol, פרוטוקול להעברת קבצים ברשת.
03:39
HTTP זה Hypertext Transfer Protocol לכן אנחנו הולכים לבחור File System זה אומר שהפרויקט שלי שמור באיזושהי תיקייה פיזית אצלי במחשב כאשר הוא לא חשוף לרשת האינטרנט או לרשת אחרת בהמשך כשאני ארצה להעלות אותו לרשת לא תהיה לי שום בעיה פשוט להעתיק אותו למיקום ברשת דבר הבא שאני בוחר אחרי שבחרתי את File System זה לחצן Browse
04:07
מכדי לבחור בדיוק איפה אני רוצה לשמור את הפרויקט הכנתי תיקייה על הדסטופ שנקראת asp.net, בתוכה יש לי תיקייה שנקראת lesson1 וכל מה שנשאר לי לעשות זה לפתוח בתוכה תיקייה חדשה עבור האתר שלי.
04:28
בואו נקרא לתיקייה הזאת common controls. זאת תיקיית האתר. אחרי שבחרתי אותה אני מבצע open ואוקיי. ויז'ואל סטודיו הולכת עכשיו לפתוח לי פרויקט שלם שהוא בעצם האתר שלי.
04:56
בניגוד ל-HTML, כשאנחנו מפתחים ב-sp.net יש לנו ממש פרויקט שלם html היה קובץ אחד או מספר קבצים בלי ממש קשר ביניהם כאן אני יכול בעזרת visual studio לפתוח את כל הקבצים ולהריץ את כל הפרויקט בבת אחת אז בואו נלחץ על אייקון הסלושן אקספלורר אייקון הסלושן אקספלורר תפקידו להראות לי
05:20
את הקבצים השונים שקיימים לי בפרויקט ומה שאני רואה כרגע זה שיש לי בעצם איזושהי היררכיה כזאת יש לי כאן משהו שנקרא סלושן, יש לי בתוכו את התיקייה שפתחנו ויש לי בתוכו קובץ אחד שנקרא web.config.
05:42
בואו נבצע הבדלה בין שלושת אלה. סולושן זה קובץ שתפקידו להכיל מספר פרויקטים שקשורים יחד מבחינת הפיתוח. לדוגמה, אנחנו בונים אתר אינטרנט, נניח זה, ועוד איזושהי תוכנה שקשורה לאתר.
06:06
ולכן שתי התוכנות בגלל שהן קשורות יחד צריכות להופיע באותה סביבת פיתוח של ויז'ואל סטודיו ביחד בזמן הפיתוח, ולכן יש לי קובץ סולושן שהוא מעליהם ויכול לפתוח את שניהם בבת אחת.
06:22
בתוכו אני רואה את תקיעת האתר, וזה בעצם שולט לי על הפרויקט של אתר האינטרנט שאנחנו בונים כרגע. לכן מה שאנחנו רואים מסומן כרגע שולט לי על הפרויקט ומייצג לי את הפרויקט של האתר שאנחנו בונים.
06:39
בתוכו אנחנו רואים קובץ אחד בלבד שנקרא web.config. web.config זה קובץ הגדרות או יותר נכון קונפיגורציה של כל האתר שלנו וב-asp.net חייב שיהיה לנו קובץ אחד כזה לפחות שנמצא בתיקייה של האתר לכן יש לי פה כרגע רק קובץ אחד ואין לי יותר קבצים אחרים ובואו נוסיף עכשיו דף אחד של asp.net אם
07:06
אני רוצה להוסיף דף לאתר אני כמובן לוחץ מקש ימני על ה-common controls שמייצג לי את האתר כלומר תיקיית האתר שלי, בוחר Add New Item ואני בוחר Webform.
07:26
Webform זה המקביל לדף HTML עבור ASP.NET. Webform הוא לא דף HTML, דף בעל סיומת ASPX וזה הדף השולט בשפת ASP.NET. בואו ניתן לו שם, בואו נניח Homepage, נבצע Add ונראה שיש לי כרגע דף שהוא מאוד דומה ל-HTML.
08:04
אני אפילו רואה שיש לי פה תגית html, תגית head, תגית ה-body כמו שהיה לנו ב-HTML, כולל פורום ודיו ראשי. אבל הסיומת של הדף הזה היא ASPX.
08:22
אוקיי, מה בעצם הדף הזה מתאר לי? התכנות של הדף מתבצע בתכנות שיכול להיות html, ויכול להיות גם תגיות אחרות שאנחנו נראה אותן בהמשך שהן לא htmlיות.
08:40
וסיומת ASPX. בתוך הדף הזה יש לי עוד דף סיומת CSharp. הקוד הזה זה קוד שמתבצע בצד השרת והוא כתוב בשפת C-Sharp. בהמשך אנחנו נראה מה זה בדיוק אומר צד השרת.
09:02
אז אני כרגע נכנס לתוך הדף HTML ואני יכול לתכנת כאן בשפת HTML רגילה לגמרי. לדוגמה ניקח span, ניקח input type=text, נשמור את הדף.
09:37
אם אני רוצה להריץ את זה יש לי פה את הלחצן הרצה שאני יכול ללחוץ עליו. דבר ראשון המערכת שואלת אותי איזושהי שאלה, אני כרגע עונה לה כן, בהמשך נראה מה זה בדיוק אומר.