Friday, 6 December 2013

How to Create a Contact Form for Your Website in an Easy Way : A Set of Step by Step Tutorials Using HTML5, CSS3 and PHP (4)


(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.) 
Continues From Part 3.
I have these tasks to finish my contact form.
  • Send a copy of visitor's message back to them, in case he likes to archive it for themselves
  • Prevent empty fields.
  • Prevent fake emails.
  • Prevent flooding by software robots.
  • Perhaps preventing nasty words.
  • Keeping filled forms as is to prevent disappointment of visitors when they cannot enter reCaptch correctly.
  • Put "error" messages in the same page as the contact form.
  • Put "thanks" message in the same page as the contact form.
  • As a result, delete demoThanks.php and demoPoster.php files.
First thing's first; to send a copy back to visitors. Just add the following lines after line (33) of your demoPoster.php file. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        //After thank you send an email containing his message to the visitor
        // prepare email body text
        $Body = " Madam/Sir,\n Thank you for your message.\n Dysprosium.\n";
        $Body .= " ======================================================\n\n";
        $Body .= "Name: ";
        $Body .= $Name;
        $Body .= ", Esq.";
        $Body .= "\n";
        $Body .= "From: ";
        $Body .= $City;
        $Body .= "\n";
        $Body .= "Email: ";
        $Body .= $Email;
        $Body .= "\n";
        $Body .= "Subject: ";
        $Body .= $Subject;
        $Body .= "\n";
        $Body .= "Message: ";
        $Body .= "\n";
        $Body .= $Message;
        $Body .= "\n";
        // send email 
        mail($Email, $Subject, $Body, "From: <$EmailToAdmin>");

As a result, at this stage, my demoPoster.php is like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    //$Email = Trim(stripslashes($_POST['Email'])); 
    $Email = "this.visitor@googlemail.com";
    $Subject = Trim(stripslashes($_POST['Subject']));
    $Message = Trim(stripslashes($_POST['Message']));
    //Next send contact to website admin.
    $EmailToAdmin = "carlo.dj@messiahpsychoanalyst.org"; //Put your website admin email here. Don't forget quotes. 
    // body of the email your own admin receives
    $Body = "RE: Contact from visitors";
    $Body .= "\n";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "City: ";
    $Body .= $City;
    $Body .= "\n";
    $Body .= "Subject: ";
    $Body .= $Subject;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= "\n";
    $Body .= $Message;
    $Body .= "\n";
    // send email to admin
    $posted = mail($EmailToAdmin, $Subject, $Body, "From: <$Email>");
    // redirect to thanks page 
    if ($posted){
        print "<meta http-equiv=\"refresh\" content=\"0;URL=demoThanks.php\">";
        //After thank you send an email containing his message to the visitor
        // prepare email body text
        $Body = " Madam/Sir,\n Thank you for your message.\n Dysprosium.\n";
        $Body .= " ======================================================\n\n";
        $Body .= "Name: ";
        $Body .= $Name;
        $Body .= ", Esq.";
        $Body .= "\n";
        $Body .= "From: ";
        $Body .= $City;
        $Body .= "\n";
        $Body .= "Email: ";
        $Body .= $Email;
        $Body .= "\n";
        $Body .= "Subject: ";
        $Body .= $Subject;
        $Body .= "\n";
        $Body .= "Message: ";
        $Body .= "\n";
        $Body .= $Message;
        $Body .= "\n";
        // send email 
        mail($Email, $Subject, $Body, "From: <$EmailToAdmin>");
    }
    else{
      //do nothing for now
    }
?>

You have swapped email of admin with the email of the visitor. Please compare line (30) with line (56). Put at line (5)  email of your friend and at line (9) an email of yours and then test your form by filling other parts, leaving email field empty.
Download PHP code in Zip format here or open the code in text format here.
Result email that receives to the visitor is like this. You might like to use ideas similar to lines (36) and (37) to improve the format of the email sent back to the potential customer visitor. (via yourhostingaccount.com is related to my webhosting email administration. Yours could be different.)

 
Next, preventing empty fields to be submitted. It depends to you that which fields you like to be filled by the visitor and which could be optional. You can explicitly indicate them to the user by putting a red star or dagger in front of the relevant fields and add a paragraph at the bottom to attract attention of users to your requirement. Body of your demoMain.php could be something like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <body>
        <div id="contact-wrapper">
            <div id="contact-area">
                <form method="post" action="demoPoster1.php">
                    <label for="Name"><span style="color: red; font-size: 100%">*&nbsp;</span>Name:</label>
                    <input type="text" name="Name" id="Name" value="" />
                    <label for="City">City:</label>
                    <input type="text" name="City" id="City" value="" />
                    <label for="Email"><span style="color: red; font-size: 100%">*&nbsp;</span>Email:</label>
                    <input type="text" name="Email" id="Email" value="" />
                    <label for="Subject">Subject:</label>
                    <input type="text" name="Subject" id="Subject" value="" />
                    <label for="Message"><span style="color: red; font-size: 100%">*&nbsp;</span>Message:</label>
                    <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
                    <p style="margin:20px auto 10px 112px;">Fields shown by <span style="color: red; font-size: 100%">*&nbsp;</span> are required.</p>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </form>
            </div>
        </div>
    </body>

