How to use TpFIBDatabase FIBPlus Component to connect with Firebird database in Delphi XE4?

How to use TpFIBDatabase FIBPlus Component to connect with Firebird database in Delphi XE4?

TpFIBDatabase component is used to make database connectivity with Firebird database in Delphi. For using TpFIBDatabase component, you should have FIBPlus and Firebird installed on your system. I am using Delphi XE4, Firebird 2.5.2 and FIBPlus 7.5 to make database connection.

Connection parameters are typical for InterBase/Firebird server:

1) path to a database file;

2) user name and password;

3) user role;

4) charset;

5) dialect;

6) client library (gds32.dll for InterBase and fbclient.dll for Firebird).

To connect to a database you should call the Open method or set the Connected property to True. It’s also possible to use this code to connect to a database:

function Login(DataBase: TpFIBDatabase; dbpath, uname, upass, urole: string): Boolean;

begin

 if DataBase.Connected then DataBase.Connected := False; 

 with FDataBase.ConnectParams do begin

   UserName := uname;

   Password := upass;

   RoleName := urole;

 end;

 DataBase.DBName := dbpath;

 try DataBase.Connected := True;

 except

   on e: Exception do

   ShowMessage(e.Message);

 end;

 Result := DataBase.Connected;

end;

To close the connection either call the Close method or set the Connected property to False. 

You can also close all datasets and connected transactions at once:

procedure Logout(DataBase: TpFIBDatabase);

var i: Integer;

begin

  if not DataBase.Connected then

  Exit;

  for i := 0 to DataBase.TransactionCount - 1 do

    if TpFIBTransaction(DataBase.Transactions[i]).InTransaction then 

      TpFIBTransaction(DataBase.Transactions[i]).Rollback

 DataBase.CloseDataSets;

 DataBase.Close;

end;

HTML5 MENU Tag Redefined

HTML5 <menu> Tag Redefined

The <menu> tag provides an easy way to create menus on a web page. The HTML <menu> element was deprecated in HTML 4.01 but is redefined in HTML5. The HTML <menu> tag defines a list/menu of commands. The <menu> tag is used for context menus, toolbars and for listing form controls and commands.

<li> tag is used within the <menu> tag. For example:

Which pet do you own?

<menu>

 <li>Dog</li>

 <li>Cat</li>

</menu>

You can also place radio buttons and check boxes inside <menu> tags. Have a look at following simple example of <menu> tag

radiobuttons inside <menu> tag

<menu>

   <li><input type="radio" id="radDog" class="radPets" name="radDog"/>Dog</li>

   <li><input type="radio" id="radCat" class="radPets" name="radCat"/>Cat</li>

</menu>

checkboxes inside <menu> tag

<menu>

   <li><input type="checkbox" id="cbDog" class="cbPets" name="cbDog"/>Dog</li>

   <li><input type="checkbox" id="cbCat" class="cbPets" name="cbCat"/>Cat</li>

</menu>

<menu> tag is used instead of <ul> tag

Earlier we used to make an unordered list by using <ul> tag like this:

<ul class="toolbar">

  <li>New</li>

  <li>Open</li>

  <li>Save</li>

  <li>Quit</li>

</ul>

But as I earlier said, <menu> is redefined in HTML5. The <menu> element represents an unordered list of commands. It has a type attribute, which can be set to popup or toolbar.

<menu type="toolbar">

  <li>New</li>

  <li>Open</li>

  <li>Save</li>

  <li>Quit</li>

</menu>

Please note: The <menu> tag is valid within blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td and th tags.

How to secure jQuery AJAX calls in PHP from hackers?

How to secure jQuery AJAX calls in PHP from hackers?

If you are making jQuery AJAX calls in your PHP website, please ensure that those jQuery AJAX calls are secure from website hackers. Your code should not be vulnerable to hackers. Below are some methods and steps which need to be taken to secure your jQuery AJAX calls to PHP files. I am writing this post because I had written a simple post "How to call PHP function from JavaScript function? Always use AJAX." without mentioning any security code. I got following comment on that post:

"Your code is very vulnerable. You're not filtering the $_POST variable at all. This opens yourself to HTML injection. A hacker could pwn your web site very quickly if you used this code. Careless examples like yours is exactly why so many web sites are hacked."

That's why this is my small attempt to make your jQuery AJAX calls secure. 

1. Use $_SERVER['HTTP_X_REQUESTED_WITH']: 

This is a basic check to see if the request is an Ajax request or not?

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&       strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
{
    //Request identified as ajax request
}

However you should never base your security on this check. It will eliminate direct accesses to the page if that is what you need.

2. Use $_SERVER['HTTP_REFERER']: 

