23/01/13

SQLite offline em dispositivos mveis com HTML5 | Vincius Loureno

Vincius Loureno
Idias, conhecimento, opinio, empreendedorismo, tecnologia, PHP, AS3, Adobe Flex.
RSS Feed Home Quem o Vincius? Vincius Loureno HTML5 SQLite offline em dispositivos mveis com HTML5 jun 28

SQLite offline em dispositivos mveis com HTML5

O HTML5 de fato contm adicionais altamente interessantes para o desenvolvimento, e a criao e interao com banco de dados offline certamente uma delas. E tudo isto sem nenhuma linguagem back-end, apenas sendo realizado via Javascript, responsvel por criar a tabela e realizar as querys de CRUD (Create Retrieve Update Delete), bem como ter suas funes de tratamento de erros e atualizaes de status. Sendo assim uma boa soluo para quando suas WebApps necessitam, por algum motivo, de ter um banco de dados local e de acesso offline. Esta funcionalidade permitida em navegadores que suportam HTML5 e SQLite, cujo script JS detecta e exibe esta possibilidade logo ao iniciar sua execuo. Este mesmo exemplo foi testado nos navegadores: Google Chrome; Safari Mobile (iPad/iPhone/iPod Touch) Lembrando que para estes por default o limite de 5MB de cache. Abaixo a visualizao do banco criado utilizando o Google Chrome:

Tudo que precisamos so apenas 3 estruturas: HTML (index.html); Javascript (offlinedatabase.manifest ); Manifest (offlinedatabaseJS.js). Respectivamente e objetivamente: HTML a inteface para o usurio, Javascript com toda criao do banco bem como suas funes de CRUD, tratamento e atualizaes de status e o arquivo manifest responsvel por salvar o arquivo com as funes para uso offline. Como uma imagem vale mais do que mil palavras, abaixo a representao desta estrutura:

blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/

1/6

23/01/13

SQLite offline em dispositivos mveis com HTML5 | Vincius Loureno

Vamos ao cdigo, parte HTML:

< ! D O C T Y P EH T M L > < h t m lm a n i f e s t = " o f f l i n e d a t a b a s e . m a n i f e s t " > < h e a d > < m e t ah t t p e q u i v = " C o n t e n t T y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = U T F 8 "/ > < m e t an a m e = " v i e w p o r t "c o n t e n t = " w i d t h = 4 8 0 ;i n i t i a l s c a l e = 1 . 0 ;m a x i m u m s c a l e = 1 . 0 ;u s e r s c a l a b l e = 0 ; " > < t i t l e > O f f l i n eH T M L 5S Q L i t e-b l o g . v i l o u r e n c o . c o m . b r < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " o f f l i n e d a t a b a s e J S . j s "> < / s c r i p t > < s t y l e > b o d y{f o n t f a m i l y : V e r d a n a ,G e n e v a ,s a n s s e r i f ;f o n t s i z e : 1 1 p x ;} < / s t y l e >

< / h e a d > < b o d yo n l o a d = " o n I n i t ( ) " > < h 3 > D a d o s : < / h 3 > < u l i d = " i t e m D a t a "s t y l e = " c u r s o r : p o i n t e r ; " > < / u l > < h 3 > D e t a l h e s : < / h 3 > < f o r mn a m e = " i t e m F o r m " > < l a b e lf o r = " i d " > I d : < / l a b e l > < i n p u tt y p e = " t e x t "n a m e = " i d "i d = " i d "s i z e = 2d i s a b l e d = " t r u e " / > < l a b e lf o r = " n o m e " > N o m e : < / l a b e l > < i n p u tt y p e = " t e x t "n a m e = " n o m e "i d = " n o m e "s i z e = 1 0 / > < l a b e lf o r = " i d a d e " > I d a d e < / l a b e l > < i n p u tt y p e = " t e x t "n a m e = " i d a d e "i d = " i d a d e "s i z e = 3/ >< b r > < b r > < i n p u tt y p e = " b u t t o n "n a m e = " c r e a t e "v a l u e = " C r e a t e "o n c l i c k = " o n C r e a t e ( ) "/ > < i n p u tt y p e = " b u t t o n "n a m e = " u p d a t e "v a l u e = " U p d a t e "o n c l i c k = " o n U p d a t e ( ) "/ > < i n p u tt y p e = " b u t t o n "n a m e = " d e l e t e "v a l u e = " D e l e t e "o n c l i c k = " o n D e l e t e ( ) "/ > < / f o r m > < h 4 > S t a t u s : < / h 4 > < d i vi d = " s t a t u s " > < / d i v > < / b o d y > < / h t m l >