Now your contact page is like this.



You can view it by clicking here, please. I called this demoMain2.php to differentiate with previous version, demoMain.php.
Download PHP code in Zip format here or open the code in text format here.
To prevent empty fields or in another word to be able to validate the form there is a facility frequently used inside PHP users . It is 

$validationOK =

Other side of declaration is a Boolean, a test of fields being emptyor desireable.If you put it equal to true then it accepts any form filled or empty and process your submissions. We like to test if any of the three required field is being empty the validation fails. At the beginning of each refresh of the page the value of that variable should be initialised to a desired false or true.
This is rather tedious and one can use any Boolean to check,

1
2
3
4
5
    if((empty($Name))||(empty($Email ))||(empty($Message)))
    {
        // Its empty so throw a validation error
        echo 'Input is empty!'; 
    }

Command "echo" is an important PHP command that prints something somewhere. It actual puts a string of your choice anywhere you decide. Later we use it to modify our HTML. Now, it is better to redirect error to an error HTML file. Hence,

1
2
3
4
5
6
    if((empty($Name))||(empty($Email ))||(empty($Message)))
    {
        // Its empty so throw a validation error        
        print "<meta http-equiv=\"refresh\" content=\"0;URL=demoError.html\">";
        exit(); 
    }

This takes care for any empty field. Make a demoError.html page, and upload it to your website (download PHP code in Zip format here or open the code in text format here). Now put the remaining part of the demoPoster.php file after else of this if.  We are going to have the next file (download PHP code in Zip format here or open the code in text format here). 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    //$Email = Trim(stripslashes($_POST['Email'])); 
    $Email = "this.visitor@googlemail.com";
    $Subject = Trim(stripslashes($_POST['Subject']));
    $Message = Trim(stripslashes($_POST['Message']));
    if ((empty($Name))||(empty($Email ))||(empty($Message))) {
        print "<meta http-equiv=\"refresh\" content=\"0;URL=demoError.html\">";
        exit();
    }
    else{
        //Next send contact to website admin.
        $EmailToAdmin = "carlo.dj@messiahpsychoanalyst.org"; //Put your website admin email here. Don't forget quotes. 
        // body of the email your own admin receives
        $Body = "RE: Contact from visitors";
        $Body .= "\n";
        $Body .= "Name: ";
        $Body .= $Name;
        $Body .= "\n";
        $Body .= "City: ";
        $Body .= $City;
        $Body .= "\n";
        $Body .= "Subject: ";
        $Body .= $Subject;
        $Body .= "\n";
        $Body .= "Email: ";
        $Body .= $Email;
        $Body .= "\n";
        $Body .= "Message: ";
        $Body .= "\n";
        $Body .= $Message;
        $Body .= "\n";
        // send email to admin
        $posted = mail($EmailToAdmin, $Subject, $Body, "From: <$Email>");
        // redirect to thanks page 
        if ($posted){
            print "<meta http-equiv=\"refresh\" content=\"0;URL=demoThanks.php\">";
            //After thank you send an email containing his message to the visitor
            // prepare email body text
            $Body = " Madam/Sir,\n Thank you for your message.\n Dysprosium.\n";
            $Body .= " ======================================================\n\n";
            $Body .= "Name: ";
            $Body .= $Name;
            $Body .= ", Esq.";
            $Body .= "\n";
            $Body .= "From: ";
            $Body .= $City;
            $Body .= "\n";
            $Body .= "Email: ";
            $Body .= $Email;
            $Body .= "\n";
            $Body .= "Subject: ";
            $Body .= $Subject;
            $Body .= "\n";
            $Body .= "Message: ";
            $Body .= "\n";
            $Body .= $Message;
            $Body .= "\n";
            // send email 
            mail($Email, $Subject, $Body, "From: <$EmailToAdmin>");
        }
        else{
          //do nothing for now
        }
    }
?>

and demoError.html is something like the following file (download PHP code in Zip format here or open the code in text format here).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>This is a Demo Error Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width"> 
 <style>            
            #phonix-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                border-radius: 10px; 
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }
        </style>
    </head>
    <body>
 <div id="phonix-wrapper">
            <p>By Dysprosium</p>
            <hr style='margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;'/> 
            <h1>Sorry! You left a required field empty. Please try again.</h1>
            <p><a href="demoMain2.php">Refresh Contact Form</a></p>
            <p>Or use your browser back button to amend your message.</p>
 </div>
</html>

Please click here to watch it. I put a snapshot here for your attention.


This post became too long. I'll continue in next posts; please click here. Thanks.

Download this tutorial as PDF format here
Download part 1 to part 4 as PDF format here
Posted by Peter Jones at 19:53 0 comments
Labels: , , , , , , , ,

Thursday, 5 December 2013

