Categories
Web Design

How to use Variables in LESS CSS

LESS (dynamic stylesheet Language) allowed declare variable and use it when we need. We have to follow some rules to declare and use variable. I am gonna show you how to declare and use variable for LESS.

How to declare Variable :

Variable start with at-sign (@), so you have to write (@) as a first character of your variable name and use colon (:) to assign the value of that variable. Like:

/*Creating a variable. Variable name color*/
@color : #C00;

How to use variable :

 It is pretty easy to use those variable. just create a clsss/id. write a css properties (e.g color) and use @color variable as a value of that properties. like

.text{
  color: @color  /*Use Color variable*/
}

so the color of the text class will be (#C00). This is the simple use of variable. Actually when this code is compiled then then value of the color properties (#C00). I am showing you another example.

LESS CSS Code:

@text-color: #CCC;
@layout: 910px;

#header{
  width : @layout; 
  color: @text-color;
}

When this code will be compiled it become….

#header {
  width: 910px;
  color: #cccccc;
}

So you see how to declare and use variable. hope you guys are enjoy it.

 

 

Categories
Web Design

How to start LESS CSS

Less is dynamic stylesheet Language. Less is CSS preprocessors which represent an awesome way to extends CSS with dynamic behavior like variables, mixins, operations and functions. Less can run both server (Client-side Server and Server-side Server). In this tutorial I am gonna show you how to configure LEES in Client-side Server.

LESS Configuration for Client-side Server:

It’s is very easy to configure LESS in local/ Client-side server. Link your .less" stylesheets with the rel set to stylesheet/less:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Then Download the latest less.js from lesscss.org and include the js file into your <head> section of your page. Like:

<script src="less.js" type="text/javascript"></script>

NB: Make sure you have included stylesheets before the Script.

All have done, now I show you a simple example.

index.php

<!DOCTYPE html>
<html>
<head lang="en">
    <title>LESS Practice</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="less.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2 class="h2">Hello World</h2>
</body
</html>

styles.less

@color : red;
.h2{
  color: @color
}

Copy this code and paste in into your editor and then see the output.

Categories
Web Design

How to use CSS3 column-rule-width Property

column-rule-width is pretty new property in Cascading Style Sheet styling system Level 3. It’s used to create multicolumn module by a single line. I am gonna show you how o use column-rule-width.

How to use it:

<html>
<head>
    <style type="text/css">

        .multicolumn{
            columns: 180px 3;
            -moz-columns: 180px 3;
            -webkit-columns: 180px 3;
        }

    </style>
</head>
<body>

<p class="multicolumn">
     Lorem Ipsum sample text Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text

</p>

</body>
</html>

You can also add some other properties like.

.multicolumn{
  columns: 180px 3;
  -moz-columns: 180px 3;
  -webkit-columns: 180px 3;

  column-rule-color: #ccc;
  -moz-column-rule-color: #ccc;
  -webkit-column-rule-color: #ccc;

  column-rule-style: solid;
  -moz-column-rule-style: solid;
  -webkit-column-rule-style: solid;
  }

This is really awesome properties of CSS3

 

Categories
Code Area PHP

What is stdClass Object in PHP

PHP stdClass Object means the “Standard Predefined Classes ”. Generally it is generic empty class. And it is very effective way to use generic data object in your code. And it is Predefined class so no need to initialization.

Using stdClass you can create an object and assign data into it without having to formally define a class. let see how

Creating an Object

<?php
    //Creating an object ($ClassName)
    $ClassName = new stdClass();

    //Assigning data into Object ($ClassName)
    $ClassName->Name = "Your Name";
    $ClassName->Address = "Your Address";
    $ClassName->Cell = "Your Cell No";
?>

Print The Object

<?php
    print_r($ClassName);
?>

Output

stdClass

SO you guys see how to assign data into stdClass and out or that data. It is possible to convert this object into array. You can do that by using type casting.

 

 

Categories
Tools and Technologies

How to know Website Load Speed?

Website load speed means that how many time take to load a website. This is very important part for increasing website performance  Website load speed is the very key factor for web developer and web designer. web designer or developer should need to ensure website loading speed is good. To know your website loading speed click here and write your website address then you can see you website loading speed.

This is very easy tools of Google to know your website loading speed.

 

Categories
PHP

How to install WordPress

