עמוד הבית
אודות
דבר מנהלת הקריה
לוח צלצולים
מחטיבות לתיכון לב
תקנון חטיבה עליונה
עת לתת
ערב מגמת מחול תשע"ז
אות הפעיל המצטיין תשע"ז
"השראה לעתיד וקריירה ברחובות"- " INSPIRE TO CAREER "
יום גיבוש שכבת י תשע"ח
22 שנה לרצח רבין
אליפות סטראטאפ לנוער
טיול שנתי מחזור מג
מקצועות לימוד
אומנות
אזרחות
אנגלית
ביולוגיה
ביוטכנולוגיה
גיאוגרפיה
היסטוריה
הנדסת תוכנה
חנ"ג
כימיה
לשון
מדעי החברה
מדעי המחשב
מוסיקה
מחול
מתמטיקה
ניהול עסקי
ספרות
ערבית
פיסיקה
פסיכולוגיה
תקשורת
תנ"ך
המסע לפולין 2017
יומן מסע
אישור יציאה ללוחמי הגטאות
רשימת הקבוצות לפולין 2017
תאריכים חשובים
תוכנית הכנה למסע לפולין 2017
טופס רישום למסע
טופס בקשת מלגה
מכתב מידע מס 1
פעילות מקוונת לקראת המשלחת
מידע שימושי
טפסים
נוהל ערעור על ציון מבחן בגרות
טל לנוער במצוקה
פרס חינוך
מעבר מהחטיבות לתיכון
מעבר מכיתה י' ליא תשע"ח
כיתת נחשון
אודות תוכנית נחשון
תנאי קבלה
מגמת מחול
צור קשר

כל הדפים

מקצועות לימוד

הנדסת תוכנה

תוכניות לימודים

מבוא לתכנות בסביבת אינטרנט


מבוא לתכנות בסביבת אינטרנט

 

הזמן הנדרש

עיוני ומעשי 90 שעות

 

דרישות קדם

יסודות 1.

מטרות היחידה

1.      התלמיד ישתמש בתכנות חסר מצב.

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

3.      התלמיד יכיר וישתמש בסטנדרטים האחרונים בעולם האינטרנט: הפרדת תוכן מעיצוב והפרדת בין הנתונים לתבנית המתארת אותם.

4.      התלמיד ישתמש בעקרונות  הבסיסיים של תכנות מונחה עצמים

5.      התלמיד ישתמש בשיטות העברת נתונים באינטרנט ובעיות האבטחה

6.      התלמיד יבנה יישומים  של תכנות בצד השרת

7.      התלמיד יבנה יישומים  בתכנות בצד הלקוח

8.      התלמיד יבנה וייצור אתרים אינטראקטיביים בסיסיים.

 

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

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

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

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

 

טבלת הפרקים וחלוקת  השעות המוצעת

פרקי הלימוד

פרק 1 – מבוא לאינטרנט ועיצוב דף אינטרנט (8 שעות)

פרק 2 – עקרונות העבודה שרת/לקוח ותכנות בצד השרת (42 שעות)

פרק 3 – תכנות בצד הלקוח (20 שעות)

פרק 4 – משימה מסכמת (20 שעות)

 

סביבת העבודה: ניתן לממש את התוכנית תוך בחירה באחת משתי פלטפורמות:

א- סביבת מיקרוסופט Microsoft

§         לעמדה בודדת: מערכת הפעלה Windows 2000 או Windows XP Professional או כל מערכת אחרת המאפשר הרצת IIS מגרסה 5 ומעלה (חינם).

§         NET Framework (חינם).

§         סביבת הפיתוח: פנקס רשימות (Notepad, חינם, מצוי בכל מערכת Windows)
ו- דפדפן (דפדפן
IE, חינם, מצוי בכל מערכת Windows)

§         מסד נתונים: Access או SQL Server Express (חינם)

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

 

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

 

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

ההוראה תעשה במעבדה תוך הדגמה ותרגול.

