PracticU

קורס PHP - הרצאה 8

בלי כתוביותעם כתוביות
PracticU › קורס PHP - פרויקט מעשי › קורס PHP - הרצאה 8
מילון מושגים:
PHP - שפת תכנות לצד השרת, נפוצה בבניית אתרים דינמיים ומערכות ניהול תוכן כמו WordPress.
AJAX - טכניקה שמאפשרת לדף אינטרנט לשלוח ולקבל נתונים מהשרת ברקע ולעדכן את התצוגה בלי לטעון מחדש.
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
אסינכרוני - אופן פעולה שבו פעולה ארוכה רצה ברקע והתוכנית ממשיכה בלי להמתין לה, ומטופלת כשתסתיים.
תגובה - המידע שהשרת מחזיר ללקוח בתשובה לבקשה, הכולל בדרך כלל נתונים וקוד סטטוס.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).

קורס PHP - הרצאה 8
בהרצאה זו מוצג AJAX, שהמרצה מדגיש שאינו שפת תכנות אלא טכניקה. הטכניקה משלבת JavaScript בצד הלקוח עם בקשות לשרת, כך שחלקים מהדף מתעדכנים בלי לטעון את כל הדף מחדש. בהמשך מוצגת דוגמה שבה תמונה נטענת לתוך דיב אחרי לחיצה.
מה AJAX עושה
1. טכניקה: שילוב של JavaScript בדפדפן ושל פעולות בצד השרת, בלי שפה נפרדת.
2. האובייקט המרכזי: XMLHttpRequest מבצע את הבקשה לשרת ברקע.
3. אסינכרוני: הפרמטר השלישי של open שמוגדר true מאפשר לדף להמשיך להיטען בזמן שהבקשה רצה, ולא לחכות לה.
4. למה זה חשוב: אם דף עם הרבה תמונות היה נטען שורה אחר שורה, המשתמש היה עוזב אותו. בטכניקה הזו הדף נשאר זמין בזמן שהנתונים מגיעים.
שלבי הבקשה
1. יצירת האובייקט: בודקים אם הדפדפן תומך ב-getElementById. בדפדפני מיקרוסופט הישנים משתמשים ב-ActiveXObject בשם Microsoft.XMLHTTP, ובשאר הדפדפנים ב-XMLHttpRequest.
2. readyState: ערכים מ-0 עד 4. הערך 0 אומר שהבקשה לא התחילה, והערך 4 מציין שהבקשה הסתיימה והתגובה מוכנה.
3. status: 200 מציין הצלחה, ו-404 מציין שהדף לא נמצא.
4. הזרקה לדף: responseText מוכנס לתוך innerHTML של האלמנט שנבחר, והתוכן של הדף החדש מופיע במקום.
5. onreadystatechange: הפונקציה נקראת בכל פעם שהערך של readyState משתנה, ולכן אפשר לבדוק בכל שלב מה המצב.
דוגמה מהשיעור
1. onclick: כפתור קורא לפונקציה ב-JavaScript, והפונקציה מפעילה את הקריאה לשרת.
2. arguments: הפונקציה מקבלת את הפרמטרים דרך המערך arguments, שמכיל את כל מה שנשלח אליה. בדוגמה: כתובת הקובץ ושם הדיב שבו מציגים את התוצאה.
3. התוצאה: בדוגמה התמונה נטענת אל תוך דיב בלי לרענן את כל הדף.
שימו לב
אם הבקשה נכשלת, כדאי להציג למשתמש הודעה מתאימה. המרצה מזכיר שהצד של השרת, שמחזיר את התוכן, ייתפס בשיעור הבא, ושהחלק הזה כולו נשען על הקשר הנכון בין שני הצדדים.
השיעור הבא בקורס: קורס PHP - הרצאה 9

פרקי ההרצאה: קורס PHP - הרצאה 8

  1. 00:00

    מבוא לטכניקת AJAX

  2. 02:01

    יצירת אלמנט div והוספת JavaScript

  3. 04:06

    זיהוי לחיצה על כפתור בעזרת isset

  4. 07:18

    פונקציית ajaxManager ומשתני הארגומנטים

  5. 08:32

    מבנה switch להחלפת תוכן

  6. 10:27

    שליפת אלמנט לפי ID בדף

  7. 11:44

    יצירת אובייקט XMLHttpRequest

  8. 13:00

    בדיקת readyState וסטטוס 200

