ABA


"|סדנת לימוד בניית אתרים| ASP.NET פרק ה'"
גירסת הדפסה        
קבוצות דיון בניית אתרים נושא #12026 מנהל    סגן המנהל    מפקח   Winner    צל"ש   מומחה  
אשכול מספר 12026
lior066

   16:54   01.05.07   
אל הפורום  
  |סדנת לימוד בניית אתרים| ASP.NET פרק ה'  
 
   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

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

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



                                שתף        
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

  האשכול     מחבר     תאריך כתיבה     מספר  
  יפה מאוד אחי, בזמני הפנוי אני אשב ואקרא את זה לעומק =] כל הכבוד! ronen333  01.05.07 16:58 1
  יפה מאוד, כל הכבוד :) Tom_l  01.05.07 17:02 2
  פשוט תותח - כל הכבוד ותודה Sn00py  01.05.07 18:05 3
  כל הכבוד יא WINNER =] FireAngel 01.05.07 20:52 4
  אחלה מדריך תמונות מהתוכנה היו עוזרות:)תודה akoka 02.05.07 07:24 5
     מסכים עם הצ'יף.. Roy_Jan  02.05.07 19:55 6
     מדריך הבא יהיה גם תמונות גם פה רציתי להשים תמונות אבל.. lior066 02.05.07 21:12 7

       
ronen333 
חבר מתאריך 20.2.03
6069 הודעות
   16:58   01.05.07   
אל הפורום  
  1. יפה מאוד אחי, בזמני הפנוי אני אשב ואקרא את זה לעומק =] כל הכבוד!  
בתגובה להודעה מספר 0
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Tom_l 
חבר מתאריך 1.1.10
1696 הודעות
   17:02   01.05.07   
אל הפורום  
  2. יפה מאוד, כל הכבוד :)  
בתגובה להודעה מספר 0
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Sn00py 
חבר מתאריך 1.8.02
2954 הודעות
   18:05   01.05.07   
אל הפורום  
  3. פשוט תותח - כל הכבוד ותודה  
בתגובה להודעה מספר 0
 
  

\x6C\x65\x65\x74\x68\x61\x78\x30
\x72\x3A\x2D\x29
tresp4sser


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
FireAngel

   20:52   01.05.07   
אל הפורום  
  4. כל הכבוד יא WINNER =]  
בתגובה להודעה מספר 0
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
akoka

   07:24   02.05.07   
אל הפורום  
  5. אחלה מדריך תמונות מהתוכנה היו עוזרות:)תודה  
בתגובה להודעה מספר 0
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Roy_Jan 
חבר מתאריך 24.7.15
   19:55   02.05.07   
אל הפורום  
  6. מסכים עם הצ'יף..  
בתגובה להודעה מספר 5
 
   אבל מדריך פצצה :D


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
lior066

   21:12   02.05.07   
אל הפורום  
  7. מדריך הבא יהיה גם תמונות גם פה רציתי להשים תמונות אבל..  
בתגובה להודעה מספר 5
 
   אני עצלן טוב אולי בכלל מדריך הבא אני יעשה מדריך מצולם עם תוכנה של לכידת מסך אני מאמין שזה יקלע הרבה יותר טוב.


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

תגובה מהירה  למכתב מספר: 
 
___________________________________________________________________

___________________________________________________________________
למנהלים:  נעל | תייק בארכיון | מחק | העבר לפורום אחר | מחק תגובות | עגן אשכול
       



© כל הזכויות שמורות ל-רוטר.נט בע"מ rotter.net