פרק 1 – מבוא לרשת האינטרנט ומבוא ל- HTML (8 ש`)

(מסתמך הוראת HTML בחטיבת הביניים)

מטרות הפרק

להציג באופן כללי את רשת האינטרנט והסבר על אופן פעולתה.

להציג את חשיבות העבודה לפי תקן (XHTML, XML, CSS)

להציג מבנה דף HTML

להציג את הקישוריות ב- HTML

להקנות את השימוש בתגיות בסיסיות תוך שימת דגש על בניית טופס

להסביר את עקרונות רשת האינטרנט כמערכת שוויונית.

 

תיאור

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

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

כדי להבהיר לתלמידים את מנגנון הגלישה (http-request/response) רצוי ליצור דף HTML באחד המחשבים בכיתה ולגלוש אל כתובת זו ממחשבים אחרים בכיתה. כמובן שיש להבהיר לתלמידים את נושא כתובת Intranet אם המחשבים במעבדה מקבלים כתובת IP מקומית ב- DHCP.

 

מומלץ ליצור את דף ה- HTML בעזרת עורך plane text פשוט (כדוגמת notepad) והדגמה כיצד השרת יוצר את אותו דף (או דומה לו) באמצעות האובייקט הרץ בשרת (run at server).

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

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

 

פרוטוקולי התקשורת הקשורים ב- http, mail, ftp יוסברו בהקשר של מספרי ה- port המתאימים. דוגמה להפעלת port וחסימתו יכולה להינתן בהקשר של מרכזיית טלפונים בו חלק מהשלוחות חסומות לשיחות יוצאות או נכנסות (firewall) וכל שלוחה קשורה ליישום מסוים (כמו דואר אלקטרוני). אך זו החלטה של מפתח היישום (בשני צמתי התקשורת – שרת/לקוח). עיקר תשומת הלב תינתן ל-port 80. יש להבהיר את עניין האבטחה והעובדה ש- port 80 פתוח בדרך כלל לפרוטוקול HTML שהוא טקסטואלי ולכן כל העברת plane text באינטרנט היא firewall friendly.

לאורך הוראת הפרק יש להדגיש את הסטנדרטים שנקבעים על ידי גופים בינלאומיים כדוגמת W3C והדרך להשפיע על גופים אלו. יש להציג את האתר לתלמידים: http://www.w3c.org . יש להציג את תהליך הפקת מאמר הקובע סטנדרט באמצעות הצגתו, הדיון האקדמי עד להעברתו לשלב המלצה.

 

 

 

 

 

פירוט התכנים (מתבסס על ידע קודם בחטיבת הביניים)

תוכן

רשימת הוראות/מושגים מינימלית

הסבר עקרוני על התפתחות רשת האינטרנט, כתובת אינטרנט וחלוקת כתובות IP. (0.5 שעה)

http, ftp, mail, dns, ip, tcp, url/uri

מבנה דף אינטרנט ושימוש בתגיות. עיצוב CSS בתגית ובדף. (0.5 שעה)

html, head, script,

body, br, p, div, span

קישור למשאבים באינטרנט (0.5 שעה)

a (img, text)

טבלאות (2 שעות)

table, tr, td

טפסים ושליחת נתונים בשיטות Get  ו- Post (4 שעות)

form, input (button, text, hidden, submit, checkbox, radio, reset, name), textarea

יצירת מבנה האתר. עיצוב CSS לאתר. (0.5 שעה)

טבלה ו- CSS

 

 

 

פרק 2 – עקרונות עבודת שרת/לקוח ותכנות בצד השרת (42 ש`)

מטרות הפרק

להציג את עקרונות העבודה שרת/לקוח באינטרנט

להציג אובייקטים בסיסיים הקשורים במסדי נתונים בצד השרת.

להציג את העבודה עם מסדי נתונים ושפת SQL.

להציג את ההפרדה שבין הנתונים לבין תבנית הנתונים המתארת אותם

להציג את העבודה עם מסדי נתונים באמצעות XML ו- XML Schema

 

תיאור

עיקר הפעילות של פרק זה נועדה להכיר את צד השרת. צריך להדגיש את קבלת הבקשה (http request) והכנת הדף ושליחת (http response) המסיים את עבודת השרת. יש להדגיש שמשלוח  התגובה  ללקוח הוא קובץ בפורמט HTML. בצד הלקוח יתקבל רק HTML ו- Script שנתמך על ידי הדפדפן.

האובייקטים הקשורים ב- Session ו- Application מדגישים את  הכלים שבהם מתמודדים עם תכנות חוסר מצב Stateless programming  ומאפשרים לשמור את הפיסה הקטנה המאפשרת לשרת  לשמור אובייקטים  זמניים אודות נתוני הלקוחות. יש להדגיש שללא אובייקטים אלו אפשר לנתק את השרת ותהליך ה- http request – http response נעשה מההתחלה בכל התקשרות שרת לקוח.

 

דוגמאות קלאסיות  שניתן  להדגים בפני תלמידים: מונה ביקורים ופיתוח שיחון (chat) בסיסי.

 

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

 

התלמיד ילמד לדעת כי יצירת האובייקטים המטפלים בנתונים כולל הקישור לשליפת הנתונים, נעשים כולם בשרת ונעלמים לאחר ביצוע http response. למשל יש להדגיש את ה- dataset כאובייקט המציג מסד נתונים שוכן בשרת (העובדה שניתן לשלוח אותו לנקודות אחרות ברשת, אינה חלק מתוכנית זו). בתוכנית זו אין צורך להשתמש ביותר מטבלה אחת ב- Dataset (או ResultSet בסביבת JSF) ועל טבלה זו ניתן לבצע פעולות כולל הצגת הנתונים של הטבלה בדף ה- HTML.  

 

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

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

עבודה עם מסד הנתונים מתבססת על ארבע פעולות בסיסיות שהן insert, delete, update, select וכל תוספת היא מעבר לתוכנית הלימודים.

 

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

 

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

 

