Aug
01
Posted (admin) in Download, Learing Materials, Scripts, Source Code, Web Development on August-1-2011

Generally every website has it’s own menu system to provide users to navigate through the site resources. Creating menu system using scripting languages such as PHP, JAVA is a very complicated task and it required programming skills. But using the CSS (Cascading Style Sheet) the task is very simple. In this tutorial I would like to go over how to create a simple CSS menu that can be used in web pages.


Step 1: Prepare the Style sheet

Layout of the menu is defined here with below codes.

  • Open the ‘Notepad’ programme.

  • Copy and paste the below code.
  • Save the file as ‘Style.css’
#navcontainer
{
margin: 10px 5px 0 30px;
padding: 0;
height: 20px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #c2dbe2;
width: 78px;
height: 18px;
border-top: 1px solid #073645;
border-left: 1px solid #073645;
border-bottom: 1px solid #073645;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #05436a;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, sans-serif;
}

#navcontainer ul li a:hover
{
color: #fff;
background: #0e5373;
}

#navcontainer a:active
{
background: #0e5373;
color: #fff;
}

#navcontainer li#active a
{
background: #0e5373;
border: 1px solid #00c6dd;
color: #fff;
}

Step 2: Create the HTML file

Now we create the HTML file with the names of the menu items.

  • Open the ‘Notepad’ programme.

  • Copy and paste the below code.
  • Save the file as ‘index.htm’
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <title>My first CSS menu</title>

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

<BODY >

<div id="navcontainer">
<ul id="navlist">

<li id="active"><a href="home.htm">Home</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>
</div>

</body>
</html>

Done!

We have created the web page with CSS menu. Move the mouse over a menu item it will be highlighted.

Customizing the menu

Change menu item text and target URL as you wish by changing the statements within <li> and </li> tags in the ‘index.htm’ file. To change the style edit values given in the ‘Style.css’ file.

Click here to Download the above example.



 
Jul
30

Using a contact form on your website is very useful as it helps your web site visitors to communicate with you in an easy and simple way. But, there are spammers and hackers who are looking for exploitable web forms. It is essential to secure your form against all ‘holes’ that those hackers are searching for.

 

How does the spammers/hackers exploit HTML forms?

Spammers exploit web forms for two purposes:

a) As a relay for sending bulk unsolicited emails

If you are not validating your form fields (on the serve side) before sending the emails, then hackers can alter your email headers to send the bulk unsolicited emails. (also known as email injection) For example, hackers can place the following code in one of your form fields and make your form processor script send an email to an unintended recipient:

sender@theirdomain.com%0ABcc:NewRecipient@anotherdomain.com

The code above is adding another email address to the CC list of the email. Spammers can send thousands of emails using this exploit. Your host will not be

Download

happy with this and may warn you or even ban your web site.

The best way to prevent this spammer exploit is to validate the fields used in the mail() function(fields like email, subject of the email, name etc). Check for the presence of any “new line” (\r\n) in those fields. The email form article contains sample code that does the same.

b) For Sending spam messages to you

There are programs known as ‘spam-bots’ that leech through the web pages looking for web forms. When found, those ‘bots’ just fills the fields with a spam message and submits. Eventually you will start getting many hundred submissions send by those spam bots and you will find it difficult to separate genuine submissions from spam messages.

The solution for this problem is to use a mechanism to identify human submitters from ‘bots’. CAPTCHA is one of such tests.

Adding Captcha to the form


Captcha is an image with a code written on it. The website visitor is required to read the code on the image and enter the value in a text field. If the word entered is wrong, the form submission is not processed. As CAPTCHA is a smartly blurred image, the spam bot can’t read it. So the form cannot be auto-submitted by a ‘bot’.
The contact form with CAPTCHA

Here is the HTML code for the contact form:

<form method="POST" name="contact_form"
action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"> 

<label for="name">Name: </label>
<input type="text" name="name"

value="<?php echo htmlentities($name) ?>">

<label for="email">Email: </label>
<input type="text" name="email"
value="<?php echo htmlentities($visitor_email) ?>">

<label for="message">Message:</label>
<textarea name="message" rows=8 cols=30
><?php echo htmlentities($user_message) ?></textarea>

<img src="captcha_code_file.php?rand=<?php echo rand(); ?>"

