TheCodePress

Cross site request forgery (CSRF) Protection in PHP

2014-03-18T06:07:00.000-07:00

Nowadays almost every website applies CSRF protection in their forms to make it more secure and safe. In this post i'll be first create a Class called Security and then we'll be making some methods to achieve the goal of making a Cross Site Request Forgery secure forms. Because of Cross site request forgery vulnerability an attacker can simply submit or process the form on behalf of the user without knowing of the users. This kinds of attacks are mainly done on E-commerce websites to place bogus orders.

Creating the Class:

Using the Class:

What we are doing here is first creating the class and then creating the 'Static' methods. The first thing what we have done is to get the token and then to inject it into our HTML using hidden input field. We have chosen hidden input type because we don't want the token (hash) to be displayed on our webpage.
We are also saving the token in the session so that we can verify it when user submits the form.

To verify the token we have build up a method called 'checkToken()' which firsts checks whether the token in set or not and then checks whether the token submitted by the user matches the token saved in our session. If it is then it first unset the session and then it returns a boolean value TRUE. If not then it returns FALSE.

Note:
Make sure you before using the Class you use session_start() function to start the session.

Validating file extension in PHP

2014-02-22T05:00:00.000-08:00

While making a file uploading or sharing system many do mistakes while adding the extension checking functionality and because of that many users are able to upload vulnerable files such as upload a PHP or Javascript or any other file. To prevent it what we do is to make a list of allowed extensions. When the user will upload the file then we'll retrieve the file extension and check whether that file extension is in our list or not. This makes a beautiful layer of security and it's important to do it.

What mistakes many do?
The mistakes what many people do is to check the MIME type. It's not recommended to compare the MIME type. Because MIME type can be changed.
For example, let's take that a user has uploaded a PHP file which contains some terrible code that can produce a DDOS attack on your website. So if he has successfully uploaded that file and shared the URL to access it. If 10 users click on the same URL, then probably your website will go down. This will happen because of the server got crashed or if your host is strict against bandwidth then obviously the host will shut your website down.

What's the best option to protect against this problems?
The best option is to add a file extension check. So whenever a user tries to upload any file our script will first check for the extension. If the extension is in the list then the file can go for other checks like size etc. But if it's not in the list then we'll show an error to the user to notify him about it.

Live Demo Download Now
Here's the function:

Example usage:

Validating and Embedding Youtube and Vimeo video dynamically using PHP

2014-01-14T10:59:00.000-08:00

This function will help you to embed Youtube and Vimeo video dynamically. I made this for a project and now sharing it with you guys to use it in your projects or applications.
At the moment it's supporting Youtube and Vimeo URLs but soon i'll be adding support for other websites like Daliymotion etc.. When it will be completed i'll also share it with you through Github so follow me on Github https://github.com/thecodepress

Here's the function:
function v_embed($url) {
$video = Array();
$url = "video://".$url;
if(strpos($url, "youtube")==true) {
$host_pos = strpos($url, "youtube");
$video["host"] = "youtube";
}else if(strpos($url, "vimeo")==true) {
$host_pos = strpos($url, "vimeo");
$video["host"] = "vimeo";
}else {
$error = true;
}

if($video["host"]=="youtube") {
$video["id"] = substr($url, strpos($url, "watch?v=")+8);
}else if($video["host"]=="vimeo") {
$video["id"] = substr($url, strpos($url, ".com/")+5);
}else {
$error = true;
}

if(isset($error)) {
return false;
}else {
return $video;
}
}

Example Usage:
After pasting the code it's looking non-indented so it's suggested to download the source files of this tutorial which contain the example.

Don't forget it's just a small piece of code which is used for a project..so if you find any changes then you can comment it below or if you want you can use it anywhere. Soon a repository will be available on Github which will support many other video platforms.

DOWNLOAD SOURCE FILES

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Making URLs SEO friendly using .htaccess

2014-01-14T09:20:00.000-08:00