WordPress is the most attractive and very much user friendly content management system. WordPress is pretty easy to use . It has some attractive feature. People of none IT can easily install it and manage their website. In this tutorial I am gonna show you “How to install WordPress”

Step 1 : Download the latest version of Wordpree from wordpress.org and extract the file.

Step 2 : Copy the file into your htdocs directory. Rename your extracted file into your chosen name (e.g wordpress).

Step 3 :  Type localhost/wordpress in your browser and you will see this image. Then click the “Create a Configuration File

wordpress_ins_1

 

 

Step 4 : The you will see another page and click “Lets Go” then you will see this page.

 

wordpress_ins_2

Now you have create a database and replace database name ,username,password with your database name .username,password. then submit it and you will see another page. Just press “Run the install“.

Step 5 :  Now you have to set your “Site Title, Username,Email,Password and press “install wordpress

Step 6 : Finally you have to type “localhost/wordpress” in your browser to visit your website. and “http://localhost/wordpres/wp-admin” for your admin panel. Login into your admin panel with you give Username and Password which is set in step 5

This is the simple step for install the wordpress. How you guys are enjoy it.

 

Categories
CakePHP PHP

How to Install CakePHP

CakePHP is the most simpler, faster, powerful open source framework. it is written by PHP (Object Oriented)” . It’s follow the MVC (Model View Controller) pattern. Which is most interactive part of it. You can easily build your application require less coding. Let’s I am going to introduce how to Install CakePHP with some step.

Step 1 : Download latest version of CakePHP from cakephp.org and extract the downloaded file.

Step 2 : If you downloaded 2.2.3 then you will see cakephp-2.2.3 >> cakephp-2.2.3 this folder structure. You need to rename the second cakephp-2.2.3 with your desire name like cake.

Step 3 : Copy the folder and paste into your htdocs folder (your local server). and type in your browser “http://localhost/cake” (If you rename with cake name, otherwise write http://localhost/your_desire_name). Then you will see something like this image.

cake_install

Step 4 : After that you need to change the “Security Salt” and ”Security ChiperSeed”. To that go to app/config and open the core.php and you will see this code.

* A random string used in security hashing methods.
*/
    Configure::write('Security.salt', 'DYhG93b0qyJfIxfs2guVoUubWwvniR2G0FgaC9mi');

/**
* A random numeric string (digits only) used to encrypt/decrypt strings.
*/
    Configure::write('Security.cipherSeed', '76859309657453542496749683645');

You need to change those security.salt and security.CiperSeed. Like this

* A random string used in security hashing methods.
*/
    Configure::write('Security.salt', 'fesfsdfsdfsesfdlkfmma;lfm,as,mfcesR2G0FgaC9mi');

/**
* A random numeric string (digits only) used to encrypt/decrypt strings.
*/
    Configure::write('Security.cipherSeed', '7685645641654165416546549309657453542496749683645');

Step 5:  After that rename the file dsatbase.php.default to database.php . For doing that you have to go app/config and you will see the database.php.default

Step 6 : Then create a database and then open database.php file and you will see this code.

public $default = array(
        'datasource' => 'Database/Mysql',
        'persistent' => false,
        'host' => 'localhost',
        'login' => 'user',
        'password' => 'password',
        'database' => 'database_name',
        'prefix' => '',
        //'encoding' => 'utf8',
    );

change the host,login,password,database name with your host,user, password,database name.

Step 7: That’s fine, you have done all things. Now refresh you browser and see you browser.

Categories
Apache Tools and Technologies

How to Configure xDebug in XAMPP or Apache

xDebug is Extremely useful and popular tools for debugging error for PHP programmers.It’s really great debugger for PHP programming. Actually it’s working with Apache. To install or configure xDebug follow some simple steps given below.

Step 1: Open your php.ini file

Step 2 : Find xDebug and then you can see,

;zend_extension = "C:xamppphpextphp_eaccelerator_ts.dll"

Just delete (;) from that line.

Step 3: Then cope the following line and paste it into php.ini file

xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler=dbgp

 Step 4 : Finally restart Apache. Now you can find your error very smartly and easily.

 

Categories
Code Area PHP

What is PHP Ternary Operator

PHP Ternary Operator is the Shorthand of if/else statement. It’s is important to know “What is it, How to use it ” for php programmer.

It’s simply said that the shorthand of if/else statement. It’s rally easy to use and reduce you code.

Ternary Operator using “(condition) ? (return true value) : (return false value)” for execute the statement.It’s called Ternary Operator because it’s use three operands, one condition, one result for true, one result for false. Hear is an example.

