פרק 4: HTML בחטף ותבניות (Templates) רשת

זרימת מידע: או, בואו נתעלל קצת במסמך

בפרק השלישי "Maintaining State" (שימור מצב), יצרנו טופס דינמי להזמנת פיצה. בעוד ש "Build-A-Pizza" עובד מצויין, הוא במידה רבה, איך נגיד את זה, פשוט למראה. מכל הסיבות שראינו עד כה במאמר זה, בניה של עמוד רשת מסובך בעזרת HTML עשויה להפוך למשימה מיגעת למדי. בואו נתחיל מבניית תבנית.

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

בואו נשאיר את לרגע בצד את חוסר הכישרון האומנותי, התבנית של הSmallville Gazette היא במבנה של טבלה גדולה שקוד ה HTML שלה הוא די מסובך וארוך-בהחלט לא נרצה להדפיס אותו בצורה ידנית תוך שימוש בפקודת print של Perl ! בכל זאת, נרצה לשמור עמוד זה מעודכן תוך שימוש ב Perl כדי ליצור שני אלמנטים: התאריך הנוכחי והטופס "Bulid A Pizza" שראינו בפרק 3 של הסדרה.

ישנם בוודאי דרכים אחרות כדי להכניס תאריך משתנה לתוך עמוד רשת, אבל אנו נשתמש ב Perl כדי שתעזור לנו להדגים את הטכניקה של הדגם שלנו ע"י דוגמא פשוטה. משם נוכל לעבור לטופס הפיצה שלנו. שימו לב שבנינו את הדגם שלנו עם שני מקומות ריקים "INSERT DATE HERE" ו "INSERT PIZZA HERE". למעשה, מקומות אלו יכולים להכיל כל טקסט יחודי - במילים אחרות, טקסט אשר לא יוכל להופיע במסמך בצורה אחרת. בדרך כלל נרצה להשתמש בסימני הערה של HTML ליצירת המקומות הללו, כמו:

<--INSERT DATE HERE-->
<--INSERT PIZZA HERE-->

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

#!/usr/local/bin/perl
use CGI;

$cgiobject=new CGI;

print $cgiobject->header;

#read in template page
$templateFile="smallville.html";
open(INFILE,"<$templateFile");
@templatePage=<INFILE>;
close(INFILE);

#condense page array into one scalar variable
$resultPage=join("",@templatePage);

#determine current date
($sec,$min,$hour,$mday,
 $mon,$year,$wday,$yday,$isdst)=localtime(time);
$curDay=(Sunday,Monday,Tuesday,Wednesday,
         Thursday,Friday,Saturday)[$wday];
$curMonth=(January,February,March,April,
           May,June,July,August,September,
           October,November,December)[$mon];
$liveDate="$curDay, $curMonth $mday, ".($year+1900);

#search-and-replace on date
$resultPage=~s/INSERT DATE HERE/$liveDate/g;

#done, output page to browser
print $resultPage;

אחרי ההתחלה המוכרת הסקריפט צריך לקרוא את עמוד הדוגמה, במקרה זה נניח שהעמוד נקרא smallville.html. Perl תפתח את הקובץ, תקרא את כל תוכנו לתוך המערך templatePage@, ולאחר מכן תסגור את קובץ הקלט. ע"י קריאת הקובץ כולו לתוך מערך, כל שורה בקובץ כמוה כאלמנט במערך. לצרכינו, נרצה שכל קוד ה HTML שלנו ישב במשתנה סקאלרי בודד, לכן הפונקציה join משמשת לאיחוד כל השורות למחרוזת ארוכה של HTML. שימו לב שחיברנו את השורות בעזרת מפריד ה NULL, " ".

כל ה HTML עבור דגם ה Smallville Gazette שוכן כעת בבטחה בתוך resultPage$. נעקוב אחרי פעולה מקבילה: חישוב התאריך הנוכחי בתבנית הרצויה... באופן פרטני, ניקח את התאריך, היום בשבוע, והחודש ונבנה מחרוזת $liveDate בצורה "January 1, 1999". שימו לב שכאשר Perl מחזירה שנה היא מחסירה 1900 לכן, השנה 1999 מדווחת כ 99. לפיכך, נוסיף 1900 לשנה לצורך הצגה נכונה. האם זהו "באג אלפיים" (K2Y )? לא, בגלל שבשנת 2000 Perl תחזיר את השנה כ 100 . ולכן הוספה של 100 ל 1900 תיתן 2000.

החפש-החלף קורה בביטוי רגולרי אחד פשוט, כזה שראינו בפרק 2 של מאמרנו. אנו מחפשים בresultPage$ את המופע של "INSERT DATE HERE", וכאשר מוצאים, ההתאמה מוחלפת בתוכן של liveDate$, המכיל כמובן את התאריך הנוכחי. ה g/ בסוף מילוי המקום, גורם להחלפת כל המופעים של "INSERT DATE HERE", למקרה שמיקמנו עוגן זה במספר מקומות בעמוד. השמטת ה g/ תגרום להחלפת המופע הראשון שימצא בלבד.

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

$resultPage=~s/<--INSERT DATE HERE-->/$liveDate/g;

לבסוף, הפקודה print מוציאה את כל קוד ה HTML לדפדפן, ויוצרת את העמוד המחודש:

יתכן שכמות ההסברים שהסברנו כדי, בסך הכל, להכניס תאריך לתוך עמוד הדוגמה שלנו נראית מוגזמת במקצת- ואכן כך הוא. אבל בסך הכל אנו מניחים את הבסיס, כי הטכניקה של תבנית זו יכולה לשמש עבור מקרים מסובכים יותר של ייצור תוכן מתעדכן. כעת, הבא נכניס את "Build-a-Pizza" מפרק 3 לתוך ה Smallville Gazette. יהיה כיף.

CGI.pm מתווך שלנו
תוכן עניינים
Smallville Gazzette פוגשת את Build a Pizza :בואו נתעלל קצת במסמך