Making URLs SEO friendly is tried by many web developers and they use .htaccess to achieve it. Before proceeding to use .htaccess method you should enable Rewrite Module on your server. By default it's enabled.

By using this method you can remove the extension of a file and make it accessible without it's extension.
For example: http://www.example.com/example.php to http://www.example.com/example

That's quite interesting to have pretty URLs for search engines to index. Because the crawler index it according to the keyword.

Here the code which you have save in the root directory of your server.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

DOWNLOAD SOURCE FILES

Using Gmail’s SMTP as your SMTP Server with a PHP example.

2014-01-14T08:58:00.000-08:00

Introduction:

Gmail provides amazing features for developers; they provide developers to use their SMTP server to send emails from the application. In this article we’ll be configuring Gmail’s SMTP server for our application, we’ll also use an open source project called PHPmailer to send email from our Application.

Advantages:
Using Gmail’s SMTP servers for your application assures you that your email is sent, whereas sometimes when we use our own SMTP server we face problems like getting blocked or marked as spam by the automated spam filtering features. Another benefit I’ll like to mention here is if you use Gmail’s SMTP server then the emails which are sent from your application will be stored in Gmail’s Database. Another reason for using Gmail’s SMTP is that it’s not using Port 25 because there are many ISPs who are blocking the emails sent using Port 25.

Points to be noted:
Before starting to configure the Gmail’s SMTP server, it’s important for you to know that Gmail’s SMTP server only allows 99 emails per day. It means that you can only send 99 emails every day. The limit before was 250 emails per day, but because of high usage the limit decreased and came from 250 to 99 emails per day. Second point to note is that Gmail’s SMTP server requires authentication before sending emails. So make sure you have the password of the email which you’ll be using to send emails.

Configuration:
First you’ll need to login into Gmail account. After logging in navigate the settings button at the top right corner of your browser.

Now click on Settings, after clicking you’ll see a page like this:

Now click on Forwarding and POP/IMAP then you’ll see a like this:

Now just make sure all the setting which is shown above is the same for your account. If not then you can do it, it’s damn easy to do.

Below are the SMTP information which you’ll need to use in your application.

SMTP Server: smtp.gmail.com

SMTP Port: 465

SMTP Username: (your gmail email address, eg: example@gmail.com)

SMTP Password: (your gmail account password)

SMTP TLS/SSL: yes

Example Application:

Let us make an example PHP application which sends email using Gmail’s SMTP server.

In this example we’ll be using PHPmailer which is an open source project you can know more about it on their official Github. Here’s the PHP code:

<?php

function mail_sender($to, $subject, $body) {

require_once 'class.phpmailer.php';

$from = "YOU_EMAIL_ADDRESS";

$mail = new PHPMailer();

$mail->IsSMTP(true);

$mail->SMTPAuth = true;

$mail->Mailer = "smtp";

$mail->Host = "tls://smtp.gmail.com";

$mail->Port = 465;

$mail->Username = "YOUR_EMAIL_ADDRESS";

$mail->Password = "YOU_PASSWORD";

$mail->SetFrom($from, 'YOUR_NAME');

$mail->AddReplyTo($from,'RECEIVERS_NAME');

$mail->Subject = $subject;

$mail->MsgHTML($body);

$address = $to;

$mail->AddAddress($address, $to);

if($mail->Send()) {

return true;

}else {

return false;

}

Above we have created a function called mail_sender, this function will help us to send email without writing the SMTP details again and again. We have saved this function in a PHP file called mailer.php.

Now we are going to use this function.

<?php

require_once 'mailer.php';

$to = "RECEIVERS_EMAIL_ADDRESS";

$subject = "Test Mail Subject";

$body = "Hi<br/>Test Mail<br/>Localhost Test";

if(mail_sender($to, $subject, $body)) {

echo 'Sent!';

}else {

echo 'Error!';

}

When the email is sent then it will look something like this:

If you have followed all the steps and done everything thing properly then surely you’ll send an Email. If you have got any errors or problem then first thing you should do is to check whether you have configure the Forwarding and POP/IMAP properly. If still you find any problem then check that the details you used in your application is correct. If still you receive any error then comment below.

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Creating custom HTML tags which support all Major Browsers

2013-11-09T11:07:00.001-08:00

Do you know that we can create custom HTML elements/tags? when i got to know about it i was like WOW! that will be kinda awesome and hard. But later when i researched about it i found it's really easy for anyone to create custom HTML elements. You don't need to do thousands of lines of coding.

For creating a HTML element/tag you just need to write the name of it like the standard HTML element/tag.
For example:
<computer brand="Acer" price="28,900" ratings="4" id="pc">Acer Aspire R7</computer>
you are done by creating a custom HTML element. But this will only support all major browsers, excluding Internet Explorer.

To make the custom HTML tag work with Internet Explorer you'll just need to write a single line of Javascript.
<script type="text/javascript">
document.createElement("computer");
</script>
this will create an HTML element named as "computer".
Another point to note is, by default a custom element has a display inline. But you can change that with CSS.
<style type="text/css">
#pc {
display:block;
}
</style>
Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Using Header function in PHP

