Here a collection of tutorial of creating your own PHP framework in case you don’t satisfied enough of the available framework or maybe you have more time to create your own, these tutorial might help you to get started.

Write Your Own PHP MVC Framework

Part 1 - Part 2

Creating A PHP5 Framework

Part 1 - Part 2 - Part 3

PHP Frameworks? Just Roll Your Own

Part 1 - Part 2 - Part 3

Build A PHP MVC Framework in an Hour

Intro - Part 1 - Part 2 - Part 3

Create Your Own Lightweight PHP MVC Framework

One Part

How To Learn To Build Your Own PHP Framework

Slide Presentation

Create Your First Tiny MVC Boilerplate With PHP (Video)

One Video

PHP: Create Your Own MVC (Video)

Part 1 - Part 2 - Part 3 - Part 4 - Part 5

Building A Simple MVC Based Framework in PHP5

Part 1 - Part 2 - Part 3 - Part 4

Creating An MVC Framework (Video)

Part 1 - Part 2

How To Create A Simple MVC Framework in PHP

One Part

PHP Basic MVC Framework (Video)

Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7

Create An MVC Framework In PHP (Video)

Part 1 - Part 2 - Part 3

Write Your Own PHP5 MVC Framework

One Part

Users Table

The users table is most commonly used name in application, and the typical column name are id, username, password, first_name, last_name, etc. My idea is to adding one more field in users table that flagging if the user logged in or not. The simple SQL query might be something like this code below.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `is_logged_id` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

The flag column in this example is is_logged_id field set to INT type with one length, this will only consist the value between 1 (user logged in) or 0 (user not logged in).

Login Application

I will use a little PHP code to illustrated this section. Most login application form use http post method to  sent two common variable (username and password), in PHP we can access these variable using $_POST['var_name'], and you can use this step

1. Check whether user exist in database, and check whether user is logged in

$sql = "SELECT * FROM users WHERE username = '".$_POST['username']."'
		AND password = '".$_POST['password']."'
		AND is_logged_id = 0";

2. If a result found typically user id and username are registered is session variable using $_SESSION, and to preventing login with the same ID you have to update is_logged_in field

// register a variable to session
$_SESSION['username'] = $_POST['username'];
// update is_logged_in field
$sql = "UPDATE users SET is_logged_in = 1 WHERE
        username = '".$_POST['username']."' AND
        password = '".$_POST['password']."'";

That is all, really simple you can customize to login error dialog and giving a message for example “someone already login using this account” or maybe a more advance feature like break the current session and force logged in. After user loggout make the is_logged_in field value back to zero.

Session Timeout

There is a possible condition that the user may forgot to click the logout link in your system, which mean make the is_logged_in field still have 1 value, so to protecting a restricted page make sure you check the session first before, checking the database.

Vimp

The community edition of Vimp available for free download and free just for personal and non-commercial use. The ViMP flash player can also be integrated into other webpages without the slightest effort, due to the automatically generated embed code

visit

Clip Bucket

Clip bucket is one of the most popular video sharing script based on PHP, you can see on the clipbucket showcase page to see many live sites running on clipbucket.

visit | demo

PHPmotion

PHPmotion start as video sharing script, but when I see the features, there are more features that can be used as common social network like image gallery, blogs, audio,

visit | demo

VidiScript

VidiScript is a video sharing site that is packed with features that you can only find on major media sharing communities like YouTube, Meta Cafe, Daily Motion and Break.

visit | demo

Dentro Video

Dentro Video is a joomla CMS plugin, so you need joomla running to install this script.

visit | demo

First download the Doctrine DBAL Project, but you download the ORM project it already included the DBAL Project, and extract in your project library folder, for example “lib” folder. I using all the code based on official doctrine DBAL reference.

Configuring ClassLoader

require 'lib/Doctrine/Common/ClassLoader.php';
$classLoader = new \Doctrine\Common\ClassLoader('Doctrine', 'lib');
$classLoader->register();

