Find us on facebook

Oct 20, 2013

What is Scrum?

Scrum is a framework for agile development. In Scrum team there are 3 main roles.

1) Product Owner - Single individual. Decide priorities. Maintains product backlog. He is closest to the business side.

2) Scrum Master - Has good knowledge about scrum framework. Act as project manager. Facilitates meetings. Helps team members to work on track and work together as a team. Protect members interfered by others. 

3) Scrum Development Team - Small team. Have all the necessary skills. They need to fulfill sprint goal.


In Scrum there are five main meetings.

1) Backlog refinement - Decide priorities.

2) Sprint planning - Plan the sprint backlog.

3) Daily scrum - Decide what to do within next 24 hrs. Discuss what did they do last 24 hrs.

4) Sprint review - Held at end of the sprint. Scrum team and stakeholders collaborate about the things completed within the sprint.

5) Sprint retrospective - Identify the faults of last sprint. Create a plan for implementing improvements.

There are 3 main artifacts in Scrum.

1) Product Backlog
2) Sprint Backlog
3) Increment

Oct 18, 2013

Add Horizontal Menu in Joomla 3.1

Today we are going to create a horizontal menu. See Figure 1.


Figure 1

First Let's we edit the css file. Add following code into your css file.


#topmenu li

{
  display:inline;
  padding-left:7px;
}
#topmenu li a
{
   text-decoration:none;
   color: #FFFFFF;
   font-family: verdana;
   font-size: 12px;
   padding-left: 12px;
}


Then go to the "Add New Menu" as shown in Figure 2.


Figure 2

Add new menu and Menu Items to that menu.

Then go to Module Manager. See Figure 3.

Figure 3

Add new module and go to Options tab and select Advanced Options. Type Menu Tag ID same as you mentioned in your stylesheet. Here we used "topmenu" as our menu ID in stylesheet code. So here we enter topmenu in Menu Tag ID Field.



That's all. Now you will have a horizontal menu as shown in Figure 1.

Bind articles to menu tabs in Joomla 3.1


Hi friends, this is a very simple thing but I thought it’s better to write a post for the friends who are new to joomla CMS.  Today we are going to navigate through pages using a menu on a web site. Let’s say we have a top menu and when we click on Home tab we want to see home page’s article and when we click on About tab we want to see About us page’s article as shown below.

Figure 1: Home Page


Figure 2: About Us Page


First Let's add two new article categories. 

Step 1: 
Go to Add New Category as shown below.


Step 2:
Click on New button


Step 3:
Add new Category "Top Content"


Step 4:
Click on Save & New button and add the second category "About Us"

Step 5:
To add new article, go to Add New Article menu as shown below


Step 6:
Write article and choose related category from the categories. You can use other tabs to change publishing settings and many more settings according to your requirements. 


Step 7:
Click on Save & New button and add the second article same way.

Step 8:
Then we want to add two modules. Go to Module Manager as shown below.


Step 9:
Click on new button


Step 10:
Add New module. Here remember to select the position where you need to locate this article on the page.


Step 11:
Go to Options tab and select the category of the article that you want to display in the selected position



Step 12:
Select the pages that you want to display this article. 


Step 13:
Add the second module same as the first one. Then go to "Add New Menu Item" as shown below. Remember here we have created our main menu and we need to add two new menu items into the main menu.


Step 14:
Add New Menu Item as shown below. Remember to select Menu Item Type as "Single Article" and then select the article that you want to see when you click on the Menu tab.


Step 15:
Click on Save & New button and add the second menu item. Then Do the same as before.

That's it. Now you are ready to test it.






Oct 14, 2013

How to convert (X)HTML/CSS template into Joomla Template (Joomla 3.1)

Your folder structure should be as below.

figure 1.1

"mytemplate" folder will contain all the files and folders that are used to develop web template.

"css" folder contains all the stylesheets related to the template.

"images" folder contains all the images that are used in the template.