How to Create a Contact Form for Your Website in an Easy Way : A Set of Step by Step Tutorials Using HTML5, CSS3 and PHP (3)

(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.)
Continues From Part 2.

How to dispatch message of the contact form?

To be able to receive messages of visitors your contact form should become live with its required "action." Note that your "action" was empty. 

1
<form method="post" action="">

Your form page and your "thanks" page are said to be "client-side" visible to clients. You need your "server-side" PHP page visible to you to put on your web-server. This will forward messages from visitor to a known place of yours, usually a mailbox of yours, created for this purpose or else of your daily usage. If you create it purpose built then could be easily portable when you change your hosting service. You can keep things organised and separate from your other administrative chores. First the version without loop-back to the visitor. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    //$Email = Trim(stripslashes($_POST['Email'])); 
    $Email = "this.visitor@googlemail.com";
    $Subject = Trim(stripslashes($_POST['Subject']));
    $Message = Trim(stripslashes($_POST['Message']));
    //Next send contact to website admin.
    $EmailToAdmin = "carlo.dj@messiahpsychoanalyst.org"; //Put your website admin email here. Don't forget quotes. 
    // body of the email your own admin receives
    $Body = "RE: Contact from visitors";
    $Body .= "\n";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "City: ";
    $Body .= $City;
    $Body .= "\n";
    $Body .= "Subject: ";
    $Body .= $Subject;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= "\n";
    $Body .= $Message;
    $Body .= "\n";
    // send email to admin
    $posted = mail($EmailToAdmin, $Subject, $Body, "From: <$Email>");
    // redirect to thanks page 
    if ($posted){
      print "<meta http-equiv=\"refresh\" content=\"0;URL=demoThanks.php\">";
    }
    else{
      //do nothing for now
    }
?>

Line (9), carlo.dj AT messiahpsychonalyst is my admin who receives messages for my website. I have commented out sender's email place-holder at line (4) to prevent bots and spammers attack my site before I put enough robust barriers on their way. Later I will un-comment that line. In place of that I put email of one old colleague I know (with his permission) at line (5). After finishing the design I remove it. I save this file as a PHP file (I have saved it as demoPoster.php) and upload it to my website.

Note that now I have three PHP file for the contact page in my website.
  • First, demoMain.php which is my original contact page. Now it is pure HTML, but later many PHP parts will be added to it.
  • Second file is the "thanks" file, demoThanks.php. This is also pure HTML saved as a PHP file.
  • Third, is all PHP file in the server-side, demoPoster.php
It is better to upload all of them to the "root" directory of website for the ease of path-finding.

In the next stage,  I change my contact  form page from this, 

1
<form method="post" action="">

to this one,

1
<form method="post" action="demoPoster.php">

I test it with filling all fields, except the email field. There is no need and no use of filling that for now, as I have locked it by putting line (5)  in the uploaded demoPoster.php. My admin has received the message and its snapshot is here.

 
So far so good. It works perfectly. I could use it if it was not for the spamming bots.
One of the best filters available is the free open source and flexible reCaptcha filter that tests the visitor for being human rather than a software robot flooding crawler. I should add that to my page to barricade my site. It is in the next post. My other tasks are preventing empty fields and fake emails.
Download PHP code in Zip format, here. Open code as text in browser, here.

Download this tutorial as PDF format here
Download part 1 to part 3 as PDF format here
Posted by Peter Jones at 20:34 0 comments
Labels: , , , , , , , ,

How to Create a Contact Form for Your Website in an Easy Way : A Set of Step by Step Tutorials Using HTML5, CSS3 and PHP (2)

(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.)
Continues From Part 1.

First of all when you save your contact form, save it as a PHP file not an HTML. My example is demoMain.php not the demoMain.html. You need two more PHP files.
  • First, a file to inform and thanks the sender of the message.
    • I call this demoThanks.php.
  • Second, a file that informs you of the sender's address and content of their message.
    • I call this demoPoster.php file.
    • It is a good manner to send back content of the message to the visitor as a courtesy if he likes to archive it for himself and inside the demoPoster.php I put this in practice, too.
Therefore, for now I have three files that for the ease of mind all are saved as PHP. Later, I remove these files as I make my contact form more advanced and I will not need them any longer.

Let me show you the elaborate page I created as a thank you message for the visitor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
 <title>Phoenix Thanks for Your Message</title>
        <meta charset="UTF-8" >
        <meta name="viewport" content="width=device-width" > 
 <link rel="stylesheet" type="text/css" href="/MP_Master.css" />
    </head>
    <body>
 <div style='padding-left: 10px; background-image: url("/Images/Themes/bg_home.jpg");' class="MP_Page_Left Zone_Page_L">
            <img src="/Images/Logos/phoenix.jpg" alt="Phoenix" />
            <p>By <a href="http://messiahpsychoanalyst.org" class="MP_LinkStyle">Dysprosium</a></p>
            <hr style='margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;'/> 
            <h1>Your message has been sent! Thanks for Your Message!</h1>
            <p><a href="Home.html" class="MP_LinkStyle">Back to Home Page!</a></p>
 </div> 
 
        <!-- CXNID=5426436&Code=C2 Google-->
        <script type="text/javascript">
          var gaJsHost = (("https:"=== document.location.protocol) ? "https://ssl." : "http://www.");
          document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-10441212-1");
                pageTracker._setDomainName(".messiahpsychoanalyst.org");
                pageTracker._trackPageview();
               }
            catch(err) {}
        </script>
    </body>