תמלול ההרצאה: קורס PHP - הרצאה 8

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

  1. 00:06

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

  2. 00:19

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

  3. 00:46

    צד לקוח וצד שרת, סתם, צד לקוח, שפה שאתם מכירים אולי מצד לקוח היא JavaScript, זאת אומרת, כשאני מבצע איזושהי פעילות בדפדפן שלי, כן? ואני לא ניגש לשרת כדי לראות איזושהי תוצאה, זו תכנות בצד לקוח, כן?

  4. 01:03

    Client Programming. PHP, לדוגמה, היא צד שרת, כן? לדוגמה, שבעצם ב-PHP אנחנו בעצם יוצרים לדוגמה כל מיני בקשות לשרת, שולחים לשרת בקשות, כן?

  5. 01:17

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

  6. 01:34

    אז הלב של אדג'אקס זה אובייקט של JavaScript שנקרא XML HTTP Request, המקביל שלו, האקטיב איקס שלו, שהוציאה מייקרוסופט, אנחנו ניתקל בו בהמשך ההרצאה.

  7. 01:53

    טוב, אז בואו סתם נראה איזושהי דוגמה של אג'אקס ונראה במה מדובר, אוקיי? בואו נעשה דבר כזה. בואו ניצור פה, בתוך הבודי שלנו, איזשהו מכל דיו.

  8. 02:12

    בואו ניתן לו איזשהו ID מסוים. כן, ופעם נקרא לו אני יודע מה picture k, נתתי לו איידי שם picture k, ובואו נבנה עכשיו כרגע ב-JavaScript, כן, אפילו לא נקרא לה מתוך קובץ חיצוני, אלא בואו ניצור פה את ה-JavaScript, אוקיי, Script Language, כן, שווה JavCrip and Script Language,

  9. 02:41

    אוקיי, בואו רק נראה שאנחנו באמת יכול תקין, פאנקס טסט כן נכון אלרט סטוק רדר בואו נעשה את זה בפי.אח.פי נעשה את זה בפי.אח.פי דינמי כן נעשה ככה אקו כן נעשה שנייה רגע פורן פורן נסגור את זה פילד סט בואו פה ניצור אינפוט שייזה כלומר אמת אוקיי ניים וטסט וואן value ואוקיי לואוד או אימפלנט יותר נכון אימפלנט ותשתול, אימפלנט אג'אקס, אוקיי? ככה, בואו

  10. 03:22

    רק נראה, הנה אוקיי, אימפלנט אג'אקס, ואתם רואים? זה הכל נמצא בתוך הפורמוס, בואו נעשה ככה, אקשן שווה, דיברנו על שאני רוצה להפעיל את אותו הטופס, כן?

  11. 03:34

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

  12. 03:52

    מתוד ופוסט, אוקיי? מתוד, אוקיי? בואו ניתן גם name ו-my one, אוקיי? בסדר, נשמור, נראה, אוקיי?

  13. 04:03

    עכשיו פה אנחנו שואלים, ברגע שה... if is set, כן? ככה, דולר, ריקוויט, כן? של טסט אחד, משהו נלחץ, כן? אז בואו נקרא לפונקציה הזאת, טסט, אוקיי? תסתכלו דבר יפה, אנחנו כבר ראינו את זה, אני חושב בהרצאה הקודמת, איך קוראים לג'אווה סקריפט מתוך PHP, כן?

  14. 04:24

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

  15. 04:37

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

  16. 04:56

    בואו נבדוק שאכן זה עובד, אוקיי? אז הוא באמת לא מזהה, כן, את הפונקציה הזאת, כן? אם אני אבוא לדוגמה ואני אעשה פה, כן, x1, לא, בשביל לראות שאכן זה עובד, הנה, אתם רואים?

  17. 05:10

    כן, זה כן עובד. רק לפונקציה ב-JavaScript, כן, הוא לא קורא לה. אתם יודעים מה, בואו נכתוב את הפונקציה הזאת כבר פה, כן, בגוף תחת כל זה, copy time, כן, echo תחת, אוקיי, ראיתם, אוקיי, בסדר, אז בסדר, אז הנה אז בכל אופן, רואים שזה כן עובד, טוב, אז בואו בעצם נראה איך פועל הרכיב של אג'אק, אוקיי, בואו ניצור פונקציה, כן, בואו ניצור פה פונקציה, נתחיל את זה,

  18. 05:49

    באמת אני אומר שאני עדיין לא מצאתי באינטרנט איך ניתן לקרוא כביכול לפונקציה ב-JavaScript מתוך PHP אבל לא עם השיטה הזאת שאני מכניס פה את הקוד של ה-Script Language אלא ממש סתם לקרוא לפונקציה ב-JavaScript.

  19. 06:07

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

  20. 06:29

    קשוט ככה, בסדר, בסדר בינתיים ככה, אבל באמת אני רוצה לא לעבוד בצורה כזאת, אני רוצה לפתוח קובץ gs, קובץ שתכלול אותו, בעיקרון הוא נמצא פה, בואו נעשה ככה, לא נעבוד בצורה הזאת של phd ככה, אלא בואו פה נעשה, כשאני לוחץ on click פה, בסאב ביט הזה, או בואו נאמר שזה כפתור מסוג בטן,

  21. 06:55

    אוקיי? ובואו נעשה פה און קליק, נקרא לה פונקציה שבואו נעזוב כרגע את הפי אקס פליגה, ובואו, זה ככה, און קליק, וטסטיק, אוקיי?

  22. 07:10

    בסדר? אוקיי, בסדר. בואו נתחיל פה בעצם לבנות את האדג'אק. בואו נראה, אוקיי, בואו נתחיל לרשום את הפונקציה.

  23. 07:20

    פונקצ'ן, כן? נקרא לה אג'אקס מנאגר ואני רק כרגע כותב את הקוד ועל כל יוסבר var art שווה שם של הפונקציה נקודה ארגומנט אוקיי נקודה ארגומנט מה זה בעיקרון אומר זה אומר שאם לדוגמה כן באון קליק אני אקרא לדוגמה לאג'אקס מנאגר ובוא נאמר שאני ארצה לשלוח לה בתור משתנה את הדיו שהאידי

  24. 07:48

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

  25. 08:03

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

  26. 08:11

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

  27. 08:27

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

  28. 08:40

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

  29. 09:06

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

  30. 09:35

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

  31. 09:48

    סתם זה בשביל הנוחות, אפשר לעשות את זה בכל מיני דרכים, זה לא מכריח אתכם לעבוד בצורה כזאת, זה סתם בשביל הנוחות. אג'קס מנאג'ר, פה אני אתן הפעם בארגומנט 0 את לואוט פייס, אז בעצם הוא יבוא בפעם הבאה, הוא יבצע את החלק של הקוד הזה, ובואו פה, אני יכול לשלוח כבר, נכון, הרי יש לי פה את השם של הדיו הזה, את ה-ID, הוא מופיע בתואר ארגס 1, אז בואו נרשום ככה,

  32. 10:18

    ארגס אחד, זה הכל מופיע פה, בטווח הזה ארגס, ארגס אחד בעצם מכיל לי את המחרוזת, זה בעצם ה-id של ה-d, אוקיי, נקודה פסוקה, אוקיי, פה אנחנו בעצם, פה זה עיקר הבנייה של האדם, בואו נבצע את השורה הבאה, בשביל לעבוד עם אג'אקס, אני צריך לעבוד עם הפונקציה שנקראת getElementsByID, אז קודם כל בואו נראה בכלל אם הדפדפן שלי הוא

  33. 10:50

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

  34. 11:17

    כן, אז אנחנו ניתן הודעה, כן, שאי אפשר לעבוד עם האג'אקס. בואו נעשה אלט, alert, כן, כן, קנוט, אה, קנוט מור אג'אקס, אוקיי?

  35. 11:34

    ונעשה פה רייק, לצאת, אוקיי? אבל בגלל שזה יותר מפקודה אחת, שוב, ריימן, אוקיי? אז מה קורה במידה ואני כן יכול לעבוד? מה, גט אלמנט ביי איידי יותר נכון? בואו ניצור כרגע את המשתנה, שהוא בעצם הלב של אג'אקס, כן?

  36. 11:51

    נקרא xml hdp request, אז כך, וו, נגיד x שווה, כן, אני קודם כל שואל אם זה דפדפן של מה, זה איך אני עושה את זה, אני רושם windows, windows, windows, windows, נקודה, active x object, אוקיי, active, נראה לי שזה באותיות גדולות, כן, x object, זה השאלה, כן, עכשיו אני שואל, אם זה ככה,

  37. 12:18

    אז אני רושם ככה, הקראתי כתקופת הזה, אז ActiveX Object ואני רושם פה Microsoft.XMLHTK זה במידה וזה של מה קורה במידה וזה משהו אחר המשפט שאני צריך לרשום כזה ארץ מיו אקס אמל אקס אמל בוא נראה מה שקורה את זה ומובנה על זה אקס אמל ht request אוקיי ככה פה בעצם זה הלב כן האובייקט הזה שנקרא

  38. 12:56

    אקס אמל http request או המקביל של מייקרוסופט נקודה אקס אמל http זה הלב של אג'ר אוקיי בואו נרשום כרגע נעיית נכון את הכל שווה פונקצ'ן אוקיי if e.readyState שווה שווה 4 nx.sa שווה שווה 200

  39. 13:22

    אז תבצע את הדברים הבאים אלמנט l שווה לא קיבל פקודה אלמנט y רואים את ה-id ששלחנו? שהוא נמצא בארקס אחד?

  40. 13:33

    r1 בעצם פה הכל יוסבר עוד מעט כן, אלמנט דה פינר html שווה x נקודה a, x נקודה open, get sqr2, sq וx נקודה send a,

לקורס המלא: קורס PHP אונליין בעברית

ההרצאה הקודמת: קורס PHP - הרצאה 7

ההרצאה הבאה: קורס PHP - הרצאה 9

הרצאות קשורות מקורסים אחרים

  • סוס טרויאני בהעלאת קבצים לאתר - PHP - אבטחה ברמה נמוכה - DVWA Low

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פייתון - Python