ארכיון הקטגוריה: כללי

נגישות אתרים

נגישות אתרים – שימוש ב aria-label

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

מבחינת נגישות – אנחנו אמורים לתת תויות עם כיתוב , אלא שלא תמיד זה מתאים למה שרוצים לעשות. במקרה כזה באה לעזרתנו ה ARIA API ובאופן ספציפי ה aria-label .

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

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

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

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

*** הפוסט בכתיבה ועדין לא גמור ( נכון ל-17.8.2016 לסה"נ ) ***

 

טכניקות נגישות

טכניקות נגישות כלליות

 

  • הקישור הראשון בדף צריך להיות "דלג לתוכן"
    והוא צריך להוביל ישירות לעוגן (#) של התוכן
    זה לא חייב להיות גלוי , מותר לשים class שמסתיר את זה ,
  • דוגמא :
<a href="#content">דלג לתוכן</a>
  • אל תגביל את המשתמש בזמן – שיוכל לסיים מה שהוא רוצה לעשות.  לדוגמא – באתר מכרזים, שמנגנון הניצחון יקבע לפי ההצעה הטובה ביותר ולא לפי זמן.
    דוגמא נוספת – משחקי מחשב – לאפשר הוספת זמן
  • תן אפשרות להפסיק רענון אוטומטי – אם אתה מרענן אוטומטית את הדף \ חלק בדף, אתה צריך לספק לגולש אפשרות לעצור את הרענון.
    החריג היחיד – הוא במקרים של "חירום" – כמו למשל ההתראות שפיקוד העורף סיפק עבור נפילות של טילים בצוק איתן – במקרה כזה, לא צריך לאפשר לגולש להפסיק את הרענון.
  • תן אפשרות לרענן חלק בדף ( למשל קישור שמבצע רענון של מצב המניות \ חדשות וכדומה )
  • צריך לספק תחליף לכל דבר שהוא לא טקסט
    אני מסביר זאת בפירוט בהמשך, אך בכל מקרה העיקרון הוא שאתה צריך לקחת בחשבון שיש אנשים שלא מסוגלים לראות : תמונות, וידאו, אנימציות, קאפצאה , ולכן תספק לכל אלו תחליף בטקסט
    כאשר – בקטע הזה, המינימום שאתה צריך – זה לתת תיאור קצר שמסביר למשתמש שיש פה תמונה שמציגה משהו.
    אבל עדיף – לתת תיאור מלא, למשל – עבור וידאו, לתת תמליל מלא של הוידאו בתוך תגית הוידאו.
  • להודיע למשתמש מה הולך לקרות כתוצאה מפעולה שהוא יעשה בטופס \ בממשק לפני שזה מתרחש
    דוגמא  –
    יש לנו שאלות שבו כל פעם שעונים נכונה על שאלה מסויימת – אוטומטית המשתמש מועבר לשאלה הבאה .
    אז צריך להסביר לפני השאלה הראשונה שזה מה שהולך לקרות.דוגמא 2 – יש לנו מקום שבו בוחרים את שפת האתר באמצעות כפתורי רדיו  – אז בהסבר שיופיע לפני כפתורי הרדיו נכתוב בצורה ברורה שהשפה הולכת להשתנות.
  • אם משלבים באתר גם Components כמו JSP  או ActiveX , אז צריך לדאוג שהם יעבדו מול ה-Accessibility API ( כלומר מאפייני ARIA, roles ועוד )
    כדי שתוכנות שמסייעות לאנשים מוגבלים יוכלו להתחבר למידע.
  • חובה לוודא שאלמנטים בדף נקראים היטב על ידי עזרים של נגישות
    בעיקרון – התקן מציין שמי שכותב HTML תקין לפי התקן אז הוא יעמוד בזה בקלות
    יש כמה דברים בסעיף זה – שצריך להזכיר אותם:

    • נניח ויש תמונה שמשמשת ככפתור לחיץ – זה בעייתי, כי קורא מסך לא יבין במה מדובר
      לעומת זאת – אם נהפוך את התמונה לכפתור שיכלול Value ואת שם הכפתור – אז קורא מסך כן יוכל לקרוא את זה ולתת לגולש העיוור תיאור שמסביר שזה כפתור שנקרא….(הערך שכתבת במאפיין value) – קישור לדוגמא לכפתור שמוגדר נכון
  • כל מידע שמוצג בצבע – צריך להציג אותו גם עם הסבר במילים
    דוגמא -יש טופס עם שדות חובה  והם מסומנים באדום
    בנוסף  לייד כל שדה חובה מסומנת כוכבית אז המשפט בתחילת הטופס צריך לומר "השדות הדרושים מופיעים בצבע אדום וגם מסומנים ב- * כוכבית"נקודה לשים לב – הסימן כוכבית הוא דורש תשומת לב לגודל – כי לא כל קוראי המסך מתייחסים אליו ולא כל המשתמשים כבדי ראיה – שמים לב לכוכבית, בגלל הגודל שלה.
  • ניגודיות – ישנה נוסחה שקובעת מה "יחס הניגודיות" בין צבע הרקע לצבע הכתב. המטרה היא לקהל על כבדי ראיה.
    • בגדול – צריך לשמור על יחס 4.5:1
    • עבור טקסט גדול -אפשר גם יחס 3:1
    • אם קהל היעד הוא כבדי ראיה, או שרמת הנגישות הנדרשת היא AAA – אז נחוץ יחס של 7:1

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

  • מקלדת:לוודא שאפשר להגיע לכל מקום בדף עם המקלדת ( בעיקר Tab ) .
    לוודא שאין "מלכודות מקלדת" בדף – כלומר שאין מקום מסוים שאם נכנסים אליו – אז אי אפשר לצאת ממנו באמצעות המקלדת בלבד.
    לא לדרוש קצב הקלדה מסוים
  • אפשר להבין מה המשמעות של כל קישור מתוך הטקסט של הקישור עצמו
    לדוגמא :
    במשפט הבא – אפשר להבין מתוך ההקשר שהקישור מוביל אל הכתבה …
    המאמר בעיתון הזה מאפיין את הכותב.
  • השתמש בכותרות של HTML כדי לתת כותרת ( ולא רק הדגשה של כתב באמצעות CSS  )
  • תן פתרון טכני שמאפשר לראות כל פעם איפה הפוקוס של המקלדת
    כלומר שעוברים בין אלמנטים בדף באמצעות טאב – אז אפשר לראות ויזואלית על המסך איפה אנחנו נמצאים. (קישור עם דוגמא ל- CSS ודוגמא ל- JS כדי להציג ויזואלית היכן הפוקוס )
  • לסדר את התוכן ב-DOM כך שיהיה תואם לסדר שלו על המסך – זה תקף בעיקר ב-2 עניינים:
    • לוודא שאם עשיתם עיצוב CSS הוא תואם לסדר שמופיע ב-Html, כדי שמי שמשתמש ב"קורא מסך" יוכל להבין את הסדר  – למשל נניח ויש רשימת של פריטים בקטלוג , ובאמצע יש תמונה, ואחריה תיאור של התמונה. ובאמצעות Css דאגנו שהתיאור של התמונה יבוא מתחתיה – אז צריך לוודא שגם ב-Html התיאור של התמונה הוא אחרי התמונה המתאימה ( ולא לפניה, למרות שמבחינה טכנית זה אפשרי כמובן ) .
    • בערבוב של שפות , למשל אנגלית בתוך משפט בעברית, צריך להשתמש בתגיות שמאפשרות ל"קורא מסך" להבין שהשפה התחלפה
      דוגמא :

      <p>The title says "<span lang="he" 
      dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>

טכניקות נגישות שנוגעות לניווט

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

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

טכניקות נגישות שנוגעות ל-Meta ול-Header

  • בתגית Html הפותחת, צריך להכניס מאפיין שפה ( סעיף 3.1.1 )
  • <html lang="fr">
  • צריך לשים תגית title שמתארת באמת מה מציג הדף

טכניקות נגישות – מידע שמתעדכן אוטומטית

  • תאפשר לגולש לשלוט בעדכון – כלומר – לעצור אותו, לבצע עדכון, וכדומה.

טכניקות נגישות – תמונות

  • תשתמש ב-alt  על כל תמונה
  • אם התמונה היא חסרת משמעות – למשל חלק מהרקע של האתר – אז תשים עבורה alt="" רייק.

טכניקות נגישות – אנימציות / הבהובים / דברים זזים

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

טכניקות נגישות – סרטונים / אודיו

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

טכניקות נגישות – גרפים

  • צריך לתת תיאור של משמעות הגרף, למשל אם הגרף מראה שבחודש תשרי המכירות היו גדולות יותר מאשר בחשוון – אז התיאור של הגרף יהיה "המכירות בתשרי עלו על המכירות בחשוון".

טכניקות נגישות  – טפסים

  • תשתמש ב-Lables כדי להסביר למשתמש מה למלא בכל שדה
  • וולידציות – אם הגולש טועה – צריך להסביר לו באיזה שדה ספציפית הוא טעה, ומה הטעות
    צריך גם לספק דוגמא לתיקון ( אלא אם כן זה יוצר בעיית אבטחה ).
  • עבור דברים פיננסים או משפטיים – צריך לעמוד בלפחות אחד מתנאים :
    • הפעולה צריכה להיות הפיכה – כלומר אם הוא ירצה הוא יוכל לבטל זאת
      או
    • שהנתונים שהוא הקליד יבדקו – ואם ימצאו שגיאות – הוא יוכל לתקן
      או
    • שלפני שהוא מבצע את השמירה\שליחה – יהיה עמוד שבו הוא יוכל לסקור את כל מה שהוא מילא, ולאשר סופית
  • אם אתה דורש בשדה מסוים שיקלידו רק בפורמט מסויים –
    אז תספק דוגמא או הסבר לפורמט הרצוי.
  • אם  סדר השדות במעבר באמצעות tab שונה מאשר הסדר שבו צריך למלא אותם
    אז להשתמש ב tabindex עבור השדות \ הפקדים – כך שהסדר בו צריך למלא את השדות – יהיה הסדר הנכון ב tabindex
  • טריק – בכל אלמנט בתוך הטופס שאינו שדה – בדרך כלל הטאב לא עוצר בו, אבל – אם נשים בו tabindex="0"   אז זה יגרום לכך שבמעבר טאב – המשתמש יעצור על זה
    זה אידיאלי עבור הוראות, כמו למשל תגיות p בתוך הטופס שבהם אומרים למשתמש דברים כמו "מינימום 6 תווים" וכדומה ( קישור לדוגמא עם טאב אינדקס אפס ).
  • לא לשנות תוכן של אלמנט שמקבל פוקוס
  • לא לעשות משהו בלתי צפוי כתוצאה ממילוי דברים בטופס אלא אם כן הודעת למשתמש על זה
    • דוגמא טרוייאלית ביותר – יש טופס על המסך, וכדי לשמור אותו – צריך לשים כפתור Submit עם המילה "שמור" – זה כבר עונה על הסעיף הזה בתקן
    • למשל – יש לך שדה שאם ממלאים בו ערך מסוים – אז אתה אוטומטית פותח טופס מודאלי למילוי עוד כמה פרטים – במקרה זה צריך לכתוב משפט שאומר למשתמש שזה מה שהולך לקרות.
    • אל תגרום להעברה לדף אחר כתוצאה מבחירת ערך בדרופ דאון.

 

 

גכ

עוד פעולות נגישות שצריך לבצע אם מנגישים לרמה  AAA :

  • וידאו :
    מתורגמן לשפת הסימנים בשידור חי
  • אודיו :
    אם יש קולות רקע במקביל לדיבור, למשל מוזיקת רקע תוך כדי שהקריין מסביר – אז צריך לתת אפשרות להשתיק את קולות הרקע,
    ובכל מקרה צריך להקפיד שקולות הרקע יהיו לפחות 20 דציבלים פחות מהדיבור. ( סעיף 1.4.7 )
  • עבור כל ביטוי מיוחד \ מקצועי וכדומה – יש לתת קישור להסבר או להשתמש בתגיות של "הגדרות" dl/dt וכדומה
  • להוסיף "פירורי לחם" בעמודי האתר – כלומר מקום כלשהוא בעמוד שאומר למשתמש איפה הוא נמצא בתוך האתר,
  • לתת קישור לעזרה בכל דף – והעזרה צריכה להיות רלוונטית עבור הדף .
  • לתת אפשרות להקראה אוטומטית של תוכן האתר
  • מתרגם לשפת הסימנים עבור וידאו
  • לתת מנגנון טכני שיפרש ראשי תיבות או קיצורים
  • הכלל שחל על דברים פיננסים או משפטיים ברמה AA – אז ברמה AAA הוא חל על הכל, כלומר בכל טופס, צריך לספק אחד מ-3 אפשרויות – אפשרות לבטל , אפשרות לתקן לאחר שנמצאו שגיאות, ודף סקירה שמציג את התוכן לאישור סופי לפני שמירה.
  • גם אם משתמש יצא מה-Session בטעות, צריך לתת לו אפשרות לחזור ולהמשיך מחדש מאותה נקודה – בלי למלא שוב פעם את הנתונים

מה קרה לאתר ? הסבר קצר

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

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

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

עם מנויי ה-RSS שקיבלו הפצצה – הסליחה 🙂

להשתמע

איל

שימוש במשתנים ב-Inno Setup

ב-INNO SETUP יש אפשרות מובנה למשתנים.

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

הגדרת המשתנה –

 #define PICS "C:FOLDERpics"  

הגדרנו משתנה בשם PICS שמכיל את הערך של תיקית התמונות

שימוש במשתנה :

למשל בתוך הקטע של FILES


Source: {#PICS}*.*; DestDir: "{app}"

בהצלחה!

התקנת yii2 על linux ללא composer

מורידים את הקובץ tar מכאן http://www.yiiframework.com/download/

לאחר מכן,
מעתיקים אותו לתיקית ה-web שלכם.

נותנים לו הרשאות מלאות (אפשר פשוט לתת בעלות ליוזר של apache, באמצעות chown )

ואז גולשים בדפדפן אל התיקיה ו-גמרנו.

http://localhost/basic/web/index.php

הערה : אומנם לפי התיעוד הרשמי, אמורים להיכנס לתיקית config, ולערוך את קובץ web.php – ולרשום בו סיסמא כלשהיא להצפנת ה-cookies , בערך cookieValidationKey, אבל אם אתם מורידים את פרויקט ה-basic/advanced , ולא פריימוורק ריק, אז זה קיים כבר.

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

או הפעלה של קובץ זה משורת הפקודה.

הגדרות מומלצות עבור ה-Apache בשביל yii2 בסביבת production

בשרת production, היינו רוצים לגלוש לאפליקציה/אתר שלנו ישירות כך : http://www.example.com/index.php

ולא כך : http://www.example.com/basic/web/index.php

לשם כך נדרש להפנות את ה-Virtual host ישירות אל תיקית  basic/web.

בנוסף נרצה בוודאי להסתיר את index.php משורת הכתובת.

כדי לבצע את הדברים האלו, יש להגדיר בקובץ httpd.conf , או בתוך הקובץ שמגדיר את ה-virtual host, את ההגדרות הבאות :

# Set document root to be "basic/web"
DocumentRoot "path/to/basic/web"

<Directory "path/to/basic/web">
    # use mod_rewrite for pretty URL support
    RewriteEngine on
    # If a directory or a file exists, use the request directly
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # Otherwise forward the request to index.php
    RewriteRule . index.php

    # ...other settings...
</Directory>

יש לזה יתרונות נוספים, ברגע שמגדירים את bsic/web כתיקית ברירת המחדל של ה-virtual host, מונעים למעשה מהגולשים אפשרות לגשת לתיקיות פנימיות רגישות, שהם אינם צריכים לראות.

זכויות יוצרים : המדריך פורסם לפי התנאים של Yii , והמקור נמצא בקישור הבא :  http://www.yiiframework.com/doc-2.0/guide-start-installation.html

איך להוסיף תוכנה לשולחן העבודה (desktop) של Ubuntu ?

ישנן כמה שיטות להוסיף תוכנה לדסקטופ של אובונטו,

אני מראה אחת מהן ומציג מקור (באנגלית) :

sudo apt-get install --no-install-recommends gnome-panel

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

gnome-desktop-item-edit ~/Desktop/ --create-new

מקבלים מסך Pop-up קטן וידידותי שמאפשר לתת שם לקיצור הדרך, ולנווט אל הקובץ.

מקור : https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles
בהצלחה!

מדריך Yii 2 – הרצת אפליקציות (הבסיס)

אחרי שמתקינים את Yii 2 ,ניתן לגשת לאפליקציה באמצעות ה-URL : http://hostname/basic/web/index.php או http://hostname/index.php תלוי בהגדרות של שרת ה-Web.  במדריך הזה נלמד איך מאורגן הקוד, ואיך מנותבת כל בקשה (request) של הגולש .

הנחת יסוד : יש לכם את תיקית basic/web בתיקיה שמחזיק שרת ה-web ( נניח localhost/basic/web) . כמובן, אם התקנתם את זה בתיקיה אחרת , תתאימו את הכתובות של ה-URL בהתאם.

אפליקצית ה-Basic, מכילה 4 עמודים :

  • דף הבית שניתן להגיע אליו דרך ה-URL – http://hostname/index.php
  • דף ה-About
  • דף ה-Contact שמכיל טופס  יצירת קשר דרך מייל
  • דף login  – שמכיל את היכולת לבדוק משתמש, אם תנסו אותו,עם admin/admin תוכלו לראות שהמילה login הופכת להיות logout.

העמודים האלו חולקים יחד את אותו Header , Footer, Menu .

בתחתית אפשר לראות כלי חזק מאוד של Yii שנקרא  debugger tool שמספק עזרה מאוד נחוצה כמו הודעות Log , שאילתות ל-DB, סטטוטים של בקשות ועוד.

מבנה האפליקציה ב-Yii

  • תיקית basic  – מכילה את כל האפליקציה
    • composer.json – לשימוש באמצעות ה-Composer
    • תיקית Config – הגדרות
      • console.php הגדרות של ה-console
      • web.php – הגדרות של האפליקציה
    • תיקית commands – מכילה פקודות של ה-console
    • תיקית controllers – מכילה את קבצי הקונטרולרים
    • תיקית models – מכילה את קבצי המודלים
    • תיקית runtime – מכילה קבצי ש-Yii מייצרת תוך כדי ריצה, כמו לוגים, ו-cache.
    • תיקית vendor – מכילה חבילות שהותקנו על ידי ה-composer, כולל את קבצי הליבה של Yii.
    • תיקית views – מכילה את קבצי ה-view
    • תיקית web
      • index.php – קובץ הגישה לאפליקציה
      • assets – קבצי css + JS
    • קובץ yii (או קובץ yii.bat) – קובץ ה-console.

מה צריך להיות חשוף למשתמש ?

ב-Yii אפשר לחלק את הקבצים כך : כל מה שנמצא בתיקית web, נגיש לגולש, כל השאר – צריך להיות לא נגיש לגולש, ונגיש רק לשרת/לסקריפטים.

Yii משתמשת כמו פריימורקים רבים בשיטת/מתודולגית MVC, כפי שבוודאי שמת לב מהמבנה של התיקיות -models/views/controllers – מכילות כל אחת את הקבצים הרלוונטים.

איך מנותבת בקשה/request ב-Yii ?

לכל אפליקציה יש קובץ index.php שהוא הקובץ היחיד שנגיש לגולש. קובץ זה לוקח את ה-request ויוצר מופע של המחלקה application ואז מתחיל לטפל ב-request.

המחלקה application מפענחת את ה-request עם סיוע של רכיבי ה-components ומנתבת את ה-request בין רכיבי ה-MVC.

יש לציין שבחלק של ה-views, נעזרים ב-Widgets כדי לבנות את ה-views.

 ניתוב של request ב-Yii – שלב אחרי שלב

  1. הגולש מקליד כתובת, ונשלח request ל-enrty script, שהוא כאמור , קובץ web/index.php
  2. הגדרות ה-configuration נטענות . ובנוסף נוצר מופע (instance) של המחלקה application כדי לטפל ב-request.
  3. המחלקה application מפענחת את הנתיב – route, עם עזרה של מרכיב שנקרא -request.
  4. נוצר מופע (instance) של controller כדי לטפל ב-request.
  5. הקונטרולר יוצא מופע (instance) של ה-action הדרוש ומפעיל Filters אם יש צורך.
  6. אם אחד ה-Filters כושל, הפעולה כולה נעצרת (כלומר ה-action כושל).
  7. אם כל ה-Filters עוברים בהצלחה, אז ה-Action מבוצעת.
  8. כאן ה-Action תופס פיקוד, ומבצע  טעינה של המודל (model) ואם זהו מודל שקשור ל-DB, אז נשלפות הרשומות מה-DB.
  9. ה-Action מייצר View ומחזיר את ה-view ביחד עם נתוני ה-model אל השלב הבא. (הייצור של ה-View מכונה render) .
  10. התוצאה מוחזרת אל רכיב ה-response.
  11. רכיב ה-reposnse שולח תשובה אל הדפדפן של הגולש.

זכויות יוצרים : המדריך פורסם לפי התנאים של Yii , והמקור נמצא בקישור הזה.

מדריך Yii 2 – אפליקצית "שלום עולם"

המדריך הזה מתאר איך ליצור אפליקצית "שלום עולם"  על מנת לבצע זאת, אנו ניצור action וגם view :

  • האפליקציה תשלח בקשה (request)  לדף אל ה-action
  • ואז ה-action תייצר את ה-view ותציג את המילה Hello אל הגולש.

במסגרת מדריך זה תלמד 3 דברים :

  • איך ליצור action – פעולה שמגיבה לבקשה (=request)
  • איך ליצור view שיציג את תוכן המענה לבקשה (=response)
  • איך האפליקציה שולחת בקשות (requests ) אל actions.

איך ליצור Action ב- Yii

כדי ליישם את אפליקצית שלום עולם ב-Yii אנחנו ניצור action שיקרא say. ה-Action הזה, היא פונקציה של מחלקה, שתקבל פרמטר בשם message מה-request  ותציג את ההודעה לגולש.

אם ה-request נשלחה ללא הפרמטר message , אז ה-action תציג את ברירת המחדל – המילה Hello.

מה זה בעצם Action ב- Yii ?

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

התוצאה של ביצוע Action – היא מה שהגולש מקבל (מכונה גם response).

דוגמא להגדרת Action ב- Yii

כל Action חייבת להיות מוגדרת בתוך Controller. לצורך הפשטות, נגדיר כעת את ה-Action בשם say בתוך Controller שכבר קיים, שנקרא SiteController.

ה-Controller הזה הוא מחלקה שמוגדרת בקובץ controllers/SiteController.php.

כך יש להגדיר את ה-Action בשם say :

<?php

namespace appcontrollers;

use yiiwebController;

class SiteController extends Controller
{
    // ...existing code...

    public function actionSay($message = 'Hello')
    {
        return $this->render('say', ['message' => $message]);
    }
}

הסבר הקוד : ה-Action שנקראת say, הוגדרה כמתודה בשם actionSay בתוך המחלקה SiteCotroller.  כדי להפריד מתודות שהן actions ממתודות אחרות , Yii דורשת שכל action יתחיל במילה action באותיות קטנות. השם שמופיע מייד אחרי המילה action הוא השם המזהה של ה-action, שמכונה גם action ID.

כללים למתן שמות ל-Actions ב- Yii

נפריד בין הצורה שה-action נקרא בתוך המערכת, ובין השם שבו הוא נקרא כאשר מגדירים את המתודה.

שמות של actions בתוך המערכת (=מה שנקרא action's ID )

  1. תמיד באותיות קטנות,.
  2. כאשר אם השם מורכב ממספר מילים, יש להפריד בין המילים באמצעות מקףלמשל create-comment.

המתודה של ה-Action צריכה תמיד להיות

  1. בפורמט CamelCased (=אות ראשונה של כל מילה היא אות גדולה, ללא רווח בין המילים)
  2. עם המילה action באותיות קטנות בתחילת שם המתודה .

למשל : actionCreateComment

במקרה שלנו, ה-Action מקבלת פרמטר במשתנה $message . כאשר הגדרנו ערך ברירת מחדל למשתנה זה – המחרוזת "Hello" (בדיוק בצורה הרגילה שבה מגדירים ערך ברירת מחדל לכל משתנה בפונקציות php).

כאשר האפליקציה תקבל request  ותחליט שהפעולה הנדרשת היא הפעולה say , אז האפליקציה תיקח את הפרמטר שהתקבל ב-request (נניח ב-get בשורת הכתובת) ותעביר אותו את הפונקציה actionSay.

בתוך המתודה actionSay השתמשנו במתודה render() שמה שהיא עושה – היא מחוללת view, על בסיס קובץ view שגם הוא נקרא say.

הפרמטר message מועבר אל ה-view , כדי שנוכל להשתמש בו שם. התוצאה של יצירת ה-view מוחזרת באמצעות ה-Action.

מוחזרת לאן ? – התוצאה מוחזרת לאפליקציה ומוצגת לגולש בדפדפן.

 איך יוצרים View ב- Yii ?

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

צור קובץ php חדש, ושתול בו את הטקסט הבא :

<?php
use yiihelpersHtml;
?>
<?= Html::encode($message) ?>

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

<?php echo .....bla bla bla

כלומר, במקום לכתוב את תגית הפתיחה המלאה של php, ואת המילה echo, אם משתמשים בקיצור הזה, חוסכים בעצם בכתיבה בכך שרושמים רק 3 תוים.

כדי שזה יעבוד , אז ב-php.ini האפשרות short_open_tag חייבת להיות מאופשרת.

את הקוד ההוא של ה-view שנקרא say עליך לשמור בקובץ /views/site/say.php. ואז, כאשר המתודה render() תופעל בתוך ה-action, היא תחפש קובץ במיקום הבא : views/ControllerID/viewName.php.

שים לב, בקוד פה, עטפנו את הפרמטר message בפקודה HTML-encoded לפני שהדפסנו אותו על המסך.

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

בתוך View אתה שם את כל הקוד שמוצג למשתמש, זאת אומרת, תגי Html, טקסט חופשי, וכו' וכו'. מה שקורה בפועל הוא שאחרי שהמתודה render() מופעלת, אז התוכן שמיוצר באמצעות ה-view (שנקראת say בדוגמא שלנו) מוחזר אל האפליקציה ומוצג לגולש, בתור מענה (=response) .

נסה את זה בעצמך !

כעת, הגיע זמן לגלוש אל הכתובת, ולראות שהכל עובד.

הכתובת היא

http://hostname/index.php?r=site/say&message=Hello+World

ואתה צריך לקבל דף שיראה כך :

אפליקצית שלום עולם ב- Yii
אפליקצית שלום עולם ב- Yii

 

הכתובת הזו הובילה לתוצאה של עמוד "Hello World". כאשר העמוד קיבל את אותו Header+fotter של שאר עמודי האפליקציה.

אם תמחק מה-URL את הפרמטר message, ותרענן את הדף, תוכל לראות שתתקבל המילה "Hello". זה מפני שהפרמטר message קיבל את המילה "Hello" בברירת מחדל בפונקציה actionSay.

כדאי לדעת : הדף החדש שיצרנו מקבל את אותו Header+Footer כמו שאר הדפים באפליקציה, כיוון שהמתודה render() מוסיפה אותם באופן אוטומטי לכל view, מתוך מה שנקרא layout, ומאוחסן במקרה שלנו במיקום views/layouts/main.php.

מה משמעות הפרמטר r בכתובת ?

הפרמטר r הוא קיצור של המילה route כלומר – ניתוב. זוהי הצורה ב-Yii לפנות אל action ספציפי. כאשר בכל פעם שנראה לפנות ל-action נציין זאת בתבנית הבאה ControllerID/ActionID.

ואז, כאשר האפליקציה מקבלת request היא בודקת את הפרמטר הזה, ופונה אל המחלקה של ה-ControllerID המתאים, ובתוכה אל המתודה של ה-ActionID המתאים, כדי לבצע את הפעולה שהתבקשה דרך ה-URL. בדוגמא שלנו, היא פנה אל ה-Controller שנקרא SiteController ובתוכו אל ה-Action שנקראת say . וכתוצאה, הפעלנו למעשה את המתודה  SiteController::actionSay() כדי לבצע את הפעולה.

חשוב לדעת : בדיוק כמו הכללים לכתיבת שמות של actions. גם ל-controllers יש כללים מחייבים עבור השמות שלהם. אותם כללים בדיוק. כלומר, שם המחלקה של ה-Controller מורכב ממילים בפורמט CamelCased (כל מילה מתחילה באות גדולה, ללא רווחים). ובסוף הביטוי יש להוסיף את המילה Controller.
לדוגמא : אם ה-Controller ID הוא post-comment, אזי שם המחלקה יקרא PostCommentController.

סיכום – אפליקצית "שלום עולם" ב-Yii.

במדריך הזה :

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

במדריך הזה, לא נעשה שימוש ב-model כלל, והמידע היחיד שהשתמשנו בו, היה הפרמטר message.

בנוסף למדת על ניתוב (route) ב- Yii, שמהווה מעין גשר בין ה-request של המשתמש ובין המתודות (=actions) של ה-Controller.

בפרק הבא תלמד כיצד ליצור model. וכיצד להוסיף דפים חדשים הכוללים טפסי HTML.

 

זכויות יוצרים : המדריך פורסם לפי התנאים של Yii , והמקור נמצא בקישור הזה.

מדריך Yii – עבודה עם טפסים

אחרי המדריך הקודם, בו תיארנו את ה-Actions וה-Views , המדריך  זה מתאר איך ליצור דף חדש באתר,  עם טופס לקבלת נתונים ממשתמשים. בדף שניצור יהיה טופס עם 2 שדות : שם + אימייל. ואחרי שנקבל את הפרטים האלו מהגולש, נבדוק אותם, ונציג אותם חזרה למשתמש.

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

במדריך הזה נלמד :

  • ליצור model
  • איך רושמים כללים לאימות/validation של הנתונים במודל
  • לבנות טופס Html באמצעות Yii

יצירת מודל ב- Yii

הגולש יכניס נתונים לתוך טופס, את הנתונים, אנחנו נשמור בתוך מחלקה מסוג model  בקובץ  models/EntryForm.php. (אם אתה עדין לא מכיר את הכללים ליצירת שמות קבצים ומחלקות, עיין בסעיף AutoLoading).

<?php

namespace appmodels;

use yiibaseModel;

class EntryForm extends Model
{
    public $name;
    public $email;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email'],
        ];
    }
}

 

המחלקה שיצרנו מרחיבה (extends) את המחלקה yiibaseModel , שהיא מחלקה בסיסית ש-Yii מספקת לנו, עבור מודלים.

הערה : המחלקה yiibaseModel משמשת ליצירת מודלים שלא מבוססים על DB, עבור מודלים שמבוססים על DB יש מחלקה אחרת שנקראת yiidbActiveRecord.

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

בנוסף, המודל מכיל גם מערך של כללים , המשמשים לבדיקת הנתונים (validition), יש שם 2 כללים :

  • 2 השדות הם חובה
  • האימייל חייב להיות אימייל תקין

נניח ויש לך אוביקט של EntryForm שמכיל כבר את הנתונים מהגולש, ואתה מעוניין רק לבדוק אותו , לעשות לו וואלידציה, אז הקוד יראה  כך  (אם הוואלידציה לא מצליחה, תקבל hasErrors  = false והשגיאות יופיעו באוביקט errors ) :

<?php
$model = new EntryForm();
$model->name = 'Qiang';
$model->email = 'bad';
if ($model->validate()) {
    // Good!
} else {
    // Failure!
    // Use $model->getErrors()
}

יצירת Action

כעת, צריך ליצור Action שיקרא Entry בתוך ה-Controller , כאשר ה-Action , יעשה שימוש במודל החדש שיצרנו.

<?php

namespace appcontrollers;

use Yii;
use yiiwebController;
use appmodelsEntryForm;

class SiteController extends Controller
{
    // ...existing code...

    public function actionEntry()
    {
        $model = new EntryForm;

        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            // valid data received in $model

            // do something meaningful here about $model ...

            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // either the page is initially displayed or there is some validation error
            return $this->render('entry', ['model' => $model]);
        }
    }
}

המתודה actionEntry , מתחילה בכך שהיא  יוצרת אובייקט EntryForm.
לאחר מכן, המתודה מנסה להכניס את הנתונים שהגיעו ב-Post אל תוכל המודל, ולשם כך המתודה נעזרת ב yiiwebRequest::post() שמסופק על yii.  אם המתודה מצליחה להכניס את הנתונים למודל היא קוראת לפונקציה validate() כדי לוודא שהנתונים שהוקלדו נכונים.

מידע: הביטוי  Yii::$app הוא מופע (instance) של אוביקט  application  (אוביקט עם מופע יחיד – סינגלטון).  הוא מאפשר לנו לגשת לאוביקטים חשובים, כמו כמו request, response, db. בדוגמא הספציפית שלנו, הוא איפשר לנו לגשת לאוביקט request ולמשוך מתוכו את הנתונים שהגיעו ב-Post.

אם הכל תקין בטופס, אז ה-Action תקרא לפונקציה render() כדי ליצור view בשם entry-confirm .

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

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

יצירת Views

השלב האחרון במדריך הוא ליצור 2 קבצי view, אחד יקרא בשם entry-confirm  והשני יקרא פשוט entry. ה-view שיקרא entry-confirm פשוט מציג את הנתונים שהוקלדו בטופס.

צור קובץ במיקום views/site/entry-confirm.php :

<?php
use yiihelpersHtml;
?>
<p>You have entered the following information:</p>

<ul>
    <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
    <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>

הקובץ השני הוא views/site/entry.php והוא יכיל את טופס ה-html עצמו :

<?php
use yiihelpersHtml;
use yiiwidgetsActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'name') ?>

    <?= $form->field($model, 'email') ?>

    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