</html>

You can watch it by clicking here, please. There are items in the code which are not of your interest. I explain them for you such that you replace them with yours if you like, and then I give a simple skeleton of the page.
  • I have a link to refer to my master CSS file. Please replace it with yours.
1
<link rel="stylesheet" type="text/css" href="/MP_Master.css" />
  • the division tag, div, in the page has my own taste and options from my CSS master file. Later, I am going to replace it with a simple style for this demonstration.
1
<div style='padding-left: 10px; background-image: url("/Images/Themes/bg_home.jpg");' class="MP_Page_Left Zone_Page_L">
  • I have an emblem, similar to my favicon that I'll remove for simplicity. You can put your organisation emblem there.
1
<img src="/Images/Logos/phoenix.jpg" alt="Phoenix" />
  • My signature link has its own style to be visible in sky blue background and all. Yours could be different. 
1
<a href="http://messiahpsychoanalyst.org" class="MP_LinkStyle">Dysprosium</a>
  • That also applies to return page. You can select any page to return to. Best is your home page or whatever.
1
<a href="Home.html" class="MP_LinkStyle">Back to Home Page!</a>
  • I have put a tracker (mine is google analytics). Yours could be provider of your choice. It is a good practice such that you can have a click to add to your presence on the Internet.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
        <!-- CXNID=5426436&Code=C2 Google-->
        <script type="text/javascript">
          var gaJsHost = (("https:"=== document.location.protocol) ? "https://ssl." : "http://www.");
          document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-10441212-1");
                pageTracker._setDomainName(".messiahpsychoanalyst.org");
                pageTracker._trackPageview();
               }
            catch(err) {}
        </script>

And that is all. Now, I put the simplified version.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
 <title>Phoenix Thanks for Your Message</title>
        <meta charset="UTF-8" >
        <meta name="viewport" content="width=device-width" > 
 <style>            
            #phonix-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                border-radius: 10px; 
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }
        </style>
    </head>
    <body>
 <div id="phonix-wrapper">
            <p>By Dysprosium</p>
            <hr style='margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;'/> 
            <h1>Your message has been sent! Thanks for Your Message!</h1>
            <p><a href="Home.html">Back to Home Page</a></p>
 </div>
    </body>
</html>

Please watch if you like it by clicking here, please.
I finished "thanks message" page. Next I discuss "dispatch message" page. Please read it here.
Download code in Zip format here. Open code as text in browser here.

Download this tutorial as PDF format here 
Download part 1 and part 2 as PDF format here
Posted by Peter Jones at 14:07 0 comments
Labels: , , , , , , , ,

Wednesday, 4 December 2013

How to Create a Contact Form for Your Website in an Easy Way : A Set of Step by Step Tutorials Using HTML5, CSS3 and PHP (1)


(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.)

How to make the contact form?

After a long time that I had not a contact form page on my website I decided to create one. I started from easy traditional HTML. Then I succeeded to make it more elaborate with a reCaptcha captcha to prevent spammers and bots to invade to and flood my site. Let me tell my steps in an easy to follow manner. First create HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    <div id="contact-area">
         <form method="post" action="">
            <label for="Name">Name:</label>
            <input type="text" name="Name" id="Name" value="" />
            <label for="City">City:</label>
            <input type="text" name="City" id="City" value="" />
            <label for="Email">Email:</label>
            <input type="text" name="Email" id="Email" value="" />
            <label for="Subject">Subject:</label>
            <input type="text" name="Subject" id="Subject" value="" />
            <label for="Message">Message:</label>
            <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
            <input type="submit" name="submit" value="Submit" class="submit-button" />
        </form>
    </div>

Now I create style for each HTML tag. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
        <style>
            
            #contact-area {
                width: 600px;
                margin-top: 25px;
            }
            
            #contact-area label {
                float: left;
                margin-right: 15px;
                padding-top: 5px;
                width: 100px;
                text-align: right;
                font-size: 100%;
            }

            #contact-area input, #contact-area textarea {
                margin: 0px 0px 10px 0px;
                border: 2px solid #ccc;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                padding: 5px;
                width: 471px;
                font-family: Helvetica, sans-serif;
                font-size: 110%;
            }

            #contact-area textarea {
                height: 90px;
            }

            #contact-area textarea:focus, #contact-area input:focus {
                border: 2px solid #900;
            }

            #contact-area input.submit-button {
                float: left;
                cursor: pointer; 
                margin-top:10px;
                margin-left:112px;
                background: transparent;
                width: 100px;
                font-size: 100%;
                color: #024d8e
            }

            #contact-area input[type="submit"]:hover{
                border: 2px solid #900;
            } 
      
        </style>