2013-11-07T10:48:00.001-08:00

Header function in PHP is quite powerful function. You have came across with such situations like: if some condition is false then the user should re-directed on the Index page of your website or may be after some seconds he should. Also Header function is useful while send the Content type of your webpage.

PHP: Re-directing to a webpage using Header Function.
<?php
if(isset($_GET['id'])) {
// Further Code..
}else {
header("Location: index.php");
}
?>

PHP: Re-directing to a webpage after 10 seconds using Header Function.
<?php
if(isset($_GET['id'])) {
//Further code...
}else {
header("Refresh: 10; url=index.php");
}
?>

PHP: Header Function to output a PDF file.
<?php
header('Content-type: application/pdf');
?>

PHP: Header Function to convert PHP file into Text File.
<?php
header('Content-Type: text/plain');
echo "This is just a text file...we have converted a PHP file into a Plain Text File.";
?>

PHP: Header Function to convert PHP file into XML.
<?php
header("Content-type: text/xml");
echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
echo "<person>";
echo "<name>Ashwin Pathak</name>";
echo "<age>14</age>";
echo "<twitter>@TheCodePress</twitter>";
echo "</person>";
?>

Their are many other header functions you'll discover it by searching.

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Preventing PHP websites from SQL injections

2013-10-21T10:38:00.001-07:00

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.

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Protecting your website from Vulnerable Script Tags and Codes

2013-10-16T10:46:00.000-07:00

It's really important for you to protect your website from hackers, but without removing any features from your website.
In this post we are going to understand how to solve the problem of XSS - Cross Site Scripting problems.

What is XSS:

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: &

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:

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Counting your website's loading time using PHP

2013-10-14T10:45:00.001-07:00

Counting your website's loading time is very useful and helpful for you to know that you need to make it more efficient or not.
Here, in this tutorial we are going to use PHP microtime() function to get the time and we'll be formatting it using number_format() function.
PHP code:
<?php
$mt = microtime(true);
$format_time = number_format(microtime(true) - $mt, 2)." Seconds";
echo $format_time;
?>

If you are trying this code block on your on a blank page then probably you'll get 0.00 Seconds in results.
So to test it on a blank page follow this block of code:

PHP code:
<?php
$mt = microtime(true);
file_get_contents("http://www.thecodepress.info");
$format_time = number_format(microtime(true) - $mt, 2)." Seconds";
echo $format_time;
?>

I'll always recommend you to use this but if you don't want to display it on your website then you can do something like commenting it something like this:

echo "";

So after using that method the seconds will display in your website's HTML source code.
Another method which some other sites are using is to add the seconds at the bottom of the page (footer) you can too follow that.

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Getting Page URL using Javascript

2013-09-21T03:16:00.000-07:00

Getting Page URLs using Javascript is very useful in real life projects, it's been used by Facebook, Twitter for their share/tweet buttons, because when we click on the share button then we get the URL of the page we are browsing, and that's done using Javascript.