First put your style sheets into css folder and put your all images into images folder. Rename your main stylesheet as "template.css"

Put your index.html file into "mytemplate" folder and rename it as index.php as shown in figure 1.1.

At the top of the index.php file, insert the following code segment and remove your <!DOCTYPE> and <html> tag. Joomla template begins with following code segment.

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Then remove your HTML head part. That is from <head> to </head>. And insert the following code.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

After this the body part of the page comes.

<body>
<div id="background">
<div id="Background"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Background.png"></div>
<div id="Layer1"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Layer1.png"></div>
<div id="Layernew2"><jdoc:include type="component" /></div>
<div id="Layer4"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Layer4.png"></div>

</div>
 </body>

And finally end the code with " </html>" tag.

Now we have created our index.php file.

Now the remaining part is essential for making the template. We must create templateDetails.xml file. Without this file, joomla will not recognize our template. Let's do it.

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
        <name>mytemplate</name>
        <creationDate>2013-10-14</creationDate>
        <author>Ishara Maddumage</author>
        <authorEmail>miprabuddini@gmail.com</authorEmail>
        <authorUrl>http://pisharamaddumage.wordpress.com</authorUrl>
        <copyright>Ishara Maddumage  2013</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>My Joomla Template</description>
        <files>
                <folder>css</folder>
<folder>images</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>

        </files>
        <positions>
                <position>breadcrumb</position>
                <position>left</position>
                <position>right</position>
                <position>top</position>
                <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
        </positions>
</extension>

Here remember to insert all the files and folders that you use for the template within <files></files>.
within <folder> </folder> you can define entire folder. With <filename> </filename> you can define each file.

Don't worry about the positions we used here. Because those are the module positions that are used in default joomla template. We can use those positions in our body section according to our requirements.

Now we have completed with the template.

Finally put your "mytemplate" folder into your joomla->templates folder. Login into the admin panel and go to Extensions->Extension Manager and click on Discover to find your template. Then select your template and click on install to install it. Now your template should show in Template Manager. You can go to Extensions->Template Manager and make your template default.

That's all and now you will see your joomla template.

Oct 12, 2013

Create a form with Yii (Part 2 - Declaring Validation Rules in Model Class)

When the user submit inputs we need to check whether the inputs are valid. For doing that we need to do validation. We can write code for validation rules inside rules() function which is located in Customer model class we created in Create a form with Yii (Part 1 - Define Model class). This function will return an array with rule configurations.

we should only define rules for the attributes that will receive user inputs.

public function rules() {
     
        return array(
            array('id, title_id, first_name, last_name, gender, dob, city, state, postal_code, phone, mobile_phone, email, marital_status', 'required'),
            array('title_id', 'numerical', 'integerOnly' => true),
            array('city, state, postal_code,mobile_phone, marital_status', 'length', 'max' => 20),
            array('first_name, last_name,email', 'length', 'max' => 50),
            array('gender', 'length', 'max' => 2),
            array('phone', 'length', 'max' => 30),
            array('email', 'email', 'checkMX' => true),
            array('dob', 'safe'),
            array('id, title_id, first_name, last_name,gender, dob,city, state, postal_code,phone, mobile_phone, email, marital_status', 'safe', 'on' => 'search'),
        );
    }

We will check the code line by line.

1)
array('id, title_id, first_name, last_name, gender, dob, city, state, postal_code, phone, mobile_phone, email, marital_status', 'required')
This code specifies that "id, title_id, first_name, last_name, gender, dob, city, state, postal_code, phone, mobile_phone, email, marital_status" these all attributes are required.

2)
array('title_id', 'numerical', 'integerOnly' => true)
This specifies that title_id is numerical and it's value must be integer.

3)
array('city, state, postal_code,mobile_phone, marital_status', 'length', 'max' => 20)
This code says that above mentioned attributes' maximum lenghth should be 20 characters.

4)
array('email', 'email', 'checkMX' => true)
checks if the email has a MX(mail exchanger record) registered

