מערכת באנרים – תשובה לשאלה מפורום תפוז

שלום לכולם,

הפוסט הזה מוקדש לענות על שאלה מתוך פורום תפוז
השאלה המקורית כאן

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

הפוסט הזה יגע גם בc#, גם בsql server, וגם בפלאש (כן כן, בפלאש).

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

הנה בסיס הנתונים

כמו שאנחנו רואים יש לנו שלוש טבלאות שונות:

1. טבלת באנרים
2. טבלת סוגי באנרים
3. טבלת קישור בין באנרים, סוגי באנרים ושמות דפים (נגע בטבלה זו בהמשך).

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


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

אם תשימו לב תוכלו לראות שיש כפתור קטן ליד ה-Input של הקובץ. הכפתור הזה נועד לשוטט בתוך תיקיית Files, אליה אנחנו יכולים להעלות קבצים ב-FTP. אני מוצא את השיטה הזו יעילה יותר ללקוחות מאשר להעלות בכל פעם קובץ ייעודי, כך הם יכולים בעצם לבחור באנר או תמונה או כל Resource אחר, ולהעלות את הקבצים בצורה נוחה מאוד.

כך זה נראה.

זה מאוד דומה לכל ה-Browser's שמגיעים עם RTE's למיניהם.

מתישהו אני אעשה Post שיתייחס רק לבנייה של ה-Component הזה, אני עובד על שיפור שלו עכשיו.

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

מה נשאר?
באנר בפלאש לדוגמא
מארח באנר (מה?) הסבר בהמשך.

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

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

תפקידו של קובץ פלאש

תפקידו של הקובץ הזה הוא לקבל אליו קובץ להפעלה
לקבל לינק לאחר לחיצה
להפעיל פונקציה כאשר הוא נטען (Views)
להפעיל פונקציה כאשר הוא נלחץ (Click)

רגע… פונקציה? אבל זה פלאש…
אוקיי, הפלאש יודע ל"התקשר" לדף שבתוכו הוא נמצא ולהפעיל בו פונקציה של Javascript, אפשר אפילו לקבל ממנה בחזרה פרמטרים והפלאש יודע להתייחס אליהם.

יפה, נכון?

נמשיך…

בואו נראה איך נראה הבאנר המארח (רמז… הוא נראה אפילו פחות טוב מהבאנר שאני עיצבתי :-) )

(הפלאש כתוב בActionScript 2 ומתאים לנגני פלאש 8 ומעלה, אבל באותה מידה אני יכול לכתוב אותו ל9)

אוקיי, אז מה הוא בעצם עושה?
אנחנו קובעים שלושה פרמטרים אותם אנחנו מעבירים לתוך הפלאש שלנו

banner_id – זיהוי הבאנר שלנו בבסיס הנתונים
Banner_Path – הנתיב לקובץ הפלאש של הבאנר האמיתי והמעוצב שלנו
bannerLink – הלינק אותו אנחנו צריכים להפעיל לאחר שהבאנר נלחץ.

בואו ונראה את הקוד שלנו

(Flash)

loadMovie(_root.Banner_path, _root.banner_loader);
ExternalInterface.call("flashAction", _root.banner_id, 'view');

שתי שורות הקוד האלה מאוד חשובות לנו
השורה הראשונה בעצם טוענת את הקובץ loadMovie ואם תשימו לב, היא משתמש בפרמטר Banner_Path שמועבר אליה.
banner_loader אינו בשימוש אבל בהחלט ניתן להשתמש בו לLoader עד שהבאנר הראשי יטען, כאן בדוגמה שלנו זה לא ממש ממומש :-)

השורה השנייה בעצם קוראת לפונקציה Javascript בשם flashAction ומעבירה אליה שני פרמטרים, האחר הוא banner_id שנכנס פנימה והשני הוא view.

מה זה אומר? (בהמשך)

אחלה, זה זה מה שקורה בטעינה, מה קורה בקליק?

on(release){
ExternalInterface.call("flashAction", _root.banner_id, 'click');
getURL(_root.bannerLink, "_blank");
}

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

יפה, אז מה הפונקציה בJavascript בעצם עושה.
היא קוראת לService (מאיפה הוא הגיע?) שבעצם אחראי ללכת לשרת ולבצע את הפעולות ישירות על הSQL.

ואז בService אנחנו נעשה התנייה
אם מועבר view, אנחנו נגדיל את השדה bannerViews ב1 לbanner_id.
אם מועבר click, אנחנו נגדיל את השדה bannerClicks ב1 לbanner_id.

כל אחד בדרך המימוש שלו, זה ממש לא משנה כאן, זה יכול להיות Access, או Sql עם NHibernate, זה יכול להיות הכל.

עכשיו אנחנו ניצור דף שצריך לארח את הבאנר שלנו.

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

רגע, איזה פלאש אני מפעיל בדף?

הנה

WriteFlashObj('images/bannerHosts/193×219.swf?','193px','219px',false,",'BannerFlash')

וואו ואוו, נראה מסובך? לא, ממש לא

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

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

Banner_path=files/kenso_blog_flash_example.swf&banner_id=1&bannerLink=http://kensodev.blogspot.com

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

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

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

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

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

** עדכון 26.10.2008
קובץ קוד המקור של הFlash נמצא כאן
אם אתם משתמשים בו, אשמח לשמוע על זה הערות והארות.

תודה לכולם.

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

*

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>