{"id":809,"date":"2010-03-16T20:38:04","date_gmt":"2010-03-16T20:38:04","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=809"},"modified":"2010-03-17T21:39:51","modified_gmt":"2010-03-17T21:39:51","slug":"web-page-inputs-and-insert-into-database","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2010\/03\/16\/web-page-inputs-and-insert-into-database\/","title":{"rendered":"Web page inputs and insert into database"},"content":{"rendered":"

Also from the other posts, Join files together<\/a> and simple calculator<\/a> , I was also asked to do<\/p>\n

“Accept form input for a user registration form, and store results in a MySQL table, using PHP. Applicant should demonstrate a knowledge of input validation, and using server-side code to avoid sql injection exploits. The user data should include first name, last name, email, an phone number.<\/p>\n

Usage of Javascript pre-validation would be a plus, as would forward planning, i.e. adding a unique code to the user details that could be used to validate their email address. Suitable MySQL table schema should be demonstrated.”<\/p>\n

To start with, I started at the data insert within a web page<\/p>\n

\r\n\r\n
\r\nFirst Name :\r\n\r\nSecond Name : \r\n\r\nEmail : \r\n\r\nPhone number : \r\n\r\n\r\n<\/form>\r\n<\/body><\/pre>\n
Which takes in the required input’s and also within the form<\/a> HTML tag, but before sending to the back end PHP part of the exercise, there was a requirement to do some Javascript checking on the inputs.<\/p>\n
So here is the javascript that will check the inputs, within the form onsubmit action I call this function checkInputs and the return value (true\/false) is returned which gives the form either a action to post back to the server (true return) or to wait for the user correct there inputs (false return).<\/p>\n
\r\n    var firstname = document.getElementsByName(\"firstname\").item(0);\r\n<\/pre>\n
I get the data from the webpage, getElementsByName<\/a> (which since it is a name there could be x amount of elements with that name, so I want the first one (.item(0))<\/p>\n
\r\n  function checkInputs()\r\n  {\r\n    \/\/ obtain inputs\r\n    var firstname = document.getElementsByName(\"firstname\").item(0);\r\n    var secondname = document.getElementsByName(\"secondname\").item(0);\r\n    var email= document.getElementsByName(\"email\").item(0);\r\n    var phonenum = document.getElementsByName(\"phonenumber\").item(0);\r\n    \/* check the inputs *\/\r\n    if (lengthCheck(firstname, \"first name\")) \r\n      if (lengthCheck(secondname, \"second name\"))\r\n\tif (emailChecker(email))\r\n\t  if (checkPhone(phonenum))\r\n\t    return true;\r\n    return false;\r\n  }\r\n<\/pre>\n
and then after getting the elements, I then call different additional functions that I did write within javascript to check the inputs gained.  Here I check the length of a element passed within the one of the parameters within the function parameter list, with using objects you can access the objects value.length (javascript object of a element) and also use the focus function with the element which will focus the element on the webpage for the user to know where to check there input (also with a alert window to say why, e.g. “please insert some data”.)<\/p>\n
\r\n  function lengthCheck(elem, thename)\r\n  {\r\n    if (elem.value.length> 0) \r\n      return true;\r\n    else\r\n    {\r\n      alert(\"Please insert the \" + thename);\r\n      elem.focus();\r\n    }\r\n  }\r\n<\/pre>\n
Here is a way of using regular expression<\/a> to check email inputs, basically it first checks to make sure there is a name before the “@” and also a at between 2 and 4 names with a “.” better them.<\/p>\n
  \r\n  \/* check a email address, using regular expression *\/\r\n  function emailChecker(elem)\r\n  {\r\n    var reg = \/^[\\w\\-\\.\\+]+\\@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$\/;\r\n    if (elem.value.match(reg))\r\n      return true;\r\n    else\r\n    {\r\n      alert (\"Please insert a valid email address\");\r\n      elem.focus();\r\n      return false;\r\n    }\r\n  }\r\n<\/pre>\n
Here is a similar way as above for checking a phone number input between 11-15 numbers<\/p>\n
  \r\n  \/* check against a phone number. a number being between 11-15 numbers*\/\r\n  function checkPhone(elem)\r\n  {\r\n    var reg = \/^[0-9]{11,15}$\/;\r\n    if (elem.value.match(reg))\r\n      return true;\r\n    else\r\n    {\r\n      alert (\"Please insert a valid phone number\");\r\n      elem.focus();\r\n      return false;\r\n    }\r\n  }\r\n  <\/pre>\n
This is the web page part, and here is the second part where I insert the data into database with php.<\/p>\n
But here is the full web page part of the first part.<\/p>\n
\r\n\r\n\r\n\r\n