1 דובר: הכל, ממש ברכה בחזרה. זה CS50. וזו תחילתו של השבוע תשע. וזו היא ההתחלה של שאר את הזמן שלך בCS50, שבו אנו מעבר עכשיו, סוף סוף, לאינטרנט היבט של הקורס, שבו תוכל מוצא שהרבה את היסודות ש אנחנו כבר מייצאים לשבועות עדיין חוזרים לבקר, או לרדוף, אותנו. אבל עכשיו, אתה תמצא שזה סדר הגודל יותר קל לבצע משימות מסוימות ו לפתור בעיות מסוימות - עד כדי כך שגם אם חשב סטים בעייתיים מסוימים היו כיף בהם הדרך שלו, אני חושב שאתה תמצא כי עמ להגדיר 7, עמ '8 להגדיר, ולאחר מכן, סופו של דבר, פרויקט הגמר יהיה כל הסיפוק יותר, כי אתה מוצא שאנחנו מתחילים לקחת כמובן מאליו עכשיו דברים כמו ניהול זיכרון, ו מצביעים, ומה קורה על מתחת למכסת המנוע. ושוב, נושאיות, לאורך כל סמסטר כבר שכבות זו ושכבות. ועכשיו אנחנו סוג של עד כאן, עומד על כתפיים של שבועות האחרונים. 

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

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

רמקול 2: זה כתובת IPP4 32 סיביות. 

רמקול 3: IPP, כמו באינטרנט? 

רמקול 2: רשת פרטית. לרשת הפרטית של Amita. היא כל כך מדהימה. 

רמקול 3: בחייך, צ'רלי. 

רמקול 2: זה. כתובת ה-IP מראה. היא מאפשרת לנו לצפות במה היא עושה בזמן אמת. 

1 רמקול: אוקיי, אז כמה דברים לא בסדר בתמונה הזאת. אז אחת, ואת זה הוא מקובל, זה הוא למעשה לא כתובת IP חוקית. כתובת IP חוקית צריכה להיות מספרים של הטופס w.x.y.z, שבו כל אחד מ המכתבים האלה הוא 0 עד 255. אבל זה בסדר, כי בדיוק כמו סרטים שבם הם מספרי טלפון מזויפים, הם מזייפים את כתובות ה-IP. אתה לא ממש פגע שרתים אמיתיים. 

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

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

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

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

קהל: ה-FTP. 

רמקול 1: ה-FTP. אז פרוטוקול העברת קבצים הוא אחר. רובכם בוודאי לא השתמש בו. אבל רובכם כנראה השתמשו דברים כמו Gchat, או מיידי מסרים באופן כללי יותר, בהחלט דואר אלקטרוני. ואלה, גם הם שירותים שרצים על גבי האינטרנט כי, ב סופו של היום, האינטרנט עצמו באמת רק לקבל נתונים מנקודת א נקודה ב 'וזה משתמש במספר חלקיקים עצמו, אחד מהם או שתיים מהם ביותר, בדרך כלל בשם TCP / IP, כלומר מחשב אחד שעל האינטרנט באמת יכול לעשות דברים שונים, דואר אלקטרוני, ואינטרנט, וכן הלאה. גוגל עושה הרבה זה. אז איך השירותים האלה באופן ייחודי מזוהה, לא אנחנו אומרים, במחשב כי בעצם אפשר לעשות דברים מרובים? 

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

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

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

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

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

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

אבל יותר מבחינה טכנית נכון מעניין עכשיו זה הולך להיות זה. אם אני הולך לכרטיסיית הרשת, בואו עכשיו לנקות את זה. אני הולך ללחוץ קצת סמל לחצות כאן, ולאחר מכן ללכת לאתר אחר. ואני רק הולך להקליד בFacebook.com. לא HTTP, HTTPS לא, לא בעניין. בואו לראות מה באמת קורה כאן. 

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

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

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

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

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

