Monthly Archives: June 2010

10 Jquery Ajax File Uploader Plugins

June 29th, 2010 by aditia rahman / 8 Comments

Creating ajax upload from a raw javascript or jquery is not that simple, when baking a simple website, I personally will use available plugin, so it can save me much time and effort, we have to thank that there a lot of developer out there that share their great works.

01. Plupload

pupload example screen

Basic Image Gallery With CodeIgniter

June 27th, 2010 by aditia rahman / 34 Comments

CodeIgniter is quite mature framework to creating web application, the built in libraries and helper very helpful to creating most feature in web application, this post I want to create very basic image gallery using CodeIgniter, the the built in libraries that I used are File Uploading, Image Manipulation and Pagination, whereas the used helper is URL Helper, and here’s we go

First open the config.php in folder system/application/config/ and set the CodeIgniter base_url

$config['base_url'] = "http://localhost/ci_gallery/";

Next load the URL Helper in autoload.php in the same folder as above file

$autoload['helper'] = array('url');

Now create the image controller in file image.php inside folder system/application/controller and add this attribute inside the image class

private $data = array(
    'dir' => array(
        'original' => 'assets/uploads/original/',
        'thumb' => 'assets/uploads/thumbs/'
    ),
    'total' => 0,
    'images' => array(),
    'error' => ''
);

Load Content Scroll Using EXT Core and PHP

June 22nd, 2010 by aditia rahman / No Comments

Extcore is one the Extjs product, but the company name now called sencha, read this why extjs changes their name. If you using full stack Extjs source the Extcore must be included in the source, in this post I want to show how to load content while window scroll from the server using Extcore, this feature maybe useful when users want to see more data than visible on the screen maybe like facebook wall, actually this post is similar to another post i found, but using jquery (they are in 9lessons.info and webresourcesdepot.com), in this example i’m just using one file and the data is hardcoded from array

So lets start, here’s the php code

<?php

$data = array(
    0 => array('post' => 'Post Number 0')
);

for ($i=1; $i<=50; $i++) {
    $tmp_data = array(
        $i => array('post' => 'Post Number ' . $i)
    );
    $data = array_merge($data, $tmp_data);
}

// get next 10 row data,
if (isset($_GET['act'])) {
    $start = ($_GET['page'] * 10) + 1;
    $finish = $start + 10;
    if ($finish <= count($data)) {
        echo '<div class="data newhead">Loaded Data &darr;</div>';
        for ($i=$start; $i<$finish; $i++) {
            echo '<div class="data">'.$data[$i]['post'].'</div>';
        }
    } else {
        echo 'stop';
    }
    exit;
}

?>

Free WordPress Theme “Superdit WP-CSS Dashed”

June 19th, 2010 by aditia rahman / 1 Comment

This post I only want to share my own wordpress theme, I called it WP-CSS Dashed, the theme is just like the name says, it designed using only CSS without image and in this theme mostly using dashed CSS border style, here’s the screen shot

Superdit-WP-CSS-Dashed-thumb

120 Black and White Logo For Inspiration

June 16th, 2010 by aditia rahman / No Comments

In my previous post, I showcasing about website to finding Logo inspiration, now I want to share my finding exploring all that websites, I only pick the black and white one, well not all, some got grayscale font color or background. I just need inspiration to create my blog logo, and I want it in black and white color, my imagination is simple logo with clear meaning, some of logo in this list have clear meaning, so it easy for the costumers to get the messages, so here they are:

Twitter Like Login Screen

June 7th, 2010 by aditia rahman / No Comments

I like twitter, almost everyday I connected to twitter, in this post I created the Twitter Like Login Screen, not really the same but at least as similar as Twitter (without server side processing). Let’s start, first we have to prepare the folder, you can see the image on the right, that how my folder look like and as usual I’m using Netbeans so not to worry about the nbproject folder, the html, javascript and css code will be posted here, and you don’t worry about the image because I include it in downloadable source code and then create the html code first

Mac Themes For Windows 7 Desktop

June 7th, 2010 by aditia rahman / No Comments

Recently I’ve been a Windows 7 user’s, sure Windows 7 have a lot of improvement from XP or Vista, but I want to do my daily job in Mac way, until now i’m not a Mac user yet, and that day will come soon. So I want to make my desktop look like a Mac, here the themes that I’ve been using on my Windows 7 Desktop, and i’m hoping don’t have to install all this theme someday. Thanks to ZeusOSX from deviantart this is really great work

Macos X for Windows 7 – 32bit  Macos X for Windows 7 – 64bit

High Resolution Opera Browser Desktop Wallpaper

June 6th, 2010 by aditia rahman / No Comments

Opera Browser is one of the old player in Web Browser Market, even though it’s not leading the browser market but Opera have quite strong community, here I want to share Opera Desktop Wallpaper that I choose from the community with the high resolution and that I think it’s cool,Ā  not much that I provided here but for more opera wallpaper you can directly to Opera Community Wallpaper.

01. Opera Kleemann 1280×1024

Extjs : Form Submit With Enter Key Event

June 4th, 2010 by aditia rahman / 21 Comments

This is the short post that I want to share, cause last year I had created form in Extjs and submitted using ENTER key event so I want to share that here the simple code in Extjs form to enabling ENTER key event, but using this code your mouse cursor should be focused on one of the field inside the form, this is very simple so I don’t think I need to provide the downloadable source code, here it goes:

Ext.onReady(function(){
    var formLogin = new Ext.FormPanel({
        frame: false, border: false, buttonAlign: 'center',
        url: BASE_URL + 'user/extjs_login', method: 'POST',
        id: 'frmLogin',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Username',
            id:'fldusername',
            name: 'username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            fieldLabel: 'Password',
            id:'fldpassword',
            name: 'password',
            allowBlank: false,
            inputType: 'password'
        }],
        buttons: [
            { text: 'Login' },
            { text: 'Reset', handler: function() {
                    formLogin.getForm().reset();
                }
            }
        ],
        keys: [
            { key: [Ext.EventObject.ENTER], handler: function() {
                    Ext.Msg.alert("Alert","Enter Key Event !");
                }
            }
        ]
    });

    var winLogin = new Ext.Window({
        title: 'Extjs Enter Key Event', layout: 'fit',
        width: 340, height: 140, resizable: false,
        closable: false, items: [formLogin]
    });

    winLogin.show();
});

Creating Register and Login Form Using EXTJS and CodeIgniter

June 2nd, 2010 by aditia rahman / 95 Comments

Like another tutorial this post will create the basic form login and register using Extjs and Codeigniter, and I want to mix my previous post about Codeigniter Session Library, Extjs Unique Field Validation and using Statusbar in Extjs Window.

1. Setting up the database

Using phpmyadmin in XAMPP I create the database named “ci_extjs_login”, and create simple “users” table, here below is the sql code that I generated from phpmyadmin, for more advance database modelling you can use mysql workbench.

CREATE TABLE  `ci_extjs_login`.`users` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 100 ) NOT NULL ,
`password` VARCHAR( 100 ) NOT NULL ,
`email` VARCHAR( 100 ) NOT NULL
) ENGINE = MYISAM ;