id="captchaimg" >
<label for="message">Enter the code above here :</label>
<input id="6_letters_code" name="6_letters_code" type="text">

<input type="submit" value="Submit" name="submit">
</form>

The HTML form above contains the fields for name, email and message. In addition, we have the CAPTCHA image. The tag for the CAPTCHA image points to the script captcha_code_file.php. The PHP script in ‘captcha_code_file.php’ creates the image for the captcha and saves the code in a session variable named ’6_letters_code’.

Validating the CAPTCHA

When the form is submitted, we compare the value in the session variable(6_letters_code) with the submitted CAPTCHA code( the value in the text field 6_letters_code). If the codes match, then we proceed with emailing the form submission. Else we display an error.

Here is the code that does the server side processing:

if(isset($_POST['submit']))
{
  if(empty($_SESSION['6_letters_code'] ) ||
    strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
  {
      //Note: the captcha code is compared case insensitively.
      //if you want case sensitive match, update the check above to
      // strcmp()
    $errors .= "\n The captcha code does not match!";
  }

  if(empty($errors))
  {
    //send the email
    $to = $your_email;
    $subject="New form submission";
    $from = $your_email;
    $ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';

    $body = "A user  $name submitted the contact form:\n".
    "Name: $name\n".
    "Email: $visitor_email \n".
    "Message: \n ".
    "$user_message\n".
    "IP: $ip\n";  

    $headers = "From: $from \r\n";
    $headers .= "Reply-To: $visitor_email \r\n";

    mail($to, $subject, $body,$headers);

    header('Location: thank-you.html');
  }
}

Customizing the CAPTCHA

The CAPTCHA script in the sample code download can be customized. If you open the script, you can see the first few lines of the code as shown below:

$image_width = 120;
$image_height = 40;
$characters_on_image = 6;
$font = './monofont.ttf';

//The characters that can be used in the CAPTCHA code.
//avoid confusing characters (l 1 and i for example)
$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';
$random_dots = 0;
$random_lines = 20;
$captcha_text_color="0x142864";
$captcha_noise_color = "0x142864";

You can change the size of the CAPTCHA by changing $image_width & $image_height. The number of characters in the CAPTCHA can be changed by updating $characters_on_image. Similarly, the text color of the CAPTCHA can be customized by updating $captcha_text_color. The code adds some ‘noise’ in the image by adding random lines and dots. you can increase or decrease the noise. Please note that increasing the noise may make it difficult for your genuine visitors to read the code.

Download the code

Click here to download html-contact-form-captcha.zip

 


  • Web Hosting



 
Jul
20
Posted (admin) in Learing Materials, Teaching Aids, Tips on July-20-2011

This windows 7 based performance guide is created for the students who are following ICT Technician course according to the National Vocational Qualification (NVQ) standards of Sri Lankan government.
Download complete PG for all 15 tasks (Module 1 : Maintain files and folders) Download

Getting backup in Windows 7

Getting backup in Windows 7

You can buy this complete performance guide for “module 1 : Maintain files and folders” at here GraphicBase


  • Better than paid hosting


    Web Hosting



 
Apr
20
Posted (ADRAKS) in Learing Materials, Teaching Aids, Tips on April-20-2010
Here is an example of the usage of Goal Seek Command. In the below  example the cylinder has diameter (d – 10m) and height (h – 50m). we can find the total volume by using the function
‘=pi() * (c3/2)^2 * c4′
Find Volume of a Cylinder 
Find Volume of a Cylinder

But if we want to fill the tank with 2000m3 of water, we have to find the height to fill up.

Find the Height

Find the Height

 The Excel’s Goal Seek (Tools–>Goal Seek) command is used here to set up the targt value.

Result of Goal Seek Command

Result of Goal Seek Command

 The target is acheived after running the Goal seek command.

If you have any questions please comment here.



  • Web Hosting



 
Apr
14
Posted (admin) in Learing Materials, Teaching Aids, Tips on April-14-2010

The below information shows an example usage of the Hlookup function in Microsoft Excel. Change the Name and subject to view the marks. Click  HLookup function example  to download the sample spreadsheet.

HLookup Function Example

HLookup Function Example



  • Better than paid hosting


    Web Hosting