var url= "";
if (typeof this.href === "undefined") {
url = document.location.toString().toLowerCase();
}
else {
url= this.href.toString().toLowerCase();
}
Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Fade effect on hover using CSS3

2013-09-12T11:17:00.001-07:00

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.

a {
color:red;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
text-decoration:none;
}
a:hover {
color:blue;
text-decoration:underline;
}

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Loading website in a DIV using Ajax and PHP

2013-08-17T03:28:00.000-07:00

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>

We are using try..catch construct, which is a powerful exception-handling technique that was initially implemented in OOP languages. Basically, when an error happens at run time in the JavaScript code, an exception is thrown. The exception is an object that contains the details of the error. Using the try..catch syntax, we can catch the exception and handle it locally, so that the error won't be propagated to the user's browser.

Now we'll make url.php file to send the data from the server.
PHP: url.php source code.

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

Basically the url.php file loads the content of the specified URL which is fetched from variable url.
and then we are printing the contents of the file. So when our index.html tries to get the responseText from the server, the server sends the contents of the file and that's the reason for the website to be displayed.

Demo screenshots:

Before the page will load this will look like this and when we'll click the black header the page will load the website without refreshing the page.

When the user will click the black header then the specified website will load.

Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:

Simple and awesome CSS3 button design.

2013-08-14T04:30:00.000-07:00

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;
}

Have a look at the live demo also you can download the source file:

Basic pagination with Mysql, PHP

2013-07-20T11:05:00.001-07:00

Have you ever noticed why blogger or wordpress or any other blogging platform have added a 'Next Page' button or you ever noticed that why facebook directly won't shows all the posts as well as twitter won't load the tweets ? The reason is: while loading tweets or loading status or articles from database developers loop over the database again and again and if their are many thousands or hundreds of status, tweets etc.. than the page get slow/crashes. That's the reason why they use pagination. By the way facebook and twitter loads their feed using Ajax.

Let's first connect to our database:

PHP: Connecting to mysql database.

<?php
$db_host = 'localhost'; // your mysql host
$db_user = 'ashwin1999'; // your mysql user name
$db_pass = ''; // password not set
$db_name = 'pagination';
mysql_connect($db_host, $db_user, $db_pass);
mysql_select_db($db_name);
?>

After connecting let's move on adding tables and columns. First we'll create a table called 'page' and then we'll create column which name will be 'data' just for example i'm adding this names. You can even use PHPmyadmin (PMA) to make tables columns. Also i have added numbers from 1-20. Refer below image to understand it properly.

Let's begin with PHP code blocks!

PHP: Pagination code

<?php

@$p = $_GET["page"]; //Getting Page number

$pages_query = mysql_query("SELECT COUNT(data) FROM page"); // Counting total rows

if($p=="" || $p=="0" || $p>$pages_query) { //checking is p is set and greater than 0

$p = 1; //if not set than setting it to 1

}

$per_page = 5; //Total data to display per page

$pages = ceil(mysql_result($pages_query, 0) / $per_page); //dividing total rows with total data to

display for example 20/10=2 so 2 pages

$start = ($p - 1) * $per_page; // subtracting $p value with 1 and multiplying it with $per_page for example 2-1=1*10 = 10

$query = mysql_query("SELECT data FROM page ORDER BY data ASC LIMIT $start, $per_page"); //Running our query

while($fetch_data = mysql_fetch_array($query)) { //fetching data using array method

echo $fetch_data["0"]."<br />"; //printing the data

}

for($a=1;$a<=$pages;$a++) { //using for to display number

echo "<a href='?page=$a' class='page_link'>$a</a> "; //printing numbers also using link tags

}

It just looks hard but it's not hard, just need to do the subtract and divide part properly and the it's done.

Adding effects in Image using CSS3

2013-07-06T11:54:00.002-07:00

Adding effects in image using CSS3 sounds cool, because many of you might be using photoshop or picasa or instagram or any other image editing application. So let's use CSS3 to add effects in image.