אז זה היה הבחירה שלי. למעשה, רובנו רק לעתים נדירות, כנראה, הקלד www.whatever.com בימים אלה. אבל מתברר למנהל מערכת, כמו פייסבוק של, יכול להגדיר את השרתים שלהם בצורה כזו כי גם Facebook.com עובד, או www.Facebook.com עובד, או, בעצם, כל קידומת כזה מולם שם תחום. אז הם עשו את זה בשבילנו. והם מפנים אותנו, כנראה לחלק טכני, כמה סיבות שיווקיות. הם רק רוצים canonicalize על www.Facebook.com. 

אבל זה לא בדיוק זה. אם אני לגלול למטה כאן, בואו לראות מה קורה. זה אומר לי שאנחנו עבר באופן קבוע ל http://www.Facebook.com. אז בואו נסתכל על הבקשה השנייה כי הדפדפן שלי שולח. למרבה הצער, זה נראה כמו פייסבוק עבר שוב כי השני בקשה, על ידי בחירת כתובת אתר שבמקום זאת, אומר שגם עבר באופן קבוע. ותן לי לגלול למטה כאן לכותרות בתגובה. לאן נעלם פייסבוק עכשיו? 

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

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

קהל: סקריפטים? 

רמקול 1: סקריפטים, קבצים אחרים כך כתוב בשפה הנקראת JavaScript, אשר, שוב, אנו לראות קצת ביום רביעי. מה עוד? גיליונות סגנון. אז משהו בשפה שנקראה CSS, אשר שנראה בקצת. GIF, וJPEGs, וPNGs ותמונות, וסרט קבצים - כל מה שדף האינטרנט יש סיכוי הטוב ביותר ב הצורה של קובץ. ואז מה שאנחנו רואים בצד השמאל צד יש את כל הקבצים שכרום היה צריך להוריד, באופן רקורסיבי, אם תרצה, על מנת להלחין את השלמות של הדף. 

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

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

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

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

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

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

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

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

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

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

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

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

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

אז במקרה הזה יש לי כאן שורה אחת שאומרת printf. לכן, כאשר אני מפעיל את קוד מקור של זה, hello.php, למרות שתכנית קורה, בנוחות, שייקרא PHP, PHP התכנית כי הוא הולך לקרוא בקובץ זה, מלמעלה למטה, משמאל לימין, וזה הולך לעשות מה שאני אומר לו לעשות - ביצוע קוד, ואם הוא אינו מזהה משהו, פשוט יורק אותו החוצה. אז אני הולך קדימה להפעיל PHP של hello.php. Enter. 

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

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

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

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

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

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

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

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

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

ובכן, תן לי ללכת ל-Chrome כאן. ותן לי ללכת ל http://localhost/index.html. אז מה המארח מקומי? ובכן, רוב מחשב כלשהו בעולם, לינוקס, Mac OS, Windows, יש כינוי שם מארח מקומי. אז אם אי פעם אתה רוצה לדבר למחשב שלך - אם כי, באופן מוזר רפלקסיבי - אתה קורא לעצמך מארח מקומי. לא משנה מה הוא המחשב שלך בפועל קרא, בין אם זה של דוד MacBook אוויר, או משהו יותר מפורט כזה. 

אז URL זה כנראה הולך להשתמש HTTP כדי לדבר עם המארח המקומי, אותו מחשב, את המכשיר, ו זה הולך לבקש, פשוט לקחת את לנחש, מה קובץ? Index.html. אז המכשיר הוגדר ב להתקדם ליודע שאם אני מבקש למשהו כמו index.html, לחפש בתיקייה בשם Vhosts, ב תיקייה בשם localhost, בתיקייה בשם הציבור בו. זה שבו כל הציבור שלי קבצים הולכים להיות. אז אני עכשיו הולך על Enter. 

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