Code above is the main class of doctrine that will be needed wheter for both DBAL and ORM use.

Configuring Connection

$connParams = array(
    'dbname'    => 'my_doctrine',
    'user'      => 'root',
    'password'  => 'rootpassword',
    'host'      => 'localhost',
    'driver'    => 'pdo_mysql'
);

$conn = \Doctrine\DBAL\DriverManager::getConnection($connParams);

The connection configuration above is using MySQL, based on the documentation doctrine currently support other database such as Oracle, PostgreSQL, and SQLite.

Retrieving and Manipulating

$conn = \Doctrine\DBAL\DriverManager::getConnection($connParams);

// execure a query
$sql = "SELECT * FROM articles";
$stmt = $conn->query($sql);

// retrieve data
while ($row = $stmt->fetch()) {
    echo $row['title'];
}

// insert new user, username = 'guest'
$conn->insert('user', array('username' => 'guest'));

// update user, username = 'guest' where id = 1
$conn->update('user', array('username' => 'guest'), array('id' => 1));

// delete user, where id = 1
$conn->delete('user', array('id' => 1));

After knowing these we must be know how to use it in simple CRUD application, but doctrine has more to offer for more expert use in data retrieve and manipulation, you can refer this page.

Schema Manager

$sm = $conn->getSchemaManager();

// Retrieve an array of databases on the configured connection:
$tables = $sm->listTables();
foreach ($tables as $table) {
    echo $table->getName() . " columns:\n\n";
    foreach ($table->getColumns() as $column) {
        echo ' - ' . $column->getName() . "\n";
    }
}

// Retrieve an array of Doctrine\DBAL\Schema\Column instances that exist for the given table
$columns = $sm->listTableColumns('articles');
foreach ($columns as $column) {
    echo $column->getName() . ': ' . $column->getType() . "\n";
}

A Schema Manager help to show information contain in database such as Tables, Columns, Foreign Key, Indexes.

Schema Representation

$platform = $conn->getDatabasePlatform();

$schema = new \Doctrine\DBAL\Schema\Schema();
$myTable = $schema->createTable("my_table");
$myTable->addColumn("id", "integer", array("unsigned" => true));
$myTable->addColumn("username", "string", array("length" => 32));
$myTable->setPrimaryKey(array("id"));

$sql = $schema->toSql($platform);

This feature can be used to generate SQL statement, so we can execute to the existing connection, and there are more examples from the reference, like generating foreign key, and create sequence, just visit Doctrine DBAL Reference.

Dolphin

Created by BoonEx, Dolphin is CMS focus on social community feature, it been on the this field for quite some time, it have many features such as video, chat, mailbox, forum, photos, blogs, store, events, and many more, and some features for admin section like membership and access levels, customizable database field and form, etc, also have hundred extensions from the community

Example site: [ Apostolic Singles Network, Jam2gether ]

Elgg

Created by Curverider, Elgg is one of the open source social networking that available, it has been used in wide range of social environment, from campus, shcool, college and some commercial or non-commercial organization. It have these several basic features such as powerful data model, activity streams, plugin API, user management, access controls, and web services API.

Example Site: [ Oxfam, Wiley Publishing ]

BuddyPress

Created by WordPress, built to be integrated with our first choice blog platform, wordpress. Beside so many extension available on the site, it have several default feature like activity streams, extended profiles, friend connections, private messaging, extensible groups, discussion forums, and of course wordpress blogging.

Example site: [ GigaOm Pro, Unstructure, Tasty Kitchen ]

NetworX

Created by SocialABC, NetworX is PHP-based open source interactive social networking platform, some features that is have such as profiles, commenting, blogs, forums, events, invitations, file sharing, reporting, etc. It can be used for portal community, corporate intranet, online magazine, newspapaer, etc.

Example site: [ NetworX Demo ]

Oxwall

Created by Skalfa, Oxwall have common feature to start build online community, like photos, videos, blogs, forums, tagging, etc. There is a store to find the suitable plugins for our need.

