Simple Application Using Sencha-Touch, Abraham Twitter, Code Igniter and Eclipse IDE
Hallo Semua,
Kali ini, saya akan menshare aplikasi pertama saya menggunakan sencha-touch library. Apa itu sencha-touch? Sencha-touch merupakan salah satu javascript library keluarga dari sencha (sencha.com). Library ini dikhususkan untuk browser versi mobile seperti android ataupun apple. Lebih jelas mengenai sencha-touch, anda dapat langsung mengunjungi websitenya di http://www.sencha.com/products/touch/. Apabila anda telah memahami pengertian sencha-touch, saya akan mendemonstrasikan aplikasi pertama saya dengan library ini.
Contoh Hasil : (di Android Simulator)
di web browser(chrome) yang support webkits :
Persiapan Environment
- Download Sencha-Touch library
http://www.sencha.com/products/touch/download/1.1.0/
- Download CodeIgniter (versi 2.0.3)
Kali ini saya akan menggunakan CodeIgniter versi 2.0.3 sebagai framework phpnya. Tujuannya adalah kita akan membuat aplikasi yang menggunakan konsep MVC (Model-View-Controller). Pengertian detail mengenai MVC, anda dapat akses di wikipedia saja, berikut linknya wikipedia. Intinya dari MVC ini adalah terdapat 3 komponen utama yaitu view yang mengatur user interface dari aplikasi kita, controller yang mengatur business logic pada aplikasi dan model yang mengatur CRUD (Create, Read, Update, dan Delete) pada database aplikasi.
- Download Abraham Twitter Library
Selain itu, saya juga akan menggunakan twitter library agar memudahkan kita dapat mengatur authentication dan authorization menggunakan oauth, serta memudahkan dalam memperoleh data-data yang telah disediakan oleh twitter-API. Twitter library yang digunakan adalah Abraham twitter library, untuk mendownloadnya silakan kunjungi link berikut ini : https://github.com/abraham/twitteroauth.
- Download Eclipse-PHP atau Eclipse Javascript
Dalam implementasinya, saya akan menggunakan IDE Eclipse-PHP. Anda dapat mendownload terlebih dahulu jika ingin. Jika tidak maka Anda dapat menggunakan text-editor biasa seperti notepad++.
- Download XAMPP (untuk windows) atau LAMPP (untuk linux)
Pada saat mengerjakan aplikasi ini, saya menggunakan XAMPP sebagai servernya (windows). Jadi, agar Anda dapat mengikuti dengan baik tutorialnya, Anda dapat menggunakan XAMPP juga, tapi tidak berarti anda tidak dapat mengembangan aplikasi di OS Linux. Anda tetap dapat menggunakan LAMPP sebagai pengganti XAMPP.
http://www.apachefriends.org/en/xampp-windows.html
- Daftar Aplikasi pada twitter developer sites.
Silakan kunjungi https://dev.twitter.com/ untuk mendaftar aplikasi twitter anda. Pilih Create An App.
Lalu isikan nama aplikasi dan deskripsi anda bebas, tetapi untuk website, pastikan Anda mengisi : http://127.0.0.1/Blog/CodeIgniter_2.0.3/index.php/loginController/login
Anda dapat menconfigurasi applikasi Anda terhadap privilleges tertentu, silakan pilih settings kemudian ubah Application typenya (dalam tutorial ini, hanya diperlukan read privilleges).
Pada bagian detail, Anda akan mendapatkan consumer key, dan consumer secret key.
Pindahkan consumer key dan secret key Anda ke file twitter.php pada folder config (akan dijelaskan kemudian).
Semua persiapan awal sudah selesai, sekarang saatnya implementasi.
Implementasi
Install XAMPP anda kemudian letakan folder CodeIgniter (hasil download) pada folder htdocs pada XAMPP anda. Selain itu, letakan pula folder “sencha-touch” pada level yang sama denga folder code igniter.
Lalu, pada folder htdocs\Blog\CodeIgniter_2.0.3\application\libraries, tambahkan twitteroauth yang telah di download (abraham twitter oauth).
Kemudian tambahkan folder style pada folder CodeIgniter, CodeIgniter_2.0.3\style, seperti tampilan berikut ini :
Lalu, buka Eclipse anda dan buat project baru.
Setelah berhasil maka tampilan struktur pada Eclipse akan seperti berikut ini :
Jalankan XAMPP Anda dan start Apache dan MySql service
Setelah xampp dan project kita pada eclipse sudah siap, Kita akan mengatur configurasi terlebih dahulu. Pertama-tama buka file autoload.php pada folder application/config
Untuk variable $autoload[‘libraries’] tambahkan session dan database. Pada tampilan saya menggunakan library curl sebagai tambahan. Tujuannya sih saat ini belum digunakan tapi mungkin akan diperlukan kemudian.
$autoload['libraries'] = array('database','session', 'curl'); //pastikan Curl.php ada pada folder libraries.
Kemudian $autoload[‘helper’] tambahkan url dan file.
$autoload['helper'] = array('url', 'file');
Lalu, pada autoload[‘config’] tambahkan twitter. Kita akan menggunakan file twitter.php yang akan ditambahkan pada folder config.
$autoload['config'] = array(‘twitter’); //pastikan twitter.php ada pada folder config.
Twitter.php akan berisi consumer key, consumer secret key dan variable lain yang dinilai akan diperlukan oleh semua controller, view ataupun model dan bersifat final dan static.
Isi dari twitter.php tersebut adalah sebagai berikut
<?php $config['consumer_key'] = "<tt>RulUNSxYSaYTYD5s2N5ow</tt>"; //isi dengan consumer key Anda $config['consumer_secret']= "<tt>rXRkzsiNcLcmerfnJzTZfaExtJbyyL6jhsz9dlGxDU</tt>"; //isi dengan consumer secret key Anda.
Setelah itu, pada config.php, ubahlah base_url sebagai berikut http://127.0.0.1/Blog/CodeIgniter_2.0.3/
Lalu, untuk database.php ubah sesuai gambar berikut : (kosongkan nama database)
Setelah itu, buka file routes.php, ubah default_controller dengan mainController.
Tahap konfigurasi sekarang selesai. Kita akan mulai membuat Controller, View, dan Model untuk aplikasi kita.
Sekarang, Anda dapat membuka folder Controller, hapus controller default (welcome controller) dan buat file baru yang bernama mainController.php, loginController.php, aboutController.php, dan streamController.php.
Terlebih dahulu kita akan membuat loginController.php. loginController akan berisi fungsi-fungsi yang berkaitan dengan oauth menggunakan abraham twitter API.
– loginController.php –
<?php
class LoginController extends CI_Controller {
public function index(){
redirect("loginController/authenticate");
}
public function login($pin = NULL){
include_once APPPATH.'libraries/twitteroauth/twitteroauth.php';
$this->load->model("oauthModel", "oauth");
$requestToken = $this->oauth->getRequestToken();
$requestTokenSecret = $this->oauth->getRequestTokenSecret();
if($accessToken != "" || $accessTokenSecret != ""){
redirect("mainController/");
}
if(!isset($requestToken) || $requestToken == "" || !isset($requestTokenSecret) || $requestTokenSecret == ""){
redirect("loginController/authenticate");
}
$oauth = new TwitterOAuth($this->config->item('consumer_key'), $this->config->item('consumer_secret'), $requestToken, $requestTokenSecret);
$accessToken = $this->getAccessToken($oauth, $pin);
print_r($accessToken);
$this->oauth->setAccessToken($accessToken['oauth_token']);
$this->oauth->setAccessTokenSecret($accessToken['oauth_token_secret']);
if(isset($accessToken["user_id"])){
redirect("mainController/");
} else {
redirect("loginController/authenticate");
}
}
public function logout(){
$this->load->model("oauthModel", "oauth");
$this->oauth->deleteAllToken();
redirect("loginController/login");
}
public function authenticate(){
include_once APPPATH.'libraries/twitteroauth/twitteroauth.php';
$oauth = new TwitterOAuth($this->config->item('consumer_key'), $this->config->item('consumer_secret'));
$oauthRequest = $this->getOauthToken($oauth);
$this->load->model("oauthModel", "oauth");
$this->oauth->deleteAllToken();
$this->oauth->setRequestToken($oauthRequest['oauth_token']);
$this->oauth->setRequestTokenSecret($oauthRequest['oauth_token_secret']);
$registerUrl = $this->authorize($oauth, $oauthRequest);
redirect($registerUrl);
}
public function getOauthToken($oauth){
$request = $oauth->getRequestToken();
return $request;
}
private function authorize($oauth, $request){
$registerURL = $oauth->getAuthorizeURL($request);
return $registerURL;
}
private function getAccessToken($oauth, $pin){
$request = $oauth->getAccessToken(NULL, $pin);
return $request;
}
}
– aboutController.php –
<?php
class AboutController extends CI_Controller {
public function index(){
//defaults function
}
/**
* get overview page in HTML form
*/
public function overviewHTML(){
$this->load->model("userModel", "user");
$credentials = $this->user->verifyCredentials();
$this->load->view('about/overview', $credentials);
}
/**
* get sponsors page in HTML form
*/
public function sponsorsHTML(){
$this->load->view('about/sponsors');
}
/**
* get credits page in HTML form
*/
public function creditsHTML(){
$this->load->view('about/credits');
}
}
– mainController.php –
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MainController extends CI_Controller {
public function index()
{
$this->load->model("oauthModel", "oauth");
$accessToken = $this->oauth->getAccessToken();
if(!isset($accessToken) || $accessToken == ""){
redirect("loginController/authenticate");
}
$data['javascript']['0'] = "apps.js";
$data['javascript']['1'] = "model/stream.js";
$data['javascript']['2'] = "stores/stream.js";
$data['javascript']['3'] = "view/stream.js";
$data['javascript']['4'] = "view/about.js";
$data['javascript']['5'] = "view/html.js";
$data['javascript']['6'] = "view/form.js";
$data['javascript']['7'] = "view/main.js";
$data['css']['0'] = "apps.scss";
$data['css']['1'] = "apps.css";
$data['title'] = "Mobile Web Application";
$this->load->view('main', $data);
}
}
– streamController.php –
<?php
class StreamController extends CI_Controller {
/**
* default function
*/
public function index(){
}
public function getStreamData(){
$this->load->model("streamModel", "stream");
$streams = $this->stream->getHomeTimeline();
$streams = json_encode($streams);
echo $streams;
}
}
Setelah itu, kita beralih ke model dari aplikasi kita.
Kita akan membuat 3 buah model yaitu oauthModel.php, streamModel.php, dan userModel.php. Berikut adalah implementasi dari ketiga model tersebut :
–oauthModel.php—
<?php
class OauthModel extends CI_Model {
function __construct()
{
parent::<em>__construct</em>();
}
function setRequestToken($requestToken){
$this->session->set_userdata("oauth_token", $requestToken);
}
function setRequestTokenSecret($requestTokenSecret){
$this->session->set_userdata("oauth_token_secret", $requestTokenSecret);
}
function getRequestToken(){
return $this->session->userdata("oauth_token");
}
function getRequestTokenSecret(){
return $this->session->userdata("oauth_token_secret");
}
function deleteAllToken(){
$this->session->unset_userdata();
}
function setAccessToken($accessToken){
$this->session->set_userdata("oauth_access_token", $accessToken);
}
function setAccessTokenSecret($accessTokenSecret){
$this->session->set_userdata("oauth_access_token_secret", $accessTokenSecret);
}
function getAccessToken(){
return $this->session->userdata("oauth_access_token");
}
function getAccessTokenSecret(){
return $this->session->userdata("oauth_access_token_secret");
}
}
–streamModel.php—
<?php
class StreamModel <strong>extends </strong>CI_Model {
private $oauth;
function __construct()
{
parent::__construct();
include_once APPPATH.'libraries/twitteroauth/twitteroauth.php';
$this->oauth = new </strong>TwitterOAuth($this->config->item('consumer_key'), $this->config->item('consumer_secret'), $this->session->userdata("oauth_access_token"), $this->session->userdata("oauth_access_token_secret"));
}
/**
* Returns the 20 most recent statuses, including retweets if they exist, posted by the authenticating user and the user's they follow.
* @url statuses/home_timeline https://dev.twitter.com/docs/api/1/get/statuses/home_timeline
*/
function getHomeTimeline($params = NULL){
$content = $this->oauth->get('statuses/home_timeline', $params);
return $content;
}
}
–userModel.php—
<?php
class UserModel <strong>extends CI_Model {
private $oauth;
function __construct()
{
parent::__construct();
include_once APPPATH.'libraries/twitteroauth/twitteroauth.php';
$this->oauth = new TwitterOAuth($this->config->item('consumer_key'), $this->config->item('consumer_secret'), $this->session->userdata("oauth_access_token"), $this->session->userdata("oauth_access_token_secret"));
}
function verifyCredentials($params = NULL){
$content = $this->oauth-><span style="text-decoration: underline;">get</span>('account/verify_credentials', $params);
<strong>return </strong>$content;
}
}
Untuk View (User Interface) kita akan menggunakan sencha-touch library. Pertama-tama, pastikan bahwa folder sencha-touch anda telah berada pada tempat semestinya.
Buatlah, folder about pada views dan berisi dengan 3 buah file yaitu credits.php, overview.php, sponsors.php serta pada folder views buatlah file main.php.
Pada credits.php buatlah file html sederhana :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=<em>"Content-Type"</em> content=<em>"text/html; charset=ISO-8859-1"</em>> <title>Insert title here</title> </head> <body> Credits Page </body> </html>
Pada overview.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=<em>"Content-Type"</em> content=<em>"text/html; charset=ISO-8859-1"</em>> <title>Insert title here</title> </head> <body> Overview Page <div> Your name : <?php <strong>echo </strong>$screen_name; ?> </div> <div> Location : <?php <strong>echo </strong>$location; ?> </div> </body> </html>
Sponsors.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=<em>"Content-Type"</em> content=<em>"text/html; charset=ISO-8859-1"</em>>
<title>Insert title here</title>
</head>
<body>
Sponsors Page
</body>
</html>
Sedangkan, inti dari ui kita adalah pada main.php :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=<em>"Content-Type"</em> content=<em>"text/html; charset=utf-8"</em>>
<title><?php <strong>echo </strong>$title; ?></title>
<script src="<?php <strong>echo </strong>base_url(); ?><em>../sencha-touch/sencha-touch.js</em>" type=<em>"text/javascript"</em>></script>
<link href="<?php <strong>echo </strong>base_url(); ?><em>../sencha-touch/resources/css/sencha-touch.css</em>" rel=<em>"stylesheet"</em> type=<em>"text/css"</em> />
<script>
<strong>var</strong> baseUrl = <?php <strong>echo </strong>json_encode(base_url()); ?>;
</script>
<?php
<strong>foreach </strong>($javascript <strong>as </strong>$row ){
?>
<script src="<?php <strong>echo </strong>base_url(); ?><em>style/javascript/</em><?php <strong>echo </strong>$row;?>" type=<em>"text/javascript"</em>></script>
<?php
}
?>
<?php
<strong>foreach </strong>($css <strong>as </strong>$row ){
?>
<link href="<?php <strong>echo </strong>base_url(); ?><em>style/css/</em><?php <strong>echo </strong>$row;?>" rel=<em>"stylesheet"</em> type=<em>"text/css"</em> />
<?php
}
?>
</head>
<body></body>
</html>
Dapat dilihat bahwa, path dari javascript kita berarda pada base_url/style/javscript sedangkan, untuk css berada pada base_url/style/css. Untuk itu, segala file javascript dan css akan diletakan pada folder style.
Jika anda telah melihat sencha-touch tutorial, Anda dapat dengan mudah mengetahui file javascript mana yang menjadi inti dari aplikasi. Dalam Hal ini, apps.js merupakan inti dari ui kita. Isi file ini adalah sebagai berikut :
Application = <strong>new</strong> Ext.Application({
name : "Twitter Application",
launch: <strong>function</strong>(){
Application.ViewPort = <strong>new</strong> mainPanel({
id: "main",
aboutPages: [{
title: 'Overview',
card: {
xtype: 'htmlpage',
url: baseUrl + 'index.php/aboutController/overviewHTML'
}
}, {
title: 'Sponsors',
card: {
xtype: 'htmlpage',
url: baseUrl + 'index.php/aboutController/sponsorsHTML'
}
}, {
title: 'Credits',
card: {
xtype: 'htmlpage',
url: baseUrl + 'index.php/aboutController/creditsHTML'
}
}]
});
}
});
Perlu diperhatikan bahwa, variable baseUrl diinisialisasi dan dideklarasikan pada main.php (views). Variable ini berisi base_url dari aplikasi kita.
Awalnya, kita membuat aplikasi dengan perintah new Application({}); lalu pada bagian launch function, kita mendefinisikan panel yaitu mainPanel. Implementasi dari mainPanel dapat dilihat pada file view/main.js.
<strong>var</strong> mainPanel = Ext.extend(Ext.TabPanel, {
fullscreen: <strong>true</strong>,
//dockedItems: [formPanel],
tabBar: {
dock: 'top',
layout: { pack: 'center' }
},
initComponent: <strong>function</strong>() {
<strong>if</strong> (navigator.onLine) {
<strong>this</strong>.items = [{
xtype: 'streamPanel',
title: 'Stream'
}, {
title: 'About',
xtype: 'aboutPanel',
pages: <strong>this</strong>.aboutPages
}
];
} <strong>else</strong> {
<strong>this</strong>.on('render', <strong>function</strong>(){
<strong>this</strong>.el.mask('No internet connection.');
}, <strong>this</strong>);
}
mainPanel.superclass.initComponent.call(<strong>this</strong>);
}
});
Dapat dilihat bahwa mainPanel merupakan tabPanel yang kita redefine yang dapat menerima parameter tambahan misalnya aboutPages. Pada bagian aboutPanel. Di dalam panel ini, kita mendefinisikan 2 buah items yaitu streamPanel, dan aboutPanel. Perhatikan xtype dari masing-masing panel ini.
Stream Panel :
<strong>var</strong> XTemplate = "<div class='item-wrap'> " +
"<img class='image' src='{profile_image_url}' />" +
"<div class='shouts'>{description}</div>" +
"</div>";
<strong>var</strong> streamList = Ext.extend(Ext.List, {
itemTpl : XTemplate,
ui: 'round',
plugins: [{
ptype: 'pullrefresh'
}],
listeners :{
itemtap : <strong>function</strong>(list, index, element, event){
//clicked event handler.
}
}
});
<strong>var</strong> streamListPanel = Ext.extend(Ext.Panel,{
layout: "fit",
docktedItems : {
xtype: "toolbar",
title: "Stream Data"
},
items: [<strong>new</strong> streamList({store: streamStore})]
});
Ext.reg('streamListPanel', streamListPanel);
<strong>var</strong> streamPanel = Ext.extend(Ext.Panel, {
fullscreen: <strong>true</strong>,
layout: "fit",
style: "background-color: red",
title: "Stream Page",
items: [{xtype: "streamListPanel"}]
});
Ext.reg('streamPanel', streamPanel);
Keterangan :
Stream Panel merupakan list dari twitter stream yang kita akan peroleh dari streamController. Perhatian bahwa terdapat streamStore disini, streamStore diperoleh dari file stores/stream.js.
<strong>var</strong> streamStore = <strong>new</strong> Ext.data.Store({
model : "Stream",
autoLoad: <strong>true</strong>,
proxy : {
type : "ajax",
url : baseUrl + "index.php/streamController/getStreamData",
reader: {
type: "json",
root: ""
}
}
});
Keterangan :
Perhatikan url pada store diatas, store ini memperoleh data dari fungsi getStreamData dari streamController.
Kita lihat implementasi streamController ini :
<strong>public function </strong>getStreamData(){
$this->load->model("streamModel", "stream");
$streams = $this->stream->getHomeTimeline();
$streams = json_encode($streams);
<strong>echo </strong>$streams;
}
Sedangkan,fungsi getHomeTimeline pada streamModel adalah sebagai berikut :
/**
* Returns the 20 most recent statuses, including retweets if they exist, posted by the authenticating user and the user's they follow.
* @url statuses/home_timeline https://dev.twitter.com/docs/api/1/get/statuses/home_timeline
*/
<strong>function </strong>getHomeTimeline($params = <strong>NULL</strong>){
$content = $this->oauth->get('statuses/home_timeline', $params);
<strong>return </strong>$content;
}
Disini kita akan menggunakan REST API yang disediakan oleh twitter, Anda dapat mengakses : https://dev.twitter.com/docs/api untuk lebih detail terhadap REST yang disediakan oleh twitter. Disini saya menggunakan GET statuses/home_timeline API untuk memperoleh stream twitter.
Kembali ke stream.js (stores), Anda dapat melihat bahwa model yang dipergunakan adalah Stream. Model ini didefinisikan pada folder model/stream.js :
Ext.regModel('Stream',{
fields: [
{name : 'profile_image_url', type: 'string', mapping:'user.profile_image_url'}, //change mapping based on structure of retrieved json
{name : 'description', type: 'string', mapping:'text'}
]
});
Ketika kita mendapat timeline (see API), kita mendapatkan struktur data json (karena saya memilih json). Dari sekumpulan data json tersebut, saya hanya menggunakan 2 buah data yaitu profile_image_url dan text (lihat mapping variable).
Bagian stream telah selesai, sekarang kita akan mengimplementasikan bagian about. Lihat view/about.js
<strong>var</strong> aboutPanel = Ext.extend(Ext.Panel, {
fullscreen: <strong>true</strong>,
layout: "card",
style: "background-color: blue",
initComponent: <strong>function</strong>(){
<strong>var</strong> aboutList = <strong>new</strong> Ext.List({
itemTpl: '<div>{title}</div>',
ui: 'round',
store: <strong>new</strong> Ext.data.Store({
fields: ['name', 'card'],
data: <strong>this</strong>.pages
}),
plugins: [{
ptype: 'pullrefresh'
}],
listeners: {
selectionchange: {fn: <strong>this</strong>.onSelect, scope: <strong>this</strong>}
}
});
<strong>this</strong>.aboutMainPanel = <strong>new</strong> Ext.Panel({
layout: "fit",
items: aboutList
});
<strong>this</strong>.aboutMainPanel.on('activate', <strong>function</strong>(){
aboutList.getSelectionModel().deselectAll();
}, <strong>this</strong>);
<strong>this</strong>.items = [<strong>this</strong>.aboutMainPanel];
aboutPanel.superclass.initComponent.call(<strong>this</strong>);
},
onSelect: <strong>function</strong>(sel, records){
<strong>if</strong> (records[0] !== <strong>undefined</strong>) {
<strong>var</strong> newCard = Ext.apply({}, records[0].data.card, {
prevCard: <strong>this</strong>.aboutMainPanel,
title: records[0].data.title
});
<strong>this</strong>.setActiveItem(Ext.create(newCard), 'slide');
}
}
});
Ext.reg('aboutPanel', aboutPanel);
Di dalam about Panel, kita mendeklarasikan aboutList (lihat aboutMainPanel). aboutList merupakan list dari this.pages (variable input). Lihat bagian main.js ketika membuat aboutPanel, kita menpass variable pages, bukan. Sekarang kembali perhatian aboutPages yang dipass pada file apps.js
aboutPages: [{
title: 'Overview',
card: {
xtype: 'htmlpage',
url: baseUrl + 'index.php/aboutController/overviewHTML'
}
}, {
title: 'Sponsors',
card: {
xtype: 'htmlpage',
url: baseUrl + 'index.php/aboutController/sponsorsHTML'
}
}, {
title: 'Credits',
card: {
xtype: 'htmlpage',
url: baseUrl + 'index.php/aboutController/creditsHTML'
}
}]
Perhatikan xtype diatas, xtype tersebut berisi htmlpage bukan ? dan padahal sencha-touch tidak mengenal tipe ini. Untuk itu, kita perlu meregister tipe ini agar dikenali oleh sencha. Lihat html.js untuk lebih jelasnya :
<strong>var</strong> htmlPagePanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: <strong>true</strong>,
initComponent: <strong>function</strong>(){
<strong>var</strong> toolbarBase = {
xtype: 'toolbar',
title: <strong>this</strong>.title
};
<strong>if</strong> (<strong>this</strong>.prevCard !== <strong>undefined</strong>) {
toolbarBase.items = {
ui: 'back',
text: "About",
scope: <strong>this</strong>,
handler: <strong>function</strong>(){
//setActiveitem for ancestor
<strong>this</strong>.ownerCt.setActiveItem(<strong>this</strong>.prevCard, { type: 'slide', reverse: <strong>true</strong> });
}
};
}
<strong>this</strong>.dockedItems = toolbarBase;
Ext.Ajax.request({
url: <strong>this</strong>.url,
success: <strong>function</strong>(rs){
<strong>this</strong>.update(rs.responseText);
},
scope: <strong>this</strong>
});
htmlPagePanel.superclass.initComponent.call(<strong>this</strong>);
}
});
<p style="text-align: justify;">Ext.reg('htmlpage', htmlPagePanel);</p>
<p style="text-align: justify;">
Download Versi PDF disini: Sencha Touch Apps Blog
ko keluar kya gni ya..
An Error Was Encountered
In order to use the Session class you are required to set an encryption key in your config file.
coba cek di application/config/autoload.ph. mungkin library sessionnya belum di load
cek line : $autoload['libraries'] = array(‘database’,'session’, ‘curl’);
curl sebetulnya belum perlu tapi yang perlu di pastikan adalah session terload
~good luck
udah mas dah saya cek : $autoload['libraries'] = array(‘database’,’session’, ‘curl’); ..tapi tetep aja kya gtu..
- oiya mas file main.php di folder view ..source code ya seperti apa?
- trus kalau file2 yang ada di folder sytle ex. apps.css , stream.js , about.js dll tu dari mana ya?! maaf sblumnya saya masih newbie msalah penggunaan sencha + abraham twitter ini..
trimakasih sblumnya..
mnegenai session itu, coba kamu cek link berikut : http://codeigniter.com/user_guide/libraries/encryption.html
di config.php coba kamu tambahkan : $config['encryption_key'] = “YOUR KEY”;
mengenai source code ==>
kalau sekarang sih saya lagi gak megang source codenya,
nanti kalau sudah sampai rumah saya lampirkan deh source code keseluruhannya
sabar ya
~sementara itu, silakan mencoba-coba terlebih dahulu
~good luck
oks mas hafidh..thanks…
berhubung banyak yang meminta source code mengenai tutorial ini, berikut link downloadnya :
http://abdullahhafidh.files.wordpress.com/2011/10/codeigniter_2-0-3-7z1.pdf
nanti di rename aja jadi .7zip lalu di extract,,
~good luck all, semoga berguna
mas ko pas aku panggil aplikasi tsb..dia ngedirect ke :
https://api.twitter.com/oauth/authenticate?oauth_token=……………………….
” you’ve granted access to..(judul aplikasi)
next, return to ( judul aplikasi ) ..enter this PIN to complete teh authorization process..”
pas aku klik..”Go to the My First Sencha Touch Apps homepage”
yg muncul ya jadi kaya gni ya… :
A PHP Error was encountered
Severity: Notice
Message: Undefined variable: accessToken
Filename: controllers/loginController.php
Line Number: 17
A PHP Error was encountered
Severity: Notice
Message: Undefined variable: accessTokenSecret
Filename: controllers/loginController.php
Line Number: 17
kira” knapa ya mas..!!
sorry, baru2 liat2 lagi
saya memang ada yang lupa di hapus :
pada baris 17 hingga 19 tolong coba di hapus deh, baris yang ini :
if($accessToken != “” || $accessTokenSecret != “”){
redirect(“mainController/”);
}
harusnya sih tidak perlu ada. semoga sekarang berhasil.
Mas maaf ni ane g ngerti CI sama sencha touch. .
gimana caranya kalau ane ga d jalanin d android gitu d web langsungnya. bisa di buatin tutorial nya pas di view nya gak pake sencha. .
apa ada settingannya berbeda, tolong bgt mas di respon. ane kagak ngarti niii
@Brader
kalau mau gak dijalanin di android langsung, Kamu bisa coba di browser yang support web-kit, contohnya Chrome.
sencha itu hanya buat tampilannya saja, selebihnya (core system) bisa menggunakan CI (PHP Framework) dan HTML biasa kok. Bahkan menggunakan php dari scratch sebetulnya bisa-bisa saja.
Kamu hanya perlu download library twitternya. dan panggil itu di file php kamu.
mas setelah aku coba semuanya..
tpi pas aku panggil ko ngeblank ya ..
ga ada tampilanNya..gak ada apa”
knapa ya mas..
coba cek pakw firebug untuk liat errornya
makasih mas dah running..
nice tutorial..!!
update lagi ya..:)
Mas folder style yg untuk style yg ditambahkan pada folder CodeIgniter itu didapat dari mana ya? thx before ya mas saya orang baru
folder itu ditambahkan secara manual, tujuannya sih supaya lebih rapih aja strukturnya