תנו לי ללכת לספריית Vhosts שלי, לתוך localhost, לציבור, ולתת לי לעשות את מקף L LS. ויש עוד כמה דברים לכאן למטרות של היום. אבל שים לב בצד השמאל, ליד לindex.html, אנחנו רואים אחד RW בלבד. ובעבר, מה יש RW עמד ל? 

רק לקרוא או לכתוב. עובדה שזה אומר RW בצד השמאל אומר שאני, הבעלים של קובץ זה, יכול לקרוא או לכתוב אותו. אבל אני צריך לתת לכל אנשים ב העולם לקרוא את זה, אם כי לא כותב את זה. אז אני הולך לשנות את מצבו של קובץ, chmod, כל r בתוספת לתת כולם לקרוא את האישור על קובץ בשם index.html. 

ואם אני L מקף LS עכשיו Retype, הודעה כי, לכאן, עוד קצת R של צצו. ועכשיו, המפרט הולך לקבלת פרטים נוספים. עבור P 7 סט, שרק אומר כולם עכשיו יכול לקרוא קובץ זה. אם אני חוזר לדפדפן שלי החברה ולטעון מחדש, וזהו. שלום עולם. 

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

אז מה אנחנו יכולים לעשות יותר בדף אינטרנט? ובכן, פשוט, בואו רוח באמצעות כמה מהדברים האלה. אבל תן לי ללכת קדימה ולפתוח מחדש Gedit עם index.html. ותנו לי להמשיך ולומר שלום CS50, לשמור קובץ זה, לחזור ל דפדפן, שינוי באמת underwhelming. 

אבל מה אם אנחנו רוצים באמת קישור למשהו עכשיו? אז מתברר שיכול להיות לנו קישורים ב-HTML, כי הם פשוט תגים את עצמם. זה קורה להיקרא תג עוגן. href שווה https://www.cs50.net, www.cs50.net ציטוט קרוב, קרוב סוגר. ועכשיו בואו נראה מה עוד יבוא בהמשך. 

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

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

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

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

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

אבל בואו נהיה קצת יותר זדוני כי זה סוג של טיפשים. מה יקרה אם נשנה את זה ל Paypal. ומה אם אנחנו קוראים לזה, כאילו, www.paypal.badguy.com, כל תחום הוא. שכנראה קיים. אז עכשיו תן לי לטעון מחדש את הדף. וכאן יש לנו סוג של התחזות התקפה, P-H-I-S-H-I-N-G, שהוא מילה טיפשית נתון להתקפה כי מנסה מידע דגים, או, טוב יותר ובכל זאת, כסף, מאנשים על ידי הטעיית שלהם למתן מידע ה אחרת הם עלולים לא לעשות. זה נראה לגיטימי לחלוטין, נכון? אני חייב להיות כאן קישור לPaypal.com. למען הגינות, אם אני חרמנית אותו עם כמה גרפיקה, אנחנו יכולים לגרום לזה להיראות יותר כמו PayPal. נכון? כי אני יכול, במאמר מוסגר, אני יכול ללכת לPaypal.com. ויש לנו רק לראות איך אני יכול לראות את כל של HTML שלהם. אני יכול פשוט להעתיק אותו ולשחזר את אסתטיקה של Paypal ולא ללכת בית הספר ישן כאן. אבל שם לב, כמובן, וזה קצת קטן עדיין, רק בחלקו התחתון פינה שמאלית, כמו בנקודה 10 גופן, האם אתה רואה את מה שאת כתובת אתר בעצם הולך להיות הוביל ל. 

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

וזה היופי של התקפות פישינג. אתה יכול לשלוח מיליון הודעות דוא"ל. וגם אם 0.01% מאנשים באמת לחץ על Paypal וייתן לך שלך סיסמא, זה עדיין מספר שאינו אפס אנשים פשוט שיש לתת לך הכסף שלהם. ושליחת מיילים, כמובן, היא די קל ו, למעשה, ללא תשלום בימים אלה. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

קהל: יש לי שאלה. 

רמקול 1: אה, סליחה. 