Example site: [ Wall.fm ]

OpenPNE

OpenPNE is a Social Networking Service Engine written in PHP. It has many features(friend control,friend invitation,diary,blog feeds,message box,etc). Look like this project using japanese languange it quite diffucult to explore.

PHP Social

I’m not really paying to much attenion to this script, but I cannot found the download link, maybe need to register first to get the script. But the demo is available.

Jcow

Example site: [ Jcow Demo ]

Example Using Popular CMS

All the CMS I mention above look very focusing on the social network feature, but if you already familiar with popular CMS like drupal or joomla you can find some example and module that suit your community needs, and actually so many more cool example of the social community site using these two CMS.

Joomla

Example site: [ Splashrate, Park-Shin-Hye ]

Drupal

Example site: [ Imbee, DrupalSN ]

if (!function_exists("gd_info")) {
	echo "GD not installed";
} else {
	echo "GD installed";
}

Text Watermark

Now let’s get straight to the code, the first way to adding watermarking is by add text which called true type font on the server, you can freely choose the font you want to use and it will be better to include the font file in the server.

<?php

header("Content-type: image/jpeg");

// get image file
$img_name = "batman.jpg";
$img_src = imagecreatefromjpeg($img_name);
$width_src = imagesx($img_src);
$height_src = imagesy($img_src);

// new image size = old image size
$width_dst = $width_src;
$height_dst = $height_src;
$quality = 80;

// create new image
$img = imagecreatetruecolor($width_src, $height_dst);
imagecopyresampled($img, $img_src, 0, 0, 0, 0, $width_dst, $height_dst, $width_src, $height_src);

// rectangle size for text box
$x1_rect = 0;
$y1_rect = $height_dst - 18;
$x2_rect = $width_dst;
$y2_rect = $height_dst;

$color = imagecolorallocate($img, 0, 0, 0);
$letter_color = imagecolorallocate($img, 255, 255, 255);
$text = "scissormetimbers (http://scissormetimbers.deviantart.com)";
imagefilledrectangle($img, $x1_rect, $y1_rect, $x2_rect, $y2_rect, $color);
imagettftext($img, 12, 0, $x1_rect+5, $y1_rect+14, $letter_color, "DroidSans.ttf", $text);

// show in browser
imagejpeg($img, '', $quality);

imagedestroy($img_src);
imagedestroy($img);

?>

Image Watermark

If in someway you want to adding an image you can add this code, before the image showing in the browser, I think it is better to choose the image with the transparent background, for watermarking.

$logo = imagecreatefromgif("da.gif");
imagecopymerge($img, $logo, 200, 50, 0, 0, 300, 300, 80);

Here are the example result, using both text and image watermark

Saving The File

To save the modified image modify this line of code

imagejpeg($img, '', $quality);

to

imagejpeg($img, 'new_image_name.jpg', $quality);

View Demo | Download Source

Credit Image: Batman
Font: Droid Sans

If you want to know the detail about google search API, you can refer this link.

The ExtJS Code

The ExtJS code contains Windows, gridPanel, pagingToolbar, searchField

Ext.onReady(function() {
    var store = new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'totalCount',
        remoteSort: true,

        fields: [
            'GsearchResultClass',
            'unescapedUrl',
            'url',
            'visibleUrl',
            'cacheUrl',
            'title',
            'titleNoFormatting',
            'content'
        ],

        proxy: new Ext.data.HttpProxy({
            url: 'search.php'
        })
    });

    function renderResult(value, p, record){
        return String.format(
            '<a class="link" href="{1}" target="_blank">{0}</a>',
            record.data.title, record.data.unescapedUrl);
    }

    var grid = new Ext.grid.GridPanel({
        border: false,
        width: 485,
        height: 430,
        store: store,
        loadMask: true,
        columns: [{
            header: 'Results',
            dataIndex: 'title',
            width: 480,
            renderer: renderResult
        }],

        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                p.body = '<p class="excerpt">'+record.data.content+'</p>';
            }
        },
        tbar: [
            '->',
            new Ext.ux.form.SearchField({
                store: store,
                width: 200,
                emptyText: 'Google Search'
            })
        ],
        bbar: new Ext.PagingToolbar({
            pageSize: 8,
            store: store,
            displayInfo: true
        })
    });

    var window = new Ext.Window({
        title: 'Google Web Search - ExtJS & PHP',
        width: 500,
        height: 460,
        closable: false,
        resizable: false,
        items: [grid]
    }).show();
});

