Integrating HTML5, CSS and PHP to Create a Very Basic Contact Form

HTML5 has been helping webmasters to clean up their code by utilising newly introduced features of the same. It won’t be possible for me to touch base with every HTML5 feature, but I will be listing down some of those during the course of this tutorial.

Forms are an integral part of any website that wants its visitors to get in touch with the owner of that website. They bridge the gap virtually between the webmaster and the website visitor.

Here, we will implement a very basic combination of HTML5 with CSS and PHP in order to create a contact form. You might have created a lot of contact forms but our purpose here is to do the same using the appreciable features of HTML5. Let’s do it!

Note: The code below will work with most of the Internet browsers that are being widely used as of today.

Our Goal

For starters, you must have an idea of what we are going to create. It will be a simple contact form as shown below:

Catching up with HTML5

Without further discussions, let’s create our first index.php file. Please be aware that you will require a web server to test index.php file. Explaining the setup of same is out of the scope of this tutorial.

The very initial index.php will look like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Contact Form</title>
</head>
<body>
    <header class="main">
        <h1>My Contact Form</h1>
    </header>
    <section class="main">
        [Form code goes here]
    </section>
</body>
</html>

See any differences from your regular html code?

Well, there are few. Let me explain each of them:

    The cleanest ever DOCTYPE -In case you haven’t noticed, the above HTML5 code boasts of a very clean DOCTYPE tag. If you have worked with earlier versions of HTML5 then you will understand what I mean and why am I emphasizing on it. If you haven’t seen the DOCTYPE tag before then ignore this and move on.
    The <header> and <section> tags – Ever used these tags in earlier versions of HTML? Well, now you can and avoid the usage of div tags. Both the tags have been assigned a class “main” so that I am comfortable styling them as I want using my style.css. HTML5 also has a <footer> tag which will be used (obviously) for footer of your webpage.

The Form:

Now, lets talk about the code that will shape our form (the very purpose of this tutorial). The below code will be placed in our section tag (unless you are planning to push your form to the header or footer section of your webpage.)

<form>
       <label>Your Name:</label>
       <input name="name" placeholder="Goes Here">
       <label>Your Email:</label>
       <input name="email" type="email" placeholder="Goes Here">
       <label>Your Message:</label>
       <textarea name="message" placeholder="Goes Here"></textarea>
       <input id="submit" name="submit" type="submit" value="Submit">
</form>

Again, you will notice differences between the above HTML5 code and our old versions. Let me throw some light:

    <input> tag need not be closed – Older versions of HTML wanted <input/> while HTML5 is satisfied with <input>. Quiet clean, right?
    type = “email” enhances iPhone experience – Although browsers that do not understand type=”email” in above code will assume it to be type=”text” yet iPhone makes your life a bit easier. It adds a @ symbol button in its keypad when the type=”email” field is active. Cute?
    placeholder makes life easy – If you noticed the image of our upcoming form above, then you will see the text “Goes Here” in every field. I remember spending hours with JavaScript so as to make this possible. HTML5 makes this a cakewalk!

Now, our very own CSS

That was it! Our HTML5 tutorial is over and we move on to CSS to style our HTML5 form. For starters, place the below code just above your <body> tag so as to tell your index.php that someone out their is ready to make her beautiful.

<link type="text/css" rel="stylesheet" href="style.css">

Now create a style.css in the same folder and paste the below code into it.

label {
    display:block;
    margin-top:50px;
    letter-spacing:1px;
}

/* This section centers our complete page */
.main {
    display:block;
    margin:0 auto;
    width:500px;
}

/* This section centers the form inside our web page*/
form {
    margin:0 auto;
    width:420px;
}

/* Applying styles to our text boxes */
input, textarea {
    width:400px;
    height:27px;
    background:#666666;
    border:2px solid #f6f6f6;
    padding:10px;
    margin-top:10px;
    font-size:0.7em;
    color:#ffffff;
}

textarea {
    height:200px;
    font-family:Arial;
}

#submit {
    width:85px;
    height:35px;
    background:url(submit.png);
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}

Let me deconstruct the important parts of above code:

    The display:block property for label converts the <label> tags into block level elements. This pushes them to next line henceforth cleaning up the HTML5 form and pushing every thing to a new line.
    The text-indent:-9999px; property for #submit hides the actual “Submit” text so as to make room for the Submit Button (which I quickly created using Cool Text).
    I am assuming that rest of the code is self explanatory even if you are least familiar with CSS. Leave comments in case of confusions and I will be more than happy to get back to you.

PHP Integration

First, we edit the <form> tag in your code to what you see below:

<form method="post" action="index.php">

Now, insert the below code just above your <form> tag:

    <?php
       $name = $_POST['name'];
       $email = $_POST['email'];
       $message = $_POST['message'];
       $from = 'From: My Contact Form';
       $to = 'salman@mywebsite.com';
       $subject = 'Wassup?';

       $body = "From: $namen E-Mail: $emailn Message:n $message";

       if ($_POST['submit']) {
           if (mail ($to, $subject, $body, $from)) {
           echo '<p>Message Sent Successfully!</p>';
           } else {
           echo '<p>Ah! Try again, please?</p>';
           }
       }
    ?>

Once you save the above changes then your contact form should work as expected. It will send emails to your email address

