יצירת לוחות השראה "סטייל" פינטסרט

הקדמה – מה הן לוחות השראה?

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

נתחיל…

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

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

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

1. מוצרים

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

1.1 יצירת הפרמטרים לסינון

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

1.2 ביצוע הסינון

בשביל ליצור את הסינון השתמשתי בהרחבה בשם WP Advanced Search. השיקול לכך היה כי ההרחבה הזאת מאפשרת גמישות מירבית, איננה מאטה ולמעשה מקלה מאוד את הפיתוח שכן האתר בתקציב מוגבל וכתוצאה מכך ישנה מגבלה של כמות השעות שאוכל לספק. במקרה הזה הרגשתי שאוכל לסמוך על ההרחבה הזאת שכן היא מאוד נוחה ומשתמשת לבסוף בפונקציות בסיסיות בוורדפרס כך שעדכוני המערכת לא יפגעו בעבודה של ההרחבה הזאת. כדי לקרוא וללמוד עליה עוד אתם מוזמנים להיכנס לאתר ההרחבה בכתובת: http://wpadvancedsearch.com/

2. יצירת לוחות השראה

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

products	parent	slug	name	id
x,y,z,a,b,c	0	%D7%93%D7%95%D7%92%D7%9E%D7%90-1	דוגמא 1	1
,g,h,i,j,k	1	%D7%93%D7%95%D7%92%D7%9E%D7%90-2	דוגמא 2	2

כך אוכל כעת להציג את הלוחות. ובתוך לוח להציג את ה-PRODUCTS בתוכו.

2.1 יצירת פייג' טמפלט כללי ללוחות

לצורך כך יצרתי פייג' טמפל בשם "walls" ויצרתי עמוד ריק שמקבל את הפייג' טמפלט הזה. בתוכו השתמשתי ב-$wpdb שעליו תוכלו לקרוא בהרחבה בקודקס של וורדפרס (כאן)

global $wpdb
$results = $wpdb->get_results( 'SELECT * FROM my_table WHERE user_id=userid AND parent=parent' , OBJECT );

כך קיבלתי את התוצאות בהתאם ליוזר, להורה של הלוח השראה וכו' וכו'.

2.2 יצירת כתובות "ידידותיות

לא אוכל להרחיב כאן מכיוון שזה מעט יחשוף את מה שאני עושה. אך תוכלו לקרוא על כך כאן – http://codex.wordpress.org/Rewrite_API/add_rewrite_rule

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

2.3 יצירת מנגנון הוספה/הסרה ללוח השראה

כעת אני צריך לשלוח בכל לוח שנוצר במערכת את המוצר שבו אני נמצא כעת. למשל: הגעתי לעמוד מוצר ואני רוצה להוסיף את המוצר ללוחות ההשראה. חשבתי רבות כיצד לעשות זאת ולבסוף החלטתי לעשות זאת בעזרת AJAX ללא רענון העמוד. להריץ פונקציה שניגשת למסד נתונים בהתאם לפרמטרים כמו בסעיף הקודם אך הפעם מעדכנת את השורה בכך שהיא מוסיפה את הפוסט ID לטבלה שלי, תחת לוח ההשראה הנבחר לעמודה PRODUCTS כפי שציירתי בטבלה בתחילת סעיף 2.

המנגנון ליצירת AJAX הוא פשוט מאוד בוורדפרס והורחב עליו רבות כאן. הנה מה שעשיתי:

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

למי שלא יודע, AJAX מאפשר בעזרת פעולה שמתבצעת באתר (כמו CLICK על אלמנט), להפעיל פונקציה בשרת הכתובה ב-PHP. כך ללא רענון העמוד אני יכול לאפשר את הניהול של לוחות ההשראה לכל משתמש.

2.4 פתיחת לוח ההשראה להצגה

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

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

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

3.0 עיצוב

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

4.0 כתיבת הקוד

כל הפונקציות וכל המערכים, המשתנים והפעולות שעשיתי נכתבו ב-OOP שזו למעשה שיטת עבודה. עליה הרחיב רן בר-זיק בבלוג שלו בכתובת http://webmaster.org.il/articles/php-oop-intro. הפוסט שלו מתאר בדיוק את שיטת העבודה, כיצד זה קורה וכיצד משתמשים בזה. זה מסודר מאוד והופך את העבודה לטובה הרבה יותר.

5.0 סיכום

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

אשמח לשמוע את דעתכם על הפוסט הזה ודעתכם על שיטת העבודה שלי ודרכי הפיתרון שלי.