Design form and Connect With Database

In this artical i am going to explain how to create PHP forum and how to connect it to the mysql database. For this purpose I use NetBeans 7.3 as PHP development IDE, HTML5 and PHP 4.0. You can select development technologies as your wish. This is I describing regarding one of my project which i did. You can use this as a help of your projects. This is something similar to registrations.    I'll explain this under 3 main steps.

1. Form Designing
2. Establish Database Connectivity
3. Pass values to database

01 Form Designing

For the designing of the form i used HTML5 and CSS is used to add certain styls to the form. Such as coloured text boxes, coloued buttons etc... Here I used separate classes for form labels, form inputs. Then I can do all CSS works in one separate .css file and it can attach to this form as well  as other forms also. Addition to  that i used capture code for person identifications. Here is the image of  form.

Here is the sample HTML code for designing above form. 

 <form method="POST" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" id="registerMember">
             
        <table border="0" width="500px" cellspacing="5px" cellpadding="2px">
                        <thead>
                            <tr>
                                <th colspan="2" class="formheadings"><b>Personal Information</b></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="formlabels">Email</td>
                                <td class="forminputs">
                                    <input type="email" name="textEmail" id="textEmail" value="buddhika@gmail.com"
required maxlength="254" title="Enter an email"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="formlabels">First Name</td>
                                <td class="forminputs"><input type="text" name="fname" id="fname" value="Buddhika" /></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Last Name</td>
                                <td class="forminputs"><input type="text" name="lname" id="lname" value="Yahampath"/></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Date of Birth</td>
                                <td class="forminputs"><input type="date" class="datepicker" name="dob" id="dob"                                         value="1990-06-04"  required readonly title="Select Your Birth Date"/>                                                      <span>"yyyy-MM-dd"</span></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Member Type</td>
                                <td class="forminputs">
                                    <select name="comboMemType" id="comboMemType">
                                        <option>Family</option>
                                        <option>Individual</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="formlabels">Password</td>
                                <td class="forminputs"><input type="password" id="password" name="password"                                               required title="Enter a Desired Password"/></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Confirm Password</td>
                                <td  class="forminputs"><input type="password" id="con_password"                                                                    name="con_password" title="Reenter above Password"
                 onfocus="validatePass(document.getElementById('password'), this);"
                  oninput="validatePass(document.getElementById('password'),this);"
                                          required /></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Address</td>
                                <td class="forminputs"><textarea name="address" id="address" cols="25" rows="5"                                            title="Enter Your Address"></textarea></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Phone no.</td>
                                <td class="forminputs">
                                    <input type="tel" id="phone" name="phone" value="0716338174" pattern="[0-9.]+"                                              title="Enter Contact Number"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="formlabels">Country</td>    
                                <td  class="forminputs">
                                    <select name="countryName">
                                        <option value="AF">Afghanistan</option>
                                        <option value="AX">Åland Islands</option>
                                        <option value="AL">Albania</option>
                                        <option value="DZ">Algeria</option>
                                        <option value="CK">Cook Islands</option>
                                        <option value="CR">Costa Rica</option>
                                        <option value="YE">Yemen</option>
                                        <option value="ZM">Zambia</option>
                                        <option value="ZW">Zimbabwe</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="formlabels">Zip Code / Postal Code</td>
                                <td class="forminputs"><input type="text" name="zip" id="zip" value="80300"                                                  title="Enter digits Only required  pattern="[0-9.]+" style="text-align: right"                                                       title="Enter Your Postal or Zip code"/></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Gender</td>
                                <td class="forminputs">
                                    <input type="radio" name="gender" id="gender1" value="1" checked/>Male
                                    <input type="radio" name="gender" id="gender0" value="0"/>Female
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="formheadings"><b>Purchase Information</b></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Credit Card Type</td>
                                <td class="forminputs">
                                    <input type="radio" name="creditcardtype" value="Visa" checked/><img                                                            src="../images/static/visa.png"/>
                                    <input type="radio" name="creditcardtype" value="Master" /><img                                                                      src="../images/static/master.png"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="formlabels">Credit Card Number</td>
                                <td class="forminputs"><input type="text" name="creditcardno" placeholder="Credit                                           Card Number" pattern=".{14}"   title="Enter 14 Digits Credit Card Number"                                            required/></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Verification Value</td>
                                <td class="forminputs"><input type="text" name="cvv"  placeholder="CVV" required                                          pattern=".{3}" title="Must have 4 digits"/></td>
                            </tr>
                            <tr>
                                <td class="formlabels">Expire Date</td>
                                <td class="forminputs">
                                    <table><tr>
                                            <td>Month<input type="number" id="txtmonth" name="txtmonth" required                                                          pattern=".{2}" min="1" max="12" value="01"
   title="Your Credit Card Expiration Month"/></td>
                                            <td>Year<input type="number" id="txtyear" name="txtyear" required                                                                             min="2013" value="2019" max="2024"
                                                             pattern=".{4}"  title="Your Credit Card Expiration Year"/></td>
                                        </tr></table>
                                </td>
                            </tr>
                            <tr><td colspan="2">
                                    <img src="../models/captcha_code_file.php?rand=<?php echo rand(); ?>"                                                              id='captchaimg' ><br>
                                            <label for='message'>Enter the code above here :</label><br>
                                                <input id="6_letters_code" name="6_letters_code" type="text" required/>                                                           <br>
                                                        <small>Can't read the image? click <a href='javascript:                                                                                              refreshCaptcha();'>here</a> to refresh</small>
                                                        </td></tr>
                                                        <tr>
                                                            <td colspan="2" class="forminputs" align="center">
                                                                <input type="submit" value="Submit" name="submit" id="submit"                                                                        class="zoobutton"/>
                                                                <input type="reset" value="Reset" class="zoobutton"/>
                                                            </td>
                                                        </tr>
                                           </tbody>
                                      </table>
                                                     
                              </form>
                                               </center>
                         </body>
                    </html>