5)
array('dob', 'safe')
If a field has no particular data-format validations, we use 'safe' validator(This will be discussed clearly later).

4)
array('id, title_id, first_name, last_name,gender, dob,city, state, postal_code,phone, mobile_phone, email, marital_status', 'safe', 'on' => 'search')
In search scenario

Create a form with Yii (Part 1 - Define Model class)

Create a Customer model class used to collect user input. Here we use Active Record Model, Because we need to save user input into the database. 

Here we go.....

We define Customer model class as Active Record model class by extending CActiveRecord. Active Record model class represents a single database table. Here it is "customer" table. Active record instance represents a row in that table. Here it is one row(record) in customer table.

class Customer extends CActiveRecord {


    public static function model($className = __CLASS__) {

        return parent::model($className);
    }

    public function tableName() {

        return 'customer';
    } 
}

Normally Active Record class name is database table name. If you want to use different names for table and Active Record class you can override tableName() function as mentioned above.



Dealing with Forms in Yii

There are 3 major steps for dealing with forms.


  1. Create model class.
  2. Create a Controller action.
  3. Create form.
Create model class


There are two types of models.
  • Form Model - With this we can collect, use and discard user input. (Eg : Login form)
  • Active Record - With this we can collect user input and save them to the database.
Create a Controller action

Once model class is created, we should write code for the controller action to manipulate the model.

Create Form

Finally we create the form which contains HTML input fields. With Yii we can use helper classes to create forms.

Eg:  CHtml::textField() - we can call this to create text input field.
      CHtml::dropDownList() - we can call this to create drop down list.

Oct 2, 2013

CRUD operations with Yii

CRUD means create, read, update and delete.

Step 1: Turn on the php pdo extension to use database feature.

Step 2: Create connection to the database. I'm using MySQL.

To use MySQL uncomment the following code which is in     D:/wamp/www/testyii/protected/config/main.php

'db'=>array(
'connectionString' => 'mysql:host=localhost;dbname=testyii',
'emulatePrepare' => true,
'username' => 'root',
'password' => '',
'charset' => 'utf8',
),

Step 3: Use Gii (Gii is a powerfull code generator)

To use Gii uncomment following code which is in D:/wamp/www/testyii/protected/config/main.php

'modules'=>array(

'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'testyii',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
'ipFilters'=>array('127.0.0.1','::1'),
),

),
Here 'password'=>'testyii' you can set any password you like. I'm using "testyii" as my password.

Step 4: Access the URL http://localhost/testyii/index.php?r=gii



Step 5: Go to Model Genertor.

Give table name and Model Class as below. It will Generate model class for User.


Step 6: Then go to Crud Genertor.



Add Model class same as before. For me it is  "User". Controller ID will be user.

Step 7: Then access URL http://localhost/testyii/index.php?r=user
You can add users, update and delete users. Also you can view user list without writing a single code.


Oct 1, 2013

Start with Yii framework

What is Yii?

Yii is a fast,secure and professional MVC framework.

Start with Yii

Step 1: Download Yii from http://www.yiiframework.com/


Step 2: Unzip the package and put it in your web root. (www for WAMP or htdocs for XAMPP)

Now your Yii folder will be in www.

Step 3: Access Yii requirement checker with following URL
http://localhost/yii/requirements/


Step 4: Then create the skeleton

Open cmd and type,

C:\Users\hp>php
'php' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\hp>path D:\wamp\bin\php\php5.4.3

C:\Users\hp>php
^C
C:\Users\hp>cd D:\wamp\www

C:\Users\hp>d:

D:\wamp\www>php yii/framework/yiic.php webapp testyii
Create a Web application under 'D:\wamp\www\testyii'? (yes|no) [no]:yes

After you press enter it generates the application "testyii" under D:\wamp\www\testyii.

Finally says "Your application has been created successfully under D:\wamp\www\testyii"

Step 5: Now you can access your application through URL http://localhost/testyii