if(@isset($_SERVER['HTTP_REFERER']) && $_SERVER['HTTP_REFERER']=="http://yourdomain/ajaxurl")
{
 //Request identified as ajax request
}

But not all browsers set it. So don't properly rely on it but yes, to some extent it can secure your webpage.

Nobody can AJAX your site from other domain, but always can connect and drieclty send http request, for example by cURL.

JavaScript running on another domain cannot access any page on your domain because this is a violation of the Same-Origin Policy. The attacker would need to exploit an XSS vulnerability in order to pull this off. In short you don't need to worry about this specific attack, just the same old attacks that affect every web application.

3. Generate Access Tokens

$token = md5(rand(1000,9999)); //you can use any encryption
$_SESSION['token'] = $token; //store it as session variable

You can create some token in cookies, that will be also seen from jquery request, but that solution can also be hacked.

4. Always check $_POST variables in your PHP file whether those are set or not? Whether there is valid value in $_POST or not before executing the actual PHP code.

Basic code snippet for securing your jQuery AJAX calls in PHP

Step-1 : Generate Token System For All Web-Service:

Generating Token :

<?php
  session_start();
  $token = md5(rand(1000,9999)); //you can use any encryption
  $_SESSION['token'] = $token; //store it as session variable
?>

Step-2 : Use it while sending ajax call:

var form_data = 
{
  data: $("#data").val(), //your data being sent with ajax
  token:'<?php echo $token; ?>', //used token here.
  is_ajax: 1
};

$.ajax({
  type: "POST",
  url: 'yourajax_url_here',
  data: form_data,
  success: function(response)
  {
    //do further
  }
});

Step-3 : NOW, Let's secure ajax handler PHP file with,

session_start(); 
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') 
{
  //Request identified as ajax request

  if(@isset($_SERVER['HTTP_REFERER']) &&    $_SERVER['HTTP_REFERER']=="http://yourdomain/ajaxurl")
  {
   //HTTP_REFERER verification
    if($_POST['token'] == $_SESSION['token']) {
      //do your ajax task
      //don't forget to use sql injection prevention here.
    }
    else
   {
      header('Location: http://yourdomain.com');
    }
  }
  else 
  {
    header('Location: http://yourdomain.com');
  }
}
else 
{
  header('Location: http://yourdomain.com');
}

How to call PHP function from JavaScript function? Always use AJAX.

How to call PHP function from JavaScript function? Always use AJAX.

Recently, I was developing a web application in PHP. I get into the need of calling my PHP function from my Javascript function. This is the common thing when you are developing a web application in PHP and have to call a PHP code from Javascript to refresh only a certain portion of your web page with server results. Always use AJAX to achieve this functionality. Using AJAX you can call server side code / functions (your PHP code) from client side (Javascript). Below is the PHP and Javascript code snippet to illustrate this concept. 

This is very simple example on how to call server side functions of PHP from client browsers (Javascript)? In following example, I have a PHP file named myscript.php which has function named myfunction(). This function uses two $_POST variables and just echoes them. I have mydiv HTML div anywhere on my webpage which I want to refresh with the result which is returned from my PHP script. In my Javascript code, I am using AJAX to call my PHP script with parameters and POST method. The result which is getting returned, I am showing that in mydiv HTML div. 

Have a look at this very simple PHP AJAX example:

PHP code

<?php

myfunction();

function myfunction()

{

$myvar = $_POST['q']." how are you?";

$myvar2 = $_POST['z'];

echo $myvar."\n".$myvar2;

}

?>

HTML code

<div id="mydiv"></div>

Javascript code

var data =" hello world";

var data2=" hello all";

function run()

{

$.ajax(

{
                   url: 'myscript.php',

                data: {'q': data,'z':data2},

                   type: 'post',

                   success: function(output) 

                {

                          //alert(output);

                          document.getElementById("mydiv").innerHTML += output; //add output to div  

                }

}

          );

}

How to put images in HTML text and password fields?

How to put images in HTML text and password fields?

You can easily place images inside text fields in HTML. To explain this, I am making a registration form in which I have text and password fields like name, email, password and confirm password. I want to put user image inside name text field, email image inside email field and so on. I have kept images(32*32 png icons) of user, email and password in images folder.

HTML file

<form action="register.php" name="register" id="register" method="post">

     

  <input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">

  <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="3" class="txtinput">

  <input type="password" name="password" id="password" placeholder="Your password" autocomplete="off" tabindex="5" class="txtinput">

 <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm password" autocomplete="off" tabindex="6" class="txtinput">

   <input type="submit">     

</form>

CSS file

#register input#name 

{

  background: #fff url('../images/user.png') 5px 4px no-repeat;

}