Before you start read this carefully:

The filter property in CSS3 from which we'll add effects is only supported to -webkit- it means only Google Chrome, Safari supports this CSS3 property.

Also i have tried to use -moz- to render that effects in Firefox but it didn't worked. So after some research about it i got to know that it only supports -webkit-.

Okay, first let's start.

CSS: Changing image opacity using CSS3 property: -webkit-filter:opacity(100%);

.image_opacity {
-webkit-filter: opacity(100%); /*Changing image opacity*/
}

CSS: Adding Negative effect in image using CSS3 property: -webkit-filter:invert(100%);

.image_negative {
-webkit-filter: invert(100%); /*Adding negative effect*/
}

CSS: Adding Black & White(Gray scale) effect using CSS3 property: -webkit-filter: grayscale(100%);

.image_b_w {
-webkit-filter: grayscale(100%); /*Adding gray scale effect*/
}

CSS: Making images blur using CSS3 property: -webkit-filter: grayscale(100%);

.image_blur {
-webkit-filter: grayscale(100%); /*Making image blur*/
}

CSS: Adding saturate effect using CSS3 property: -webkit-filter: saturate(200%);

.image_saturate {
-webkit-filter: saturate(200%); /*Adding saturate effect*/
}

CSS: Playing with RGBA using CSS3 property: -webkit-filter: hue-rotate(100deg);

.image_hue {
-webkit-filter: hue-rotate(100deg); /*Playing with RGBA*/
}

CSS: Adding Sepia effects using CSS3 property: -webkit-filter: sepia(100%);

.image_sepia {
-webkit-filter: sepia(100%); /*Adding sepia effect in image*/
}

CSS: Adjusting Brightness in image using CSS3 property: -webkit-filter: brightness(140%);

image_bright {

-webkit-filter: brightness(140%); /*Adjusting brightness in image*/

}

CSS: Adjusting Contrast of image using CSS3 property: -webkit-filter: brightness(140%);

image_contrast {

-webkit-filter: contrast(110%); /*Adjusting Contrast of image*/

}

We have used almost many main effects and now one more awesome thing, we can combine it all together using CSS3 property: -webkit-filter: sepia(50%) invert(100%) opacity(50%);

CSS: Combining it, all together CSS3 property: -webkit-filter: sepia(50%) invert(100%) opacity(50%);

.image_combine_effect {
-webkit-filter: sepia(50%) invert(100%) opacity(50%); /*Example combining of effects*/
}

For more information about the filter property read this documentation here: http://www.w3.org/TR/2013/WD-filter-effects-20130523/

And yes, the reason for using -webkit- before every property is to render the property in -webkit- browsers like Google Chrome, Safari.

And if you want to archive this effects using PHP then PHP's GD library is made for you. Articles coming soon for GD library.

Non-database page views counter using PHP

2013-06-23T00:59:00.001-07:00

Page views counter is very helpful to get numbers of visitors visiting your website, but most of time many people saves that in database and in text files. In this tutorials we are going to save it in text files.

PHP:

<?php

