Lemonjuz

CakePHP Template Tutorial with 960 Grid System

Joanne Tjia — Sun, 25 Sep 2011 01:56:59 +0000

In this tutorial, I’m going to walk you through some steps of how to create a custom CakePHP template using 960 Grid System. I have provided some links to download the files required for this tutorial. You can reuse or modify this template, but please link back to lemonjuz.com

Final Result

Step 1 – Setting Up new CakePHP Application

Copy your CakePHP folder to HTDOCS folder on XAMPP for Windows or MAMP for MacOS.

Do the new application configuration routines

1.Rename your application root folder to “blogging”
2.Change the Security.salt and Security.chiperSeed at app/config/core.php
3.Go to app/config/database.php.default, and rename the file to database.php.
4.Change the database configuration at database.php

Open your browser and type in “http://localhost/blogging” to the configuration.

Step 2 – Create your database and tables

In order to see the template works, you need some dummy data in your database. In your PHPMyAdmin, create a database and then execute these SQl queries for creating the tables. Because this is a template for a simple blogging application, then we need tables for Posts and Users.

CREATE TABLE `posts` (
`id` int(11) unsigned NOT NULL auto_increment,
`name` varchar(255) default NULL,
`date` datetime default NULL,
`content` text,
`user_id` int(11) default NULL,
`image` varchar(255) default NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `users` (
`id` int(11) unsigned NOT NULL auto_increment,
`name` varchar(100) default NULL,
`email` varchar(150) default NULL,
`firstname` varchar(60) default NULL,
`lastname` varchar(60) default NULL,
PRIMARY KEY (`id`)
);

Now insert some dummy data to your tables. Please use 2-3 paragraphs for ‘content’ field to see the truncate helper works.

Step 3. – It’s time to bake !!

For MacOS, open your terminal and create some alias for your Cake commands to work specifically for your “blogging” app.

alias cake=’php /Applications/MAMP/htdocs/blogging/cake/console/cake.php’

Next, you can run the cake bake command to bake the MVC for your app.

For Windows, the first thing you need to do is change some settings at My Computer > Properties > Advanced > Environment Variables > Path. Click edit on the path and add :

C:\xampp\htdocs\blogging\cake\console;C:\xampp\php

Run the Command Prompt, and go to your application folder.

cd C:\xampp\htdocs\blogging\app

Next, you can bake the MVC for your app.

Step 4. – Customize the default view

Go to app/views/layouts, and create a file named “default.ctp”, and type this HTML code:

css(’960.css’);?>
css(‘reset.css’);?>
css(‘text.css’);?>
css(‘style.css’);?>
My Journey

Step 5. – Add some CSS styling with 960 Grid Systems

First you need to download the CSS files required for this tutorial here:

- 960.css

- reset.css

- style.css

- text.css

Go to app/webroot/css, and put those CSS files there

Step 6. Add some images

Download all the images required for this tutorial here:

img.zip

Go to app/webroot/img, and put all the images there.

Step 7. Customize the index.ctp for viewing the Posts content

Download the index.ctp file here:

index.ctp

Go to app/views/posts/. Delete the index.ctp file, and replace it with the one you just downloaded.

Step 8. Put helpers to truncate the text

I uses truncate helper from http://xpnce.com/?p=45. Download the truncate.php here:

truncate.php

Go to app/views/helpers/ and put the truncate.php. If you find a file called ‘empty’ then delete it.

Step 9. Customize the posts_controller.php

Open the post_controller.php, you can find it at app/controllers

Put this line of code at the ‘var’ section:

var $helpers = array(‘Truncate’);

Step 10. Test the app

On your browser, type “http://localhost/blogging/posts”

You should see the template works.

Enjoy !

Easy ActionScript 3.0 Flash Buttons Tutorial

Joanne Tjia — Tue, 20 Sep 2011 17:05:30 +0000

In this tutorial, I’m going to show you how easy it is to create Flash buttons using Adobe Flash CS4 and ActionScript 3.0.

Final Results

Click on the following image to see a working demo. (Try to navigate between page 1 and page 2)

This is the source code file, feel free to download and use it.

flash_button_tutorial.fla

Before we start the tutorial, I would like to give credit to Jacob Gube from Sixrevisions.com for the clean and slick button that I used for this tutorial.

Step 1. Create a new Flash ActionScript 3.0 document

Step 2. Setting up your document

Open menu MODIFY > PAGE PROPERTIES

Step 3. Create 3 layers on the main timeline

You need 3 layers, which are ‘texts’, ‘buttons’, and ‘scripts’. Create keyframes on all layers and frames.

Step 4. Create 2 pages with texts

Go to layer ‘texts’ and go to keyframe 1, type “This is page 1”.

Next go to keyframe 2, type “This is page 2”.

Step 5. Import buttons

Go to layer ‘buttons’, put your mouse at keyframe 1 and import the button “GO TO PAGE 2”. The next step is to go to keyframe 2, and import the button “GO TO PAGE 1”.

Import buttons

Put button "GO TO PAGE 2" on page 1

Step 6. Create button symbols.

Click on button “GO TO PAGE 2”, and then press “F8” or go to MODIFY > CONVERT TO SYMBOL. Select button symbol and give the button a name. Do the same for button “GO TO PAGE 1”

Convert to a button symbol

Button Symbol

Step 7. Give instance names to the buttons

Click on button “GO TO PAGE 2”, and then go to WINDOW>PROPERTIES and give it an instance name “bt_p2”. Do the same for button “GO TO PAGE 1”, but give it an instance name “bt_p1”.

Step 8. ActionScript 3.0 to make the buttons work.

Go to layer “scripts”, and go to the first keyframe, right click and select ACTIONS. The ACTIONS window will be open, and type the code below:

stop();
bt_p2.addEventListener(MouseEvent.MOUSE_DOWN, gotoPageTwo);
function gotoPageTwo(event:MouseEvent):void
{gotoAndStop(2);}
function gotoPageOne(event:MouseEvent):void
{gotoAndStop(1);}

ActionScript for keyframe 1

After finished on the first keyframe, we should give the second keyframe on layer “script” a listening event for button “GO TO PAGE 2”.

bt_p1.addEventListener(MouseEvent.MOUSE_DOWN, gotoPageOne);

11 Free PSD Buttons and Icons for Your Design

Joanne Tjia — Tue, 20 Sep 2011 14:26:31 +0000

Thanks to all artists who created these fantastic free PSD buttons and icons !! I found these PSD buttons and icons that you could download, modify and use it in your design. However, please remember that some of them are under the Creative Commons License.

Lemonjuz

CakePHP Template Tutorial with 960 Grid System

Final Result

Step 1 – Setting Up new CakePHP Application

Step 2 – Create your database and tables

Step 3. – It’s time to bake !!

alias cake=’php /Applications/MAMP/htdocs/blogging/cake/console/cake.php’

C:\xampp\htdocs\blogging\cake\console;C:\xampp\php

cd C:\xampp\htdocs\blogging\app

Step 4. – Customize the default view

css(’960.css’);?> css(‘reset.css’);?> css(‘text.css’);?> css(‘style.css’);?> My Journey

Step 5. – Add some CSS styling with 960 Grid Systems

Step 6. Add some images

Step 7. Customize the index.ctp for viewing the Posts content

Step 8. Put helpers to truncate the text

Step 9. Customize the posts_controller.php

var $helpers = array(‘Truncate’);

Step 10. Test the app

Easy ActionScript 3.0 Flash Buttons Tutorial

Final Results

Step 1. Create a new Flash ActionScript 3.0 document

Step 2. Setting up your document

Step 3. Create 3 layers on the main timeline

Step 4. Create 2 pages with texts

Step 5. Import buttons

Step 6. Create button symbols.

Step 7. Give instance names to the buttons

stop(); bt_p2.addEventListener(MouseEvent.MOUSE_DOWN, gotoPageTwo); function gotoPageTwo(event:MouseEvent):void {gotoAndStop(2);} function gotoPageOne(event:MouseEvent):void {gotoAndStop(1);}

bt_p1.addEventListener(MouseEvent.MOUSE_DOWN, gotoPageOne);

11 Free PSD Buttons and Icons for Your Design

1. Glossy eCommerce Icons: 32 Free Icons

2. Knob Buttons Toolbar Icons

3. Glyphish Icons for Mobile App

4. ‘Slash & Flash’ Buttons

5. Glossy Buttons

6. Different Buttons Set

7. Back & Forward Icons

8.Grey Buttons

9. Switch Buttons

10. Glossy Icons Pack

11. iPhone Style Buttons Modified

css(’960.css’);?>
css(‘reset.css’);?>
css(‘text.css’);?>
css(‘style.css’);?>
My Journey

stop();
bt_p2.addEventListener(MouseEvent.MOUSE_DOWN, gotoPageTwo);
function gotoPageTwo(event:MouseEvent):void
{gotoAndStop(2);}
function gotoPageOne(event:MouseEvent):void
{gotoAndStop(1);}