The Search Field used is from the ExtJS ux you can found it on the example section, and it placed in the gridPanel toolbar, inside the GridPanel there is a viewConfig, I’m following this example, this is for displaying search result content (short description)

The PHP Code

The PHP code used to make me easier generating json format so ExtJS can be easily read all the data

<?php

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 8;

$q = str_replace(" ", "%20", $_REQUEST['query']);
$key = "insert your key";

$url = 'https://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='.$q.'&start='.$start.'&rsz='.$limit.'&key='.$key;

$content = file_get_contents($url);
$array = json_decode($content);

$data = array();

foreach ($array->responseData->results as $var => $value)
{
    $data[] = array(
        "GsearchResultClass" => $value->GsearchResultClass,
        "unescapedUrl"       => $value->unescapedUrl,
        "visibleUrl"         => $value->visibleUrl,
        "cacheUrl"           => $value->cacheUrl,
        "title"              => $value->title,
        "titleNoFormatting"  => $value->titleNoFormatting,
        "content"            => $value->content
    );
}

$out = array(
    "success" => true,
    "totalCount" => $array->responseData->cursor->estimatedResultCount,
    "results" => $data
);

echo json_encode($out);

?>

The CSS Code

This is the simple CSS code for customizing the grid row style

.link {
    color: #333;
    line-height: 25px;
    text-decoration: none;
    font-size: 13px;
    padding: 5px 10px;
    display: block;
    -webkit-border-radius: 1.0em;
    -moz-border-radius: 1.0em;
    border-radius: 1.0em;
}
.link:hover {
    background: #333;
    color: #f3f3f3;
}
.excerpt {
    padding: 5px 20px;
    color: #999;
}

Here is the result

View Demo | Download Source

Not all feature I create, like fetch the url images, auto submit when user paste an url, etc.  But I make the look and feel like a digg style, digg use very cool blue color combination.

View Demo | Download Source

The HTML

<div id="cont">
    <div id="error">Unable to fetch this url. &nbsp;&nbsp;&nbsp;<span>x</span></div>
    <div>
        <button id="btsubmit">Fetch &darr;</button>
        <input type="text" id="text_url" name="url" />
    </div>
    <div class="clear"></div>
    <div id="hidden">
        <div id="detail" class="clear">
            <div id="title"></div>
            <div id="description"></div>
            <div class="clear"></div>
        </div>
        <div class="clear">
            <a href="" id="btcancel">Cancel</a>
            <div class="clear"></div>
        </div>
    </div>
</div>

The main html is this example is the text field url, it will become widen when focus event is triggered, there are two hidden div element, one for error messages and one for displaying when the server success fetching the url title and description, all of this html element event will be defined by jquery code below.

The JQuery