function hits(){

$ips = Array("127.0.0.1"); //Enter ip address which you don't want count

$file = "hits.txt"; //file name

$ip = $_SERVER["REMOTE_ADDR"]; //getting ip address

if($ips[0]!=$ip){ //checking that 'ips' are not matched with var 'ip'

if(file_exists($file)){ //checking for hits.txt exists or not

$fr = fopen($file, "r"); //Opening file for reading

$fre = fread($fr, filesize($file))+1; //reading and incrementing 1

$fh = fopen($file, "w"); //Opening file for writing

$fw = fwrite($fh, $fre); //writing

}elseif(!file_exists($file)){ //if not exists var 'hits.txt' then to create one

$fh = fopen($file, "w"); //opening file for writing

$fw = fwrite($fh, "0"); //writing 0 to start from zero

echo "File Created."; //displaying a positive message

}

hits(); // calling our function

The ideal way to use this script is not to make the numbers of hits visible to your users, but if you want so make it visible then read the file and print it.

Add this block of code after calling the function 'hits()'.
PHP:

$fr = fopen("hits.txt", "r"); //open file to read
$read = fread($fr, filesize("hits.txt")); //read the file
echo "Total Views: ".$read; // print the contents of file 'hits.txt'

Moving a div according to mouse coordinates using Javascript.

2013-05-27T09:20:00.002-07:00

This post is similar to the post "Move a HTML Div with CSS and Javascript, No JQuery!" but in that post we are using user specified pixels by allowing user to add numbers of pixel in the text box. Here, in this post we are going to do the same thing but in a different way. We are going to use the coordinates of where our mouse clicks. Run the code in your browser you'll like it!

Before i start, let me say you, this question was asked by one reader who want to move his div according to mouse click. Well he's my uncle and he was taking my test :D.

Ok, let's get back to topic and implement javascript.
First of all before you start writing HTML don't forget to add doctype on the start or it will not support / it will not work. Because of doctype i'm adding full code from start to end below.

Javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hey, this is for you!</title>
<style type="text/css">
#box {
background-color:black;
color:white;
padding:90px;
position:absolute;
display:block;
font-family:verdana;
font-size:20px;
}
</style>
<script type="text/JavaScript">
function moves(e){
var cordx = 0;
var cordy = 0;
if (!e) {
var e = window.event;
}
if (e.pageX || e.pageY){
cordx = e.pageX;
cordy = e.pageY;
}
else if (e.clientX || e.clientY){
cordx = e.clientX;
cordy = e.clientY;
}
document.getElementById('box').style.left = cordx;
document.getElementById('box').style.top = cordy;
}
</script>
</head>
<body onClick="moves(event)">
<div id="box">Hey! this is for you, enjoy :)</div>
</body>
</html>

In the code we are using 'clientX' and 'clientY' to get the coordinates. We are also using 'pageX' and 'pageY' to get he horizontal coordinate of the event relative to whole document.
To understand more or learn more about 'pageX', 'pageY', 'clientX', 'clientY' you can refer to the mozilla documentation.
PageX: https://developer.mozilla.org/en-US/docs/Web/API/event.pageX
PageY: https://developer.mozilla.org/en-US/docs/Web/API/event.pageY
ClientX: https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
ClientY: https://developer.mozilla.org/en-US/docs/Web/API/event.clientY

I think so i have given the whole source code so it's no need to upload the file and share download link.

A button hit counter for your PHP website.

2013-05-24T10:47:00.001-07:00

In this tutorial, i'm going to share how to make a button hit counter, it's a basic level PHP so many can understand it and modify it. For this tutorial i'm going to save the counts in a text file, but if you want you can store it in a database.

PHP:

<?php
$file = "data.txt"; // Giving a name to our text file which will store numbers of counts
if(!file_exists($file)){// Checking wether file data.txt exists or not
$fo = fopen($file, "w"); //If data.txt file dosen't exists then to create a new
fwrite($fo, "0"); // Start to count from zero
fclose($fo); // closing file
}
@$click = $_POST["count"]; //Getting button value with POST method
if(isset($click)){ // Checking is set of not, it's a technique to get click
di(); //calling our function di()
}
function di(){
global $file; //making our file varail which contains file name global
$clicks = file($file); //reading our data.txt file
$clicks["0"]++; // incrementing 1, for example if value is 1 then to add 1
$fo = fopen($file, "w"); //opening our file
fwrite($fo, $clicks["0"]);//writing our incremented value
fclose($fo); // closing file
echo $clicks["0"]; // printing total numbers of clicks
}
?>
<form method="POST" action="counter.php">
<input type="submit" value="Download Now" name="count" />
</form>

Make it look more beautiful by adding few CSS and add it on your site :).

Change Background Color on every refresh using PHP and CSS

2013-05-05T02:48:00.004-07:00

In the last post you have seen how to change background image of the website using PHP. But what if you want to change the background color of a website?. Let's see how to do it using PHP and CSS.

