דרופל – היום שלך בא!

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

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

בשלב ראשון – עם נייר ועט!! (או עפרון). פשט רושמים את החזון: איך אנחנו רוצים שהאתר ייראה, כמה עמודים יהיו בו, מה יהיה בכל עמוד, מה יהיו כותרות פריטי התפריט וכו'. בתור דוגמה, נתחיל עם משהו מאד פשוט: אתר שיש בו ארבעה עמודים בלבד. בואו נרשום אותם על הנייר:
מי אנחנו
מה אנחנו רוצים
למה אנחנו כאן
איפה אפשר למצוא אותנו
האתר יהיה בנוי מתפריט בצד ימין שכולל את הפריטים מהרשימה לעיל, ותוכן באמצע. כמובן שזה רק בשביל התחלה. ניתן יהיה לשנות הכל אחר כך, אבל בשלב זה, אנחנו רק מתרגלים את הבסיס. אחרי שסיימנו את העבודה במישור הפילוסופי, אפשר לעשות את הצעד הראשון בהתקנת המערכת. אז איך עושים את זה?
הגדרת מסד הנתונים
כאשר התקנתם את השרת, הותקן MYSQL. בשלב זה אתם צריכים ליצור מסד נתונים חדש וריק שישמש את דרופל. הדרך הטובה לעשות זאת היא באמצעות ממשק phpMyAdmin, שהותקן גם הוא על ידי השרת. אני לא הולכת להסביר כאן איך לעשות את זה, גם לי יש ציפיות גבוהות כנראה, אבל באמת – phpMyAdmin הוא די נוח יחסית לקוד פתוח. אתם תהיו בסדר. רק דבר אחד חשוב שאתם כן צריכים לדעת: MYSQL לא רגישה לאותיות קטנות/גדולות, אבל דרופל כן. לכן הקפידו תמיד ששם מסד הנתונים שלכם הוא באותיות קטנות בלבד. אחרת תהיו בצרות בשלבים מאוחרים יותר של ההתקנה. (מנסיון).
התקנת המערכת
הורידו את הקובץ המכווץ מהמקום המתאים, שיכול להשתנות מדי פעם. כרגע, מקום שכדאי להתחיל ממנו הוא כאן. הגרסה הנוכחית, נכון להיום היא 5.1. הורידו אותה לאיזשהו מקום בדיסק הקשיח ופרשו אותה מתחת לספריית השורש של השרת שלכם. כלומר – מתחת ל-c:\serverFolder\wwww\.
פה אני מניחה שתתקלו באתגר הראשון שלכם: איך פורשים קובץ בסיומת tar.gz? לא בעזרת הכלים של מערכת חלונות, זה בטוח. הדרך הכי טובה היא להשתמש בתוכנה חינמית בשם 7zip, שאפשר להוריד אותה כאן. בכלל, אני ממליצה על התונכה הזאת בחום – כי היא יכולה להתמודד עם מספר די גדול של פורמטים, היא מאד קלה – והכי חשוב – היא לא עולה לכם אגורה.
הגדרת המערכת
עכשיו כל מה שנשאר לעשות הוא לגלוש לכתובת בו ממוקמת הספרייה של דרופל: אם התקנת הדרופל שלכם נמצאת למשל כאן: c:\serverFolder\wwww\Drupal\ אתם צריכים לרשום בחלון הכתובת בדפדפן שלכם את ה-URL: http://localhost/Drupal/ בדף הראשון צריכים להגדיר את מסד הנתונים שהמערכת תשתמש בו.
אזהרה!! שם מסד הנתונים שלכם, זה שבניתם מראש, חייב לכלול אך ורק אותיות קטנות. אחרת דרופל עושה צרות בשלב זה וטוענת שהיא לא יודעת על מה אתם מדברים.
אם הכל עבר בשלום, קיבלתם דף שמוסר לכם את איחוליו על ההתקנה המוצלחת, ושולח אותכם בלינק, לאתר עצמו. כדאי ללחוץ על הלינק.
אבל מה אם לא הכל עבר בשלום?
מה שיכול לקרות הוא – שקיבלתם הודעה לגבי המסד: הוא לא מזהה את המשתמש. בשלב ראשון שהוא לא לגמרי מומלץ, אבל לפחות כדי שתוכלו להמשיך, כדאי לתת את שם המשתמש root ללא סיסמה. כדאי לזכור שמבחינת אבטחה זה רעיון ממש רע. אבל אנחנו רק מתאמנים כאן, אז פשוט תבטיחו לעצמכם שזה זמני, ובשנייה שיהיה לכם זמן – אתם תדאגו לפתור את הבעייה ולאבטח את האתר.
הגעתם לדף עם רשימה די מובנת של שלבים. באופן מפתיע, אתם יכולים לסמוך על מה שכתוב שם, בתנאי, כמובן, שתקראו הכל ותעקבו בדיוק אחרי ההוראות. בשלב הראשון, אתם מגדירים משתמש מנהל – אדמיניסטרטור. אתם צריכים להכניס שם וסיסמה, רצוי שתזכרו אותם לנצח, כי אלו יהיו הפרטים של מנהל האתר עם הרשאות הגישה הגבוהות ביותר.
סיימתם את התהליך – יש סיכוי טוב שתקבלו הודעה מפחידה לגבי הגדרות שרת ה-smtp. התעלמו כרגע.
קיבלתם דף של user account, ועכשיו אתם יכולים להמשיך בתפריט הימני וללחוץ על administer.
הגדרות האתר החדש
כאן יש סיכוי טוב שתקבלו עוד ריבוע אדום עם הודעות שגיאה מפחידות. אל תדאגו. הכל יהיה בסדר. אנחנו נהרוג אותן אחת אחרי השנייה. אגב – יש סיכוי שלא תקבלו אף הודעה והכל יהיה בסדר. במקרה הזה – שיחקתם אותה. עזבו הכל ורוצו למלא לוטו.
Cron maintenance tasks
דרופל יכולה לנהל משימות אוטמטיות, אבל לא -אני לא אכנס לזה עכשיו. כרגע מה שצריך לעשות הוא ללחוץ על הלינק שכתוב עליו " run cron manually". קלי קלות. הרגנו אחד.
File system
כשראיתי את זה – ממש התעצבנתי. מה זאת אומרת ספריית FILE לא קיימת? כאילו, אני אשמה?? אתה היית אמור להתקין אותה, לא? כשגמרתי להתעצבן לחצתי על הלינק file system settings page, והגעתי לעמוד עם הודעה בצבע ירוק (כבר מעודד), שאומרת The directory files has been created. יפה. ישר הלכתי לקצה העמוד ולחצתי על save configuration. אגב, ספריית FILES משמשת לאחסון קבצים שהועלו על ידי המשתמשים במערכת. סתם, בשביל ידע כללי. עכשיו, לא לאבד את העשתונות. לא הלכנו לאיבוד (הנה עוד דוגמה לחוסר ידידותיות למשתמש. אפשר לשים שם איזה כפתור BACK, לא? לא. אז אין ברירה. פשוט משתמשים בכפתור של הדפדפן וחוזרים לדף הקודם. חדשות טובות! נשארנו רק עם הודעת שגיאה אחת!
GD library not installed
זה טיפה יותר מסובך, אבל לאט לאט נעבור גם את זה: ספריית GD תומכת בניהול קבצים גרפיים. אנחנו רק צריכים להגיד לשרת להפעיל את האפשרות הזאת. לצורך כך נחפש בספרייה על הדיסק הקשיח שבה יושב השרת קובץ בשם php.ini. משתמשי שרת WAMP יכולים להגיע לקובץ זה מתפריט השרת, על ידי לחיצה על config files=>php.ini. הקובץ ייפתח בפנקס הרשימות בקובץ זה יש למצוא את השורה ;extension=php_gd2.dll שימו לב שהשורה מתחילה בסימן נקודה פסיק (;), כלומר מסומנת כהערה. מחקו בזהירות את ה-; מתחילת השורה, ושימו לב ששאר השורה לא ניזוק. שמרו את הקובץ ואתחלו את השרת. לאחר שהשרת אותחל, נותר רק לרענן את הדף. וזהו. עכשיו הכל ירוק, ואפשר לנשום, ולהמשיך.
זהו, עכשיו כשכל הצרות מאחורינו, אפשר לחזור לקישור content managemant בתפריט השמאלי.
יש המון המון דברים שאפשר לעשות כאן. אבל אנחנו לא נעשה אותם, כדי שלא תהיה הצפה במוח. בשלב הראשון, נלך ל-administer=>site building=>menus כאן אפשר לנהל את התפריטים באתר. כרגע יש לנו שני תפריטים שדרופל בנתה: אחד מהם נקרא navigation, וזהו פשוט תפריט הניהול שאנחנו רואים מצד ימין. אנחנו לא ניגע בו בשלב זה. התפריט שמעליו נקרא primary link. למרות שדרופל מלאה כוונות טובות, אנחנו גם בו לא ניגע כרגע, אלא נבנה תפריט חדש בשם "תפריט האתר". לשם כך נלחץ על Add menu (ולא להתבלבל עם add menu item שלידו).
נכתוב "תפריט האתר" במקום הרצוי, ונאשר.
עכשיו מחזור לקישור העליון ביותר משמאל: create content
ושוב מנסים לבלבל אותנו. האם אנחנו רוצים page או story?
אנחנו רוצים page כרגע. ואל תשאלו למה.
עכשו אנחנו הולכים ליצור עמוד תוכן לכל אחד מהפריטים ברשימה שנתנו למעלה: מי אנחנו, מה אנחנו רוצים, למה אנחנו כאן וכו'.
title ו-body, די ברורים. מתחת יש עוד כמה קישורים, שבלחיצה על כל אחד בתורו, נפתחת תיבה המכילה הגדרות הקשורות אליו.
input formats מגדיר את סוג הקלט – האם הוא מבוסס HTML מלא, חלקי וכו,. כרגע, אין כאן עורך טקסט מלא. בשלב מאוחר יותר, בטח תרצו להתקין אחד.
log message – בשביל לבלבל. תתעלמו
comment setting – האם ואיך ניתן להגיב באתר. לא ממש חשוב כרגע.
menu settings – זה – ממש חשוב. וזה שכל כך בקלות אפשר לפספס את זה – עוד דוגמה לידידותיות של המערכת. אז תשימו לב לא לפספס -כי כאן בעצם מגדירים איך אפשר יהיה להגיע אל פריט התוכן, דרך איזה תפריט ומאילו מקומות באתר. הכי פשוט הוא לרשום כאן שוב את הכותרת של פריט התוכן – למשל – "מי אנחנו" עבור פריט התוכן הראשון. לא לשכוח לציין דרך איזה תפריט מגיעים לפריט הזה – מהתפריט הנפתח שנמצא מתחת. כמובן שנציין את שם התפריט בתיבה האחרונה – Publishing options יש לציין שהפריט הוא published, כלומר מקוון. אופציה נוספת היא Promote to front page. כדאי לבחור בה רק בפריט התוכן הראשון, כדי שדף הבית של האתר יהיה כבר מוכן לצפייה בשלב זה. ניתן כמובן לשנות הכל אחר כך.
אנחנו נוסיף עכשיו פריט תוכן לכל אחד מהפריטים ברשימה שהכנו מראש: מי אנחנו, מה אנחנו רוצים, למה אנחנו כאן וכו'. – כלומר – המקום שלו בין פריטי התפריט האחרים. ככל שהמשקל נמוך יותר (0 למשל) ככה פריט התפריט "יצוף" יותר למעלה בתפריט. הראשון שמסיים, שיישב בשקט ויחכה לשאר. לא לשכוח לציין את השם הנכון של תפריט האב של הפריט, ואת המשקל שלו בתוך התפריט.
זהו, כבר יש לנו תוכן. עכשיו צריכים לארגן את המבנה של האתר, איפה כל דבר נמצא, מה כל גולש יכול לראות, וכו'. לשם כך נחזור לתפריט הניהול מימין ונלחץ על הקישור administer=>site building=>blocksונתחיל לסדר את הבלוקים – בלוק התוכן, בלוק תפריט וכו', לפי מה שמתאים לנו. שימו לב גם כאן ל-"משקל" של כל אחת מהקופסאות.
זהו, אחרי שסיימנו כאן, נראה לי שהעניינים מתחילים קצת להתבהר, לא? זה השלב ללכת לקישור site configuration ולטפל בשלב ראשון בקישור הלפני אחרון: site information. כאן אתם יכולים להגדיר את הכותרת של חלון הדפדפן, הלוגו, הטגליין ודברים נוספים. זהו. בעצם סיינו את כל השלבים ההכרחיים בהגדרת האתר שלנו. השלב הבא יהיה בעצם לטפל באיך שהוא נראה . מה שמביא אותנו ל-
איך בונים תבנית של אתר בדרופל

הערה לסדר: כידוע, העם היהודי מאותגר בהגדרה, וזה אומר שבנוסף לכל הצרות שבוני אתרים רגילים מתנסים בהן בדרכם אל המיקצוענות, מעצבי אתרים ישראלים צריכים להתמודד גם עם האתגרים שמציבה להם לשון הקודש – או במילים אחרות – כתיבה מימין לשמאל, הגדרת קידוד נכונה כדי שהאותיות ייראו כמו שצריך ולא כמו כתובת עתיקה על טוטם ויקינגי ועוד מרעין בישין. אני ארחיב על העניין הזה בשלב יותר מאוחר. ניהול התבניות נמצא ב-administer=>site building=>themes כל התבניות של המערכת נמצאות שם. כדי לעבוד על תבנית, צריך קודם כל להפעיל אותה: לחיצה על enable לאחר מכן צריך לקבוע אותה כתבנית ברירת המחדל של המערכת. לחיצה על set as default לחיצה על כפתור השמירה בתחתית הדף. כדי לשנות את ההעדפות התבנית, יש ללחוץ על כפתור configure שלייד התבנית אותה רוצים לשנות. מבנה התבנית כל התבניות נמצאות מתחת לתיקיית /drupal/themes כל תבנית נמצאת בתיקיה שנושאת את שם התבנית. תוכן תיקיית תבנית תלוי בסוג התבנית. אם היא תבנית בסיסית, או תבנית שמבוססת על מנוע תבנית (theme engine). אני לא אכנס לזה. תוכן התיקיה של תבניות מבוססות phptemplate נראה כך: תיקיית תמונות (רקעים, כפתורים, המיוחדים לתבנית) קובץ סגנון, ששמו תמיד style.css קובצי התבנית עצמם, שהסיומת שלהם היא tpl.php קובץ פונקציות ספציפיות לתבנית, בד"כ פונקציות שהורכבו על פונקציות מקוריות. במידה והוא נמצא, הוא נקרא template.php קובץ PNG שמכיל צילומסך של התבנית. קובץ ICO – משמש לאייקון מיוחד ל-"מועדפים" של הדפדפן. הדרך הכי פחות מאתגרת לפתח תבנית חדשה עבור דרופל היא להתבסס על תבנית שמבוססת על מנוע תבנית מסוג phptemplate. איך מתקינים תבנית חדשה? 1. מורידים אותה בקובץ מכווץ. בודקים שהקובץ מכיל תיקייה בשם התבנית, ויש בו את הקבצים כפי שתואר לעיל 2. פורשים את הקובץ מתחת לתיקיית Drupal/Themes 3. עוברים לתפריט administer=>site building=>themes, ואם הכל בסדר, רואים ברשימה את התבנית שנוספה 4. הפעילו את התבנית, ובחרו בה כתבנית ברירת המחדל. לאחר השמירה, מראה העמוד ישתנה לפי העיצוב של התבנית החדשה 5. אם לא הכל בסדר – סימן שהקובץ שהורדתם כנראה פגום. נסו להוריד מקישור אחר, או הורידו תבנית אחרת. איך מעצבים תבנית חדשה? תבנית חדשה מאד רצוי לעצב על בסיס של תבנית קיימת, רצוי תבנית שמבוססת על מנוע תבנית phptemplate. התבנית המומלצת ביותר כתבנית בסיס לעיצוב היא תבנית בשם zen, שלא נמצאת בקונפיגורציה הבסיסית של דרפל. צריך להוריד אותה מכאן: http://drupal.org/project/zen אחרי שפורשים את תיקיית התבנית מתחת לתיקיית התבניות, רצוי קודם כל לשנות את השם שלה לשם אחר. למשל myTheme. ואז לקנפג אותה בצורה רצוייה דרך ממשק הניהול. ועכשיו לעניין – איך מתאימים את התבנית לעיצוב שלנו? לתהליך הזה יש שתי רמות: התאמה ברמת ה-CSS (פשוט יחסית) התאמה ברמת ה-template (מסובך עד בלתי אפשרי) כפי שודאי ניחשתם, אתם מקווים שכל חלומותיכם יוכלו להתגשם רק בעזרת עבודה על ה-CSS. זה די קרוב לאמת, אז לא צריך להכנס ללחץ. התאמה ברמת ה-CSS. הדבר הראשון שאני עשיתי, הוא הצעד הראשון המומלץ גם בשבילכם: מחקר מעמיק על קובץ ה-output שהדפדפן מוציא כאשר נמצאים בדף תוכן. כדי לייצר אותו פשוט מבקשים view source. כאשר תעברו על הדף תבחינו בדבר הכי חשוב: איפה ואילו קבצי CSS רלוונטים לקובץ זה. אתם תראו חמישה או שישה קבצים, אבל לא להבהל. הקובץ הרלוונטי לענייננו נמצא מתחת לתיקיית התבנית עצמה ושמו בישראל: style.css. זה הקובץ שתרצו לעבוד עליו, ותוכלו לעשות את זה די בקלות, בגלל שבתבנית ZEN כמעט לכל אלמנט יש ID, או לפחות Class. מה שעוד יפה בתבנית הזאת – שהוא מפרידה בצורה מוחלטת בין סגנון (שנמצא כולו בתוך גליונות הסגנון) ובין התוכן עצמו, שמיוצר על ידי המערכת. זו אחת הסיבות שכדאי מאד לעבוד איתה. בתבנית מהסוג הזה, רוב הסיכויים שתוכלו לעשות 99% מהעבודה על קובץ הסגנון ולא תצטרכו להתקרב בכלל לקבצי ה-tpl.php. התאמה ברמת ה-template. נו טוב, לפעמים אין ברירה. אז בואו נראה מה יש בקובץ page.tpl.php. זהו קובץ התבנית שמתאים ל-90% מהאתר שלכם: עמודי התוכן. הפעם הראשונה שאני נכנסתי אליו, הייתה כדי להוסיף קובץ האקים לאקספלורר. זה היה יחסית פשוט: קודם כל יש לאתר את הקובץ מתחת לתיקיית התבנית שלכם: drupal\themes\myThem\page.tpl.php, ולפתוח אותו באמצעות עורך הטקסט החביב עליכם. מה שצריך לעשות זה לפלס את דרכינו בין תגי ה- < ?php ?> ולהזהר לא לפגוע בהם. שימו לב לפונקציה < ?php print $styles ?> הפונקציה הזאת מדפיסה את כל הבלוק של גליונות ה-CSS בהם משתמש הדף, ובעצם יוצרת את קוד ה-HTML שראינו בקובץ הפלט על ידי view source. מתחת לשורה הזאת, נוסיף פשוט:

שימו לב להקפיד לא להכניס את השורה בין שני תגי PHP.
)

fix-ie.css הוא שם קובץ הסגנון שמכיל האקים לאקספלורר. תקראו לו איך שאתם רוצים, רק אל תשכחו גם ליצור אותו ולשים אותו ב-PATH הנכון. עוד משהו שאולי נרצה לעשות, הוא להוסיף ארועים לכל מני אלמנטים בדף בעזרת script של JS. לשם כך אולי נרצה לכתוב פונקציית אתחול לדף, שתקרא בטעינה של ה-body. נוסיף באותו קובץ את ה-script בתוכו הפונקציה שלנו (נגיד שקוראים לה init(), וכן נגדיר שהיא נקראת בזמן טעינת הדף:
window.onload = init;

בהצלחה!