$(function() {
    $("#text_url").val("Submit a link");

    $("#text_url").focusin(function() {
        if ($(this).val() == "Submit a link") {
            $("#text_url").val("");
        }

        $(this).css("color", "#666");
        $(this).animate({
            width: 500
        }, 300);
    });

    $("#text_url").focusout(function() {
        urlFocusOut();
    });

    function urlFocusOut() {
        $("#text_url").css("color", "#80a1c1");

        if ($("#text_url").val() == "") {
            $("#text_url").val("Submit a link");
            $("#text_url").animate({
                width: 200
            }, 300);
        }
    }

    function fetchUrl() {
        var url = $("#text_url").val();
        var valid = false;

        if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url)) {
            valid = true;
        } else {
            valid = false;
        }

        if (url != "" && url != "Submit a link" && valid) {
            $("#btsubmit").attr("disabled", "disabled");
            $("#btsubmit").css("color", "#999");
            $("#btsubmit").css("border-color", "#999");
            $("#error").fadeOut('slow');

            $.ajax({
                type: "POST",
                url: "fetch_url.php",
                data: "url="+$("#text_url").val(),
                success: function(msg) {
                    var obj = jQuery.parseJSON(msg);

                    if (!obj.title && obj.description == null) {
                        $("#error").fadeIn('slow');
                    } else {
                        $('#hidden').slideDown('slow', function() {
                            $("#title").html(obj.title);
                            $("#description").html(obj.description);
                        });
                    }
                }
            });
        } else {
            $("#error").fadeIn('slow');
        }
    }

    $("#btcancel").click(function() {
        $("#btsubmit").removeAttr("disabled");
        $("#btsubmit").css("color", "#1b5790");
        $("#btsubmit").css("border-color", "#1b5790");
        $('#hidden').slideUp('slow');
        $("#text_url").val("");
        urlFocusOut();
        return false;
    });

    $("#btsubmit").click(function() {
        fetchUrl();
    });

    $("#error").click(function() {
        $(this).fadeOut('slow');
    });
});

I’m use the focusin and focusout event to make resizing the textfield, and before submitting the url there is a url validation, I’m not write this validation my self, I get this from stackoverflow, well but not really perfect I need to do another validation for data callback from the server.

The PHP

<?php

function getMetaTitle($content){
  $pattern = "|<[\s]*title[\s]*>([^<]+)<[\s]*/[\s]*title[\s]*>|Ui";
  if(preg_match($pattern, $content, $match))
	return $match[1];
  else
	return false;
}

$url = $_POST['url'];

$data = array();

// get url title
$content = @file_get_contents($url);
$data['title'] = getMetaTitle($content);

// get url description from meta tag
$tags = @get_meta_tags($url);
$data['description'] = $tags['description'];

echo json_encode($data);

?>

And yes for fetching the title I get the code from tildemark, and we can simply use get_meta_tags() function in PHP to get common meta tags used in a web page, and this script giving back data to the client as a json format, another way maybe you can use the  curl() function to fetch the url content, it is up to you.

The CSS

* {
    font-family: Arial, "Free Sans";
}
#cont {
    padding: 10px;
    width: 600px;
    background: #e5ecf3;
    margin: 0 auto;
}
#btsubmit {
    width: 70px;
    float: right;
    border: 1px solid #1b5790;
    font-size: 14px;
    font-weight: bold;
    color: #105cd2;
    margin-left: 10px;
    padding: 5px;
    position: relative;
    top: 1px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    cursor: pointer;
}

#btsubmit:active {
    -moz-box-shadow: inset 0 0 5px #666;
    -webkit-box-shadow: inset 0 0 5px #666;
    box-shadow: inset 0 0 5px #666;
}

#text_url {
    float: right;
    width: 200px;
    border: 1px solid #80a1c1;
    color: #80a1c1;
    font-size: 16px;
    padding: 5px;
}

.clear {
    clear: both;
}

#hidden {
    background:#e5ecf3;
    display: none;
}

#detail {
    background:#e5ecf3;
    margin-top: 10px;
    width: 510px;
    float: right;
}

#title, #description {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    background: #fff;
}

#title {
    width: 360px;
    padding: 10px;
    color: #356190;
    font-weight: bold;
    font-size: 16px;
    float: right;
}

#description {
    width: 360px;
    padding: 10px;
    color: #80a1c1;
    font-size: 14px;
    margin-top: 10px;
    float: right;
}

#btcancel {
    margin-top: 10px;
    color: #356190;
    font-size: 14px;
    text-decoration: none;
    float:right;
}
#btcancel:hover {
    text-decoration: underline;
}