Abaixo a parte Javascript, onde temos as funes CRUD para criao da tabela (funo ao iniciar a aplicao), manipulao dos dados, tratamento de erros e atualizaes de status.:
/ / 1 .I n i c i a l i z a o v a rl o c a l D B=n u l l ; f u n c t i o no n I n i t ( ) { t r y{ i f( ! w i n d o w . o p e n D a t a b a s e ){ u p d a t e S t a t u s ( " E r r o :S e un a v e g a d o rn op e r m i t eb a n c od ed a d o s . " ) ; } e l s e{ i n i t D B ( ) ; c r e a t e T a b l e s ( ) ; q u e r y A n d U p d a t e O v e r v i e w ( ) ; } } c a t c h( e ){ i f( e= =2 ){ u p d a t e S t a t u s ( " E r r o :V e r s od eb a n c od ed a d o si n v l i d a . " ) ; } e l s e{ u p d a t e S t a t u s ( " E r r o :E r r od e s c o n h e c i d o :"+e+" . " ) ; } r e t u r n ; } } f u n c t i o ni n i t D B ( ) { v a rs h o r t N a m e=' s t u f f D B ' ; v a rv e r s i o n=' 1 . 0 ' ; v a rd i s p l a y N a m e=' M y S t u f f D B ' ; v a rm a x S i z e=6 5 5 3 6 ;/ /E mb y t e s l o c a l D B=w i n d o w . o p e n D a t a b a s e ( s h o r t N a m e ,v e r s i o n ,d i s p l a y N a m e ,m a x S i z e ) ;

blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/

2/6

23/01/13
}

SQLite offline em dispositivos mveis com HTML5 | Vincius Loureno