Hery Purnama 081.223344.506 , IT trainer , Excel / access VBA Macro, MS Project, Primavera,

PHP Ajax Jquery, Google Map API, Google Sketchup3D, Ubuntu, Sencha ExtJS, YII, Code Igniter,
Oracle, SQL Server,
Bandung, Jakarta, Bali, Medan, Surabaya, Yogya, Indonesia

Hery Purnama – 081.223344.506 – inhousetrainer@yahoo.com.
Freelance IT Trainer, Trainer Excel VBA Macro, Trainer Sencha ExtJS, Trainer Google Map API, Trainer SPSS, Trainer MS Project, Trainer Primavera, Trainer Google Sktechup 3D, Trainer Android Phonegap, Trainer Oracle, Trainer SQL Server, Trainer MySQL, Trainer PHP Jquery Mobile , Trainer Java, Trainer HTML5 Javascript, Trainer SEO Internet Marketing, Trainer Project Management, Trainer SMS Gateway, Trainer CMS WordPress, ITIL, COBIT

Connecting PHP CodeIgniter to SQL Server 2008/2012

7 Steps to make SQL Server and Codeigniter Works

Who are tried to connect Codeigniter with SQL Servers knows the suffering and the time invested to achieve this goal (or at least for me). Here is the steps that I follow, I hope that works for you!

  1. Download and execute the Microsoft Drivers 3.0 for PHP for SQL Server (http://www.microsoft.com/en-us/download/details.aspx?id=20098). These is not a installer, just a EXE utility to uncompress the drivers for PHP.
  2. Download and install the SQL Client for SQL Server 2012 (for 64 bits here: http://go.microsoft.com/fwlink/?LinkID=239648, for 32 bits here: http://go.microsoft.com/fwlink/?LinkID=239647)
  3. Verify what is your version of PHP (Thread Safe or Non – Thread Safe). How to do that? Create a new PHP file with the following content:
    1
    2
    <?php
    phpinfo();

    Execute the script and verify the row with the name Thread Safety. If says “enabled” your PHP Installation is Thread Safe (TS), if have other value is Non Thread Safe (NTS).
    thread-safe

  4. Go to the folder where uncompress the Drivers 3.0, and select the version corresponding to. In my case, is PHP 5.4 Thread Safe TS, but this choice varies according to your PHP version.
    select-sqlsrv-version
    Copy these file and put on the folder of the extensions of PHP (generally is in PHP_INSTALLATION_FOLDER/ext)
  5. Modify the php.ini file (generally located in PHP_INSTALLATION_FOLDER), and find the following word: extension=. Here you will find all the extensions enabled by default in PHP, and you only need to add the namefile of the extension you previously put on ext folder.
    configure_php_ini
    Close and save changes, and restart the Apache / PHP service.
  6. Enable the SQL Server to listen on specific ports. Go to the machine where SQL Server is installed, press keys Win + R, and typing the following: SQLServerManager10.msc (this could change, if you have SQL Server 2012 type “SQLServerManager11.msc”). These command open the SQL Configuration Manager. Go to SQL Server Network Configuration option, Protocols for ‘instance name’, and double click on TCP/IP option.

    On the Protocol tab, row Enabled, select yes option, and in IP Address tab go to IPALL option, and in the row TCP Dynamic Ports make it blank and in the row TCP Port inputs whenever port you like (the standard is 1433)

    habilitar-puerto

    Click on Ok, and restart the SQL Server service.

  7. Go to Codeigniter, and in the database.php file do the following:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <?php
    /* EXTRACT OF database.php */
    $db['default']['hostname'] = "127.0.0.1"; // or put the IP of your SQL Server Instance
    $db['default']['port'] = 1433; // or the port you configured on step 6
    $db['default']['username'] = 'test2';
    $db['default']['password'] = 'test2';
    $db['default']['database'] = 'contactos';
    $db['default']['dbdriver'] = 'sqlsrv';
    $db['default']['dbprefix'] = '';
    $db['default']['pconnect'] = FALSE; // Pay attention to this, codeigniter makes true for default
    $db['default']['db_debug'] = TRUE;
    $db['default']['cache_on'] = FALSE;
    $db['default']['cachedir'] = '';
    $db['default']['char_set'] = 'utf8';
    $db['default']['dbcollat'] = 'utf8_general_ci';
    $db['default']['swap_pre'] = '';
    $db['default']['autoinit'] = TRUE;
    $db['default']['stricton'] = FALSE;
  8. Congratulations! Now you can make any models and querys, and it should work

Source from : https://futbolsalas15.wordpress.com/2014/02/23/7-steps-to-make-sql-server-and-codeigniter-works/

Hery Purnama – 081.223344.506 – inhousetrainer@yahoo.com.
Freelance IT Trainer, Trainer Excel VBA Macro, Trainer Sencha ExtJS, Trainer Google Map API, Trainer SPSS, Trainer MS Project, Trainer Primavera, Trainer Google Sktechup 3D, Trainer Android Phonegap, Trainer Oracle, Trainer SQL Server, Trainer MySQL, Trainer PHP Jquery Mobile , Trainer Java, Trainer HTML5 Javascript, Trainer SEO Internet Marketing, Trainer Project Management, Trainer SMS Gateway, Trainer CMS WordPress, ITIL, COBIT