MVC

Web api

Front end (צד משתמש) שולח http request  

 כל אתר מכל מכשיר יכול להתחבר ולקבל נתונים (אין אפליקציה) ולא משנה באיזו שפה היא כתובה מכיוון שהבקשות מתבססות על הפרוטוקול האוניברסלי של HTTP

Beak end web services (צד שרת) מחזיר response בדרך כלל בפורמט של JSON שכל השפות השימושיות בעולם יודעות לקרוא. את הנתונים ניתן להציג באיזה אפליקציה שרוצים

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

Web ui

האתר יושב בשרת – המשתמש מקבל דפי html בנויים

·         Web forms – תשתית מובנת של פקדים \שדות

·         Mvc – חלק נבנה בשרת והשאר בצד לקוח

PWA web – גישה שבה מחקים חווית משתמש שמוכרת מאפליקציות מקומיות

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

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

MVC

ASP.NET MVC הינה תשתית אשר משמשת לבניית יישומי אינטרנט על ידי החלת עקרונות של תבנית מודל-תצוגה-בקר (Model View Controller = MVC) על תשתית ASP.NET

ASP.NET שפת שרת - שבונה את הדף בהתאם לנתונים ושולחת - צד לקוח מקבל דף בנוי בהתאם שני משתמשים יגלשו לאותו דף וכל אחד יקבל נתונים שונים

MVC מורכבת משלושה מודולים

·         Model - (מודל) קבוצה של מחלקות המתארות את הנתונים שאתם פועלים עליהם, ואת החוקים העסקיים שמכתיבים את השימוש והעריכה של הנתונים הללו

·         view - (מבט) כל מה שקשור לתצוגה – הוא זה שמדפיס את ה-HTML

·         Controller (בקר) – זה שמתווך בין השניים ומנהל את התהליכים.  מגיב לקלט מהמשתמש, מדבר עם המודל, וקובע איזו תצוגה להציג

View – הוא דף HTML דינאמי. כל פקודה שמתחילה ב@ היא קוד C# בהרצת התוכנית ה Controller פונה ל view מקבל את דף התצוגה עם הפקודות ובונה דף סופי באמצעות הנתונים שמתקבלים מה Model. המשתמש מקבל קובץ טקסט html  מובנה בהתאם לנתונים

VS

מספר דברים שלמדנו בVS

AssemblyInfo - קובץ הגדרות של הפרויקט - נוצר בשעה שעושים קיפול לתוכנה 

לדוג' 

• Guid מזהה ייחודי לכל פתרון
• AssemblyVersion – מספר גרסה

release \ debug

