כעת אם נפתח את העמוד שלנו בדפדפן (באמצעות לחיצה על צלמית ה-EasyPHP ולחיצה על Local Web) ניראה את העמוד שלנו עם התגובה שהכנסנו עוד בסביבת ה-PhpMyAdmin:
כעת כל מה שנשאר לנו זה לכתוב את הקוד האחראי להוספת תגובת המשתמש. אם נסתכל בתמונה ניראה כי מופיעות לנו שני תיבות טקסט וכפתור. לכל פקד נתנו שם:
אם נסתכל על קוד המקור של הטופס הוא יראה כך:
<h3>Say your opinion</h3>
<table>
<tr><td>Your name:</td><td><input name="username" type="text" value="<?php echo $username; ?>" style="width: 150px;" /></td></tr>
<tr><td>Your comment:</td><td><input name="content" type="text" value="<?php echo $content; ?>" style="width: 200px;" /></td></tr>
<tr><td colspan="2"><input style="margin-top: 5px;" type="submit" name="submit" value="Leave your opinion" /></td></tr>
</table>
</form>
הטופס שלנו ישלח בשיטת POST. ברגע שנלחץ על כפתור ה-Submit כל הנתונים המופיעים בתיבות הטקסט ישלחו. שימו לב שלתיבות הטקסט מופיעים כבר ערכים (Value).
למשל, לתיבת ה-username הערך המשויך הוא משתנה ב-PHP הנקרא $username. משתנה זה אומנם בעל שם של משתנה שכבר ציינו אך הוא אינו אותו המשתנה. משתנה זה יכיל בעצם בברירת מחדל ערך של מחרוזת ריקה כך שתיבת הטקסט כמעט תמיד תהיה ריקה. אך במקרים שבהם המשתמש ירצה להזין תגובה אך הוא שגה והתגובה לא נכנסה, הערך של משתנה זה יהיה שווה לאותו התוכן שהמשתמש הקליד לפני ששלח את הטופס. אותו הדבר תקף גם לתיבת ה-content.
כעת נבין היכן אנו מכריזים על המשתנים $username ו-$content.
כאשר המשתמש שולח את הטופס המשתנים $_POST['username'], $_POST['content'] ו-$_POST['submit'] נשלחים גם הם. זאת מפני שהטופס שלנו שולח את המידע בשיטת POST. בכדי שנוכל להוסיף את תגובת המשתמש עלינו לוודא שהמשתנה $_POST['submit'] נשלח. אם כן – אנו יודעים שהמשתמש שלח את הטופס.
מיד לאחר קטע הקוד האחראי להתחברות למסד הנתונים ולבחירת מסד הנתונים נוסיף את המשתנים הבאים:
$username = "";
$content = "";
$err = ""; //The error generated while verifying the comment posted data
$comment_added = false; //True if comment added succesfully
$dialog_text = ""; //Our dialog text that appears when user submitted the form. Telling the user about his post status
שני המשתנים הראשונים הם המשתנים שבהם בעצם השתמשנו בערכי הטופס. כפי שאמרנו משתנים אלה מקבלים ערך של מחרוזת ריקה כברירת מחדל.
בכדי שנוכל להבין את המשתנים שמתחת עלינו להסביר מספר דברים. כאשר המשתמש שולח את הטופס עלינו לוודא שהוא הקליד את כל הנתונים הדרושים: שם המשתמש ותוכן התגובה. אם אחד מן הנתונים ריק עלינו לדווח למשתמש על כך ולא להכניס את התגובה למסד הנתונים. בנוסף, אם המשתמש הקליד את כל הנתונים הנכונים עלינו גם לדווח לו שתגובתו התקבלה בהצלחה. נדווח למשתמש על סטטוס התגובה שהוא מעוניין להוסיף באמצעות דיאלוג ב-Javascript.
כעת נעבור על 3 המשתנים שנותרו:
- $err – משתנה זה מכיל בעצם את הודעת השגיאה שנציג למשתמש במקרה שחסרים נתונים בטופס שהוא שלח.
- $comment_added – משתנה בוליאני אשר אומר לנו אם תגובת המשתמש נוספה למסד הנתונים או לא. בברירת המחדל ערכו של המשתנה הוא 'שקר' (התגובה לא נוספה).
- $dialog_text – הטקסט שיופיע בדיאלוג שידווח למשתמש על סטטוס התגובה שלו.
כעת נעבור לחלק העיקרי בקוד – החלק האחראי לוודא אם כל נתונים הטופס קיימים או לא. אם כל הנתונים קיימים, התגובה תתווסף למסד הנתונים. את הקוד הנ"ל נוסיף מתחת למשתנים:
if (isset($_POST['submit'])) {
/* Putting the user submited comment in the associated variables */
$username = $_POST['username'];
$content = $_POST['content'];
/* Checking for valid input */
if ($username == "" || $content == "") //No username or password provided
{
$err = "Username or comment is missing";
}
elseif (strlen($content) > 400) { //Content exceeded maximum number of characters
$err = "Comment is too long!";
}
elseif (strlen($username) > 50) { //Username exceeded maximum number of characters
$err = "Username is too long!";
}
else {
/* Recommended to add some security code like mysql_real_escape_string on the variables to prevent SQL Injections
It is also recommended to strip any HTML tags to prevent from malicoius scripts to be executed (like XSS) */
//Running the query to add this comment entry
$result = mysql_query("INSERT INTO comments (username, content, date) VALUES ( '$username', '$content', NOW() )");
if ($result) {
$comment_added = true;
/* User succesfully added comment, no need to save his submission */
$username = "";
$content = "";
}
else { //It seems like the query failed
$err = "Failed to add comment. Please try again later.";
}
}
//Dialog text set according to the errorsuccess
$dialog_text = ($comment_added) ? "Comment succesfully added!" : $err;
}
אומנם קטע הקוד קצת ארוך, אך מבחינה לוגית הוא פשוט. נסביר את החלק הלוגי של הקוד:
קודם כל אנו בודקים אם המשתמש שלח את הטופס באמצעות התנאי הבא:
אנו מכניסים למשתנים $username ו-$content את הערכים שקיבלנו מהטופס שנשלח. לאחר מכן בודקים אם הערכים שקיבלנו ומוודאים שהם עונים על התנאים הבאים: אף ערך אינו ריק, ערך תוכן ההודעה לא עולה על 400 תווים וערך שם המשתמש אינו עולה על 50 תווים. אם אחד מהתנאים שציינו אינו מתקיים – אנו מכניסים למשתנה ה-$err את הסיבה למה הטופס אינו תקין:
$username = $_POST['username'];
$content = $_POST['content'];
/* Checking for valid input */
if ($username == "" || $content == "") //No username or password provided
{
$err = "Username or comment is missing";
}
elseif (strlen($content) > 400) { //Content exceeded maximum number of characters
$err = "Comment is too long!";
}
elseif (strlen($username) > 50) { //Username exceeded maximum number of characters
$err = "Username is too long!";
}
else {
תנאי ה-else מכיל בתוכו את הקוד הנחוץ להכנסת התגובה למסד הנתונים:
/* Recommended to add some security code like mysql_real_escape_string on the variables to prevent SQL Injections
It is also recommended to strip any HTML tags to prevent from malicoius scripts to be executed (like XSS) */
//Running the query to add this comment entry
$result = mysql_query("INSERT INTO comments (username, content, date) VALUES ( '$username', '$content', NOW() )");
if ($result) {
$comment_added = true;
/* User succesfully added comment, no need to save his submission */
$username = "";
$content = "";
}
else { //It seems like the query failed
$err = "Failed to add comment. Please try again later.";
}
}
כעת, כל מה שנותר לעשות זה להריץ את שאילתה להכנסת הנתונים לשרת. נשתמש בפונקציית ה-
mysql_query עם השאילתה הבאה:
$dialog_text = ($comment_added) ? "Comment succesfully added!" : $err;