Yii Framework Tutorial Set 1

Installing Yii:       

Installing of Yii Framework in your server is not a big thing. It is a quit simple to do. Even a person with not having web experience can also do it.

Installation involves only two steps:     

1. Download latest and stable version Yii Framework from yiiframework.com. Note this is free since it is a open source.   

2.Unzip the Yii file to a Web-accessible directory (Means in your server either local server or web-hosted server).      

That is it. You have done it. Now you can access Yii framework Since you have installed.

 

This insallation process does not end with just unpacking it in your sever. You have to do one more thing called Requirement checkup as below. It is mandatory to check it up because because this will let you know whether your server has satisfied all the requirements of yii framework. These requirements includes php version, database and so many other things.

to do this just paste this your in your browser.

http://hostname/path/to/yii/requirements/index.php

if it is local server the http://hostname/yii/requirements/index.php

your browser will display the following thing.

all the things must be passed and should not fail. You may get some warnings but that problems wont lead to huge problems.

Important:

          Yii Framework requires PHP 5.1, so Your server must have PHP 5.1 or above version of PHP. Yii team have tested yii framework with Apache HTTP server on Windows and Linux and It may also run on other Web servers and platforms, provided with PHP 5.1 or above version of PHP as mentioned in their site.

Don't forget to view my tutorial on youtube at https://www.youtube.com/watch?v=G7_2tdZRQnE

Your First Yii Application:

           It will be easier to create basic app with yiic (command line tool) in Yii Framework. We have an another tool Gii (powerful web based code generator) to automatically create code for certain tasks like CRUD Operations.

To create basic skeleton for Yii App:

% cd WebRoot
% php YiiRoot/framework/yiic.php webapp firstapp

Where,
Webroot -> Your your web root location
php -> your php.exe location
firstapp -> the folder in which you create your app

These works are done by yiic, this is a command line tool provided by yii team.

Nice it is quit nice to do know.
 
  That is it you have created basic structure for yii application.

NOTE:

Please continue this in my next post at http://webdevelopmentcodes.blogspot.in/2014/04/yii-framework-tutorial-set-2.html and don't forget to view my video at https://www.youtube.com/watch?v=G7_2tdZRQnE

Side Bar in Yii Framework

Introduction:

In this post I will show you how to put sidebar in Yii framework Web application.

This Sidebar can be displayed on the left or right side of the browser. This slides in on mouse over on the sidebar and slides out automatically when user mouse leaves the sidebar.

Already we have leftsidebar and rightsidebar extensions in Yii framework. But these can be used to display sidebar on either left side or right side of the browser.

But this extension will avoid the use of two different extensions for displaying sidebars on left and right side of browser.

This sidebar can be used to display menu or some other useful things in your application.

 Download and Usage Details:

     You can download this extension at http://www.yiiframework.com/extension/sidebar/ . For Further Comments Please comment below.

      Extract folder to your protected/extensions/ folder.

Example Usage:

You have to specify 'position' to be left or right. If you don't specify it will display in right side. 

in Your view file

$this->beginWidget('application.extensions.sidebar.Sidebar',
array('title' => 'Menu', 'collapsed' => true, 
'position'=>'left'));

//here you display a cmenu or gridview or any other 
thing as per your needs.
//or you can simply display contents form variable like below

echo $var;
$this->endWidget();

If you don't specify 'position', Then a right sidebar will be displayed by default. So, if you want a right sidebar then you don't need to specify position in the widget.

Result:

Like below a sidebar will b shown either left or right side of your browser based on 'position'.

 Arrow mark as in rightsidebar extension:

You can able to display an arrow mark in your sidebar by just doing some modification the extension. For this do the below steps.

In Sidebar/sidebar.php change the below things

Step 1: Change This,

echo '<div class="title">' ;
        echo  CHtml::encode($this->title);
 echo '</div>';

To,

echo '<div class="title">' ;
        echo CHtml::encode($this->title);
        echo CHtml::ajaxLink('&gt;&gt;', '', false, array('id' => 

 'toggle_left_menu'));     
        echo '</div>';

Step 2: Change This, 

echo '<div class="title">' ;
  echo  CHtml::encode($this->title);
        echo '</div>';

To,

echo '<div class="title">' ;
        echo CHtml::encode($this->title);
        echo CHtml::ajaxLink('&gt;&gt;', '', false, array('id' => 

 'toggle_right_menu'));
        echo '</div>';

and in js folder, 