f u n c t i o nc r e a t e T a b l e s ( ) { v a rq u e r y=' C R E A T ET A B L EI FN O TE X I S T Sv i l o u r e n c o ( i dI N T E G E RN O TN U L LP R I M A R YK E YA U T O I N C R E M E N T ,n o m eV A R C H A RN O TN U L L ,i d a d eV A R C H A RN O t r y{ l o c a l D B . t r a n s a c t i o n ( f u n c t i o n ( t r a n s a c t i o n ) { t r a n s a c t i o n . e x e c u t e S q l ( q u e r y ,[ ] ,n u l l D a t a H a n d l e r ,e r r o r H a n d l e r ) ; u p d a t e S t a t u s ( " T a b e l a' v i l o u r e n c o 's t a t u s :O K . " ) ; } ) ; } c a t c h( e ){ u p d a t e S t a t u s ( " E r r o :D a t ab a s e' v i l o u r e n c o 'n oc r i a d a"+e+" . " ) ; r e t u r n ; } }

/ / 2 .Q u e r yev i s u a l i z a od eU p d a t e

f u n c t i o no n U p d a t e ( ) { v a ri d=d o c u m e n t . i t e m F o r m . i d . v a l u e ; v a rn o m e=d o c u m e n t . i t e m F o r m . n o m e . v a l u e ; v a ri d a d e=d o c u m e n t . i t e m F o r m . i d a d e . v a l u e ; i f( n o m e= =" "| |i d a d e= =" " ){ u p d a t e S t a t u s ( " ' N o m e 'e' I d a d e 's oc a m p o so b r i g a t r i o s ! " ) ; } e l s e{ v a rq u e r y=" u p d a t ev i l o u r e n c os e tn o m e = ? ,i d a d e = ?w h e r ei d = ? ; " ; t r y{ l o c a l D B . t r a n s a c t i o n ( f u n c t i o n ( t r a n s a c t i o n ) { t r a n s a c t i o n . e x e c u t e S q l ( q u e r y ,[ n o m e ,i d a d e ,i d ] ,f u n c t i o n ( t r a n s a c t i o n ,r e s u l t s ) { i f( ! r e s u l t s . r o w s A f f e c t e d ){ u p d a t e S t a t u s ( " E r r o :U p d a t en or e a l i z a d o . " ) ; } e l s e{ u p d a t e F o r m ( " " ," " ," " ) ; u p d a t e S t a t u s ( " U p d a t er e a l i z a d o : "+r e s u l t s . r o w s A f f e c t e d ) ; q u e r y A n d U p d a t e O v e r v i e w ( ) ; } } ,e r r o r H a n d l e r ) ; } ) ; } c a t c h( e ){ u p d a t e S t a t u s ( " E r r o :U P D A T En or e a l i z a d o"+e+" . " ) ; } } } f u n c t i o no n D e l e t e ( ) { v a ri d=d o c u m e n t . i t e m F o r m . i d . v a l u e ; v a rq u e r y=" d e l e t ef r o mv i l o u r e n c ow h e r ei d = ? ; " ; t r y{ l o c a l D B . t r a n s a c t i o n ( f u n c t i o n ( t r a n s a c t i o n ) { t r a n s a c t i o n . e x e c u t e S q l ( q u e r y ,[ i d ] ,f u n c t i o n ( t r a n s a c t i o n ,r e s u l t s ) { i f( ! r e s u l t s . r o w s A f f e c t e d ){ u p d a t e S t a t u s ( " E r r o :D e l e t en or e a l i z a d o . " ) ; } e l s e{ u p d a t e F o r m ( " " ," " ," " ) ; u p d a t e S t a t u s ( " L i n h a sd e l e t a d a s : "+r e s u l t s . r o w s A f f e c t e d ) ; q u e r y A n d U p d a t e O v e r v i e w ( ) ; } } ,e r r o r H a n d l e r ) ; } ) ; } c a t c h( e ){ u p d a t e S t a t u s ( " E r r o :D E L E T En or e a l i z a d o"+e+" . " ) ; } } f u n c t i o no n C r e a t e ( ) { v a rn o m e=d o c u m e n t . i t e m F o r m . n o m e . v a l u e ; v a ri d a d e=d o c u m e n t . i t e m F o r m . i d a d e . v a l u e ; i f( n o m e= =" "| |i d a d e= =" " ){ u p d a t e S t a t u s ( " E r r o :' N o m e 'e' I d a d e 's oc a m p o so b r i g a t r i o s ! " ) ; } e l s e{ v a rq u e r y=" i n s e r ti n t ov i l o u r e n c o( n o m e ,i d a d e )V A L U E S( ? ,? ) ; " ; t r y{ l o c a l D B . t r a n s a c t i o n ( f u n c t i o n ( t r a n s a c t i o n ) { t r a n s a c t i o n . e x e c u t e S q l ( q u e r y ,[ n o m e ,i d a d e ] ,f u n c t i o n ( t r a n s a c t i o n ,r e s u l t s ) { i f( ! r e s u l t s . r o w s A f f e c t e d ){ u p d a t e S t a t u s ( " E r r o :I n s e r on or e a l i z a d a " ) ; } e l s e{ u p d a t e F o r m ( " " ," " ," " ) ; u p d a t e S t a t u s ( " I n s e r or e a l i z a d a ,l i n h ai d :"+r e s u l t s . i n s e r t I d ) ; q u e r y A n d U p d a t e O v e r v i e w ( ) ; } } ,e r r o r H a n d l e r ) ; } ) ;

blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/

3/6

23/01/13

SQLite offline em dispositivos mveis com HTML5 | Vincius Loureno

} c a t c h( e ){ u p d a t e S t a t u s ( " E r r o :I N S E R Tn or e a l i z a d o"+e+" . " ) ; }

} } f u n c t i o no n S e l e c t ( h t m l L I E l e m e n t ) { v a ri d=h t m l L I E l e m e n t . g e t A t t r i b u t e ( " i d " ) ; q u e r y=" S E L E C T*F R O Mv i l o u r e n c ow h e r ei d = ? ; " ; t r y{ l o c a l D B . t r a n s a c t i o n ( f u n c t i o n ( t r a n s a c t i o n ) { t r a n s a c t i o n . e x e c u t e S q l ( q u e r y ,[ i d ] ,f u n c t i o n ( t r a n s a c t i o n ,r e s u l t s ) { v a rr o w=r e s u l t s . r o w s . i t e m ( 0 ) ; u p d a t e F o r m ( r o w [ ' i d ' ] ,r o w [ ' n o m e ' ] ,r o w [ ' i d a d e ' ] ) ; } ,f u n c t i o n ( t r a n s a c t i o n ,e r r o r ) { u p d a t e S t a t u s ( " E r r o :"+e r r o r . c o d e+" < b r > M e n s a g e m :"+e r r o r . m e s s a g e ) ; } ) ; } ) ; } c a t c h( e ){ u p d a t e S t a t u s ( " E r r o r :S E L E C Tn or e a l i z a d o"+e+" . " ) ; } } f u n c t i o nq u e r y A n d U p d a t e O v e r v i e w ( ) { / / R e m o v ea sl i n h a se x i s t e n t e sp a r ai n s e r od a sn o v a s v a rd a t a R o w s=d o c u m e n t . g e t E l e m e n t B y I d ( " i t e m D a t a " ) . g e t E l e m e n t s B y C l a s s N a m e ( " d a t a " ) ; w h i l e( d a t a R o w s . l e n g t h>0 ){ r o w=d a t a R o w s [ 0 ] ; d o c u m e n t . g e t E l e m e n t B y I d ( " i t e m D a t a " ) . r e m o v e C h i l d ( r o w ) ; } ; / / R e a l i z aal e i t u r an ob a n c oec r i an o v a sl i n h a sn at a b e l a . v a rq u e r y=" S E L E C T*F R O Mv i l o u r e n c o ; " ; t r y{ l o c a l D B . t r a n s a c t i o n ( f u n c t i o n ( t r a n s a c t i o n ) { t r a n s a c t i o n . e x e c u t e S q l ( q u e r y ,[ ] ,f u n c t i o n ( t r a n s a c t i o n ,r e s u l t s ) { f o r( v a ri=0 ;i<r e s u l t s . r o w s . l e n g t h ;i + + ){ v a rr o w=r e s u l t s . r o w s . i t e m ( i ) ; v a rl i=d o c u m e n t . c r e a t e E l e m e n t ( " l i " ) ; l i . s e t A t t r i b u t e ( " i d " ,r o w [ ' i d ' ] ) ; l i . s e t A t t r i b u t e ( " c l a s s " ," d a t a " ) ; l i . s e t A t t r i b u t e ( " o n c l i c k " ," o n S e l e c t ( t h i s ) " ) ; v a rl i T e x t=d o c u m e n t . c r e a t e T e x t N o d e ( r o w [ ' n o m e ' ]+"x" +r o w [ ' i d a d e ' ] ) ; l i . a p p e n d C h i l d ( l i T e x t ) ; d o c u m e n t . g e t E l e m e n t B y I d ( " i t e m D a t a " ) . a p p e n d C h i l d ( l i ) ; } } ,f u n c t i o n ( t r a n s a c t i o n ,e r r o r ) { u p d a t e S t a t u s ( " E r r o :"+e r r o r . c o d e+" < b r > M e n s a g e m :"+e r r o r . m e s s a g e ) ; } ) ; } ) ; } c a t c h( e ){ u p d a t e S t a t u s ( " E r r o r :S E L E C Tn or e a l i z a d o"+e+" . " ) ; } } / /3 .F u n e sd et r a t a m e n t oes t a t u s . / /T r a t a n d oe r r o s e r r o r H a n d l e r=f u n c t i o n ( t r a n s a c t i o n ,e r r o r ) { u p d a t e S t a t u s ( " E r r o :"+e r r o r . m e s s a g e ) ; r e t u r nt r u e ; } n u l l D a t a H a n d l e r=f u n c t i o n ( t r a n s a c t i o n ,r e s u l t s ) { } / /F u n e sd eu p d a t e f u n c t i o nu p d a t e F o r m ( i d ,n o m e ,i d a d e ) { d o c u m e n t . i t e m F o r m . i d . v a l u e=i d ; d o c u m e n t . i t e m F o r m . n o m e . v a l u e=n o m e ; d o c u m e n t . i t e m F o r m . i d a d e . v a l u e=i d a d e ; } f u n c t i o nu p d a t e S t a t u s ( s t a t u s ) { d o c u m e n t . g e t E l e m e n t B y I d ( ' s t a t u s ' ) . i n n e r H T M L=s t a t u s ; }

O arquivo .manifest possui apenas o nome do arquivo de Javascript para que seja armazenado no cache com fins de ser acessado offline. DEMO DOWNLOAD
blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/ 4/6

23/01/13

SQLite offline em dispositivos mveis com HTML5 | Vincius Loureno

Espero que tenham gostado do post, em casos de dvidas bastam comentar ou entrar em contato via email. Forte abrao e excelente resto de semana.

554

4
Like

Gostou do Artigo? Ento leia mais:

Vdeo: Como algoritmos moldam nosso mundo! (0) 12 Passos e um Cdigo Melhor! (0) De onde vm as boas idias (1) Como montar grficos com dados dinmicos em HTML5 via PHP e MySQL (25) MySQL Workbench 5.2.25 (1) Posted on junho 28th, 2012 Posted by Vinicius Loureno No Comment Filed under: HTML5, Linguagens, SQLite Tags: HTML5, programao, SQLite, Utilidades

Deixe uma resposta

O seu endereo de email no ser publicado Campos obrigatrios so marcados * Nome * Email * Site

Comentrio Voc pode usar estas tags e atributos de HTML: < ah r e f = " "t i t l e = " " >< a b b rt i t l e = " " >< a c r o n y mt i t l e = " " >< b >< b l o c k q u o t ec i t e = " " >< c i t e >< c o d e >
< d e ld a t e t i m e = " " >< e m >< i >< qc i t e = " " >< s t r i k e >< s t r o n g >< p r el a n g = " "l i n e = " "e s c a p e d = " "h i g h l i g h t = " " > Publicar comentrio

Pesquisar por: Translator

Pesquisar

Assine! Receba por email atualizaes dos posts publicados!

Ok!

Posts Recentes Congresso Mundial de Inovao! PHP Classe para Upload Neuromarketing e as Redes Sociais. Vdeo: Como algoritmos moldam nosso mundo! SQLite offline em dispositivos mveis com HTML5 Inovando a roda. Entrevista Revista Wide. Empreender + Inovar + Gostar. Tags:

#SouDev ActionScript3 Adobe Air Carreira Coldfusion Downloads Empreender entrevista eventos Flash

Builder Flex Flexmania HTML5 inovacao Internet

Javascript Jobs melhores prticas MySQL neurobusiness neuromarketing Oportunidades Orientao a Objetos Palestra PHP programao API Utilidades Webdesign
blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/

Pronuncia Quicktips

SQLite T witter

5/6

23/01/13

SQLite offline em dispositivos mveis com HTML5 | Vincius Loureno

Lista de Links BeckLog Daniel Schmitz Eduardo Armstrong Correnti Erko Bridee Igor Costa Janderson F. Cardoso Luiz Henrique Z. Santana Marcos Jnior Mario Junior Mrio Santos Rafael Cavalcante Srgio Rodrigues Vedovelli The Right Way!

Categorias: #SouDev Adobe Air Empreendedorismo Entrevista Eventos Flash Builder Flex HTML5 Linguagens Oportunidades PHP SQLite String Utilidades Publicidade

Vincius Loureno All Rights Reserved. Designed & Developed by Carla Izumi Bamford Powered by Wordpress Go back to top

blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/

6/6