#register input#email 

{

  background: #fff url('../images/email.png') 5px 4px no-repeat;

}

#register input#password 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

#register input#confirmpassword 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

How to make stylish Submit and Reset HTML buttons with CSS3?

How to make stylish Submit and Reset HTML buttons with CSS3?

Recently, I had to create a registration form which had submit and reset buttons. I wrote some CSS3 code to look submit and reset html buttons stylish. I thought of sharing this code with all you guys so that it might help someone. If you have any better CSS tips to make these submit and reset buttons more stylish, do share it.

My HTML file:

<div id="buttons">

    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

    <input type="submit" name="submit" id="submitbtn" class="submitbtn" value="Register">

</div>

My CSS file:

#buttons 

{ 

  display: block; padding-top: 10px; 

}

#buttons #resetbtn 

{

  display: block;

  float: left;

  color: #515151;

  text-shadow: -1px 1px 0px #fff;

  margin-right: 20px;

  height: 3em;

  padding: 0 1em;

  outline: 0;

  font-weight: bold;

  font-size: 1.3em;

  white-space: nowrap;

  word-wrap: normal;

  vertical-align: middle;

  cursor: pointer;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  background-color: #fff;

 background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);

 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));

  background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);

  background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);

  background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );

  border: 1px solid #969696;

  box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

}

#buttons #resetbtn:hover 

{

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

  color: #818181;

  background-color: #fff;

  background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));

  background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

  border-color: #aeaeae;

  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

}

#buttons #submitbtn 

{

  display: block;

  float: left;

  height: 3em;

  padding: 0 1em;

  border: 1px solid;

  outline: 0;

  font-weight: bold;

  font-size: 1.3em;

  color:  #fff;

  text-shadow: 0px 1px 0px #222;

  white-space: nowrap;

  word-wrap: normal;

  vertical-align: middle;

  cursor: pointer;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  border-color: #5e890a #5e890a #000;

  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  background-color: rgb(226,238,175);

  background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 

  background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );

}

#buttons #submitbtn:hover, #buttons #submitbtn:active 

{

  border-color: #7c9826 #7c9826 #000;

  color: #fff;

  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  background: rgb(228,237,189);

  background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 

  background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 

  background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 

  background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );

}

How to pause javascript setInterval method for sometime and restart again?

How to pause javascript setInterval method for sometime and restart again?

I was using javascript setInterval method to display different divs after a regular interval of time. In between, I fell into the requirement of pausing the javascript setInterval method for sometime, do some stuff and restart it again. So, I repeatedly used setInterval and clearInterval to acheive my functionality. 

I have 3 divs: div0 (green), div1 (yellow), div2 (red). All are overlapping each other. I am using setInterval to hide and show div1 and div2 after every second. if index = 4 or 6, I am showing red div else yellow div. 

My requirement is that, When index becomes 8, I want to pause the setInterval for 5 seconds and till then show div0 (green) and afterwards resume the loop of setInterval until clearInterval is called.

Below is the code snippet for pausing and restarting setInterval method which is self explanatory.

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Sample Application</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

    var index=0;    

    var auto_refresh = 0;

    $(document).ready(function(){

    hideDiv();

    auto_refresh = setInterval(function(){myTimer()}, 1000);

    });

    function myTimer() 

    {

            index+=1;

            if(index == 4 || index==6)

            {

              showDiv2();

            }   

            else if (index == 8) 

            {

              clearInterval(auto_refresh);

              showDiv0();

              auto_refresh = setInterval(function(){myTimer()}, 5000);  //Now run after 5 seconds

            }

            else if (index > 12) 

            {

              clearInterval(auto_refresh);

            }       

            else

            {

              showDiv1();

            }

        }

    function hideDiv()

    {

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

    }

    function showDiv0()

    {

      document.getElementById("div0").style.visibility="visible";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

    }

    function showDiv1()

    {

      document.getElementById("div1").style.visibility="visible";

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

      document.getElementById("div1").innerHTML=index;

    }

    function showDiv2()

    {

      document.getElementById("div2").style.visibility="visible";

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").innerHTML=index;

    }

    </script>

  </head>

  <body>

    <div id="container" style="position:relative;">

<div id="div0"     style="background:green;height:200px;width:200px;margin:0;position:absolute">

Relaxing for 5 seconds

</div>

         

<div id="div1" style="background:yellow;height:200px;width:200px;margin:0;position:absolute">

This is div1

</div>

<div id="div2" 

style="background:red;height:200px;width:200px;margin:0;position:absolute">

This is div2</div>

</div>

</body>

</html>

Note: I had discussed this problem on stackoverflow and written the conclusion of the discussion here in this post.