קהל: למה זה לא היה בצבע - 

רמקול 1: אה, בכרטיסייה האחרת? זה כאן? 

קהל: לא, זה כמו - 

1 דובר: אה, זה בגלל אני להיות מרושל. אני שם את הקובץ במקום הלא נכון. אז אם באמת שמתי את זה כאן, ואני chmod זה, כל + R לstyles.css, ו עכשיו לטעון מחדש את הדף, עכשיו אנחנו לקבל את סגנון גב. ובגלל שגודל הגופן הוא שונים, אנו לא רואים די הרבה שטח לבן. אנחנו במקום לראות מה ברירת מחדל הוא במקום. שאלה טובה. כן? 

קהל: מדוע הקישור תג בתוך הכותרת? 

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

בסדר, גם בואו נעשינו את זה. יש לנו כל כך כיף לפנינו היום. זה רק מגרד פני השטח של ה-CSS. בואו נעשה את זה. בואו לקחת הפסקה של חמש דקות כאן משום, למייל שלי, בואו לתלות ב שם עד 02:30 איש היום. אבל אם אתה עושה צריך לעזוב, וזה בסדר. אבל אנחנו לפרוץ קדימה לאחר הפסקה של חמש דקות. ואנחנו תלמדו משהו קטן על PHP, MySQL, ועוד. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ועכשיו זה סוג של מכוער. זה פשוט אומר שיגיש. מתברר, ואני יודע את זה מ תיעוד, אני יכול להגיד ערך שווה ציטוט סוף ציטוט "cs50 Seach, "ציטוט קרוב. אז בואו מחדש שוב. אז אני ממשיך להכות פיקוד-R, או שליטה על המקלדת שלי R כדי לטעון מחדש. 

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

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

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

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

אחד, צורת תג, פעולה שונה. זה לא כתובת אתר מלאה. עכשיו, זה כנראה לקובץ שנקרא register0.php כי, ברגע אחד, אני הולך ללמד את עצמי קצת משהו על PHP, תכנות שפה, כי PHP יכול לשמש כדי ליישם את מה שגוגל יישמה כ בקצה האחורי של מנועי החיפוש שלהם. 

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

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

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

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

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

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

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

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

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

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

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

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

אני הולך להיכנס לספריית PHP. ואני הולך לפתוח טוב יותר גרסה של שלום-0 מקודם. שים לב שכל מה שעשיתי היה להוסיף כמה הערות. כדי שנוכל להיפטר מהסחת הדעת ש. 

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

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

שים לב שבחלק העליון של תכנית זו, אשר מתחיל, כמו בעבר, עם כמה הערות, שאני אפטר כמהסחת דעת. שים לב שאני ב-PHP מצב בקובץ זה. אז את הקוד הזה, שנראה, יקבל להורג. שים לב שיש readline, שהוא כנראה אנלוגי ב-PHP של getstring. שים לב שזה קצת שונה. אתה בעצם לציין הנחיה פונקציה שנקראת קו לקרוא, וזה מה שהמשתמש רואה. אז אתה לא צריך printf באופן ידני. אבל זה לא עניין גדול. אני הולך לחנות, בתוך $ n, תחזור ערכו של זה, ולכן כל מה המשתמש מקליד הוא int שלהם. והנה סקרנות אחרת. מתברר, ב-PHP, כל משתנה פשוט צריך להיות התחילית עם סימן דולר. זה קצת מעצבן. אבל שים לב למה שלא עשיתי ב-PHP. מה שחסר ביד השמאל צד של סימן שווה? 

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

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

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

אז איך אני מפעיל את התכנית זו? ובכן, כמו בעבר, אם אני עושה את PHP, conditions1.php, והקלד מספר כמו 123. זה מספר חיובי. אם אני מקליד ב0, אני מרים 0. ואם אני מקליד ב123 שליליים, אני מקבל לגבות מספר שלילי, שהוא רק לומר, מבחינה תחבירית, PHP הוא סופר, סופר דומה. 

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

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

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

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

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

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

