כיצד ליצור אייאקס מבוסס HTML5 / CSS3 טופס יצירת קשר
טופס יצירת קשר הוא חיוני קטלנית עבור כל אתר אינטרנט, כפי שהוא פועל כשליח אשר מעביר את דעת או פניות של המבקרים מנהל האתר. היו אינספור טפסים ליצירת קשר באינטרנט אבל למרבה הצער רובם לא מסבירים לך את חלקי העבודה הפנימיים, אז הנה בא הדרכה מפורט ללמד אותך לבנות טופס יצירת קשר מתקדם מאפס על בסיס טכנולוגיית הפופ, HTML5 ו CSS3.
בהתחשב באופי של טופס דואר אלקטרוני מבוסס אינטרנט, אנו נדרשים גם לצלול לתוך שני שדות יישום נפרדים, המהווה את קוד ה- backend של PHP לשליחת הודעות דוא"ל ו- jQuery עבור ממשק משתמש עשיר. בסופו של דבר אנחנו נשארים עם טופס יצירת קשר דינמי ופונקציונלי שנכתב עם התאמה אישית מאוחר יותר בראש.
התחל עכשיו כדי ליצור טופס יצירת קשר מתקדם משלך!
קיצור דרך ל:
- הדגמה - קבל תצוגה מקדימה של מה שאתה בונה
- הורדה - הורד את כל הקבצים (PHP + css)
מבנה היישום
כדי להתחיל תצטרך סוג כלשהו של שרת אינטרנט כדי לעבוד מעל. אם אתה מפעיל מכונת Windows WAMP היא כנראה האפשרות הטובה ביותר שלך. משתמשי Mac יש תוכנית דומה בשם MAMP שהוא פשוט קל להתקנה.
חבילות אלה יקימו שרת מקומי במחשב שלך עם גישה מלאה ל- PHP. לחלופין, אם ברשותך שטח שרת או שיש לך גישה לשרת מלא למיקום מרוחק, תוכל להשתמש בו במקום זאת. אנחנו לא הולכים כל מסדי נתונים MySQL, אשר צריך לפשט את הדברים קצת.
לאחר שהשרת שלך מוגדר ליצור תיקייה חדשה כדי לארח את היישום. אתה יכול שם זה מה שאתה רוצה כמו שזה לא מזיק או אפילו קשור למוצר הסופי. מבנה התיקיות ישמש בעת גישה לקבצים שלך בדפדפן אינטרנט. דוגמה פשוטה תהיה http: //localhost/ajaxcontact/contact.php
בואו נבנה את הקבצים שלנו!
אנו נפעל רק בתוך שני קבצי ליבה. תחילה נזדקק לליבה .php קובץ הבית לא רק היגיון היישום שלנו, אלא גם סימון HTML frontend. להלן קוד לדוגמה שנלקח מקובץ ההתחלה שלנו.
HTML5 / CSS אייאקס טופס יצירת קשר עם jQuery
כדי להתחיל כתבנו סעיף כותרת פשוטה למסמך שלנו. זה כולל גנרל הצהרת Doctype עבור HTML5 וכמה רכיבי מסמך HTML / XML. אלה לא בדיוק נדרש, אבל יהיה להקל על תהליך עיבוד ב מבוגרים (ומעלה) דפדפנים. גם זה לא כואב להציע מידע נוסף.
עוד קצת למטה נוכל לראות 2 שורות ממש לפני תג הכותרת הסוגר שלנו. הראשון כולל שלנו סקריפט jQuery מתוך מאגר מקוון של Google Code. זה נדרש עבור שגיאות דף דינמי שלנו לעבוד. ממש מתחת זה יש לנו הכללה של בסיסי מסמך CSS המכיל את כל סגנונות הדף שלנו.
בתוך גוף המסמך שלנו יש לנו כמה המכיל אוגדות ניכוי טופס יצירת קשר ראשי. זה בתים 3 אלמנטים קלט עבור שם המשתמש, כתובת דוא"ל, ו הודעה אישית. סימון ה- HTML הוא סטנדרטי למדי ולא צריך boggle את דעתו של כל מפתח ביניים.
הדוא"ל שלך נשלח. Huzzah!
כאן יש לנו בסיסי קוד מותנה PHP מקוננות בתוך כמה מכולות הדף. זה בודק את הערך שנקבע של משתנה בשם
$ emailSentואם שווה לאמת, הוא יציג הודעת הצלחה.בתוך HTML טופס שלנו
ה Other הצהרה היא מה יפעל על העומס בעמוד הראשון שכן לא יהיה שום תוכן לשלוח בתחילה. בפנים נכלול את אוסף קצר של אלמנטים טופס א כפתור השליחה.
שגיאה בשליחת הטופס
אולי שמתם לב שיש עוד בלוק מותנה ישירות אחרי טופס ההתחלה. זה בודק משתנה בשם $ haserrror ויציג הודעת שגיאה עם האישור. שיטה זו היא חזרה משמש רק אם JavaScript מושבת בדפדפן ולכן לא ניתן ליצור שגיאות דינמיות.
כל הדרך למטה אנחנו יכולים למצוא משתני PHP בודדים נבדקים. הדוחות מסדירים אם הטופס כבר הוגש עם כמות חלקית בלבד של נתונים מלא. זה עוד מערכת החזרה המציג את התוכן של שדות כבר מילא - טריק נחמד עבור חוויית המשתמש הנכון!
מיד לאחר השלמת הטופס שלנו הוא מעטים פונקציות jQuery כתבנו. אנו נדבר על אלה הראשון מאז הם יישום ברירת המחדל על pageload. עם זאת, אם הדפדפן אינו מקבל JavaScript אז כברירת מחדל אנו יכולים לסמוך על קוד PHP שלנו.
פתיחה ל- jQuery
הדרך הקלה ביותר להתחיל לדבר על הנושא הזה יהיה לצלול ישר פנימה אני אשבור בלוקים בודדים שורה אחר שורה, כך שאתה יכול לראות מה התסריט הוא בעצם בודק.
עם זאת, אם אתה הולך לאיבוד רק עיין בקובצי הקוד של הפרוייקט. כל בלוקים מלאים כתובים מראש מתועד היטב באתר jQuery. כדי להתחיל, אנו פותחים את הקוד שלנו בדומה לכל קוד אחר:
אם אתה מכיר התקשרות אתה עשוי להבחין הודעה() פונקציה יש מובנית קבוצה של פרמטרים. Callbacks הם פונקציות קטנות יותר אשר נקראים עם התגובה של נתונים מתפקוד אחר.
כך למשל, כאשר שלנו jQuery.post () פונקציה בהצלחה יורה דואר אלקטרוני זה ייקרא הפונקציה הפנימית שלה כדי להציג את האנימציה הזזה. כל הקוד הזה יכול להיות כתוב בלוק שלו ועבר למקום אחר. עם זאת, עבור הדרכה זו זה הרבה יותר קל לכתוב את callback כפונקציה inline.
מעבר בעבר PHP שלנו
המשוכה האחרונה היא להזכיר את לוגיקה מאחורי מעבד PHP שלנו. זוהי מערכת backend אשר למעשה התקשר לפונקציית דואר ו שלח את ההודעה. כל הקוד המשמש בדוגמאות להלן ניתן למצוא ישירות בחלק העליון של הראשי שלנו .php , לפני כל פלט HTML.
ישנם גם כמה סגנונות פנימיים אשר לרענן את הדף. אין כאן שום דבר חדש, אז אנחנו לא הולכים לתוך כל הפרטים. אולם, ה styles.css המסמך נכלל בתוך קוד הפרויקט ומכיל טכניקות CSS3 ראשוניות.
כדי להתחיל אנו פותחים את סעיף PHP שלנו לבדוק אם הטופס הוגש. ה הודעה משתנה “הוגשה” היה למעשה שדה קלט מוסתר נוסף מאוד בסוף הטופס שלנו. זוהי דרך שימושית לבדוק אם המשתמש שלח משהו אך אנו לא מבזבזים משאבי שרת.
אחרי זה יש לנו 3 נפרד אחרת בדיקת הצהרה לראות אם כל שדה קלט כבר מלא. אני לא אכלול כל פיסת היגיון כאן מאז שהם מאוד חוזרים על עצמם בטבע. עם זאת, כדי לתת לך דוגמה קצרה כללתי את סעיף אימות הדואר האלקטרוני להלן:
/ / צריך דוא"ל תקף אם (לקצץ ($ _ POST ['דוא"ל'] === ") $ emailError = 'שכחתי להזין את כתובת הדואר האלקטרוני שלך.'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ [$ Email =] 'הזנת כתובת דוא"ל לא חוקית'; $ hasError = true; אחר $ email = trim ($ _ POST ['email']);PHP יהיה לקצץ את כל שטח לבן מן הערך לבדוק לבדוק אם משהו נשאר מעל. אם כך יש לנו מפורט ביטוי רגיל (Regex) כדי לראות אם מחרוזת הקלט של המשתמש שלנו מתאימה לדפוס דואר אלקטרוני.
אתה בהחלט לא צריך להבין איך
preg_match ()עובד כדי לבנות את התסריט הזה. זוהי פונקציה שימושית לקבוע כללים ודרישות עבור סוג מוצלח של נתונים, אבל פקודות ידע תכנות מתקדמות כדי להבין באמת. בתרחיש זה אנו מבטיחים למשתמש רק תשומות תווים נבחרים, כולל @ סמל ואחריו 2-4 תווים המייצג א דומיין ברמה העליונה.אחרי כל ההיגיון שלנו עובר ואנחנו לא חוזרים שגיאות הגיע הזמן לשלוח את המסר שלנו! קוד זה של קוד יקבע משתנים בודדים כדי להתאים אישית את הודעת הדואר האלקטרוני שלנו ולהגדיר חלק כותרות דואר עבור התהליך.
// על שגיאות כשל לא בואו דוא"ל עכשיו! אם (! haset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'שלח הודעה דרך'. $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "שם: $ name \ n \ n דוא"ל: $ email \ n \ n תגובות: $ comments"; $ headers = 'מאת:'. ' <'.$emailTo.'>'. "\ r \ n" #:. 'להגיב ל: ' . $ email; דואר אלקטרוני ($ emailTo, $ subject, $ body, $ headers); // להגדיר את הערך השלמה בוליאני שלנו TRUE $ emailSent = true;אם היית תוהה איך קוד הולך להבין את כתובת הדואר האלקטרוני שלך, זה החלק למלא. המשתנה הראשון בסט שלנו הוא שכותרתו
$ emailToוצריך להכיל אותם כתובת דואר אלקטרוני, אשר תקבל את ההודעה.בתוך הבית שלנו
$ $ bodyמשתנה אנו מנצלים את\ nכדי להוסיף שורות חדשות להודעה. זה מוסיף מיקומים קטנים עבור שם השולח, כתובת דוא"ל, ואחריו הפסקה עבור שלהם תוכן ההודעה. כמובן שאתה יכול לבזבז זמן יפים את התצוגה, אבל מבנה זה עובד בסדר גמור.סיכום
זה סוגר את ערכת הלימוד שלנו עבור טופס יצירת קשר מתקדם. אם אתה רוצה סגנון האלמנטים שלך ביחס שלי אתה יכול לבדוק את הדוגמה שלי styles.css בתוך קוד הפרויקט. עם זאת, הדף הוא מובנה מספיק טוב, כי אתה יכול לעצב את המראה והתחושה שלך בקלות רבה.
אתה מוזמן להוריד את קוד המקור ולבחון מה עשיתי קצת יותר קרוב. זה טוב לעקוב אחר ערכת לימוד, אבל יש גישה ישירה למקור הפרויקט יכול להיות יקר. כללתי גם גיליון סגנונות קצר לעשות התאמות אישיות רוח, תודה על התצוגה שלך!