#error {
    padding: 7px 5px;
    background: #a12a2a;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    position: absolute;
    width: 154px;
    opacity:0.8;
    filter: alpha(opacity=80);
    top: 2px;
    cursor: pointer;
    display: none;
}

#error span {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    color: #a12a2a;
    position: relative;
    top: -1px;
    padding: 0 4px 1px 4px;
    background: #fff;
}

There are some CSS3 feature used in this digg style example, like box shadow, rounded corner, so in current available IE maybe look a bit ugly, well that’s all, here are the online demo and the download link.

View Demo | Download Source

To make it perfect I think it could add the image fetch from the url, and this reference maybe help Stackoverflow get all images url from string.

Download Source

Here is the table that I prepared for this example

CREATE TABLE IF NOT EXISTS `messages` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `url` varchar(100) NOT NULL,
  `message` varchar(255) NOT NULL,
  `date_entry` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Main html code for the layout, this html is inside the body, sure you must include the sencha touch files by yourself

<div id="guests" class="x-hidden-display">
    <tpl for=".">
        <div class="detail">
            <div class="clear"">
                <label class="label2 topleft">Sender</label>
                <span class="span2 topright">{name}</span>
            </div>
            <div class="clear"">
                <label class="label2">Url</label>
                <span class="span2">{url}</span>
            </div>
            <div class="clear"">
                <label class="label2 bottomleft">Message</label>
                <span class="span2 bottomright">{message}</span>
            </div>
            <div class="clear"></div>
        </div>
    </tpl>
</div>

The main sencha touch component used in this example is TabPanel, there two tab, first is the form and second for displaying data, you can see above there is a <tpl> tag, this is where the existing data will be displayed,, so the component will use XTemplate, now here is the sencha touch code, that I always create separately

Ext.setup({
    glossOnIcon: false,
    onReady: function() {

        var tpl = Ext.XTemplate.from('guests');

		Ext.regModel('User', {
            fields: [
                { name: 'id',       type: 'string' },
                { name: 'name',     type: 'string' },
                { name: 'email',    type: 'string' },
                { name: 'url',      type: 'string' },
                { name: 'message',  type: 'string' }
            ]
        });

		var formBase =  new Ext.form.FormPanel({
            scroll: 'vertical',
            url   : 'server.php',
            standardSubmit : false,
            title: 'Guestbook',
            items: [{
                xtype: 'fieldset',
                title: '',
                instructions: 'Please complete the information.',
                defaults: {
                    labelAlign: 'left',
                    labelWidth: '40%'
                },
                items: [
                    {
                    xtype: 'textfield',
                    name : 'name',
                    label: 'Name',
                    useClearIcon: true,
                    autoCapitalize : false
                }, {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email',
                    placeHolder: 'me@yurl.com',
                    useClearIcon: true
                }, {
                    xtype: 'urlfield',
                    name : 'url',
                    label: 'Url',
                    placeHolder: 'http://yurl.com',
                    useClearIcon: true
                }, {
                    xtype: 'textareafield',
                    name : 'message',
                    label: 'Message',
                    maxLength: 50,
                    maxRows: 5,
                    height: 120
                }]
            }],

            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                    xtype: 'spacer'
                }, {
                    text: 'Reset',
                    handler: function() {
                        formBase.reset();
                    }
                }, {
                    text: 'Save',
                    ui: 'confirm',
                    handler: function() {
                        formBase.submit({
                            waitMsg: {
                                message:'Submitting',
                                cls : 'demos-loading'
                            },
                            success: function(e) {
                                showCenteredOverlay();
                                formBase.reset();
                            }
                        });
                    }
                }]
            }]
        });

        var overlayTb = new Ext.Toolbar({
            dock: 'top'
        });

        var overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
            width: Ext.is.Phone ? 260 : 400,
            height: 60,
            dockedItems: overlayTb
        });

        var showCenteredOverlay = function() {
            overlayTb.setTitle('Data Inserted');
            overlay.show();
        };

        function showRecent() {
            Ext.Ajax.request({
                url: 'server.php?action=get',
                success: function(e) {
                    var obj = Ext.util.JSON.decode(e.responseText);
                    var guests = obj.guests;
                    if (guests) {
                        var html = tpl.applyTemplate(guests);
                        Ext.getCmp('recentTab').update(html);
                    }
                }
            });
        }

        new Ext.TabPanel({
            fullscreen: true,
            type: 'dark',
            sortable: true,
            items: [formBase, {
                id: 'recentTab',
                title: 'Recent Guests',
                html: '2',
                scroll: 'vertical',
                cls: 'recent',
                listeners: {
                    'beforeshow': showRecent
                }
            }]
        });
    }
});