Step 3: In leftsidebar.js line 64 change Pin and Hide.
Step: 4 And finally in rightsidebar.css line 61 change float to right.

That is it. Now a arrow mark will be displayed in the sidebar. You can click on the arrow mark to display and again click to hide the sidebars.

I think it is useful to someone.

How to Use Jquery?

Introduction:

           Jquery is a lightweight JavaScript Open Source library. jQuery is to make it much easier to use JavaScript on your website since it is a Lightweight Component.

jQuery almost simplifies lots and lots of lines in basic javascript and do the same task within a single line. So most of developers use jquery only instead javacsript.
The scope of jquery just not end with javascript task, With this jquery we can do
               ->Ajax calls(with this you can call a PHP page and insert or change data)
               ->DOM (Document Object Model) Manipulation
               ->We can change CSS of the Page
               ->Add Effects to text or images
               ->And lots more
Before Starting to work on this you must know,

• HTML
• CSS
• Javascript 

How to use:

        Before using Jquery You must have jquery library. You can download it from Jquery.com for free of cost. Then insert it in your html page like you insert your javacsript page that is it. Here i will show you a demo,

 <head>
<script src="jquery.js"></script> //this is your downloaded jquery librray
</head>

Syntax:

<script type="text/javascript">

$(document).ready(function(){
//here goes your jquery functions
  });         

 </script>

               

$(document).ready(function(): Always we must start to use jquery function within this function. The Reason is we must start functions once our document is fully loaded in the page else it will not be a safe one, It results in unwanted actions.

Examples with explanation: 

Let's say we want to hide all <h2> elements in the page. It can be done easily in this jquery.

HTML: <h2>Heading name</h2>

to hide the h2 element You just use this:

       $(document).ready(function(){
    $("h2").hide(); //this will hide the h2 elements fully
  }); 

         The above code hides all h2 elements in the entire page. But if we need to hide only a particular h2 element in the page then we have to use selectors.

What is selector?

           Selector is a Class or ID of the particular element. Let me explain with our above h2 example

HTML: <h2 class="classname" id="idname">Heading name</h2>

 In this example we have two selectors "classname" (via class) and "idname" (via id).

Note: We have to use classname selector as .classname and idname as #idname in jquery function

  

Now move to our problem, Our jquery code here hides all h2 elements. We have clear this problem with this selectors help. Here is the trick

$("#idname").hide(); //this will hide elements only with "idname"

$(".classaname").hide(); //this will elements only with "classname". 

Other Selectors in Jquery:

$("*")   It selects all elements        $(this)   It selects current element     $("p.intro")   It selects <p> element with 'intro' as classname $("p:first")   It selects first <p> element in the entire DOM $("ul li:first")   It selects first <li> element in first <ul> $("ul li:first-child")   It selects first <li> element in all <ul> $("[href]")   It selects all element with href as attribute $("a[target='_blank']")   it selects all links with target value as blank $("a[target!='_blank']")   it selects all links with target not as blank

PHP file upload and Saving

PHP file upload and Saving:

                PHP file upload and saving in server is simple. We need to have a HTML form and PHP script to get the file and upload to server. Here i am going to tell you the step by step guidance to do this.

  HTML form:

<form action="file.php" method="post" enctype="multipart/form-data">
//First start aform tag, Method may be POST or GET. POST method is recommended since it is secured, Then encryption type
<label>File Name:</label>
//this is jus a label
<input type="file" name="myfile" id="myfile"><br>
//file is the tag to upload files
<input type="submit" name="submit" value="Submit">
//this is normal submit button to submit the form
</form>
//that's it

Now we have to write PHP script to do further things.

PHP Script(file.php); 

The following code is to just verify whether file is uploaded correctly or not. Later i will show you how to store the uploaded file into server.
<?php
if ($_FILES["myfile"]["error"] > 0)
//first check whether errors are there or not. If not then proceed
  {
  echo "Sorry Have some Error: " . $_FILES["myfile"]["error"] . "<br>";
//Displays error message and exact reason for error
  }
else
  {
//if no error then display details of file
echo "Well your file has been uploaded successfully in to server";
  echo "File name: " . $_FILES["myfile"]["name"] . "<br>";
  echo "Your File Type: " . $_FILES["myfile"]["type"] . "<br>";
  echo "Your File Size: " . ($_FILES["myfile"]["size"] / 1024) . " kB<br>";
  echo "Your file stored : " . $_FILES["myfile"]["tmp_name"];
  }
?>

That is it. Now we move on to PHP script to to store files in server Location

 PHP Script:(to store in file)

  As everyone do, We also Store files in Upload folder. Here is the code for that. Just copy and paste it after above code. If you do like this then you can able able to see uploaded file information and success message if uploaded correctly.

if (file_exists("upload/" . $_FILES["myfile"]["name"]))
//we must check whether file is Already exist or not. We must do it for hassle free operation
      {
      echo $_FILES["file"]["name"] . " already exists. ";
     //if it exist then we have to say exist
    // we can upload even if it is already exist by renaming it. I showed you the codes below for that
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["myfile"]["name"]);
//it is PHP function to move files to server
      echo "Stored in: " . "upload/" . $_FILES["myfile"]["name"];
//final message to echo stored location
      }

