קורס PHP - הרצאה 2
product תשמור רק את שם המוצר ואת המזהה שלו. טבלה נפרדת, product_price, תשמור לכל מוצר את המחיר אצל כל סופר.CREATE TABLE נכתבת מחדש, ומעתיקים את חלקי ההגדרה מטבלת המוצרים הקודמת.INSERT אחת מכניסים כמה שורות מופרדות בפסיק. כל שורה חוץ מהאחרונה מסתיימת בפסיק, והאחרונה בנקודה-פסיק.div הוא אלמנט מסוג בלוק ותופס שורה שלמה. span הוא אינליין ונשאר באותה שורה עם האלמנטים הסמוכים.style של האלמנט. השנייה היא internal, בתגית style בתוך ה-head. השלישית היא external, בקובץ CSS נפרד שמקושר בתגית link עם rel="stylesheet".direction: rtl בתוך body מיישר את הדף לימין.margin ו-padding עם ערך 0 מונעים רווחים לא רצויים. המרצה מסביר את ההבדל: שוליים נמצאים מחוץ לאלמנט, וריפוד נמצא בתוכו.font-size ביחידת em מתרחב יחסית לגודל הטקסט שהמשתמש בחר בדפדפן.document.getElementById מביא אלמנט לפי ה-id שלו.style.display בין none ל-block.onMouseOver מחליפים את cursor ב-pointer, והסמן נראה כיד.פרקי ההרצאה: קורס PHP - הרצאה 2
תמלול ההרצאה: קורס PHP - הרצאה 2
הטקסט המלא של הדקות הראשונות בהרצאה «קורס PHP - הרצאה 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו בהרצאה שעברה יצרנו את מסד הנטל ועלינו לבצע פעולה קצת של נרמול מסד הנטל. הוא יתנהל באופן יותר תקין, אנחנו ניצור טבלה שהיא בעצם תייצג את המחיר של המוצר בסופר, זאת אומרת בפרודקט בעיקרון יהיה לי את המוצרים, דבינה מלוחה, דבינה צהובה, בלי המחירים, רק את המוצרים.
אנחנו ניצור עוד טבלה שהיא בעצם תייצג את המוצרים של המחירים לפי סופר, בואו ככה, קודם כל מכאן מטייבל פרודקט אנחנו נוריד את סופר איי-די, לא צריך, לא צריך את סופר איי-די, זה יהיה בטבלה אחרת, וגם לא את, בואו נעשה קונטרול זייד, כי אנחנו נצטרך איי-די אחר כך, ניקח ככה, ניקח את פרודקט פרייס x לבינתיים,
נשמור אותו כאן בצד, מאוחר יותר, נעתיק את הקוד שמייצר את טבלת פרודקט, אני יצר קוד שייצור לנו טבלה בשם product try, אוקיי?
בסדר. יהיה לי product ID, כן? אבל בעיקרון הוא יהיה מפתח זר מתבלת product, אז בואו נעתיק את כל הסינטקסט הזה לכאן, אוקיי?
הוא יהיה foreign key, product ID, מתייחס לטבלת product, לשדה product ID, אה? product. עוד דבר שיהיה לנו, זה יהיה super ID, הוא גם יהיה מפצה אכזר וכמובן הוא מתייחס לטבלת סופר לצדד סופר איידי והצדד האחרון זה המחיר control x v נוריד רק את הפסיק נשמור ואבא נייצר את הטבלה במסד הנתונים k כאן יהיה בעיה כן in not null כמובן וכאן
הפכנו את ה-on update k אבא שוב נעתיק את הקוד ונבצע את העולה שנית בתקווה שהפעם זה יעבוד עדיין לא בואו נראה מה הבעיה הבעיה היא בפורן כי סופר כאן שכחנו עוד פעם בואו נראה אוקיי נוצרה טבלה product strike אוקיי כעת אנחנו נתעסק קצת בcss אנחנו נסביר על שלושה סוגי עיצובים בואו נשים לב בואו כאן במקום נרשום את הסלקטור דיו, ההבדל בין ספאן לדיו
בר באמצע, בואו ניתן כאן את העיצוב הראשון, בואו קודם כל שים לב גאש לסלזול, שימו לב מוצרי חלב, מוצרי בשר, מוצרי מאפה, ממתק, בואו אולי עכשיו נסביר אולי את ההבדל בין ספאן לדיו, בואו נעשה ספאן, פאנק, שמור, פרש, שמתם לב?
אוקיי, אז ראינו שאנחנו ברגע שאנחנו מוצאים יוצרים, לך אלמנט מסוג pan בעיקרון הוא אלמנט שנקרא inline element level מה זה אומר זה אומר inline בתוך השורה זאת אומרת ישנם אלמנטים ב html שאם אנחנו נייצר אלמנט אחר אלמנט הם יופיעו באותה שורה הם לא ייווצרו וירדו שורה אלא הם יהיו באותה שורה זה inline באותה שורה כמובן אם הם יגיעו לקצה
ולא יהיה להם יותר מקום במסמך הם ירדו שורה באובייקט דיו באלמנט דיו הוא מסוג בלוק וזה אומר שכל אלמנט בעצם שנוצר יוצר לעצמו שורה חדשה זה ההבדל הראשון שיש לדוגמה בין דיו לספאנג דיו הוא מסוג בלוק לבל אלמנט בסטייל הוא מסוג אינליין לבל אלמנט וכמובן אנחנו בתפריט שלנו רוצים להשתמש בתפריט כזה, ולכן זה יהיה בלוק שהוא דיו.
בואו ניצור את העיצוב. את העיצוב של מסמך האינטרנט עושים בעזרת שפה שנקראת CSS. היא בעצם שפת עיצוב לאתרים. הראשי תיבות שלה זה Cascade Tile שאומר גיליונות עיצוב מדורגים, וישנן שלוש שיטות בעיצוב השיטה הראשונה זה האינליין מה זה אינליין?
זה כמו שכשמו כן הוא, בתוך השורה תסתכלו, בואו נרשום פה את המילה השמורה סטייל ובגלל שפה אני משתמש בגרשיים, אז כאן אני אשתמש בגרש גרש ובואו ניתן לדוגמה את המאפיין הראשון שנלמד היום לדוגמה הוא הבורדר, הקו מצהר V, בורדר במקום שווה אני עושה פה נקודותיים.
אחד פיקסל זה העובי. בואו ניתן לזוגמה את הצבע yellow ואת התורה של הקו מתאר זאת שזה מנוקד ונעשה נקודה פסיק. הבה נראה זאת. בטמתם לב?
תסתכלו, הנה הביבים, המיכלים הצהובים מגלים את הצרים. זה סוג אינלאנט. סוג השני של העיצוב זה נקרא אינטרנל סטייל, אוקיי, היכן הוא מופיע? הוא מופיע כאן, בין תווית הפתיחה ותווית הסגירה של האד, אנחנו נרשום את שורות הקוד הטייל, ולא לשכוח לסגור אותו, סטייל, טייל שווה טקסט css, בואו נבצע אזחה כדי שזה יהיה יותר מסודר, אוקיי?
ובואו לדוגמה, לדיו הזה, או אתם יודעים בואו נלך לדיו הזה, בואו ניתן לו גם קו מתאר בורדס. כשאני רוצה לפנות בכובד או אינטרנל כאן או אקסטרנל כמו שנלמד בהמשך כשאני רוצה לפנות ל-ID אני פשוט מעתיק את השם של ה-ID שם לפני זה סולמית ופותח סוגריים מסולסלות סוגר אותם כמובן וכאן בפנים אני רושם את העיצוב של האלמנט הזה שמייצג אותו ה-ID
בדוגמה שלנו מיין נאב ריי בואו ניתן לזה לדוגמה גם קו מתאר בורדר בואו נעשה שתי פיקסלים צבע בלאק ואינסט רק בשביל לראות את קו המתאר אוקיי רואים בעצם הדיו הזה הנה הוא שכאן הוא נפתח וכאן הוא נפגר מכיל בתוכו קוד PHP שמייצר לנו עוד ארבעה דיווים
כנגד ארבעת השורות שיש לנו במיין פרודקט. הנה התוצאה. עכשיו בואו נלך לדוגמה ליצור external css file. איך יוצרים?
אוקיי, file, new csh, אוקיי, כאן ניגש לתיקיית virtual ויש לי פה סטייל ופה בואו נרשום את הכובד, אני יצרתי תיקייה בשם סטייל, בואו נרשום את הכובד body, לשים לב.css הוא אומר לי שזה כבר קיים אז בואו נעשה דבר כזה ניגש לvirtual אני לא יודע למה הוא כנראה יש את זה
בואו נרשום ככה בואו נייצר את זה בתוך virtual בינתיים בתקיית virtual body css בואו כרגע שורה הזאת ניגש לכאן תן לו לעזור אותו בואו ניצור פה תקיית site ונדביק אותו כאן אוקיי שימו לב שם הקובץ לא לשכוח.css בואו לדוגמא בבודי נייצב את הסלקטור בודי.
כל דבר כזה נקרא סלקטור. כל תגית ב-HTML נקראת סלקטור. אז בואו נייצב את הסלקטור בודי. איך אני עושה זאת? אני רושם את השם של הסלקטור בלי התגיות.
בוד פותח סוגריים, סוגר סוגריים, ובואו קצת נעבוד על העברית. הרי אנחנו כרגע מוצמדים לשמאל. בעברית אנחנו חייבים להתחיל מצד ימין. יש את הפקודה ב-CSS שנקראת direction right to A. בואו נשים לב.
עכשיו שימו לב, זה לא מגיב. למה? כי הקובץ הזה הוא חיצוני. אנחנו צריכים לגשת אליו. כיצד עושים זאת? כאן בשורת העד אנחנו יוצרים את הקוד הבא.
לינק, בואו גם יעגור אותו. rel = file hit, y שווה text css וכאן זה הקטע החשוב href שווה אנחנו מדברים על תיקיית time ועל הקובץ body.css נעשה ctrl s היגש בואו נסתיים it time text css href שווה time body.css הקו הזה הוא מיותר בואו רגע נסגור ונפתח שוב את הקובץ יכול להיות משום מה דברים שתקועים בזיכרון אולי
בוט בון פייל פייל אופן אוקיי, יש לנו זהיה פרוג'קט, קלין, נעשה פה שכן, עובד, מידע והוא לא הצליח עוד פעם, ניו, צי-אס-אס, וירטואל, טויל, בודי, בקלדה, אס-אס, תשימו
לדוגמה, טסט, פינית, איי, תשימו עוד פעם את הסלקטור בודי ונרשום פה דיירקשן, דיירקשן, right to left וכמובן זה לא עובד בגלל שפה נעשה בוד אחד עוד מעט נשנה את זה, אוקיי, in a direction right to left, אוקיי, בואו נעשה 5, save as, בודי, שירות, Replace, גס,
ניגש לפה, וכמובן לא בודי אחד אלא בודי, תרנוח, רק refresh, כן, הכל תקין. התכונה הבאה שנלמד עליה ב-CSS בעיצוב זה padding ו-marging.
אם אנחנו נפתח את ה-word, אנחנו נשים לב שישנם שוליים, שוליים שמאליים, ימניים, שוליים עליונים ושוליים תחתונים.
במסמך האינטרנט, הצורה הנכונה בדרך כלל לעבוד היא ללא שוליים ובשביל לבצע זאת שוליים זה מרג' שימו לב לפקודה מרג'ין יש פה מרג'ין בוטום, לפט, רייט וטופ זאת אומרת יש לי פה שליטה ב-CSS על כל השוליים על העליונים התחתונים השמאליים והימניים אם אני ארצה לומר שלא יהיו שוליים
בכלל לאף אחד מייצגי השוליים הללו פשוט אני ארשום margin time 0 אז זה אומר שכל השוליים לא יהיו תסתכלו להבדל אתם רואים שיש פה איזה מין שוליים כאלה קצת קטנות וגם פה למעלה תסתכלו עכשיו זה הכל צמוד מעלה ולצד אוקיי עוד דבר padding שזה אותו הדבר רק המרווח הוא לא למסמך עצמו אלא יש בתוך האובייקט איזושהי
מסגרת שאתם לא רואים שיש ממנה מרווח גם שם נעשה padding אפס ואז הכל יהיה צמוד בלי שום בעיה אוקיי בואו ניתן את העיצוב קצת למסמך שלנו ונמשיך לדבר על שלושת השקפים בואו ניגש לדבר הזה שנקרא coffee cup web color handbook שזה בעצם ספר ללימוד גרפי של אתרים שם יש איזו דוגמה הנה את האתר הזה שממנו אני רוצה לקחת את הצבעים
שלי בואו נעשה את זה יש לי עוד תוכנה שרכשתי הנה היא הסקמר ה-ColorScammer אני אקח פה את ה-CaptureColor אני אגש פה רגע לקובץ ה-PDF ואני אקח את הצבע הזה קצת יותר בהירות זה אקח אותו ואני אבוא לבודי ואני ארשום פה BackgroundColor שימו לב וואלה אוקיי עכשיו את הצבעים של לתווים, אני רוצה לעשות בצבע, אני שוב פעם ניגש עם ה-Color Capture,
ואני אלך פה לצבע הזה, אני יכול פה לראות למטה שאני נמצא עליו, בואו נעתיק אותו, וניגש ונרשום פה Color, בואו בינתיים כדי שזה לא ישפיע על כל המסמך, אני רוצה שזה ישפיע רק על ה-Main Up, או שאתם יודעים מה, בואו נעשה את זה על כל המסמך, מקסימום אחר כך
אם נרצה לעשות שינויים נעשה, פולו, זה בעצם שולט על צבע הטקסט, אוקיי, בסדר, בואו נמשיך, ניגש למסמך הראשי, זוכרים