PracticU

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

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

קורס PHP - הרצאה 9
בהרצאה זו מוצג איך מחלקים את רשימת המוצרים לעמודים, ואיך טוענים כל עמוד בעזרת AJAX בלי לרענן את הדף. המרצה פותח בדוגמה מהאתר: בתפריט הלחמים יש 21 מוצרים, מסודרים בחמישה בשורה, ולכן יוצאים שני עמודים. המשתמש לוחץ על מספר העמוד והמוצרים שלו נטענים מיד מתחת לתפריט.
חישוב מספר העמודים
1. ספירת שורות: שאילתה סופרת כמה מוצרים יש בתפריט שנבחר, ו-mysql_num_rows מחזיר את המספר.
2. חלוקה: מספר המוצרים מחולק במספר המוצרים שרוצים בכל עמוד. בדוגמה 21 מוצרים ו-8 בעמוד, ולכן מתקבלים שני עמודים ושארית.
3. intval: הפונקציה מעגלת כלפי מטה, ולכן כשיש שארית מוסיפים עמוד אחד, כדי שהמוצרים האחרונים יופיעו.
4. יצירת כפתורי העמודים: עוברים ממספר 1 עד מספר העמודים ומציגים לכל עמוד מספר וקו מפריד. לעמוד האחרון אין קו אחריו, ולכן הלולאה בודקת אם העמוד הנוכחי הגיע לסוף.
טעינת עמוד לפי מספרו
1. LIMIT: ב-SQL מציינים נקודת התחלה וכמות שורות, כך שמביאים רק את המוצרים של העמוד.
2. נקודת ההתחלה: העמוד הראשון מתחיל מ-0. בכל עמוד הבא ההתחלה היא מספר המוצרים בעמוד כפול מספר העמוד פחות אחד.
3. שרשור הפרמטרים: הקריאה לשרת מועברת כמחרוזת שמורכבת מכתובת הקובץ, מהמזהה של התפריט ומהעמוד, בעזרת סימן הפלוס. המרצה מזכיר שבשרשור מחרוזות ב-JavaScript משתמשים בפלוס, ולא בנקודה כמו ב-PHP.
4. דיב היעד: התוכן נטען לתוך דיב ייעודי לעמוד, ולא לתוך הדף כולו.
5. בדיקה ראשונה: לפני הכתיבה של הקוד הסופי המרצה מדפיס את הכתובת עם alert, כדי לוודא שהפרמטרים מגיעים נכון לשרת.
עיצוב המוצרים
1. float: המוצרים צפים ימינה, כך שהם מסתדרים בשורות. התפריט הראשי מקבל גם float כדי שהמוצרים יוכלו להתמקם לידו.
2. clear both: מונע מאלמנט שאחרי הרשימה להיצמד לאלמנטים הצפים. בלעדיו האלמנטים הצפים משפיעים על מיקום הבאים אחריהם.
3. גובה ורוחב: כל מוצר מקבל רוחב קבוע וגובה של 200 פיקסל, כדי שהשם, החברה והמחיר ייכנסו בלי לדחוף את הפריסה.
4. cursor: סמן היד מופיע כשעוברים על מספר העמוד, כדי לסמן שאפשר ללחוץ עליו.
שימו לב
1. משתנה גלובלי: משתנה שנשמר בין הקליקים מונע הסתרה והצגה לא נכונה של התפריט. בלעדיו התפריט נפתח ונסגר בצורה לא עקבית.
2. תמונה חסרה: כשתמונה לא נטענת, מוצג במקומה קובץ חלופי, כדי שהמשתמש יידע שהמוצר קיים.
3. בדיקת התוצאה: בסוף ההרצאה המרצה לוחץ על העמודים ורואה שהמוצרים מתחלפים בלי לרענן את הדף.
4. שארית: בעמוד האחרון מופיעים המוצרים שנשארו, גם אם הם פחות ממספר המוצרים בעמוד. כך לא נופל מוצר בין העמודים.
5. בדיקה בגודל קטן: לפני הגודל הסופי המרצה בודק את העימוד עם מספר קטן של מוצרים בעמוד, כדי לראות בקלות שהחלוקה נכונה.
השיעור הבא בקורס: קורס PHP - הרצאה 10 - חיבור למסד נתונים

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

  1. 00:00

    מבוא: עימוד מוצרים בעזרת AJAX

  2. 00:57

    מעבר לדף השני בעימוד

  3. 02:06

    אירוע onClick לפתיחת תת-התפריט

  4. 04:15

    טעינת דף PHP לתוך div

  5. 04:53

    העברת שם ה-div עם תו בריחה

  6. 07:41

    תיקון בעיית הסגירה של התפריט

  7. 11:42

    פונקציית limit לעימוד בדאטהבייס

  8. 13:34

    קובץ PHP לחישוב מספר העמודים

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

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

  1. 00:06

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

  2. 00:25

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

  3. 00:38

    ותראו, יש פה שתי עמודים, אוקיי? אם אתם תשימו לב, יש לי חמש מוצרים בשורה, כן? וחמש מוצרים בעמודה, זה יוצא 25 מוצרים לכל דבר.

  4. 00:51

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

  5. 01:04

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

  6. 01:12

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

  7. 01:27

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

  8. 01:34

    אוקיי, אז בואו נעשה דבר כזה. אז כאן באינדקט.php יש לנו בעיקרון את התת-תפריט, נכון? הנה, אתם רואים שזה פה.

  9. 01:45

    התת-תפריט שיצרנו זה ה-InnerDiv, ה-Div, כן? ה-InnerDiv. והנה, פה אנחנו יוצרים את ה-Div הפנימי הזה, שבעצם מייצג, כן? את הדבר הזה, כן?

  10. 01:58

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

  11. 02:10

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

  12. 02:22

    בואו ניקח לאיזושהי פונקציה ב-JavaScript שנקרא לה subMenuActivated, זאת אומרת, התת-תפריט הופעל, אוקיי? סאב מניו אקטיבייטד, סאב מניו אקטיבייטד, אוקיי?

  13. 02:37

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

  14. 02:58

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

  15. 03:09

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

  16. 03:36

    ודברי מאפל במשקל זה 10, ועוגות בכירוש זה 11, אז תחת 10 ו-11 יהיו מוצרים. אני בעצם שולח כרגע את התפריט ID לפונקציה הזאת, ומשם, מהטבלה הזאת של פרודקט, אני אשלוף את כל המוצרים עם התפריט ID הזה.

  17. 03:54

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

  18. 04:12

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

  19. 04:28

    אז בואו קודם כל ניתן את השם של ה-div. בואו ניצור לנו פה קודם, או בעצם פה שתי divים, אוקיי? לאחד אני אתן לו id שווה product, ולאחד אני אתן לו id שווה, נקרא לו product number of pages, אוקיי?

  20. 04:47

    product number of pages, אוקיי? אז בואו ניתן לפונקציה הזאת, submenu activated, בתור פרמטר, קודם כל את ה... הנה, זה כאן, תפריט ה-id. דבר נוסף שאני צריך לשלוח זה את השם של ה-div שאליו אני רוצה להתייחס.

  21. 05:04

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

  22. 05:24

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

  23. 05:54

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

  24. 06:19

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

  25. 06:32

    אז בואו לדוגמה גם אותו נתחום ככה, אם כן, בצורה כזאת, נתחום אותו ולזה בואו נאמר שזה יימצא בתוך תיקיית php, כן? בתוך תיקיית php ונקרא לקובץ הזה number, סליחה, number, נגיד, of pages, אוקיי? number of pages, נקודה, בסדר?

  26. 06:52

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

  27. 07:10

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

  28. 07:21

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

  29. 07:46

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

  30. 07:57

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

  31. 08:16

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

  32. 08:28

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

  33. 08:44

    ובואו נאמר, וגלובל שווה אחד, נגיד ככה, if global, כן? אז בבקשה תבצע לי את כל הקוד הזה של ההצגה וההצגה, וכאן בואו נרשום ככה, global שווה אחד. כאן, ברגע שלחצתי על submenu activated, אני ארשום ש"גלורבל" שווה 0. בואו תסתכלו, תראו.

  34. 09:04

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

  35. 09:20

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

  36. 09:30

    אבל, כן, כמובן, הנה, תסתכלו, הפונקציה הזאת open div נקראת פה, באבא, ב-div הראשי שמכיל את הכל, כבר הסברנו את הכל, כן? זה ברור שגם בלחיצה על התת-תפריט הוא נכנס לפה, ל-open div, אבל בגלל שפה אמרנו ש-global שווה 0, משמע, אם אני לוחץ על תת-תפריט, אל תיכנס לדבר הזה, אל תסתיר ותתקן,

  37. 09:49

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

  38. 10:17

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

  39. 10:34

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

  40. 10:49

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

  41. 11:21

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

  42. 12:04

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

  43. 12:25

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

  44. 12:43

    אז אני מתייחס לקובץ הזה, נכון? ל-phpfile, נכון? זה הקובץ שאני רוצה לטעון אותו באג'אקס, עם המתודה get. למדנו את זה בהרצאת אג'אקס, את הקובץ הזה אני אמשוך מהשרת עם המתודה get, אוקיי, אז זה ה-third one, נכון? זה PHP file to operative, זה third one. עכשיו, בגלל שאנחנו נמצאים במערך והוא מתחיל מאפס,

  45. 13:02

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

  46. 13:18

    PHP number of pages, נכון? זה בעצם ה-URL, אותו אני הולך לטעון בעזרת אג'א, כן? לתוך ה-code. אוקיי, בואו נמשיך הלאה. עכשיו, אני צריך כמובן להעביר גם פרמטרים לקובץ הזה, כן, ובואו נסביר למה ואיך. בואו נתחיל לבנות את הקובץ הזה, כן?

  47. 13:40

    הקובץ נקרא number of pages PHP. אוקיי, בואו נעביר את זה. קובץ A, גליד, או ככה. P, the file, save as, P.

  48. 13:50

    אתם יודעים איך קוראים? רצינו לקרוא לו number of pages, אוקיי. בואו נתחיל לעבוד על הכל, אוקיי. קודם כל, בשביל שנוכל לעבוד עם העברית. header, content, type, time, text, yml, par, set ו-tf, אוקיי, זה בשביל שנוכל לעבוד עם

  49. 14:10

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

  50. 14:24

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

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

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

ההרצאה הבאה: קורס PHP - הרצאה 10 - חיבור למסד נתונים

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

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

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

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