ASP.NET חלק ה' – בסיס תיכנותי. טוב עבר קצת זמן מהמדריך האחרון , מקווה שלא שכחתם כלום ואתם יודעים את הבסיס שלימדתי אותכם , טוב היום נעשה משהו קצת שונה , אנחנו נבנה לנו כמה דברים פשוטים, כדי שתבינו איך כל מה שלמדנו מתחבר לנו סבבה. אז יאללה לעבודה.
טוב דבר ראשון לפי מדריך א' נפתח לנו פרוייקט חדש , תנו לו איזה שם שאתם רוצים!
*דרוש ידע בסיסי ב HTML למדריך זה כדי להבין מה אנחנו עושים פה.
טוב אנחנו נמצאים בדף ה DEFAULT שלנו , יש להשים לב טוב טוב שהדף מחולק ל 2 חלקים. אחד לקוד מקור ואחת לתיכנותי.
נעבור לתצוגת עיצוב שלנו .
נלך לסרגל כלים > LAYOUT > INSERT TABLE
סבבה זה הממשק משתמש שלנו להוספת טבלאות בצורה הכי נוחה , בלי קוד, אני מציע לכם להתעסק עם זה איזה 20 דקות חצי שעה ללמוד כל מה שהולך שם ממש מתקדם כל הקטע שם הכל אוטומטי ונוח.
*טוב זה דבר שאתם חייבים לדעת! מתי שאנחנו בונים טבלה בצורה אוטומטית , יש את הדבר הכי מעצבן מבחינה דינאמית ב ASP שלא יודע למה לעזאזל הם עשו אותו וזה שכל גודל של תיבה בטבלה הוא 100 פיקסלים , בישביל להעיף את זה כל פעם שבונים טבלה הולכים ל CELL PROPETIS ומורידים את הצ'ק מה WIDTH. – חובה!!!
סבבה אחרי שהכרתם את כל הקטע של הטבלאות וכל זה בואו נוסיף לנו טבלה של 3 שורות ועמודה אחת. ( סמנו את הגודל של השורות ב V שיהיה 100% )
טוב עכשיו מופיע לנו טבלה של שלושה שורות. נחמד.
עכשיו בואו נתקדם עם זה טיפ טיפה.
תסמנו את הטבלה שלנו ותחפשו בה מין 4 חיצים ככה שאם תלחצו על זה תראו בתפריט הימיני שלנו במאפיינים את המאפיינים של הטבלה.
שימו לב שבחלון של המאפיינים יופיע לכם <TABLE> שזה מצביע על כך שאתם עומדים על המאפיינים של הטבלה.
סבבה עכשיו תרדו ותחקרו קצת תראו מה כל דבר יכול לעשות מי שיודע HTML מבין שזה חלום איך אפשר לעשות את כל הדברים האלה בכזאת פשטות.
לכו למאפיין DIR ותבחרו RTL שזה אומר שהטבלה תבוא מימין לשמאל , יותר נוח לעבוד עם זה ככה , וזה גם תצוגה ישראלית , אני עובד רק עם המצב הזה ( יותר ב CSS אבל זה בהמשך.. שנילמד תקינות קוד. ).
טוב עכשיו שהכל נוח לנו לעבוד ואנחנו ממש כמו בוורד או משהו ( חחח אבל זה ממש לא! ) נתחיל לעשות לנו משהו.
טוב אם תסתכלו בצד ימין תראו מין תיבה שרשום עליה TOOLBOX , זאת היא תיבת הפקדים שלנו , מי שיודע VB כנראה יודע מה זה , מי שלא זאת הינה תיבה של פקדים , אובייקטים כמו שהסברתי לכם אבל אובייקטים גרפיים , כלומר זאת היא מחלקה מוכנה לנו לשימוש וכל מה שאחנו צריכים לעשות איתה היא להכניס אותה לדף שלנו ויש לנו את כל הפונקציות שלה.
אז ואללה בואו ננסה משהו קטן. סבבה.
זוכרים שיש לנו טבלה חחח סבבה , טוב בשורה הראשונה אני רוצה שתגררו לשם פקד בשם IMAGE , פשוט תלחצו עליו ארוך ותמשכו אותו מהרשימה למקום הרצוי.
סבבה עכשיו זה יראה לנו כמו תמונה ריקה אין מה לדאוג.
עכשיו פקד זה הוא חלק תלוי בדף שלנו כלומר הוא חלק מהדף ומצד השרת , ואני מדגיש צד שרת לא לקוח , למרות שבלקוח ניתן להציג תמונות ביותר פשטות , זה פקד שרץ על השרת , כמו כל שאר הפקדים , ולזה יש חשיבות מאוד גדולה של מה שרץ על השרת מאוד שונה ממה שרץ על הצד לקוח. ואני מאמין שהסברתי כבר על זה.
עכשיו שימו לב בתיבת מאפיינים , זה מראה לכם אוטומטית את כל ההגדרות של הפקד שלנו , ( הפונקציות שלו במצב תיכנות ) , תרדו עד הסוף תראו משתנה בשם ID שם תוכלו לשנות לו את השם של הפקד , תמיד רצוי לתת לו שם שניתן לבין ולדעת מה המשמעות שלו כי בסוספו של דבר הפרוייקט שלנו יגדל ואחרי זה יהיה לנו בלאגןם עדיך לעשות סדר מעכשיו. , נשנה לו את השם ל ImgTest ותלחצו אינטר וואללה! שינו לו את השם.
עכשיו סבבה , יש לנו פקד אחד בדף שלנו. ואם הוא צד שרת אז אפשר לתכנת עליו לפני שמציגים אותו שזה היופי.
עכשיו בואו נעשה עוד משהו , נבנה לנו כפתור , והכפתור הזה ישלוט לנו על הפעולות של אותה תמונה.( אני מזכיר זה בסיס , אין משמעות למה שאחנו עושים פה סתם להמחיש דוגמאות ).
נלך שוב לתיבת פקדים שלנו , ונגרור משם פקד בשם BUTTON לאיפה שאתם רוצים ( תראו איזה גמיש אני איתכם ח) תנו לו את השם BtnTest.
תחפשו עוד משתנה בשם TEXT ששם ניתן להגידר מה יהיה רשום על הכפתור , אני רשמתי "לחץ עליי" אתם מוזמנים לרשום מה שבא לכם.
סבבה , רגע מה עכשיו ? טוב איך גורמים לכפתור לבצע מה שאנחנו עושים?
זה יותר פשוט מכל דבר , תלחצו עליו פעמיים וואלה אתם נכנסים אוטומטית למצב תיכנות לאירוע ברירת מחדל של הפקד שלנו שזה לחיצה על הכפתור , ( בעתיד אני ילמד אותכם מה כל האירועים החשובים שצריך לדעת ואיך יודעמים מה צריך למתי ולמה.)
עכשיו הגענו לדבר כזה:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnTest.Click End Sub
|
אין לכם מה להיבהל לימדתי אותכם שיעור שעבר מה זה פונקציות וכל זה , פה זאת קריאה לפרוצדורה מובנית דרך מחלקה בעתיד הרחוק מאוד נלמד על זה חחח , טוב אז כל פקודה שנשים בתוך הפרוצדורה הזאת תרוץ בזמן הלחיצה על הכפתור.
טוב בואו נשים בפנים את הקוד הבא:
מה עשינו פה?
פה פנינו לפקד שיצרנו מקודם התמונה הדינאמית שהכנסנו.
ImgTest.ImageUrl
ImgTest – השם של הפקד שיצרנו.
ImageUrl – הפונקצייה שאנחנו רוצים לקרוא לה , פונקצייה זאת מיישמת את
הפעולה אשר מגדירה לפקד איזה תמונה להציג בתוך הפקד תמונה הדינאמי שלנו.
="http://rotter.name/nor/Images/rotterlogo.jpg" פה אנחנו פשוט נותנים לו את הקישור.
מקווה שהבנתם , אם לא תחזרו להתחלה תתחילו מההתחלה אבל תכבו את הטלוויזיה או משהו
טוב עכשיו בישביל להריץ את התוכנית נחזור לדף עיצוב שלנו ונלחץ F5 ומשם נראה את התוצאות.
רגע מה קרה? למה מציג לי דף בלי כלום רק תמונה לא זמינה וכפתור.
אז ככה אנחנו קוראים לפקד של התמונה להכניס לעצמו תמונה רק לאחר שאנחנו לוחצים על הכפתור.
עשיתם אהההההה.. זה טוב חחח.
סבבה , בואו נתקדם טיפה יותר.
בואו נדחוף לנו בכל מקום עוד כפתור תנו לו איזה שם שאתם רוצים ותיבת טקסט TEXTBOX
סבבה.
תנו להם איזה שמות שאתם רוצים שימו אותם איפה שאתם רוצים , עכשיו תלחצו פעמיים על הכפתור , זה יכניס אותכם לפרוצדורה של הכפתור , ממש כמו מקודם , עכשיו מה שנעשה זה נשנה את מה שרשום בתוך התיבת טקסט שלנו.
אם לפקד של התיבת טקסט היה קוראים TxtTest כמו שאני עשיתי , אז תשימו את הקוד הבא:
TxtTest.Text = "I LEARN ASP.NET"
|
וואלה אם תריצו תראו שזה שינה לכם את מה שהיה בתיבת טקסט למה שהגדרנו לו פה , יפה.
טוב בואו נגיד עכשיו אנחנו רוצים שיהיה שם תמונה מההתחלה ואחרי זה נחליף לה את התמונה למשהו אחר.
יש 2 דרכים לעשות את זה.
1.דרך תיבת המאפיינים פשוט להכניס לשם URL של תמונה , וואלה התמונה תופיע לכם על ההתחלה.
2. דרך תיכנותית , ואני רוצה להציג אותה כדי ללמד עוד משהו על הדרך סבבה זרמו איתי פה.
נחזור לתצוגת העיצוב ונלחץ פעמיים על הדף עצמו לא בשום מקום אחר שיש לנו פקד או משהו אחר כדי להגיע לתוצאה כזאת בתצוגת עיצוב.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub
|
סבבה מי שהגיע לפה מגיע לו כל הכבוד מי שלא הצליח , אז תנסה עוד פעם למה אתה מחכה עד שתצליח רק עם הניסיון אתה תצליח!.
טוב אז מה אנחנו רוצים לעשות... להגדיר תמונה שתעלה לנו על ההתחלה.
לכן אנחו צריכים להשתמש באותה פקודה כמו מקודם כדי להגדיר לפקד באיזה תמונה להשתמש.
נכניס את זה לתוך הפרוצדורה:
תריצו וואלה , עובד.
רגע.... רגעע... רגע ... מי שניסה להריץ את הפקודה של ההחלפת תמונה ואחרי זה את הטקסט בוודאי שם לב שמשהו לא בסדר...
תנסו את זה אתם , מה קורה פה למה התמונה חוזרת?
טוב אז בואו נסביר לכם כמה דברים פשוטים על האירוע של טעינת הדף.
הפונקצייה הזאת נקראת כל פעם שהדף נקרא לנו , מובן.
כל מה שרשום בתוך הפונקצייה הזאת נעשה כאשר אנחנו טוענים את הדף.
אז למה זה קורה לנו כאשר אנחנו לוחצים על כפתור?
כיוון שאנחנו עובדים בין 2 חיבורים אחד בין השרת ואחד בין הלקוח אנחנו לא יכולים לשמור על חיבור ישיר קבוע כמו שבתוכנה במחשב , אז אנחנו צריכים לעשות את זה לפי מספר העברות , כאשר אנחנו לוחצים על כפתור השרת מקבל את הפקודה ומעביר לנו דף חדש ה ASP.NET יוצר לנו פלט חדש ומחזיר אותו ללקוח והוא צריך לטעון מחדש את הדף כדי לקבל את העידכון הויזואלי.
לדבר כזה קוראים POSTING .
אז איך מתגברים על דבר כזה , הרי כל פעם שנרצה לעשות משהו נצטרך לעדכן את הדף.
טוב אז תאמת אין מה לעשות צריך לסבול את זה ולהוריד את הראש....
סתםםם צוחק איתכם , יש לנו משתנה בשם ISPOSTBACK שמכיל בתוכו ערך בוליאני ( מי שקרא מבין חחח * אמת / שקר ) אשר אומר לנו אם הדף שלנו נשלח בחזרה או לא , כלומר במילים הכי פשוטות בעולם אם זה פעם ראשונה שאנחנו בדף ולא עשינו כלום עדיין או שלחצנו על דברים והשרת החזיר לנו את הדף בצורה שונה.
איך מיישמים דבר כזה שיבוא לקראתנו , פה נכנס המשפטי IF שלמדנו , סוף סוף מתחיל להתחבר לכם דברים ולהתקדם אה.. זה כלום זה אפילו לא מיליונית מתכנות , אבל זה בסיס וצריך אותו אחרי שתדעו את זה טוב זה כמו ללמוד נהיגה אתם תגידו איזה מפגרים היינו כל כך קשה להבין דברים כאלה פשוטים .
טוב נלך לפרוצדורת הטעינת דף שלנו ( ניתן לחזור אליה דרך הקוד או דרך תצוגת העיצוב שוב על ידי לחיצה כפולה על מקום ריק בדף ) .
ונשנה את זה לדבר הזה :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If IsPostBack = False Then ImgTest.ImageUrl = "http://rotter.name/nor/linktowebg.jpg" End If End Sub
|
מה שעשינו פה הוא לקחנו משפט IF שבודק לנו אם הדף נטען פעם ראשונה , עכשיו המשפט הזה הוא אחד מהחשובים ב ASP.NET ואני מאמין כי תשתמשו איתו כמעט בכל דף תיכנותי שתרצו להגדיר דברים לפקדים בצורה תיכנותית מההתחלה.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If IsPostBack = False Then ////// משפטי הגדרות////// End If
|
כל מה שתכניסו איפה שרשום לנו משפטי הגדרות יעלה חד-פעמי רק בפעם הראשונה שאנחנו פותחים את האתר ( המצב ישאר אותו מצב מאז אם לא נשנה את זה ) וזאת כדי לבצע מין אתחול פרטי כזה משלנו.
טוב מספיק לי להיום , מקווה שלמדתם כמה דברים פה ושם אם יש לכם שאלות וכל זה ואללה בכיף תשאלו.