<?php
    $age=10;
    $Status= ($age<18)? “Child”:”Adult”;
    echo $Status;
?>

Output

Child

NB:  The most important thing of using it reduce your code ,save the executing time.Makes maintaining code quicker, easier.

 

Categories
Code Area PHP

Image Uploader Script in PHP

Recently I am developing my component library to make my library rich. Because it’s reduce my production time. For this reason I have developed the image uploading class. Almost every application need image uploading part. So that I have decided to make a class to for image uploading. Which will is very easy to use and no need to extra settings. Just copy the script and use it. I have made it open source so anyone can use it.

<?php
/*
* Image Upload Class
*/
class ImageUpload
{
    /**
     * @param null $Path         Custom path where uploaded image will be stored
     * @param null $MaximumSize  Custom Maximum size in (Bytes) will be passed.
     * @param array $AllowedType Custom extension type (JPG|GIF|PNG)
     * @param null $Option       Extra options as array where we can define 'Image File Name', blah blah blah
     *
     * @return string Here return/output will be a string (Message)
     */
    public function ImgUpload($Path = null, $MaximumSize = null, array $AllowedType = null, $Option = null)
    {
        if (isset($_POST['submit'])) {
            if (!empty($_FILES['ImgName']['name'])) {
                $ImageFile = $_FILES['ImgName'];
                if ($this->CheckSizeLimit($ImageFile, $MaximumSize)) {
                    if ($this->CheckImageType($ImageFile, $AllowedType)) {
                        if ($this->CheckPath($Path)) {
                            if ($this->CheckPermission($Path)) {
                                if (move_uploaded_file($ImageFile['tmp_name'], $Path . $ImageFile['name'])) {
                                    $result = 'Image has been Uploaded';
                                    return $result;
                                } else {
                                    return false;
                                }
                            } else {
                                return "Directory do not have write permission,";
                            }
                        } else {
                            return "Directory could not found,";
                        }
                    } else {
                        if (isset($AllowedType)) {
                            return "Please select " . implode('"/"', $AllowedType) . " Image";
                        } else {
                            return "Please select jpg/png/gif image";
                        }
                    }
                } else {
                    $result = "Image must me less then" . $MaximumSize . " byte";
                    return $result;
                }
            } else {
                $result = 'You do not select any file';
                return $result;
            }
        }
    }

    /**
     * @param $ImageFile        Image File which is image is selected for upload
     * @param null $MaximumSize Custom max image size passed
     *
     * @return bool Return true or false
     */
    function CheckSizeLimit($ImageFile, $MaximumSize = null)
    {
        if (isset($MaximumSize)) {
            if ($ImageFile['size'] < $MaximumSize) {
                return $ImageFile['size'];
            } else {
                return false;
            }
        } else {
            return true;
        }
    }

    /**
     * @param $ImageFile         Image File which is image is selected for upload
     * @param array $AllowedType Custom extension type (JPG|GIF|PNG)
     *
     * @return bool Return true or false
     */
    function CheckImageType($ImageFile, array $AllowedType = null)
    {
        if (isset($AllowedType)) {
            $i = 0;
            while ($i < sizeof($AllowedType)) {
                if ($ImageFile['type'] == "image/" . $AllowedType[$i]) {
                    return true;
                    break;
                }
                $i++;
            }
            return true;
        } else {
            if ($ImageFile['type'] == "image/jpg" || $ImageFile['type'] = "image/png" || $ImageFile['type'] == "image/gif") {
                return true;
            } else {
                return false;
            }
        }
    }

    /**
     * @param null Custom path where uploaded image will be stored
     *
     * @return bool Return true or false
     */
    function CheckPath($Path = null)
    {
        if (isset($Path)) {
            if (is_dir($Path)) {
                return true;
            } else {
                return false;
            }
        } else {
            return true;
        }
    }

    /**
     * @param null Custom path where uploaded image will be stored
     *
     * @return bool Return true or false
     */
    function CheckPermission($Path = null)
    {
        if (isset($Path)) {
            if (is_writable($Path)) {
                return true;
            } else {
                return false;
            }
        } else {
            return true;
        }
    }

    protected function ImgSize($ImgFile = null)
    {
        return "OK";
    }
}

This is the class structure. you can get this code from github. There I have written more details about it. I hope this will be helpful for you development.