PHP script:(to rename before Store in folder)

 Always we need to rename the files before saving to server. Because users may upload files with same name. If that happens then the old file with same name gets replaced with new one. So we need to rename all files before uploading to server. For that use the below piece of code:  $randomdigit=rand(0000,9999);
//generate a randome number. You may use letters or alphanumeric also
$filename=$_FILES["myfile"]["name"];
//get the filen ame in to $filename
$newfilename=$randomdigit.$filename;
//Now combine random number and filename to get ne file name
$path= "resumes/".$newfilename;
$path variable holds the location of folder
copy($_FILES["file"]['tmpname'], $path);
//this php function can also upload files to server like move_uploaded_file

Check one more time whether new file name is exist in upload/ folder. If it exists the generate random number one more time and then copy to server.

That is it.

 

JavaScript Basics

 JavaScript Array:

  Here i am going to Guide you on JavaScript Arrays. Array in JS is Same as in PHP and other Programming Languages.    Here is the Syntax for creating Array,

Syntax:

var fruitArray = new Array( "apple", "orange", "mango","banana" );
OR
var fruitArray = new Array[ "apple", "orange", "mango","banana" ];

 In this Array,

  fruitsarray[1] is the First element,

 fruitsarray[2] is the Second element,

 fruitsarray[3] is the Third element,

 fruitsarray[4] is the Fourth element.

Dates:           

new Date( ):

        This will display Current Date with Time. But We Programmers won't like to display Dates with time. But we will format it with some functions and display it.       
Here is a program to Display current date As many clients wants to display in Web Pages.

Function to display Current Date:  

function displayTodaysDate()
{
var x = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
var z = new Array("January","February","March","April", "May","June",
"July", "August", "September","October","November","December");

var d = new Date();
var day = d.getDay();
var month = d.getMonth();

// Assemble the string to display
var s = x[day] + ", " + d.getDate() + " " + (z[month]) + " " + (d.getFullYear());

document.write(s);
}

Output:  Friday, 3 May 2013

 Just Copy it in your Page and then Call this function using the below code,

<script type="text/javascript">

displayTodaysDate();

</script>

Other Syntax:

                Please Use any of the below syntax below to get desired date output in javascript
new Date(milliseconds)
new Date(datestring) new Date(year,month,date[,hour,minute,second,millisecond ])

PHP function to find dates between two dates

PHP function to find dates between two dates

      Here i am going to write a function for finding dates between two Dates using PHP. It will output all the days between two given dates as a array. The main feature of this is,

      ->It will output all days in array format

    You can use this function to find number of days between given two dates as below.

Displaying all days:

            To display all days, just write the below code
<?php

                 var_dump(createDateRangeArray("2011-02-02","2013-02-02"));                 

?>

Displaying Number of days:

          To display number of days between these two dates just use the below code

count(createDateRange("2011-02-02","2013-02-02"));

?>

Main Function:              

 Here is the function to do all the above required things. Just copy it in your PHP file and display dates as i specified above.  

<?php 

function createDateRange($strDateFrom,$strDateTo) {
//two dates formatted as YYYY-MM-DD and creates an
$aryRange=array();
$iDateFrom=mktime(1,0,0,substr($strDateFrom,5,2),     substr($strDateFrom,8,2),substr($strDateFrom,0,4));     
iDateTo=mktime(1,0,0,substr($strDateTo,5,2),     substr($strDateTo,8,2),substr($strDateTo,0,4));
 if ($iDateTo>=$iDateFrom)     {        
array_push($aryRange,date('Y-m-d',$iDateFrom)); // first entry         
while ($iDateFrom<$iDateTo)         {             
$iDateFrom+=86400; // add 24 hours             
array_push($aryRange,date('Y-m-d',$iDateFrom));        
 }     }     return $aryRange; 
}  ?>