אז השאלה האחרונה, אם כן, של קובץ זה הוא, ובכן, מה זה לעזאזל? קח ניחוש. מהו _POST $, כנראה? 

קהל: [לא ברור] 

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

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

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

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

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

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

קובץ זה קשור איכשהו לדואר, דואר אלקטרוני. אז מה הוא עושה בתכנית זו? בגרסה זו, אם הייתי באמת למלא טופס זה - ונתן לי ללכת ל froshIMs3, לא froshIMs0 - הטופס נראה אותו הדבר. דוד, קפטן, זכר, מעונות, מתיוס. אבל אם אני מגיש את זה, קובץ זה הוא הולך לregister3.php. 

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

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

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

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

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

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

עכשיו אני הולך לקרוא לפונקציה הנקראת IsSMTP, שאומר, להשתמש SMTP. זוהי יציאה 25, בדיוק כמו בסרטון בשבוע שעבר, כשהדבר היה זורק הודעות דוא"ל לחומת האש. נמל 25 הוא SMTP. SMTP הפירוש להשתמש בשרת הדואר. איזה מהם, אנחנו יכולים להשתמש ברווארד של SMTP.fas.harvard.edu. 

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

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

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

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

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

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

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

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

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

ותפסו אותי מהר מאוד בתוך שניות, כי, כפי שאתה יודע, אני חותם המיילים שלי בצורה מסוימת. ולמרות שאני עושה את זה באופן ידני, בגדול חלק, 15 שנים מאוחר יותר, כי אני היה טראומה מזה. אין לי חתימה בדוא"ל שלי עכשיו. אבל בשנת 1995, פשוט היה לי SIG, חתימה במייל שלי. כך שלא היה הפתק הזה אומר, נכבד קבוצת פרוקטור, אני להשלים את דעתי ומסכים עם דוד, שנחתם וכך כך, קו חדש, הקו חדש, DJM. 

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

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

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

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

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

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

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

עכשיו זה הוא מבנה מעניין. C אין את זה. אבל זה סופר מועיל. ואתה רואה את זה בP סט 7 מפרט - עבור כל אחד מהמושגים. אם אתה רוצה לחזור על כל אלמנטי מערך, אין לך כדי להתמודד עם $ ואני $ n, ו+ +, וכל זה. אתה יכול להגיד, פשוטו כמשמעו, ב-PHP, זה - כלמספר, כך שכל מספרים אני מניח ש$ מספרים הוא מערך של מספרים. וכשאני אומר לכל אחד מהם מספרים כמספר, זה הולך באופן אוטומטי, כמו הלולאה שלי מבצעת, לעדכן, בכל איטרציה, הערך בתוך מספר סימן דולר - שוב, ושוב, ושוב הליכה בשבילי על מערך זה. אז זה פשוט חוסך לנו קוד. לא פסיק, לא + + 's, לא אני זה, לא n של, זה פשוט נחמד. 

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

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

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

קהל: אתה לא צריך לזכור איפה אתה שם את הדברים. 

רמקול 1: בדיוק, אין לך לזכור איפה שמת את הדברים. אתה לא צריך לזכור באופן שרירותי סמל מניית שהוא במדרגת אפס, ומחירי המניות הוא בסוגר אחד, שהוא מסוכן במיוחד אם לשנות דברים, בסופו. זה הרבה יותר נחמד לקשר מה שאנחנו נתקשר מטה עם הנתונים שלך בפועל. הייתי טוען כי מה שבאמת אכפת לנו עליו כאן הוא FB ו49, 26. הסמל והמחיר הוא מטה המתאר את הנתונים שאנו ממש אכפת. אבל זה פשוט כל כך הרבה קלה יותר לגישה. 

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