PHP CODE: PHP code to make background color change on every refresh.

1. <?php

2. $colors = Array("#242424", "#7A7A7A", "#EBEBEB", "#292929", "#940000"); //Making colors
array

3. $color_change = "0"; //Assigning a variable with no value

4. $change = rand(1, 5); //Getting random number

5. switch($change){

6. case 1: $color_change = $colors[0];

7. break;

8. case 2: $color_change = $colors[1];

9. break;

10. case 3: $color_change = $colors[2];

11. break;

12. case 4: $color_change = $colors[3];

13. break;

14. case 5: $color_change = $colors[4];

15. break;

16. default: echo "Something going wrong!";

17. }
18. ?>

We are done with PHP and now we are going to embed PHP in HTML.
CSS CODE: Here, in CSS code we'll be embed PHP code.

1. body {
2. background-color:<?php echo $color_change; ?>;
3. }

Now stick it all together in HTML document and debug it.

Change background on every refresh using PHP and CSS

2013-04-19T11:22:00.001-07:00

Have you seen the old TWITTER on which after every refresh the site changes it's background image not only twitter the old AOL was doing the same and many other major and minor sites are doing it. By using this method you can also change the background image of your website. In this post i have implemented few lines of code which will help to change your sites background image on every refresh. Don't forget to check the live demo.

Before you start typing codes you'll need to get suitable background images, and change it's name to 1, 2, 3 and so on and also the extension of images should be same, and then need to gather it in a folder. For example:

I have made a folder which name is Backgrounds, and in that i added this images with same extension and numerically sorted.

Now, we are ready to use PHP to make the function work.

PHP: Few lines of PHP code can do many things!.

1. <?php
2. $bg = rand(1, 5);
3. $bgchange = $bg.".jpg";
4. ?>

We are using a rand() to get random numbers and assigned it to a variable $bg. Now we got random number and now we need to add extension to it. All my backgrounds images are in .JPG format (If any of your image is in other format you can download any image converter and convert it to a suitable format).

If you will print $bgchange variable you will find any number between 1 to 5 with .JPG for example : 1.JPG or 2.JPG etc..
Now we will use CSS to change our background image :

CSS: Changing Background of HTML document with CSS.

1. body {
2. background-image:url("backgrounds/<?php echo $bgchange; ?>");
3. background-repeat:no-repeat;
4. }

You can also do this using javascript. For doing it will javascript you can use Math.ceil() or math.floor() and you'll also need to use Math.random() function inside Math.ceil or Math.floor function,and then need to multiply with total numbers of images. For example :

Javascript : For doing the same thing did with PHP and CSS.

1.   <script type="text/javascript">
2. var totalimgs = 5;
3. function bg_change() {
4.   var count = Math.ceil(Math.random()*totalimgs);
5.   document.body.background = "backgrounds/"+count+".jpg";
6.   document.body.style.backgroundRepeat = "no-repeat";
7. }
8. </script>

The above Javascript should be added in head tags <head>...</head>.
And the function bg_change() should be called in body tags <body>...<body>.
HTML : Calling bg_change() function in body.

1. <body>
2. <script type="text/javascript">
3. bg_change();
4. <script>
5. </body>

For background Images you can download it from Flickr or Google Images and other services. Also you can buy it from other online services.

Filter inappropriate words using PHP

2013-04-14T05:06:00.001-07:00

Many times what happens when you add a contact form to your website, many users use abusive language / words to give feedback or they spam with abusive words. So we need a solution to not allow them do that. In this post i'll show you a method in which we are going to use a pre-defined PHP function, which will help us to convert abusive words in to any other word or to detect the abusive word and then not to accept the feedback.

Find your Internet Protocol (IP) Address and Remote Port using your self made PHP Script

2013-03-25T03:48:00.001-07:00