I put this style in the head part of the HTML. There are three way to apply CSS style fow HTML.
  • in-line.
  • in the head part.
  • and as a separate style sheet which is saved as a css file.
in a later post i'll describe them. Most of people are familiar with those concepts. Let me focus on my "Contact Page" now.
I have an overall design for my website and I insert the above HTML inside that architecture. Simply, I do not leave the above HTML in a page. I wrap it inside a wrapper to position it correctly, as if you position an image inside a known and well defined place in your web-pages. Computer people use the jargon wrapper for that bounding. It is just an HTML div tag. I give an example for such a wrapper.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
            #contact-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }

My wrapper is not this one but you can test and modify the above and if you liked use it, by all means. Put all of these in an HTML and then you have your contact form. I put a border for it to be recognised from other things in the page. Here is assembly of things.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title> Dysprosium Contact Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            
            #contact-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                border-radius: 7px;
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }

            #contact-area {
                width: 600px;
                margin-top: 25px;
            }
            
            #contact-area label {
                float: left;
                margin-right: 15px;
                padding-top: 5px;
                width: 100px;
                text-align: right;
                font-size: 100%;
            }

            #contact-area input, #contact-area textarea {
                margin: 0px 0px 10px 0px;
                border: 2px solid #ccc;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                padding: 5px;
                width: 471px;
                font-family: Helvetica, sans-serif;
                font-size: 110%;
            }

            #contact-area textarea {
                height: 90px;
            }

            #contact-area textarea:focus, #contact-area input:focus {
                border: 2px solid #900;
            }

            #contact-area input.submit-button {
                float: left;
                cursor: pointer; 
                margin-top:10px;
                margin-left:112px;
                background: transparent;
                width: 100px;
                font-size: 100%;
                color: #024d8e
            }

            #contact-area input[type="submit"]:hover{
                border: 2px solid #900;
            } 
      
        </style>
    </head>
    <body>
        <div id="contact-wrapper">
            <div id="contact-area">
                <form method="post" action="">
                    <label for="Name">Name:</label>
                    <input type="text" name="Name" id="Name" value="" />
                    <label for="City">City:</label>
                    <input type="text" name="City" id="City" value="" />
                    <label for="Email">Email:</label>
                    <input type="text" name="Email" id="City" value="" />
                    <label for="Subject">Subject:</label>
                    <input type="text" name="Subject" id="Subject" value="" />
                    <label for="Message">Message:</label>
                    <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </form>
            </div>
        </div>
    </body>
</html>

Here is the image of resulting page. If you like you can see it by clicking here, please.


This is a well designed form and has the advantages of
  • a knit wrapping boundary,
  • when you click on any field its boundary changes to red,
  • when mouse enters the bounds of the "Submit" button its boundary changes its colour,
  • having a pointer (small hand) when you move the mouse over the "Submit" button to show it clickable,
  • all corners are rounded to give a smoother impression.
It shows how you can design a button.
But this still does not post messages back to you. It is not functioning, yet. I'll show how to do it in the next blog post. Snippets have made this one very long. Next post is here; please click.
Download PHP code in Zip format here or open the code in text format here.

Download this tutorial as PDF format here
Posted by Peter Jones at 22:29 0 comments
Labels: , , , , , , , ,

Saturday, 22 December 2012

Web Hosting at Your Home (Revisited)

(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.) From the time that I wrote the post on this topics, many things has changed. Now, I revise the material.

First, you need a dedicated computer to install and run your webserver on that. I used to use an old laptop; it was older than ten years. Regretfully it made a lot of noise during the night cooling the CPU. CPU was 2 GHz, but with small CPU cache it was killing slow. It still had some customers to earn some cash, so went on auction site and "bid" farewell. As I have a very cheap and high quality paid hosting, I didn't bother to replace the home web hosting laptop. I put the home hosting on my computer, hence when I hibernate the computer or shut it down it is not visible anymore.
  • Therefore, if you want to use an old laptop as a server consider how far it is still useful. You frequently have to work with it and if it is too slow, it can make you impatient. It is difficult to upgrade its CPU and impossible to improve its cooling mechanism. It also consume some electricity and it creates some noise.
  • If you decide to use an old desktop (tower) computer, you easily can upgrade it to a more powerful one. You also can get almost good computers with very low prices on auction sites. They consume more electricity and for tuning you need to connect keyboard, mouse and screen to them. Their noise also might be too much.
  • Considering expenses all together a web hosting at home might not be profitable comparing to a purchased web hosting mostly under $40, $50 a year. But it is rewarding in terms of having a hobby. If you have a small business and hoping to develop it or it is growing it is a good practice to keep your IT operation under your control and within the horizon of your understanding; then web hosting at home could be a good exercise to that ends.
  • Call the computer of your home web-hosting your "web server" after this.
