SQL injections are another pain for developers. If you have created a users database then you might save the users: name and password. But what if any hackers breaks the security of your website and get in to your users account unethically. So this might make your users not to trust on you and soon many others will leave your website.
What is SQL injection:
SQL injection is a way of breaking the websites SQL query and customize it according to the hacker.
For example, if your website query for user to login is:
$u = "Ashwin";
$p = "TheCodePress";
mysql_query("SELECT * FROM users WHERE uname='$u' AND upass='$p' ");

But if i'm a hacker then i'll simply do something like this to break the security of your login system:
$u = "Ashwin' -- ";
$p = "Hacked";
mysql_query("SELECT * FROM users WHERE uname='$u' AND upass='$p' ");

So, what i have done ?
I have simply entered my correct username but after that i have added ' -- and this means comment in SQL.
So we have commented the rest of the portion of the query. That means we now don't need to enter password, we'll directly login into the website.

How to Solve this problem:
Well, the best way to do it without using any library or API is to use in built PHP functions. Such as mysql_real_escape_string(); and htmlentities();
If you are using mysql_real_escape_string function then all the vulnerable symbols will be parse, but it will parse safely.

PHP Code: So the code will be something like this:
$u = mysql_real_escape_string("Ashwin' -- ");
$p = mysql_real_escape_string("Hacked");
mysql_query("SELECT * FROM users WHERE uname='$u' AND upass='$p' ");

Is their any other better way to do it?
Yes, you can use the Library such as PDO or MYSQLI.
If you are more familiar with object oriented programming (OOP) then i'll prefer you to go with PDO.
Soon, i'll be too writing tutorials about PDO and Mysqli. You can learn it now on PHP manual.

Cross-site scripting (XSS) is a type of computer security vulnerability typically found in Web applications. XSS enables attackers to inject client-side script into Web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same origin policy.

                                                                                                                                -Source Wikipedia

Now to prevent our website from XSS attack, we are going to use a PHP function called: htmlentities()

This function of PHP will help your website to parse all harmful tags safely.

For example, if you have a website which displays comments submitted by the user and that comment system is XSS vulnerable, then if a user will enter some comment like this:

Javascript Code:
<script type="text/javascript">

     window.location = "http://www.google.com";

</script>

and now this comment is stored in your website's comment database. So whenever any user will meet the page where this comment is loaded from your database. Then the user will re-directed to the specified website.

So to prevent this problem we are going to use PHP function: htmlentities()

This function will replace all the < > / " ' = & and other symbols to a non-vulnerable signs. Like to display and in your website we use HTML Entities: &amp;

So in the similar way we are going to covert the vulnerable symbols in to non vulnerable HTML Entities.

You'll just need to wrap htmlentities() to the variable from which you POST the comment to the database.

PHP Code:

<?php

   $comment = htmlentities($_POST['comment_area']);

?> 

So that's how you can protect your website from XSS. In the next post we'll be discussing about how to prevent our website from getting hacked using SQL-injections.

About the javascript code, if we parse it using the htmlentities() function then this is the safe result and this can be added in our database.

Result:

&lt;script type=&quot;text/javascript&quot;&gt;
window.location = &quot;http://www.google.com&quot;;

&lt;/script&gt;

What we have done:

PHP Code:
<?php
$comment =
<<<comment
<script type="text/javascript">
      window.location = "http://www.google.com";
</script>
comment;

echo htmlentities($comment);
?>

These day's many websites, blogs have fade effects in their links which is trigger when user hover their mouse on the link and it's mostly implement using Javascript. In this article we'll do that using CSS3.

Loading a website or content inside a DIV in ajax using php is common, everyone learns it when they are new to ajax. I'm also a beginner in Ajax. Let's start learning it from beginning, covering all the history of ajax as well as how to use ajax.

History: 
If you want you can read the history of ajax at wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)

To run ajax you'll need a server if you own a hosting then you can use that to run the application or you can download the XAMPP local server / host.

First we'll create two files, one will be the index.html and another one will be url.php (Refer below image to understand the directory structure.)


In the inder.html file we'll add our javascript inside the head tags and we'll call that using click event.
HTML & Javascript: index.html source code.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loader() {
var ajaxhttp;
try {
//For major browser like Chrome etc...not for IE
ajaxhttp = new XMLHttpRequest();
}catch(e1) {
try {
//For IE6 and above
ajaxhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2) {
try {
//For IE5
ajaxhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3) {
//If all returns an error then we'll return false!
return false;
}
}
}
ajaxhttp.onreadystatechange = function() {
if(ajaxhttp.readyState==4) { //it should be 4 or 200
document.getElementById("frame").innerHTML = ajaxhttp.responseText;
}
}
ajaxhttp.open("GET", "url.php", true);
ajaxhttp.send(null);
}
</script>
</head>
<body style="margin:0px;font-family:trebuchet Ms;">
<h2 onClick="loader()" style="background:#2C2C2C;text-align:center;color:white;padding:15px;margin:0px;">Click to load the website in a DIV!</h2>
<div id="frame"></div>
</body>
</html>

<?php
   $url = "http://www.thecodepress.info";
   echo file_get_contents($url);
?>

Their are many websites which shares the code for creating new and awesome CSS3 buttons not only buttons their are also many other websites which shows some awesome styles for HTML/HTML5 element as well as inputs. In this post i'm sharing two button styles which is usually use for designing submit buttons.

When i was new to CSS3 what i used to do is to go on many CSS3 generators website and generate a button and try to understand the code what they have used. You can also try that after reading this post.

CSS: Style properties for button.

input[type=submit] {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}

input[type=submit]:hover {
	background-color:#dfdfdf;
}

input[type=submit]:active {
	position:relative;
	top:1px;
}

CSS: Style properties for button.

input[type=submit] {
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 17px;
	  padding:10px 15px;
	  text-decoration: none;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  -webkit-box-shadow: 0px 1px 5px #696969;
	  -moz-box-shadow: 0px 1px 5px #696969;
	  box-shadow: 0px 1px 5px #696969;
	  text-shadow: 1px 1px 3px #666666;
	  border: solid #3972b0 1px;
	  background: -webkit-gradient(linear, 0 0, 0 100%, from(#4bb007), to(#59d104));
	  background: -moz-linear-gradient(top, #4bb007, #59d104);
	  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
	  display:inline-block; /* IE is so silly */
}
input[type=submit]:hover {
	  background: #4bb007;
}