Internet Protocol (IP) address is a unique key / number of your personal or your office computer. Most of the people who want to know their PC's / Laptop's IP Address, they directly go to IPChicken.com or any other IP Finding service. What if you create your own PHP Application which finds your PC's / Laptop's IP Address ?. In this post i'll show you few lines of PHP script which will help you to find your IP address and also it will find Remote Port.

PHP Code : To get the Internet Protocol Address.

1. $_SERVER["REMOTE_ADDR"];

That's the short code to find your IP address. Now, let's find our PCs or Laptops Remote Port. To find remote port we will again use the variable $_SERVER[]; but we will assign different value to it.

PHP Code : To get the Remote Port.

1. $_SERVER["REMOTE_PORT"];

Great! you also got the remote port. Now, simply print it using echo or using print. The preferred is to create a variable and then add the $_SERVER[]; variable.
Also, after making it share with your friends :P

What IP means :
Every computer that communicates over the Internet is assigned an IP address that uniquely identifies the device and distinguishes it from other computers on the Internet. An IP address consists of four parts. For example : 59.182.17.16

What Remote Port Means :
In TCP / IP networking ports are the endpoint to a logical connection. When you type in a website address your computer is opening up a connection on a remote port and asking for the web pages to be sent to your computer. There are 65535 ports.

Subscribe to my blog :

How to make a premium wordpress blog, without paying single buck!

2013-03-22T11:01:00.000-07:00

Instead of writing a huge explanation on making a premium wordpress blog for free i thought to make a video of it. So it will be easier me to explain and also it will be easier for you to understand. So in this screen cast i'll be explaining you of creating a wordpress (WP) premium blog for free. Also i'll be introducing a free trusted web hosting service...

The hosting service is very popular - it's 000webhosting.com
Hope so you will like the video. Also if you want any help or didn't understand how to setup then ask me anytime!
For a better quality view the video on youtube.
Thanks for watching and also if possible then subscribe my channel :P

Move a HTML Div with CSS and Javascript, No JQuery!

2013-03-15T11:45:00.002-07:00

On the web, when anyone searches about "how to move div or any other element" their are thousands of results, but only few of results are teaching it with Pure Javascript. In this tutorials i'll also teach you the same but i'll also add little bit of twist in it. Check the demo, i'm sure you will like it.

I know i'm bad in selecting color schemes, now you guys also know that after seeing the above image..!

Now create a div in HTML, which is very simple...and id should be 'tcp' or anything else what you want to add.

1.   <div id="tcp">
2.   <input type="text" maxlength="3" id="mtop" placeholder="Add pixel to move top" />
3.   <input type="text" maxlength="3" id="mleft" placeholder="Add pixel to move left" />
4. </div>

After creating div we will style it...Create a external or internal or inline stylesheet, depends on you.

In stylesheet the position should be absolute.

1.   #tcp {
2.   position:absolute;
3.   background-color:#ebebeb;
4.   }

I'm not adding too much style over here, but in the demo i have added many styles.
Now, let's add the main ingredient; which is javascript.

1. function moveit(dmove, gtop, gleft, numvalid){
2. dmove.style.top = gtop.value + 'px';
3. dmove.style.left = gleft.value + 'px';
4. }

Now we will create a new input type which is button. We are making it to call our 'function moveit()'.

1. <input type="button" value="Move" id="done" />

Ok, Now we'll add 'OnClick event' and we will call our 'function moveit()' also we will pass parameters.

1. <input type="button" value="Move" id="done"
OnClick="moveit(document.getElementById('tcp'), document.getElementById('mtop'),
document.getElementById('mleft'))" />

The OnClick function is too large, so it's not fitting to my blog's body..doesn't matter.

If you will try it, it will work. But it's not moving smoothly, i'll try it..later, i'll add one more post on how to make it to work smoothly.
The first parameter of 'function moveit' in which we are calling our 'div' which id is 'tcp' and the other parameters are in which we are calling our text boxes.

Check out TheCodePress on Facebook : http://www.facebook.com/Thecodepress
Check out TheCodePress on Twitter : https://twitter.com/TheCodePress
Don't forget to subscribe the blog :