Well that really simple, after user submitted the form, all the form field back to it’s default value, and the panel I used in here as overlay as the message box, working with form submit, the ajax request, server callback in sencha touch is very similar from extjs. And the beforeshow event binded to the second tab, it will load the data from the server, and to viewing data I only use Xtemplate which mean the data displaying in plain html format.

The PHP code, using the PDO

<?php

$dsn = 'mysql:dbname=senchatouch_guestbook;host=127.0.0.1';
$user = 'root';
$password = '';
try {
    $dbh = new PDO($dsn, $user, $password);

    if (isset($_GET['action']) && $_GET['action'] == "get") {
        $sql = "SELECT * FROM messages";
        $guests = array();
        foreach ($dbh->query($sql) as $row)
        {
            $guests[] = array(
                'id' => $row['id'],
                'name' => $row['name'],
                'email' => $row['email'],
                'url' => $row['url'],
                'message' => $row['message'],
                'date' => $row['date_entry']
            );
        }
        echo json_encode(array('success' => true, 'guests' => $guests));
    } else {
        $dbh->exec("INSERT INTO messages VALUES ('', '".$_POST['name']."',
            '".$_POST['email']."', '".$_POST['url']."', '".$_POST['message']."',
            '".date("Y-m-d H:i:s")."')");

        echo '{"success":true, "msg":'.json_encode('Data Inserted').'}';
    }
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}

?>

See there is no validation or something in PHP code, I just want to make it fast, and lastly the CSS code

.recent {
    color: #333;
}
.detail {
    background: #d3d3d3;
    border-bottom: 1px solid #c3c3c3;
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
}
.label2 {
    background: #f3f3f3;
    display: block;
    padding: 10px;
    width: 100px;
    float: left;
    border-bottom: 2px solid #f3f3f3;
}
.span2 {
    display: block;
    padding: 10px;
    background: #666;
    color: #fff;
    float: left;
    width: 210px;
    border-bottom: 2px solid #f3f3f3;
}
.bottomleft {
    -webkit-border-bottom-left-radius: .5em;
}
.bottomright {
    -webkit-border-bottom-right-radius: .5em;
}
.topright {
    -webkit-border-top-right-radius: .5em;
}
.topleft {
    -webkit-border-top-left-radius: .5em;
}
.clear {
    clear: both;
}

And here the download link and what the screen capture look like, I tested on Android SDK version 2.1

Download Source

Sencha Touch Guest Book Data Submitted Capture

Sencha Touch Guest Book View Data Capture

Ok lets get our finger dirty, first I created the main html file, this will include the sencha touch files (javascript and css) and my custom script for creating this application, this main html file I called rss-list.html

<!DOCTYPE html>
<html>
<head>
	<title>RSS List</title>
	<link rel="stylesheet" href="sencha-touch/resources/css/sencha-touch.css"/>
	<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
	<script type="text/javascript" src="apps.js"></script>
</head>
<body>
</body>
</html>

As you can see on the code above I separate sencha touch files on the sencha-touch folder and the apps.js is located in the same folder as rss-list.html, this file contain all the implementation of sencha touch component, and here what it look like (filename: apps.js)

