Image Tutorial: How to setup Yii Framework on WAMP using MySQL database

I decides to move to Yii finally after comparing between different framework. At this point, although Yii documentation wasn't as good as CI, it is not something that will restrict me from entering Yii framework. Like most people i started with the tutorial given on Yii website. Here is something i tried out today through the instruction given on the cookbook section. In this article, i will extend what is present in the article in a more visual form.

Requirement

Here are some of the basic requirement for this tutorial.

  1. Window XP (Vista and Win 7 will also work)
  2. Yii Framework 1.1.3
  3. WAMP 2.0i (Apache 2.2.11, PHP 5.3.0, MySQL 5.1.36, Phpmyadmin)
  4. Basic installation of WAMP (C:\\wamp\...)

Setting up yiic on WAMP

Firstly install your WAMP with the default installation.

Once you have installed this, you should be ready to setup your computer local environment to use Yiic from Yii framework. Firstly, go to your environment variables located at Control Panel->System->Advance->Environment Variables->Path as shown below,

Once you reached the path textbox, entered the following location to tell your windows that they are the environment variables.

  1. C:\wamp\www\yii\framework
  2. C:\wamp\bin\php\php5.3.0

In this case, we are telling our window where is our yii framework yiic.bat and where is our php.exe as shown below,

since my WAMP is using php5.3.0, the folder shows the current version my WAMP is using. This might differ. Hence, change the directory path according to the php version you use. On the other hand, my yiic.bat is located at C:\wamp\www\yii\framework as shown below, hence, i pass this to the environment variable instead.

Click 'OK' for all the settings you have made and restart you PC. Once your windows has rebooted, click start->run.. and type 'cmd'. On the screen type "yiic webapp C:\\wamp\www\mywebsite" andtype 'yes". The folder should show up on your localhost.

Now you need to change your setting from sqllite3 to MySQL. This is located at C:\wamp\www\mywebsite\protected\config\main.php, open this file and replace the codes with the following.

<?php

// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');

// This is the main Web application configuration. Any writable
// CWebApplication properties can be configured here.
return array(
	'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
	'name'=>'My Web Application',

	// preloading 'log' component
	'preload'=>array('log'),

	// autoloading model and component classes
	'import'=>array(
		'application.models.*',
		'application.components.*',
	),

	// application components
	'components'=>array(
		'user'=>array(
			// enable cookie-based authentication
			'allowAutoLogin'=>true,
		),
		// uncomment the following to enable URLs in path-format
		/*
		'urlManager'=>array(
			'urlFormat'=>'path',
			'rules'=>array(
				'<controller:\w+>/<id:\d+>'=>'<controller>/view',
				'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
				'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
			),
		),
		*/
		'db'=>array(
			'connectionString' => 'mysql',
		),
		// uncomment the following to use a MySQL database

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

		'errorHandler'=>array(
			// use 'site/error' action to display errors
            'errorAction'=>'site/error',
        ),
		'log'=>array(
			'class'=>'CLogRouter',
			'routes'=>array(
				array(
					'class'=>'CFileLogRoute',
					'levels'=>'error, warning',
				),
				// uncomment the following to show log messages on web pages
				/*
				array(
					'class'=>'CWebLogRoute',
				),
				*/
			),
		),
	),

	// application-level parameters that can be accessed
	// using Yii::app()->params['paramName']
	'params'=>array(
		// this is used in contact page
		'adminEmail'=>'[email protected]',
	),
);

Change 'yourdatabasename' in the text above to your database name and you'r done!

How to make animated GIFs extension file using Photoshop

Ever wonder how to make an animated GIFs extension image file using Photoshop? Animated GIFs image is useful in many different occasions. Especially when you wish to create a banner on the web and didn't know what to do. Normally, what all of us will do is to search for any program that can assist us with this task. But usually it is quite difficult to find something free and powerful enough to make an animated GIFs image without watermark or restrictions. Luckily, Photoshop is able to do this for you without any extension plugin or difficult procedure. In this article, we will look at how animated GIFs image can be achieved using Photoshop.

Scrolling Animated GIFs with Photoshop

Let's start with something really simple. All you need is something like a full screen shot of your website such as this.

Open this image with your Photoshop apps and it will appear as a new layer as shown below,

Now clicked on window->animation on the top menu bar and the animation bar will appear below.

Now create a new photoshop file with the height differ from the image as shown below,

Now, copy the image shown above to the new file and you should get something like this.

Next, create a new animation frame on the animation window as shown below,

Now, use the Move Tool to move the image right down to the bottom as shown above. Clicked on the first frame and press on  "Tweens animation frames" and you will see the pop up as shown below.

Once you pressed "Ok" button, a list of frames will be added between the first and second frame. This means that it will animate from the first frame to the last frame by putting in additional frame to initialize the movement from the first to the last frame.

Now all you need to do is to clicked on the play button to see the animation from the first frame all the way to last last one.  You can change the animation to forever, just once or 3 times by clicking on the below line. There are a few options to choose, just play around with it and you should have a good idea what each icon does.

Now its time to save the gif file. Clicked on File->Save on Web & Devices as shown below,

Clicked save and you will have something like this.

Normal Animated GIFs Image With Photoshop

CreativeTechs has an excellent tutorial on basic animated GIFs tutorial. Do read it up and you should get a very clear idea on how animated GIFs on Photoshop works 🙂