בקוד של ה-view הזה בטח הבחנת שאנו משתמשים ב-widget עוצמתי של Yii שנקרא ActiveForm כדי לבנות את טופס ה-Html. המתודות begin() ו- end() יוצרות את תגי הפתיחה והסיום של הטופס, והמתודה field() מציגה שדה בודד.

לסיום המתודה yiihelpersHtml::submitButton()  מייצרת כפתור Submit לשליחת הנתונים.

נסה את זה בעצמך

כדי לנסות את הטופס החדש באפליקציה גלוש אל

http://hostname/index.php?r=site/entry

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

אך לעומת זאת אם תקליד נתונים שעומדים בכלל הוואלידציה תקבל את ה-view שיצרת שנקרא entry-confirm שנראה כך :

 איך הוודליאציה עובדת בלי רענון של הדף (מה הטריק ? )

הרכיב שנקרא yiiwidgetsActiveForm הוא רכיב חכם שמייצר בעצם 2 נדבכים של וואלידציה, הראשון הוא JavaScript , ורק במידה ואצל הגולש – ה-JS לא מופעל בדפדפן, אזי בכל מקרה, תהיה גם וואלידציה בצד השרת (php כמובן).

ותגיות ה-label מיוצרות אוטומטית באמצעות הפונקציה field().

אם אתה מעוניין לשנות את ה-labels, אפשר לשנות אותם בצורה הבאה:

<?= $form->field($model, 'name')->label('Your Name') ?>
<?= $form->field($model, 'email')->label('Your Email') ?>

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

 סיכום – טפסים ב-Yii

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

בנוסף, ראינו איך ליצור טפסי Html ואיך להשתמש ב-widgets של Yii.
במדריך הבא, נראה איך לעבוד עם DBs .

המדריך מפורסם לפי התנאים של Yii , והמקור נמצא כאן .