Ext.setup({
    onReady: function() {
        Ext.regModel('ListItem', {
            fields: [
                { name: 'text', type: 'string' },
                { name: 'url', type: 'string' }
            ]
        });

        var store = new Ext.data.TreeStore({
            model: 'ListItem',
            proxy: {
                type: 'ajax',
                url: 'blogname.json',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            }
        });

        var topToolbar = new Ext.Toolbar({
            dock : 'top',
            ui: 'dark',
            title: 'Top Blog Feed'
        });

        var nestedList = new Ext.NestedList({
            fullscreen: true,
            style: 'font-weight:bold',
            dockedItems: [topToolbar],
            modal: true,
            toolbar: {
                dock: 'bottom',
                id: 'tb1',
                layout: {
                    pack : 'center'
                },
                items: [{
                    text: 'Home',
                    handler: function() {
                        store.setProxy({
                            type: 'ajax',
                            url: 'blogname.json',
                            reader: {
                                type: 'tree',
                                root: 'items'
                            }
                        });
                        store.load();
                        topToolbar.setTitle("Top Blog Feed");
                    }
                }]
            },
            displayField: 'text',
            store: store
        });

        nestedList.on('leafitemtap', function(subList, subIdx, el, e,
            detailCard) {
            var ds = subList.getStore(),
                r  = ds.getAt(subIdx);

            store.setProxy({
                type: 'ajax',
                url: 'getFeed.php?blogid=' + subIdx,
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            });
            store.load();
            topToolbar.setTitle(r.get('text'));

            nestedList.on('leafitemtap', function(subList, subIdx, el, e,
                detailCard) {
                var ds = subList.getStore(),
                    r  = ds.getAt(subIdx);

                window.location = r.get('url');
            });

        });

    }
});

This example using NestedList for the main component, it will need data that can be retrieve by TreeStore component, I’m thinking it like ExtJS dataStore, we can change the data by reconfiguring the proxy component  as much as we like, therefore this example not using the tree child to opening each title of the rss article, but just reloading the NestedList.

Data that store will read is json format and this is the basic blog name that we will fetch, I’m using my favorite blog name to show this example, you can change with other if you want to, filename blogname.json

{
	"items": [{
		"text": "Hongkiat",
		"leaf": true
	}, {
		"text": "1stWebDesigner",
		"leaf": true
	}, {
		"text": "Speckyboy",
		"leaf": true
	}]
}

The last file is to getting the latest article from every blog that choosed, I modify this php script from this source (filename: getFeed.php)

<?php

if ($_GET['blogid'] == '0') {
	$blogname = 'hongkiat';
} elseif ($_GET['blogid'] == '1') {
	$blogname = '1stwebdesigner';
} elseif ($_GET['blogid'] == '2') {
	$blogname = 'speckboy-design-magazine';
}

// URL location of your feed
$feedUrl = "http://feeds.feedburner.com/".$blogname;
$feedContent = "";

// Fetch feed from URL
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $feedUrl);
curl_setopt($curl, CURLOPT_TIMEOUT, 10);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HEADER, false);

// FeedBurner requires a proper USER-AGENT...
curl_setopt($curl, CURL_HTTP_VERSION_1_1, true);
curl_setopt($curl, CURLOPT_ENCODING, "gzip, deflate");
curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);

$feedContent = curl_exec($curl);
curl_close($curl);

if($feedContent && !empty($feedContent)) {
	$feedXml = simplexml_load_string($feedContent);

	$data = array();

	if($feedXml) {
		foreach($feedXml->channel->item as $item) {
			$data[] = array(
				'text' => "".$item->title,
				'leaf' => true,
				'url' => "".$item->link
			);
		}
	}

}

echo json_encode(array('items' => $data));
?>

Yep that’s all, but I know this is not enough yet, some feature that I haven’t found are adding an icon in each list, create this example using TreeStore that have children, loading message or masking the list while loading and displaying the article content in a mobile web format (this example just redirecting to original url), if you know better way to do this, you can let know, and by the way here are the screenshot that I have tested on Android Emulator, and the download link.

Download Source