Second, download and install Apache HTTP (web) server to your home web server. To do that
  • Create a folder in the root directory of your web server as C:/Apache Software Foundation/Apachex.x where x.x stands for the version of downloaded software. Mine is Apache2.2. 
  • Install Apache server and during the installation instruct Apache to be installed in that C:/Apache Software Foundation/Apachex.x folder.
  • Fill in the installation form of Apache. You can fill its field with anything that looks like a website name and email. Later you can correct them in conf/httpd.conf file.
  • Open htdocs folder inside Apache2.2 and double click on index.html if it opens and shows "It Works!" then you have been successful so far.
  • If succeeded change name of index.html to indexold.html.
Now it is time to bring your website into your home web hosting.
  • From wherever you have saved your website copy all the files and folders and paste them inside the htdocs folder of your Apache.
  • You have a front or home page. It could be home.html, index.html, or default.html. Extensions could be html or aspx or other accepted extensions. Make a copy of that and change its name to index.html. Having done this you do not need to tweak with conf/httpd.conf file for now; until later that you become an advanced user.
Log into your router, normally by typing 192.168.0.1 (or in some routers 192.168.1.1) in your browser.
  • Find the IP address of the web hosting server computer of yours from the "Connected Devices" section. It should be something like 192.168.0.7
 While still  logged in the router note that in all routers there is an "Advanced Settings" and inside that a section for "Security" settings. Among the "Security" settings you'll find a "Port Forwarding" area. Enter in "Port Forwarding."
  • Select HTTP for name of the "Service."
  • Select TCP for "Protocol."
  • Enter IP of your web server computer into the IP field (192.168.0.7).
If you are in Windows XP this is fine enough. If you are in Vista/ Windows 7 or Windows 8, you need to instruct the Windows to make an exception in the Firewall to allow inbound traffics for your web server.
  • Open "Control Panel" and then open "System and Security."
  • Click on Windows Firewall to open its dialogue.
  • On the left side list find "Advanced Setting" and click on it.
  • A "Windows Firewall with Advanced Security" dialogue will open.
  • On the left side list click on "inbound rules."
  • Now on the right side list click at the top on the "new rule."
  • Among the selection radio buttons click on "Port" and the next.
  • In the next dialogue click on "TCP" radio button and then specify on the "Specific Local Ports" by typing value 80 in the field and then next.
  • In the next dialogue leave "Allow Connection" as it is selected by default. Click next.
  • Well your web serving computer is in your home. Hence in the next dialogue you need to select "Private" network by ticking the box. Click on next.
  • In the next dialogue select a "Name" for your rule such as "My Apache Web Hosting." Click "Finish" and you are done.
After setting up the new "Firewall Rule" type http://localhost/ in your browser. That should bring your home page. Look at your browser it is just http://localhost/  with no index.html or anything after that. This is a good lesson for later tunings. Now click on your "Home" link (you have that link somewhere in your front page), then browser changes to http://localhost/home.html or http://localhost/default.aspx or whatever file you have as your home page. I decided to have mine as default.html since I found it more comfortable to work. I have three similar copies of my home page as index.html, default.html and home.html inside the htdocs folder of my Apache.

You have your web server hosting at home up and running.
  • Get your main internet service IP from your router or by typing "my ip" in your favourite search engine. It should be something like 87.321.46.18 (this is not a real IP as one of the numbers is greater than 255 which is impossible).
  • Ask a friend to type that IP in their browser. Check if your web hosting is visible for them.
Hopefully you have done all you need at home for your web hosting. It is disappointing that it is visible only for your acquaintances. Next make it visible for the world.
  • One solution is to get a free subdomain from numerous provider. They do it in a hope that one day you are going to get one of their paid services. Once they get enough clients, gradually they kick out free nerds with excuses. One I am using is DNSdynamic. They provide you with a free client to be installed on your computer. You do not need this client in principle. I'll explain for you in a minute. Sign up to their site and select a name for your site, say homelyhost, then your address will be, say, homelyhost.dnsd.info. There are other options besides dnsd.info. Mine is messiah.dnsd.info. These types of names does not look much exciting.
  • While logged in the DNSdynamic website, or wherever, use their provided instructions and point the name (say, homelyhost.dnsd.info) to your IP (87.321.46.18).
  • Log out and test the name in your browser. Sometimes it take 24 hours that things become sorted out throughout the worldwide network of Internet.
Reason for installing the client is that normally people have dynamic IP which is subject to unnoticed arbitrary change by their Internet Service Provider (ISP). You do not need the client as much since due to technical issues IP addresses will be kept static and without change for a long time and years if you do not move from your present address or you do not change the Service Provider.
  • You can check your IP every now and then, perhaps on a daily basis, and if it had been changed log into your member page at DNSdynamic site and point the name to new IP.
  • Alternatively you can buy a static IP.
