Yii Framework Tutorial Set 2

cont......

       Before reading this post you must read my previous post Yii Framework Tutorial Set 1. Its been a long time i am writing this post, because i was busy with my Yii projects. In the previous post you have successfully installed Yii framework application. You can check it at this below url:

http://localhost/firstapp/index.php

If everything is Ok, it will be like this.

Source: yiiframework.com

You can change the contents of this home page at

protected/views/site/index.php .

in the same way you can edit about us page at

protected/views/site/pages/about.php

contact us page at

protected/views/site/contact.php

log in page at

protected/views/site/login.php

and finally error page at

protected/views/site/error.php

YII CHANGE APP NAME:

           In default, The application name will be "My Web Application". You can change this to your preferred name at protected/config/main.php . You have to change the 'name' parameter in array. In the same file you have to change Database details also. In default, DB connection is connected to SQLITE database. So, you must change the DB Details also.

YII LAYOUT:

        Do you confused by thinking from where this layout came? The main layout files for yii framework is in  protected/views/layouts/ .

at this layouts folder you can see three different files as below.

• main.php
• column1.php
• column2.php

It means in default we have two different layout at present (You can also add layout files and modify these two files based on you view). As the name suggests the difference between these two layout is first one is single column and second is double column with sidebar. Where does the layout file is selected?      The layout for particular page or view can be selected in their respective controller file. For instance, in controllers/sitecontroller.php we have variable $layout. In this variable we have to specify either column1 or column2 (note: don't use column1.php and column2.php, Yii will point this automatically. In the same way at any situation in you want to include any file don't use php extension).

YII FRAMEWORK CSS STYLING:

         When you open these layout files, index.php, contact.php all html elements will use blueprint css framework. I prefer you to go through this blueprint css at their official website http://www.blueprintcss.org. for your reference i will give you one example:

          To design a DIV with 590px you can specify class name as span-15. 

So, you don't need to write your own css for each and every html elements. Once again i am asking you to read about blueprint css framework to design your application effectively.        

 

       

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.