פרק ה- XML וה- XML Schema נועד להציג את הדרך לאחסן נתונים המופרד מהדרך בהם הם יוצגו (כלומר HTML). XML הוא המכניזם שבאמצעותו ניתן להגדיר או לזהות נתונים שיכולים  להיות במבנה  היררכי ומאפשר העברת נתונים אנונימית דרך האינטרנט שאינה תלויה בפלטפורמה כלשהי. בקובץ ה- XML קיימים שלושה מושגים הקשורים ב- Elements, Attributes, Namespaces. בהקשר לשלושה מושגים אלו התלמיד צריך לרכוש את היכולת לקרא קובץ XML ולהסביר את תוכנו. ה- XML Schema הוא קובץ ה- *.xsd שנועד לתאר את מבנה הנתונים בקובץ ה- XML ואת ההקשר להעברת הנתונים בין שתי צמתים באינטרנט. העיסוק ב- XML Schema יתבטא בהגדרת מבנה הנתונים וביכולת לאמת את קובץ ה- XML. שאר החלקים הם הרחבה שאינה דרושה לבחינה.

 

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

 

 

 

 

לדוגמה נניח ולפנינו המחלקה והאובייקט הבאים:

    public class clsPerson

    {

        public string First;

        public string Last;

    }

    class Program

    {

        public clsPerson returnObject(string A, string B)

        {

                        clsPerson objPerson = new clsPerson();

                        objPerson.First = A;

                        objPerson.Last = B;

            return objPerson;

        }

 

        static void Main(string[] args)

        {

            returnObject("MyFirstName", "MyLastName");

        }

    }

הדרך להעביר את האובייקט objPerson באמצעות האינטרנט היא על ידי קובץ XML באופן הבא:

 


<clsPerson>

<First>MyFirstName<\First>

<Last>MyLastName<\Last>

</clsPerson

 

 

הייחודיות באפשרות הזו היא הדרך להעביר אובייקט ולא נתונים באופן name-value כפי שמקובל ב- method post/get.

 

חלק זה אמנם נטול תרגול מעשי ישיר אולם התלמידים יכולים לכתוב קוד המתרגם אובייקט מתוך database לקובץ XML. תהליך העברת הנתונים באינטרנט עובר לשיטת העברת נתונים בגישה זו (שיחודה הוא העברת אובייקט נתונים ולא פירוק הנתונים לגורמים. לדוגמה העברת book ולא העברת הפרמטרים היוצרים ספר בנפרד). הגישה הטקסטואלית מתגברת על הפלטפורמות השונות באינטרנט (יצרנים שונים עם סטנדרטים שונים).

 

פירוט התכנים

תוכן

רשימת הוראות/מושגים מינימלית

הסבר עקרונות העבודה שרת/לקוח באינטרנט (3 ש)

http, html, browser, server, stateless, request/response

פעולות בסיסיות בשרת

(9 ש)

עבודה עם האובייקטים

Request, Response, Application, Session

עבודה עם מסד נתונים

(20 ש)

פקודות SQL: insert, delete, update, select

חיבור למסד נתונים Access או SQL Express או MySql

קישור נתונים לאובייקט השוכן בשרת (בסביבת מיקרוסופט משתמשים באובייקט  - DataSet  ובסביבת סאן משתמשים באובייקט    ResultSet)

XML

(10 ש)

עקרונות XML ועיקרון ההפרדה בין הנתונים לתבנית המתארת אותם – XML Schema:

Elements, Attributes and Namespaces

ביצוע בדיקה של קובץ XML באמצעות XSD.

שמירת נתונים בקבצי XML  לתמיכה בשכבת בסיס הנתונים של היישום אותו אנו מפתחים.

 

פרק 3– יסודות JavaScript (20 ש`)

מטרות הפרק

להציג את עקרונות התכנות בצד הלקוח

ללמד את שפת JavaScript כשפת תסריטים

ליצור ולהשתמש בפונקציות עם דגש על פונקציות לבדיקת נתוני טופס

תיאור

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

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

יש לקשור את הקוד בצד הלקוח לקוד המחולל בצד השרת ה"מזריק" JavaScript לקובץ הנשלח ב- Http-Response.

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

פירוט התכנים

תוכן

רשימת הוראות/מושגים מינימלית

מבוא ותפיסת העצמים, תכונות ושיטות. (3 שעות)

Script –javascript

תחביר בסיסי של השפה

(5 שעות)

משתנים, הצבה, אופרטורים, לולאות, תנאי

אובייקטי מערכת: Global, Number, String

אובייקטים ואירועים

(10 שעות)

Form objects: Input (Text, Radio, CheckBox, submit), Select, Textarea

Events: onclick, onmouseover, onmoseout, onsubmit

פונקציות לטיפול בנתוני טופס (2 שעות)

Function, return

 פרק 4– משימה מסכמת (20 ש`)

מטרות הפרק

1. לבנות אתר בטכנולוגיה של שרת לקוח (אינטראקטיבי ודינמי)

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

·         שימוש במסד נתונים בצד שרת

·         JavaScript צד לקוח

·         מוצגות ואסתטיות

·         נושא ישראלי

 

 



רחוב דב קליין 1, רחובות

טלפון: 08-9476526

פקס: 08-9460179
כל הזכויות שמורות לאוריג`ין בע"מ פותח ע"י schooly אתרים לבתי ספר