debug - מאפשר לנפות שגיאות(לעצור באמצע הקוד, להוסיף קוד בזמן ריצה, לבדוק משתנים וכו') ומביא מידע על שגיאות בסיום ההרצה נקבל קובץ exe בתיקיית debug  

release - קימפול מהיר ללא ביצוע בדיקות יתבצע בדרך כלל בסיום הפיתוח כשרוצים לקבל מוצר סופי קובץ ההרצה נקבל בתיקיית release  

HTML + bootstrap

HTML

דף HTML מורכב משלושה סוגי תגיות

קונסטרטורלי (מבני) – כותרות \ פיסקה\ רשימות  לניהול הסדר בדף

style (עיצובי) – stile (לא בשימוש) כל העיצוב היום
מתנהל בשפה אחרת

סימנטי – הגדרת אזרים טבלה \ מקטע

Mata – מידע על הדף

·         name – שם התכונה

·         content  - תוכן התכונה

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

רווחים \ שורות

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

·         לירידת שורה נשתמש בתג </br>   כל תג יוריד שורה

·         לרווח נשתמש ב nbsp&

dir - כיוון הטקסט בדף   dir = "rtl"

Symbol – סמל

ניתן להציג אלפי סימנים \אייקונים שאינם מופיעים במקלדת באמצעות & + קוד

אפשר למצוא ברשת טבלאות קודים לחיצים\תווים מתמטיים \ אייקונים

Form

ללא התגית Form רשת האינטרנט הייתה בסך הכל מאגר דפי  תצוגה לקריאה-בלבד

ללא אפשרות חיפוש\קניה\הרשמה

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

אלמנטי הקלט בטופס הם שמאפשרים למשתמש להזין מידע לדף ולמסור (submit) מידע לשרת.

2 התגיות החשובות ביותר של ה Form – action (פעולה) method (שיטה)

·         Action לאן ישלח הטופס

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

bootstrap

ל- Bootstrap יש אוסף ענק של מחלקות  JS / CSS, שמתאימות לסיטואציות נפוצות באתרי אינטרנט.

לעיצוב הדף באופן רספונסיבי

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

Container

הגדרת מיכל דינאמי להצגת מידע במרכז המסך - .container-fluid  יציג לארוך כל המסך

כל אלמנט ניתן להגדרה בפקודות CSS  רגילות או מקוצרות של Bootstrap

לדוג' margin שמגדיר את המרווח של האלמנט מהאלמנטים שלידו  פקודה מקוצרת mt/mr/ml/mb

<div class="container p-1 mt-1 bg-dark text-white">

מיכל עם מרווח של אחד מבפנים (מגבול האלמנט לטקסט שבפנים) מרווח אחד מהאלמנט שלפניו רקע שחור וטקסט לבן

Grid

 פונקציה שמחלקת את המסך לעד 12 חלקים (עמודות) – במידה ונחלק לפחות נקבל חלוקה שווה

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

<div class="row">

    <div class="col" style="background-color:lavender;">.col</div>

    <div class="col" style="background-color:lavender;">.col</div>

      <div class="col-sm-5" style="background-color:orange">.col-sm-3</div>

  </div>

Jumbotron

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

בתוך ה Jumbotronניתן להכניס כמעט כל אלמנט של HTML כולל עיצוב css / Bootstrap

Alert

הודעה שאמורה להפנות את צומת הלב – משהו מודגש

table

Table-reaponsive – טבלה שמתרחבת באופן דינאמי ובמידה והמסך קטן תהיה אפשרות גלילה

 Table-bordered - טבלה עם גבולות

Navigation Bars – סרגל ניווט שממוקם בראש הדף

בתוך הסרגל נכניס רשימת קישורים – עובדים עם רשימה ע"מ שהקישורים יעמדו בשורה רצופה וכן שהיו ריספונסיבים

# קישור למקום בדף באמצעות זיהוי אלמנט

·         את הסרגל ניתן לעצב כמו שאר האלמנטים ב Bootstrap גודל\צבעים\ dropdown\הוספת תמונה

<nav class="navbar bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

Indexers - IEnumerable - תקשורת

Indexers

בכל List ניתן לגשת לרשומה לפי המספר שלה כמו במערך  

לדוג'

בתוך משפחה יש List של ילדים ואנחנו רוצים לקבל את השם של הילד השישי במשפחה

Console.WriteLine(levi.Children[5]);

הבעיה שבמידה ויש רק 4 ילדים המערכת תעוף

כ"כ אם רוצים לקבל מיקום לפי שם 

לכן נשתמש ב –  Indexers  עם מאפייני  \ get set

דוג' לחיפוש לפי מיקום + הודעת שגיאה לערך לא קיים

public string this[int i]

        {

            get { return Children[i]; }

            set

            {

                if ((i < Children.Count) && i > -1)

              

                    Children[i] = value;

                       else

                        throw new IndexOutOfRangeException($"{value} child is out of range");   

            }

       

קבלת מיקום לפי שם (טקסט)

public int this[string name]

        {

            get

            {

                return Children.IndexOf(name);

            }

        }

IEnumerable

כל Foreach הוא פונקציה שמאחורי הקלעים רצה על מה שמעבירים לה ומחזירה את הערך שהתבקש  - ניתן גם לערוך את הפונקציה בהתאם לצרכים שלנו

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

IEnumerator – מאפשר לערוך את ה Foreach הפונקציה נמצאת בחלקת IEnumerable ולכן נבצע הורשה למחלקה ונממש את הפונקציה IEnumerator

  yield return – הוספת ערך להחזרה

class Family : IEnumerable

    {

        public string Aba { get; set; }

        public string Ama { get; set; }

        public List<string> Children { get; set; }

        public IEnumerator GetEnumerator()

        {

            int index = 1;

            yield return ($"Aba name is {Aba}");

            yield return ($"Ama name is {Ama}");

            foreach (var child in Children)

            {

                yield return ($"child {index} - name is {child}");

                index++;

            }

        }

    }

    class Program

    {

        static void Main(string[] args)

        {

            Family levi = new Family { Aba = "dvid", Ama = "shira" };

            levi.Children.AddRange(new[] { "dina", "rina", "gal" });

            foreach (var item in levi)

            {

                Console.WriteLine(item);

            }

        }

    }

ASP.NET  הקדמה

 ASP.NET – סביבת פיתוח של מייקרוסופט עם תשתיות לWEB  

אינטרנט – שיתוף משאבים – server נותן המשאב.  Client  מקבל המשאב

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

שרתים מובילים בשוק IIS  של מיקרוסופט \ apache

פרוטוקול תקשורת

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

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

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

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

פרוטוקולים עיקריים

·         FTP –  File Transfer Protocol הוא פרוטוקול תקשורת מבוסס TCP להעברת קבצים בין מחשבים

·         SMTP – Simple Mail Transfer Protocol : פרוטוקול פשוט להעברת דואר

·         HTTP הוא פרוטוקול תקשורת שנועד להעברת דפי HTML ואובייקטים שהם מכילים (כמו תמונות, קובצי קול, סרטוני פלאש וכו') ברשת האינטרנט וברשתות אינטראנט.

URL -  - Uniform Resource Locator מַעַן מַשְׁאַבִּים אָחִיד . כתובת של דף אינטרנט

הכתובת מורכבת מ3 חלקים  איך > איפה > מה

·         איך – מה פרוטוקול התקשורת – HTTPS

·         איפה – איפה נמצא המשאב כתובת IP או לחילופין שם של הכתובת -  wikipedia.org

·         מה – הנתיב של הדף בתוך האתר-  www.w3schools.com/jquery

URI - מזהה נתיב למקור מידע (Resource) באופן חד חד ערכי. ה-URI מהווה בפועל הרחבה של URL, כך שניתן לזהות כל מקור מידע בעזרתו ולא רק דפי אינטרנט.