(Update 26/April/2014: As explained here and I expected DynDns that I already had, has informed me that they can't continue providing free services anymore. Their offered prices are so unreasonable as if they are living in another planet. I moved to DNSdynamic.org, and edited this blog post, accordingly. They look very innocent now.)
You might like to buy a name for your web site that you are hosting at home. You have not much options now a days for selecting cool and conspicuous names. They are already gone or big companies have bought them, in speculation, to sell them to wealthy people, celebrities and companies who need such names. Even misspelled names are sold already for famous brands. If you type in browser say foerd.com you might get to ford.com, for instance.  They also may use it for "parking" sites. If you browse by misspelling ford as foerd you reach to a site that has parked advertisements for car selling/repair/used-car companies and during the year might bring few hundred dollars for its owner.
If you need very ordinary name, especially long names, these names are sold on a yearly subscription basis and are not expensive. They are from $5 to maximum $25 per year. I bought a dysprosiumsoft.com for $8 a year.
I pointed it to my webhosting at my home, but how. Sites such as DynDns asks paid subscription to provide such a pointing service which is called DNS or Domain Name Services.
  • You need to use a free DNS provider.
  • There are many of them out there with the same rule: when they get enough people convinced to upgrade to paid service they kick out the remaining die-hard non-paying nerds.
  • I found freedns.afraid.org more nerd oriented than others and very easy to configure (© 2001-2014 Joshua Anderson, Free DNS is currently processing 4,373 DNS queries per second).
  • I signed up to their free subscription and followed their instructions to point their DNS to dysprosiumsoft.com and then dysprosiumsoft.com points to my IP. Click on http://dysprosiumsoft.com and if my computer is on (mostly GMT : 8 am to midnight) you will see my web hosted on my own computer. It is also the same pointed by http://messiah1.ddns.net/. They both land on the same folder. I have one folder for home web hosting but I have pointed two names to it; similar to foerd.com and ford.com that points to the same site such that if people make a mistake while typing in browsers they land on the same place. I have added a small tag at the top (Home Web Hosting Demo) to be recognised from the out-sourced professionally hosted http://messiahpsychoanalyst.org.
  • Click on the W3C validation at bottom. It becomes validated similarly.
Believe it; it needs some patience.

(Disclaim : names I used in this note are those I am using I have no idea regarding recommending or endorsing them. Though I am thankful to them but you might prefer using your favourite search engine finding similar services)

Please also see a newer post Web Hosting at Your Home : PHP and Port Forwarding Conflicts
Posted by Peter Jones at 16:45 0 comments
Labels: , , , , ,

Monday, 31 October 2011

What News About Dysprosium?

(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.) This is an obsolete content. Some updates can be find at the bottom of this post. I promised a release of Dysprosium Suite before the end of this 2011. I could not eliminate a serious hurdle on the way. I could not find a PDF viewer that seamlessly joins to Java. I mean a free viewer. There had been an excellent free Java viewer by Adobe developed ten years ago. It means it is based at best on works started before the millennium. It works still perfect if your created PDF be of the type you might create by the latest LaTeX tools (such as MiKTex) or by Adobe Professional tools. It does not even load a blank page which is not created in this way. But most of the people use everything to create PDF; such as, Google Docs, or Open Office, and many scanner to PDF software. Such cases crashes the Adobe Java viewer. Adobe for unknown reasons did not continue the development of that software, and its present free software SDK is pure C++. I worked to switch to that tool but there is a further hurdle since this SDK utilizes MFC proprietary libraries and include files. I tested every available claimed free Java PDF viewer, but actually they all have a mistake. They are not Java Swing. Adobe viewer is a pure Java Swing. It is so malleable that you can give them the "group layout;" a very Java Swingish layout. But I succeeded in pushing the limit of merge to astonishing 3.5GB in 64 bits versions of Windows 7 and Windows 8, with enough RAM memory. I had 32GB installed and put 4GB of it available for Java heap. CPU was quad core and never exceeded in 10% usage for each core. FSB was 1600MHz. This is the biggest PDF file you might find. The other reason that I did not switch to C++ is the belief that I have on Java programming. It is much more natural than C++. (I am a C language fanatic, but not C++) Well, C# is somehow Java. But it is not free, for full blood development. (It was a strategic mistake, in terms of nerds commenting, that Sun pushed against usage of Java by Microsoft. Otherwise, there could be more harmony in the present sphere of development tools.) Switching to C++, or to C# will change my work as a retired person to a full time professional developer. I am going to create a separate package with Adobe Java viewer with no guarantee of being usable on loading every PDF. I am going to develop one without viewer, besides. Please have a look at the snapshot.
It is a document created by the LaTeX (using MiKTeX). Book includes extreme fonts and sophisticated images. All 74 pages are loaded nicely. Yellow color has been used to create contrast for this demo. The next document is a one page document created by Open Office. Only one word is written on it. It dispatches error upon loading.
There was, another disappointment, too, in lack of much progress in breaking the password of PDF. I was interested in its mathematical side. A brute force multi threading could break a password of 5-character length created out of 64 characters in a reasonable time. Hence, we have "Remove Password" button (on condition that you have the owner's password) but not the "Unlock Password" button.
Update, May 2016 : Dysprosium (Dolce edition) has been released (please click) based on iText from mid of April 2014 and smoothly on a nightly basis added more features and now I have deprecated many scattered pieces of PDF utilities I already released. There are so many features that I cannot write complete instructions for all of them. From other previous pieces only Signature manager has been remained to be integrated. I sorted out PDF viewer problem somehow satisfactorily.)
(updated : 26/May/2016) I have had over 60,000 downloads from 187 countries. All around the world, only 1 country in South America (French Guiana) and 1 countries in Asia (Democratic North Korea ) have not used Dysprosium Software, yet. The remaing countries not downloaded to this date (less than 10) are from the central Africa and perhaps some very small Island countries.
(Deprecated Paragraph : People contacted me regarding not fulfilling promises in creating an integrated software for different pieces of dysprosium in on single -and perhaps bloated- suite. My friend Grant Hardy is too busy with electronics and doesn't come around. Phoenix  is also has committed himself in different web developments. I have been left alone and I am too old and feeble, but have progressed in some areas. For example, I have created a Complex Polynomial Calculator; download here. I postpone my promises towards end of this year. We had some joy with majority of algorithms in recovering lost owner's passwords. Well, I succeeded in a relatively fast password cracker but won't publish it. People who have lost their password might like to use other things available out there. We fulfilled all  promises at this date 26/May/2016.)

Posted by Peter Jones at 12:26 0 comments
Labels: , ,

Sunday, 7 August 2011

How to Create a Free Web Hosting in Your Home? (2)

(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.) Next you need to test your IP address on the Internet. (Please also read the previous post.)This is different with your private hub IP addresses. It is the unique address given by your broadband service provider to the location of your router on the entire Internet.You can get it on different places.
For example, log into your router and click on "Basic Setup" you find it as

It is something like "98.227.112.49" This number is as good and working as any important site such as www.un.org or other sites. Ask a friend to type that IP address in their browser and voila! He will be directed to your hand-made web site. Remember from the previous post that if your default home page is not "index.htm" you have to configure "httpd.conf" file accordingly, or type "http://98.227.112.49/home.html". You have a web hosting of your own free. This IP address is subject to arbitrary change by the provider. It is dynamic for ease of maintenance. People join to and opt out from a provider and their address will be given to others. You also may change the provider or your residential. It also cannot be remembered easily. It needs a mnemonic to help to memorise. There are companies on the Internet that provide you with a free client software for maintaining a constant connection of the Internet with your potentially changable IP through a mnemonic of your choice. These companies are called "Dynamic DNS Provider" or such. You can use your favourit search engine to find one. By client I mean the old PC that is being used for your in-the-home web hosting. It is necessary that you subscribe to such a free service. Then download and install the client software on the "client" following their simple instructions. This mnemonic is not a top level domain such as www.anexample.org. It is a subdomain such as "subexample.anexample.org" Mine is messiah.dyndns.inf. I got dyndns.inf from free DynDns' many available options. I mention their name as a gratitude to the free service. If you like to have a top domain name, then you have to buy one by paying £5 ($8) (at the time of writing this article) a year. Many of more attracting names are being used by others or are bought to be kept to sell for higher prices. After purchasing that domain name or if you already have one, then you can redirect your top domain name through that dynamic IP provider to your home made web site.  dynamic IP provider tells you how you should do that. (freedns.afraid.org starts by default from a top domain name of yours. Their dynamic DNS service is also free. With £5 ($8) a year (at the time of writing this article) you buy a domain name from any seller and then redirect it through dynamic dns and nameservers of freedns.afraid.org to your home web server.) You should follow guidelines to maintain your down-time to minimum per year. It is easy to surpass in quality over an expensive web hosting if you minimise load of that web server machine. Do not use it for other purposes and do not put more than the minimum of operating system software on it. Uninstall additional software (sometimes called bloat-ware) that comes with an operating system and has not any use for your web server. It is possible to gain an old PC with an OEM Windows XP installed under £20 ($30) or sometimes drastically less than that on the eBay now a days. You can upgrade it to a 3GHz CPU, 3GB RAM. The bad thing about a desktop PC is its electricity consumption and noise that it creates. Bad thing about old laptops is that you cannot upgrade its cpu easily and old laptops normally cannot accept  more than 1GB of RAM. By the end of 2012 Britain will be the first country that all its communication network will be on the Internet. There will remain no conventional telephon switching after that. Thanks to optical fiber on your door, speed of connections are not subject to trafic load and distance and is constant all around the clock. Hosting at home is the next asset that you can have besides being just consumers of  the other web sites. At the end this is very pleasing job to accomplish. It is fulfilling like ham radio and DXing, when you were producer of your own equipments instead of buying them. After preliminary set up of the site, there'll be many Elmer's notebooks on the Internet that paves the way towards full professionalism. For example, click on this link, http://messiah.dyndns.info/CodesForUs.html. You can find that I have moved part of this blog on into that web site at my home. (Thanks to Grant Hardy who edited this post from the US)
(Update : See also this post Web Hosting at Your Home (Revisited) )
Update, 25 March 2014 : You might find these two wikis useful, too.
They include images and are step-by-step.
Posted by Peter Jones at 17:08 1 comments
Labels: , , , ,
Subscribe to: Posts (Atom)