ומה הביצועים של מחפש משהו ב מערך אסוציאטיבי, כנראה? זה כנראה איטי יותר. גישה אקראית היא נחמדה, במיוחד כאשר אתה יכול לעשות חיפוש בינארי. אבל אם אתה באמת מחפש עכשיו לא למספרים, אבל למיתרים, זה באמת מיושם מתחת מכסה המנוע, כנראה כשולחן חשיש, שבו אתה משתמש או שולחן חשיש עם שרשור נפרד. או שאתה משתמש נסה למעשה לאחסן את הערכים. אז אולי אתה יכול לעשות בזמן קבוע, אבל אתה עדיין צריך להסתכל על ה-S-Y-M-B-O-L, באופן פוטנציאלי, ולא רק 32 ביטים ללחפש משהו. אז שוב, אותם הרעיונות באים לגבות לחזור על עצמו בהקשר הזה. 

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

קהל: 'שם'. 

1 רמקול: שם, שם? 

קהל: [לא ברור] 

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

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

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

אז אתה עומד לראות, ואתה ניסיון, בעמ '7 קבוצה, פרדיגמה, סוג של הלך רוח בתכנות, שנראה משהו קטן כזה. M עבור דגם, C עבור הבקר, V לתצוגה. סיפור ארוך קצר, MVC הוא רק סוג של המתודולוגיה, דרך של עשיית אתרי אינטרנט, בפרט, שבו אתה לשים את כל הביטוי שלך, הטיפש - היגיון עסקי - כל הקניין הרוחני שלך ב מה שנקרא בקר, קובץ כמו index.php, או שנראה, quote.php, או buy.php. 

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

אז MVC הוא באמת רק על ציור קווים בחול ואומר, קוד תכנות מעניין עבורך אתר שייך במה שאנחנו קוראים הבקר. דברים הקשורים לאתר בדרך כלל בסופו של מודל. אבל תראו, בסט בעיה 7, אנחנו למזג C ו M כדי לשמור את זה פשוט. אבל תצוגה שבו כל של HTML שלך ואסתטיקה בדרך כלל ללכת. 

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

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

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

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

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

אבל שם לב זה. מה שמעניין הוא מה שעכשיו שינויים בדף זה. תן לי לחץ על הרצאות. ושים לב לכתובת האתר הוא עומד להשתנות. עכשיו אני בlectures.php. תן לי לחץ על אפס. עכשיו אני בweek0.php ועכשיו בוא לי לפתוח את הקבצים הללו בgedit. לא רק מדד, אבל בואו לפתוח לי את הרצאות. ותנו לי להיפטר מההערות להתמקד בחלק זה בלבד. 

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

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

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

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

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

קהל: [לא ברור] 

רמקול 1: פחות יתיר שב אין תג HTML יותר, לא יותר ראשי תג, לא יותר גוף תגית בכל קובץ ארור. במקום זאת, יש לי בחשבון את המשותף ומן הסתם לשים אותם לקובץ קשור איכשהו לכותרת. ואותו דבר לגוף הקרוב תג, תג HTML הקרוב. זה כנראה כאן בפנים מהמקום כלשהו התחתונה. ואתה עוד תראה, בסט בעיה 7, סיור קטן בזה. 

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

לבסוף, מאחר שאתה נשאר כאן כל כך מאוחר היום, אם אתה חוזר לחלק זה של קמפוס, בשעה 4:00 היום, אנו אתן לך לא רק עצה, בSCES ייעוץ הוגן, בשעה 4:00 ב מקסוול-דבורקין, אנחנו אתן לך קצת חלום Americone, צ'רי גרסייה, שוקולד פאדג' בראוני, שוקולד בצק צ'יפ קוקי, ו, כאשר אתה גוגל קוף שמנמן, אתה מקבל את זה. אז כל שמחכה בשעה 4:00 PM במקסוול-דבורקין. לראות אותך ביום רביעי גם כן. 

רמקול 2: בסמוך CS50, RJ ישן פנימה 

RJ: הקטע שלי! חה! אה,