Jvascripts & css

 You can use javascript functions for validations and CSS for the apply certain styls for the form. Here I used separate two classes for "form labels" and "form inputs". Then i can add css separately.  Here is some sample javascript for password comparisons.

function validatePass(p1, p2) {
    if (p1.value !== p2.value || p1.value === '' || p2.value === '') {
        p2.setCustomValidity('Your passwords does not match.');
    } else {
        p2.setCustomValidity('');
    }
}

javacript for sequrity validations. - This javascript do not allows user to runs the scripts on textbox.

function illegelChar(fld) {

    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    var error = "";

    if (fld.value.match(illegalChars)) {

        fld.style.background = 'Red';

        error = "Some field or fields contains illegal characters.\n";

    } else {

        fld.style.background = 'White';

    }

    return error;

}

Note :- It is better to call this function using "onblur(parameter1)"  methord. 

• You can use following css code to apply styls on your form.

input[type="text"],input[type="email"],input[type="tel"],
input[type="date"],input[type="number"],input[type="textarea"],
input[type="password"],select,input[type="time"],radio,textarea{
    width:250px;
    border: 2px;
    border-radius:5px;
    text-indent:2px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px rgba(0, 255, 51, 0.7), 0px 1px 2px 0px rgba(0, 0, 0, 0.9) inset;
}

input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,
input[type="date"]:focus,input[type="number"]:focus,input[type="textarea"]:focus,
input[type="password"]:focus,select:focus,option:focus,input[type="time"]:focus,radio{
    border: 2px solid rgb(153, 255, 51);
    border-radius:5px;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
    background-color: #FFFFFF;
    border-top-color: rgb(153, 255, 51);
    border-bottom-color: rgb(153, 255, 51);
    box-shadow: 0px 0px 5px rgba(0, 255, 51, 0.7), 0px 1px 2px 0px rgba(0, 0, 0, 0.9) inset;
}

.formlabels{
    vertical-align: top;
    text-align: left;
    text-shadow: calc;
    font-size: 12px;
    font-family: sans-serif;
    width: 25%;
}

.forminputs{
    vertical-align: top;
    text-align: left;
    text-shadow: calc;
    font-size: 12px;
    font-family: sans-serif;
    width: 75%;
}

.formheadings{
    vertical-align: top;
    text-align: center;
    text-shadow: calc;
    font-size: 14px;
    text-decoration-color: whitesmoke;
    font-family: monospace;
    background-color: greenyellow;
}

02 Establish Database Connectivity

To connect with the database we have to write simple code part in PHP file. Then it should be include to your code. Otherwise you can write database connectivity code as a one file along with the form code. But in that case another place if you wants db connection you have to write it again and again. So it better to write separately and include it your code..!

<?php
$host="localhost";
$userName="root";
$password="";
$db_name="sep";
mysql_connect($host,$userName,$password) or die("cannot connect");
mysql_select_db("$db_name") or die ("no database");
?>

03 Pass values to Database

<?php

include "db.php"; // including above cording

if (isset($_POST["submit"])) {

    $email = $_POST["textEmail"];

    $Fname = $_POST["fname"];

    $Lname = $_POST["lname"];

    $DOB = $_POST["dob"];

    $memType = $_POST["comboMemType"];

    $password = md5($_POST["password"]);

    $addr = $_POST["address"];

    $country = $_POST["countryName"];

    $phNo = $_POST["phone"];

    $phoneNo = (int) $phNo;

    $zip = $_POST["zip"];

    $Gender = $_POST["gender"];
 
 
    $nextYear = mktime(0,0,0,date("m"),date("d"),date("Y")+1);
    $next = date("Y/m/d", $nextYear);
 
 
 
    $querry = "INSERT INTO member VALUES ('$email','$password','$Fname','$Lname','$DOB','$memType','$addr','$phoneNo','$country','$zip','$Gender','$next')";

    $result = mysql_query($querry);

    if ($result == 1) {
        echo "<script type='text/javascript'>alert('Registration                                                                                                         successful.');window.parent.location='../dehiwalazoo.php';</script>";

    } else {
        echo "<script type='text/javascript'>alert('Registration was not successfully. Please try again.')

</script>";
    }
}
?>