[trick] Membuat Galeri dengan php extjs

bismillah

langsung saja siapkan database..

lagi

selanjutnya masukan kodenya:

1. store.php


<?php
mysql_connect("localhost", "root", "");
mysql_select_db("hp");

$arr = array();
$rs = mysql_query("SELECT * FROM galeri");

while($obj = mysql_fetch_object($rs)) {
 $arr[] = $obj;
}
header("Content-type: application/json");

echo "{\"images\":" .json_encode($arr). "}";
?>

2. dataviews.js


/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
 var xd = Ext.data;

var store = new Ext.data.JsonStore({
 url: 'store.php',
 root: 'images',
 fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
 });
 store.load();

var tpl = new Ext.XTemplate(
 '<tpl for=".">',
 '<div class="thumb-wrap" id="{name}">',
 '<div class="thumb"><img src="{url}" title="{name}"></div>',
 '<span class="x-editable">{shortName}</span></div>',
 '</tpl>',
 '<div class="x-clear"></div>'
 );

var panel = new Ext.Panel({
 id:'images-view',
 frame:true,
 width:535,
 autoHeight:true,
 collapsible:true,
 layout:'fit',
 title:'Simple DataView (0 items selected)',

items: new Ext.DataView({
 store: store,
 tpl: tpl,
 autoHeight:true,
 multiSelect: true,
 overClass:'x-view-over',
 itemSelector:'div.thumb-wrap',
 emptyText: 'No images to display',

plugins: [
 new Ext.DataView.DragSelector(),
 new Ext.DataView.LabelEditor({dataIndex: 'name'})
 ],

prepareData: function(data){
 data.shortName = Ext.util.Format.ellipsis(data.name, 15);
 data.sizeString = Ext.util.Format.fileSize(data.size);
 data.dateString = data.lastmod.format("m/d/Y g:i a");
 return data;
 },

 listeners: {
 selectionchange: {
 fn: function(dv,nodes){
 var l = nodes.length;
 var s = l != 1 ? 's' : '';
 panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
 }
 }
 }
 })
 });
 panel.render('galeri');

});

3. index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>DataView Example</title>
 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<!-- GC -->
 <!-- LIBS -->
 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
 <!-- ENDLIBS -->

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript" src="DataView-more.js"></script>
 <script type="text/javascript" src="dataviews.js"></script>
 <link rel="stylesheet" type="text/css" href="data-view.css" />
 <!-- Common Styles for the examples -->
 <link rel="stylesheet" type="text/css" href="extjs/examples/shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="extjs/examples/shared/examples.js"></script><!-- EXAMPLES -->

<h1>Galeri Foto</h1>

<div id="galeri"></div>
</body>
</html>

untuk hasil kira-kira seperti ini >

lagi2

download sourcecode disini

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: