JQuery Mobile na Pratica - Daniel Shimitz.pdf

Prévia do material em texto

jQuery Mobile 
na prática 
Daniel Pace Schmitz 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Você realmente conhece Orientação a Objetos? 
 Nesta obra explicamos, passo a passo, e com muitos 
exemplos práticos, como entender melhor cada conceito da 
POO, incluindo também padrões de projeto e construção de 
frameworks. 
 
 
Veja mais sobre este livro aqui: 
http://www.danielschmitz.com.br/dominando-orientacao-objetos.html 
 
 
 
 
 
 
Convenções utilizadas nesta obra 
 
 Informa uma dica ou observação ao leitor 
 Indica que será exibido um arquivo 
// ......... Indica que existe código fonte, mas não será exibido porque não é relevante 
naquele momento. 
Código em Negrito Indica alterações no código fonte, como por exemplo, uma nova 
propriedade adicionada a um componente. 
, ,  até   São referências ao código realizadas para um melhor entendimento. 
Sempre que houver estas referências existirá uma explicação após o código 
Sempre que encontrar um texto COMO ESTE, estamos referenciando algum dado na tela, 
como o nome do projeto ou um botão que deve ser clicado. 
Atenção: Algumas partes introdutórias do jQuery Mobile foram copiadas dos meus artigos 
da iMasters. Se a teoria é a mesma, porque escrever novamente? A documentação do 
jQuery Mobile é bastante rica também e não é o propósito desta obra traduzir tudo para o 
português. Você não está pagando pela teoria, pois ela está lá, tanto no site 
jquerymobile.com quando na imasters.com.br. Você está adquirindo uma obra focada na 
prática, com exemplos reais e inéditos. 
 
Suporte 
Acesse www.danielschmitz.com.br para conferir as últimas novidades do livro, capítulos 
extra, código fonte, etc. Você também pode acessar www.danielschmitz.com.br/suporte 
para obter suporte sobre esta obra 
Autor: Daniel Pace Schmitz 
Site: www.danielschmitz.com.br 
Suporte: www.danielschmitz.com.br/suporte 
Twitter: @Daniel_Schmitz 
SUMÁRIO 
1 Introdução ....................................................................................................................... 1 
1.1 O que podemos fazer com mobile? ....................................................................... 1 
1.2 E o que podemos fazer com jQuery Mobile? ......................................................... 2 
2 Preparando o ambiente ................................................................................................... 3 
2.1 jQuery Mobile......................................................................................................... 3 
2.2 Editor de textos ou ide ........................................................................................... 4 
2.3 Servidor Web .......................................................................................................... 4 
2.4 Navegador .............................................................................................................. 4 
3 jQuery Mobile – Tudo que você precisa saber ................................................................ 5 
3.1 Compreendendo o jQuery Mobile ......................................................................... 6 
3.2 Saber jQuery Mobile é... ......................................................................................... 8 
3.3 Páginas ................................................................................................................... 9 
3.4 Transições ............................................................................................................. 12 
3.5 Caixas de Diálodo (popups) .................................................................................. 12 
3.6 ToolBars ................................................................................................................ 14 
3.7 Icones ................................................................................................................... 15 
3.8 NavBars ................................................................................................................ 15 
3.9 Botões .................................................................................................................. 17 
3.10 Form ..................................................................................................................... 19 
3.10.1 TextInput ..................................................................................................... 19 
3.10.2 TextArea ...................................................................................................... 19 
3.10.3 Flip ............................................................................................................... 19 
3.10.4 Slider ............................................................................................................ 20 
3.10.5 Control Group com check/radio box ........................................................... 20 
3.10.6 Select ........................................................................................................... 22 
3.11 Listas ..................................................................................................................... 23 
3.12 Listas encadeadas ................................................................................................. 25 
3.13 Listas e tópicos ..................................................................................................... 27 
3.14 Listas com filtro .................................................................................................... 29 
3.15 Listas com margem ............................................................................................... 29 
3.16 Listas com texto .................................................................................................... 30 
3.16.1 Incluindo texto no lado direito .................................................................... 30 
3.16.2 Incluindo texto no item ............................................................................... 31 
3.16.3 Adicionando texto ao lado direito de cada item ......................................... 32 
3.17 Temas ................................................................................................................... 33 
3.18 Integração com jQuery ......................................................................................... 35 
4 Vamos à prática ! ........................................................................................................... 38 
4.1 Detectando o mobile ............................................................................................ 38 
4.2 Redirecionando em PHP ....................................................................................... 39 
4.3 Criando um simples site Mobile ........................................................................... 39 
4.4 Definindo uma estrutura PHP para sites mobile .................................................. 42 
4.5 Carregando conteúdo dinamicamente................................................................. 44 
4.6 Análise de erros do servidor ................................................................................. 47 
5 Exemplo Prático: Sistema de Bugs ................................................................................. 48 
5.1 Tela de administração .......................................................................................... 48 
5.2 Sistema mobile ..................................................................................................... 50 
5.3 Tela inicial ............................................................................................................. 51 
5.4 CRUD de usuários .................................................................................................52 
5.5 Crud de Projetos ................................................................................................... 64 
5.6 CRUD de Bugs ....................................................................................................... 68 
5.7 Contando itens para a tela principal .................................................................... 77 
5.8 Concluindo............................................................................................................ 79 
 
 
1 Introdução 
A cada dia o desenvolvimento para dispositivos móveis vêm ganhando um grande mercado, 
e uma das provas deste crescimento é a criação de diversas tecnologias para este fim. 
Assim como tivemos o desenvolvimento web em uma ascensão muito boa nos últimos 
anos, temos agora o início do desenvolvimento mobile, que compreende tablets e celulares. 
Assim como na Web, existem duas vertentes que devem ser consideradas no 
desenvolvimento de um projeto. Ou você está criando um site, ou você está criando um 
sistema. Veja que existe uma diferença enorme entre estes dois caminhos e é através dele 
que você começa a escolher as tecnologias que irá usar. 
Um detalhe importante no desenvolvimento mobile é que existe uma certa carência de 
recursos e componentes disponíveis e talvez por isso a regra de quanto mais simples 
melhor seja aplicada com tanta perfeição. No Mobile é impossível (ou nada recomendado) 
inserir um dataGrid cheio de colunas. Isso praticamente não existe. Mas então, o que 
podemos fazer com Mobile? 
1.1 O que podemos fazer com mobile? 
Seguindo a idéia que menos é mais, podemos criar interfaces ricas para o mobile com 
apenas um conjunto limitado de componentes. Como isso é possível? Através de um fluxo 
“natural” de informações o seu sistema mobile pode se tornar atraente ao usuário, mesmo 
com poucos recursos. Lembre-se que a ausência de componentes não compromete a sua 
aplicação (ou site) se, e somente se, o usuário se sentir confortável em usá-la. 
Com o mobile podemos otimizar a maioria dos tipos de entrada de dados de um sistema, 
excluindo formulários muito extensos, que até podem ser quebrados, mas fogem um pouco 
da simplicidade que o mobile tende a trazer. Por exemplo, um dispositivo mobile pode ser 
usado para agrupar pequenas notas de um autor, mas não será usado para escrever o livro 
propriamente dito. Nem o autor deseja isso, já que foi embutido o conceito que dispositivos 
mobile não fazem tarefas muito complexas. 
O mesmo acontece para sites mobile, onde ninguém espera preencher um formulário com 
trinta campos em uma tela tão pequena. Se isso acontecer, o usuário irá sair do seu site e 
não voltará mais. 
 
 
Toda essa simplicidade, apesar de sugerir que a sua aplicação ficará pobre, está na verdade 
contribuindo para uma aplicação melhor. Quando somos obrigados a simplificar, nós 
melhoramos um sistema. E isso está trazendo ao Mobile aplicações simples, mas que fluem 
com o que o usuário precisa. 
1.2 E o que podemos fazer com jQuery Mobile? 
O assunto específico desta obra é jQuery Mobile, então se você a comprou você sabe do 
que se trata. Não iremos falar o que é jQuery Mobile, muitos menos da sua história. 
Estamos aqui para a prática! Com jQuery Mobile podemos criar páginas que se adéquam a 
dispositivos mobile, sejam eles tablets ou celulares. 
O melhor do jQuery Mobile é que ele é HTML puro, você não precisa aprender nada novo 
ou nada complicado, basta apenas conhecer alguns conceitos fundamentais para começar a 
criar a criar a sua aplicação. Mesmo sendo puramente HTML , é possível criar tanto páginas 
quanto aplicações mobile, usando recursos do HTMl 5, que veremos ao longo desta obra. 
E o que podemos criar com jQuery Mobile? 
 Páginas HTML: Claro, este é o principal propósito. Cada página contém um título, 
um conjunto de componentes e um rodapé. A transição entre páginas é realizada 
automaticamente utilizando Ajax. Tudo isso automaticamente. 
 Barra de botões: Já conhecidas pelos usuários mobile, são indispensáveis para uma 
fácil navegação no site. 
 Formulários e seus controles: Todos os controles de um formulário, acrescidos de 
controles específicos do mobile. 
 Listas: As listas formam a principal forma de visualização de dados de uma 
aplicação/página para dispositivos mobile. 
 
No próximo capítulo iremos configurar o ambiente e instalar tudo que é necessário para 
começar a criar páginas com jQuery Mobile. 
 
2 Preparando o ambiente 
Tudo que você precisa para criar páginas com jQuery Mobile está relacionado na lista a 
seguir: 
 A biblioteca jQuery Mobile; 
 Editor de Textos, como o Notepad++, Vim, Sublime Text ou então uma IDE como o 
Eeclipse ou o Netbeans; 
 Servidor web local, quando formos criar um sistema mais complexo; 
 Navegador Web, como o Google Chrome. 
2.1 jQuery Mobile 
Todas essas ferramentas são gratuitas. Vamos começar com o donwload do jQuery Mobile, 
que pode ser realizado neste link: 
http://jquerymobile.com/download/ 
Ao acessar esta página, você verá várias opções, dividindo-se entre “CDN-Hosted” e “Zip”. 
A versão CDN é uma característica nova entre bibliotecas javascript, estabelecendo que 
você não irá “baixar” o framework para o seu site, mas sim usá-lo de um site que, em 
teoria, possui uma infraestrutura melhor, fazendo com que o download do arquivo seja 
mais rápido. 
Caso deseje obter uma cópia do framework no disco local, basta realizar o download do 
arquivo ZIP e descompactar no diretório apropriado. Nesta obra utilizaremos a versão CDN. 
Além disto a biblioteca possui duas versões: uncompressed e minified. Basta acessar o 
código fonte de cada uma das versões para entender melhor o que cada uma significa. 
Nesta obra utilizaremos a versão minified, para que possa ser carregada da forma mais 
rápida possível. 
Resumindo, iremos utilizar os seguintes arquivos: 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js 
http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.css 
 
 
 
2.2 Editor de textos ou ide 
Aqui deixamos livre a sua escolha por um editor de textos ou uma IDE. Lembre-se que todo 
o nosso desenvolvimento é focado em HTML e JavaScript, ou seja, você não precisará de 
algo “poderoso” para entender o jQuery Mobile, apenas algo que complemente o código 
HTML já está ótimo. 
2.3 Servidor Web 
Quando criarmos as aplicações de exemplo, precisaremos utilizar um servidor web para 
processar as páginas em PHP. Além disso, precisamos do servidor para que o 
processamento das páginas via Ajax seja feito sem apresentar problemas. 
Para Windows, recomenda-se instalar o Wamp Server, disponível neste link: 
http://www.wampserver.com/en/ 
Faça o download e instale, deixando o diretório padrão que é “c:\wamp\”. Desta forma 
poderemos colocar nossos arquivos em “c:\wamp\www\jqm”. 
2.4 Navegador 
Pode-se utilizar o Google Chrome ou o Mozzila Firefox para acessar as páginas jQuery 
Mobile. Para saber quais navegadores são compatíveis com o jQuery Mobile, acesse: 
http://jquerymobile.com/gbs/ 
 
3 jQuery Mobile – Tudo que você precisa saber 
A biblioeta jQuery Mobile é formada por um arquivo javascript e um arquivo css. Ambos 
podem ser instalados via CND, então podemos inicialmente criar um documento HTML 
padrão para nossos documentos HTML. 
Crie o arquivo padrao.html na pasta c:\wamp\www\jqm\ 
 Todos os exemplos desta obra serão criados na pasta jqm, para facilitar o aprendizado. 
Então quando referenciar \padrao.html, considere c:\wamp\www\jqm\padrao.html 
\padrao.html 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"><title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
 </head> 
 <body> 
 
 
 <div data-role="page"> 
 
 <div data-role="header"> 
 <h1>Minha app em JQM</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Olá Mundo</p> 
 </div> 
 
 </div> 
 
 </body> 
</html> 
 
 
 
3.1 Compreendendo o jQuery Mobile 
Podemos dividir o código jQuery Mobile em duas partes. Inicialmente a inclusão das 
bibliotecas javascript e css: 
<!-- JQM --> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 
<!-- /JQM --> 
E depois, o código da página: 
<div data-role="page"> 
 
 <div data-role="header"> 
 <h1>Minha app em JQM</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Olá Mundo</p> 
 </div> 
 
</div> 
Este código produz o seguinte resultado: 
 
 
Se você incluir esta página em um servidor, e acessá-la através do navegador do dispositivo 
mobile, verá o mesmo resultado. 
 Uma dúvida comum entre os desenvolvedores é sobre incluir a versão do arquivo jQuery 
Mobile no cabeçalho da página HTML. Imagine que o seu site possui 30 arquivos HTML 
incluindo esta versão. Para alterar a versão, você deverá editar cada arquivo HTML. Este 
pequeno problema é contornado com o uso de PHP, geralmente o link CDN para as 
bibliotecas jQuery estão em um arquivo separado. 
Perceba que adicionamos também a biblioteca jQuery , que é um item obrigatório para 
que o jQuery Mobile possa funcionar. 
Ao observar o código que define a página jQuery Mobile, pode-se perceber que trata-se 
nada mais do que HTML puro, formado pela tag <div> e pelo atributo data-role. O 
título da página é caracterizado pela tag <h1> enquanto que o corpo da página é definido 
pela tag <p>. 
No exemplo a seguir, iremos ilustrar um exemplo simples de lista: 
\lista.html 
<div data-role="page"> 
 <div data-role="header"> 
 <h1>Lista Simples</h1> 
 </div> 
 
 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
 <li>Item 4</li> 
 <li>Item 5</li> 
 </ul> 
 </div> 
</div> 
Que produz o seguinte resultado: 
 
Ou seja, uma lista é formada por HTML simples, com as tags <ul> e <li>, seguido sempre 
de uma data-role para especificar o tipo de elemento que o jQuery Mobile deve 
renderizar. 
3.2 Saber jQuery Mobile é... 
Saber jQuery Mobile é saber quais tags HTML usar e quais data-roles, o que pode ser 
facilmente consultado na documentação. Veja que não é nenhuma tarefa complexa 
conhecer estes tipos, já que conhecemos amplamente o HTML e sua estrutura. Sabemos 
que devemos criar tags encadeadas, sabemos como criar atributos para as tags, entre 
outras particularidades, que já são comuns a nós desenvolvedores Web. 
 
Nos próximos capítulos, veremos todos os detalhes do jQuery Mobile que estão na 
documentação oficial do mesmo, que pode (e deve) ser consultado sempre. Lembre-se que 
nesta obra estamos focados na prática, e não vamos estender muito quanto a teoria, que 
está na documentação. 
3.3 Páginas 
Uma página jQuery Mobile pode ser compreendida como um documento HTML, idêntico ao 
nosso padrao.html, mas também podemos ter um único documento HTML com várias 
páginas jQuery Mobile, ou seja, em um único arquivo podemos ter vários <div data-
role=”Page”> já que esta é a tag que define uma página. 
Cada página contém três seções: 
 <div data-role="header">...</div> 
 <div data-role="content">...</div> 
 <div data-role="footer">...</div> 
A página contém um cabeçalho, um conteúdo e um rodapé, ou seja, para criar uma página 
jQuery Mobile você pode usar o seguinte código inicial: 
<div data-role="page"> 
 <div data-role="header">Título</div> 
 <div data-role="content">Conteúdo</div> 
 <div data-role="footer">Rodapé</div> 
</div> 
Quando um único arquivo possui várias páginas jQuery Mobile, definimos a sua estrutura 
da seguinte forma: 
<div data-role="page" id=”pag1”> 
 <div data-role="header">Título</div> 
 <div data-role="content">Conteúdo</div> 
 <div data-role="footer">Rodapé</div> 
</div> 
<div data-role="page" id=”pag2”> 
 <div data-role="header">Título</div> 
 <div data-role="content">Conteúdo</div> 
 <div data-role="footer">Rodapé</div> 
</div> 
<div data-role="page" id=”pag3”> 
 <div data-role="header">Título</div> 
 <div data-role="content">Conteúdo</div> 
 <div data-role="footer">Rodapé</div> 
 
 
</div> 
Estas três páginas não serão exibidas de uma vez só. Inicialmente é exibido a primeira 
página, enquanto que as outras duas páginas estão “escondidas”, e podem ser chamadas 
através de um simples link, como no exemplo a seguir: 
\paginas.html 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
</head> 
<body> 
 
 
<div data-role="page" id="pag1"> 
 <div data-role="header"> 
 <h1>Página 1</h1> 
 </div> 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <li><a href="#pag2">Página 2</a></li> 
 <li><a href="#pag3">Página 3</a></li> 
 <li><a href="padrao.html">Página Padrão (outro 
arquivo)</a></li> 
 </ul> 
 </div> 
</div> 
 
<div data-role="page" id="pag2" data-add-back-btn="true"> 
 <div data-role="header"> 
 <h1>Página 2</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Esta é a página 2</p> 
 </div> 
 
</div> 
 
<div data-role="page" id="pag3" data-add-back-btn="true"> 
 <div data-role="header"> 
 <h1>Página 3</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Esta é a página 3</p> 
 </div> 
</div> 
 
</body> 
</html> 
Ao abrir esta página no navegador, clique nos links e veja a transição entre as páginas. 
Como no jQuery Mobile tudo é HTML, era de se esperar que um link entre uma página e 
outro seria realizado pela tag <a>. Repare que, quando ligamos uma página à outra de um 
mesmo arquivo, usamos # para identificar o id de uma <div>. Outro detalhe novo é o 
data-add-back-btn="true" que adiciona o botão “back” automaticamente na 
página, veja: 
 
Nota do autor: Depois que criei mais exemplos práticos com o jQuery Mobile, percebi 
que adicionar o botão back automaticamente pode trazer problemas na transição entre 
páginas, por isso é aconselhável que você adiciona o botão “back“ manualmente, da 
seguinte forma: 
 
 
<a href=’pagina’ data-role='button' data-direction='reverse' 
>Voltar</a> 
Este link pode ser adicionado antes da tag <h1> do header da página jQuery Mobile. 
 
3.4 Transições 
Por padrão, o jQuery Mobile aplica o efeito de slide na transição entre as páginas. Mas 
existem outros efeitos que podem ser aplicados, e são determinados pelo atributo data-transition. Os efeitos são: 
 pop 
 slideup 
 fade 
 slidedown 
 flip 
Para adicionar o efeito, basta incluir o atributo no link da página: 
<a href="#pag2" data-transition="pop">Página 2</a> 
 
3.5 Caixas de Diálodo (popups) 
É muito comum em aplicações para Web/Desktop criar caixas popup para exibir 
informações ou perguntar algo ao usuário. No jQuery Mobile, usamos o atributo data-
rel=”dialog” para adicionar este efeito, como no exemplo a seguir.: 
\dialogs.html 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
</head> 
<body> 
 
 
<div data-role="page" id="pag1"> 
 <div data-role="header"> 
 <h1>Um objeto qualquer</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Página de um objeto qualquer</p> 
 <a href="#confirmeDelete" data-role="button" data-
rel="dialog">Apagar</a> 
 </div> 
</div> 
 
<div data-role="page" id="confirmeDelete"> 
 <div data-role="header"> 
 <h1>Confirmação</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Tem certeza?</p> 
 <a href="#deletar" data-role="button">Sim</a> 
 <a href="#" data-role="button" data-rel="back">Não</a> 
 </div> 
</div> 
 
<div data-role="page" id="deletar"> 
 <div data-role="header"> 
 <h1>Foi...</h1> 
 </div> 
 
 <div data-role="content"> 
 <p>Apagado com sucesso!</p> 
 </div> 
</div> 
 
 
</body> 
</html> 
Execute este exemplo e navegue pelo botão apagar e pelos botões sim e não. Veja que, 
quando criamos o botão “apagar”, adicionarmos o data-role=”button”, o que torna o link 
 
 
um botão. O data-rel=”dialog” torna a página de destino (href) um popup, que 
assumirá o efeito de pop. 
A página confirmDelete possui dois botões, sendo que o botão “Sim” apenas direciona 
para outra página (lembre-se, página jQuery Mobile e não outro arquivo HTML). O botão 
“Não” possui data-rel=”back” que simula o efeito de “back” do dispositivo, voltando a 
quem o chamou. 
 Atenção: Percebe-se que todo o jQuery Mobile é um conjunto de tags HTML com 
atributos especiais. É muito importante que você visualize isso a partir deste capítulo em 
diante, para que possa ter facilidade em aprender novas tags e atributos. Caso não tenha 
entendido algo, volte e releia o conteúdo apresentado e fique a vontade em entrar em 
contato com o nosso suporte. 
3.6 ToolBars 
As toolbars podem estar no cabeçalho ou no rodapé da página. A sua posição depende 
apenas se o botão está no data-role=”header” ou no data-role=”footer”. 
Um botão da toolbar é definido através de um link <a href=””>, onde pode-se usar um 
atributo chamado data-icon, que define um ícone padrão. O exemplo a seguir pode ser 
usado para um formulário de dados: 
\toolbars.html 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
</head> 
<body> 
 
<div data-role="page" id="pag1"> 
 <div data-role="header"> 
 
 <a href="#" >Cancelar</a> 
 <h1>Um objeto qualquer</h1> 
 <a href="save.html" data-icon="check">Salvar</a> 
 </div> 
 
 <div data-role="content"> 
 <p>Página com um formulário qualquer.</p> 
 </div> 
</div> 
</body> 
</html> 
Se quiser fixar o cabeçalho ou rodapé na pagina, use o atributo data-
position=”fixed”, desta forma a rolagem da página mantém o cabeçalho da mesma. 
3.7 Icones 
Todos os botões do jQuery Mobile (que são links <a href>) podem ter ícones atribuídos 
através da propriedade data-icon. Os ícones disponíveis estão nesta página: 
http://jquerymobile.com/demos/1.0/docs/buttons/buttons-icons.html 
Além dos ícones, também pode-se alterar a posição dele em relação ao texto do botão, 
através do atributo data-iconpos=”posição”. A posição pode ser “top”, “bottom”, 
“left” e “right” e caso deseje retirar o label do botão, pode-se utilizar “notext”. 
3.8 NavBars 
Uma NavBar é composta por botões que preenchem 100% a tela, de forma a simularem 
abas para uma aplicação mobile. Para criar uma Navbar, basta usar data-
role=”navbar” seguido de item <ul> e <li>, conforme o exemplo a seguir: 
\navbar.html 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 
 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
</head> 
<body> 
 
 
<div data-role="page" id="pag1"> 
 <div data-role="header"> 
 <h1>Uma página qualquer</h1> 
 <div data-role="navbar"> 
 <ul> 
 <li><a href="#" class="ui-btn-active">Item 
1</a></li> 
 <li><a href="#">Item 2</a></li> 
 <li><a href="#">Item 3</a></li> 
 <li><a href="#">Item 4</a></li> 
 </ul> 
 </div> 
 </div> 
 
 
 <div data-role="content"> 
 <p>Página com um conteúdo qualquer.</p> 
 </div> 
 
 
</div> 
 
</body> 
</html> 
O exemplo produz o seguinte resultado: 
 
 
Pode-se inserir uma Navbar dentro do header ou footer da página. Para inserir ícones em 
uma navbar, basta usar o atributo data-icon em conjunto com data-iconpos. 
3.9 Botões 
A maioria dos botões no jQuery Mobile conduz a outras páginas (lembre-se que uma página 
jQuery Mobile não é necessariamente um arquivo HTML, mas uma seção data-
role=”Page”). 
Mas nem todos os botões são formados pela tag <input type=”Button”>, a maioria 
deles são links com o atributo data-role=”Button”, conforme o exemplo a seguir: 
<a href="index.html" data-role="button">Link button</a> 
Este exemplo produz o seguinte resultado: 
 
 
 
Da mesma forma que adicionamos ícones nas toolbars e nas navbars, podemos usar o 
atributo data-icon para adicionar ícones aos botões. No exemplo anterior, repare que o 
botão ficou com a largura total da página, e caso adicione dois botões, um ficará abaixo do 
outro. Para evitar este comportamento, usamos o atributo data-inline=”true” 
fazendo com que o botão fique no seu tamanho natural. 
Por exemplo: 
<a href="index.html" data-role="button" data-inline="true">Cancel</a> 
<a href="index.html" data-role="button" data-inline="true" data-
theme="b">Save</a> 
 
Pode-se agrupar botões facilmente através da criação de uma <div> com o atributo data-
role=”controlgroup”, conforme o exemplo a seguir: 
<div data-role="controlgroup"> 
 <a href="index.html" data-role="button">Yes</a> 
 <a href="index.html" data-role="button">No</a> 
 <a href="index.html" data-role="button">Maybe</a> 
</div> 
 
Se desejar que os botões fiquem lado a lado, usa-se o atributo data-type=”horizontal”, veja: 
<div data-role="controlgroup" data-type=”horizontal”> 
 <a href="index.html" data-role="button">Yes</a> 
 <a href="index.html" data-role="button">No</a> 
 <a href="index.html" data-role="button">Maybe</a> 
</div> 
 
 
3.10 Form 
Formuláriossão usados para a entrada de dados, sendo que como estamos usando HTML 
para criar páginas, nada mais normal do que usar os mesmos controles do HTML para os 
formulários jQuery Mobile. 
Além do jQuery Mobile estilizar os controles e botões para os dispositivos mobile, ele 
também adiciona novos controles, como o slider e o flip, que são muito comuns neste tipo 
de aplicação. 
Assim como no HTML, começamos um formulário jQuery Mobile com a tag <form>, 
incluindo os atributos action e method. Depois, podemos adicionar diversos 
componentes, enumerados a seguir. 
3.10.1 TextInput 
É o principal componente, usado para inclusão de texto. 
 <input type="text" name="name" id="name" value="" 
placeholder=”Seu nome” /> 
 
3.10.2 TextArea 
Idêntico ao HTML comum. 
<textarea cols="40" rows="8" name="textarea" 
id="textarea"></textarea> 
 
3.10.3 Flip 
Usado para alterar um valor booleando. É usado no mobile por ser mais fácil de ser alterado 
em relação a um checkBox comum. 
<div data-role="fieldcontain"> 
<select name="slider2" id="slider2" data-role="slider"> 
<option value="off">Off</option> 
<option value="on">On</option> 
</select> 
</div> 
 
 
 
 
O flip é caracterizado pelo data-role=”slider”. 
 
3.10.4 Slider 
O Slider é usado para selecionar um valor numérico dado um valor mínimo e máximo. 
<input type="range" name="slider" id="slider" value="0" min="0" 
max="100" /> 
O Slider é caracterizado pelo type=”range” e você precisa fornecer os atributos min e max. 
 
3.10.5 Control Group com check/radio box 
O controlgroup é um componente para agrupar os campos CheckBox e RadioBox. Pode-se 
agrupá-los na vertical ou na horizontal, conforme os exemplos a seguir. 
<div data-role="fieldcontain"> 
 <fieldset data-role="controlgroup"> 
 <legend>Choose as many snacks as you'd like:</legend> 
 <input type="checkbox" name="checkbox-1a" id="checkbox-1a" 
class="custom" /> 
 <label for="checkbox-1a">Cheetos</label> 
 <input type="checkbox" name="checkbox-2a" id="checkbox-2a" 
class="custom" /> 
 <label for="checkbox-2a">Doritos</label> 
 <input type="checkbox" name="checkbox-3a" id="checkbox-3a" 
class="custom" /> 
 <label for="checkbox-3a">Fritos</label> 
 <input type="checkbox" name="checkbox-4a" id="checkbox-4a" 
class="custom" /> 
 <label for="checkbox-4a">Sun Chips</label> 
</fieldset> 
</div> 
O que produz o seguinte resultado: 
 
 
 
Control Group com checkbox Horizontal: 
<div data-role="fieldcontain"> 
 <fieldset data-role="controlgroup" data-type="horizontal"> 
 <legend>Font styling:</legend> 
 <input type="checkbox" name="checkbox-6" id="checkbox-6" 
class="custom" /> 
 <label for="checkbox-6">b</label> 
 <input type="checkbox" name="checkbox-7" id="checkbox-7" 
class="custom" /> 
 <label for="checkbox-7"><em>i</em></label> 
 <input type="checkbox" name="checkbox-8" id="checkbox-8" 
class="custom" /> 
 <label for="checkbox-8">u</label> 
 </fieldset> 
</div> 
Rsultado: 
 
 
Control Group com Radio Box 
<div data-role="fieldcontain"> 
 <fieldset data-role="controlgroup"> 
 <legend>Choose a pet:</legend> 
 <input type="radio" name="radio-choice-1" id="radio-choice-1" 
value="choice-1" checked="checked" /> 
 <label for="radio-choice-1">Cat</label> 
 <input type="radio" name="radio-choice-1" id="radio-choice-2" 
value="choice-2" /> 
 <label for="radio-choice-2">Dog</label> 
 <input type="radio" name="radio-choice-1" id="radio-choice-3" 
value="choice-3" /> 
 <label for="radio-choice-3">Hampster</label> 
 <input type="radio" name="radio-choice-1" id="radio-choice-4" 
value="choice-4" /> 
 <label for="radio-choice-4">Lizard</label> 
 </fieldset> 
</div> 
Resultado: 
 
 
 
 
Control Group com Radio Box na horizontal 
<div data-role="fieldcontain"> 
 <fieldset data-role="controlgroup" data-type="horizontal"> 
 <legend>Layout view:</legend> 
 <input type="radio" name="radio-choice-b" id="radio-choice-c" 
value="on" checked="checked" /> 
 <label for="radio-choice-c">List</label> 
 <input type="radio" name="radio-choice-b" id="radio-choice-d" 
value="off" /> 
 <label for="radio-choice-d">Grid</label> 
 <input type="radio" name="radio-choice-b" id="radio-choice-e" 
value="other" /> 
 <label for="radio-choice-e">Gallery</label> 
 </fieldset> 
</div> 
Resultado: 
 
 
3.10.6 Select 
Um select é usado para escolher um valor de uma lista, mas a lista aparece em um poupu 
quando clicamos no controle. O select é criado da mesma forma que o select do HTML: 
<select name="select-choice-0" id="select-choice-1"> 
 <option value="standard">Standard: 7 day</option> 
 <option value="rush">Rush: 3 days</option> 
 <option value="express">Express: next day</option> 
 <option value="overnight">Overnight</option> 
</select> 
 
 
3.11 Listas 
Um dos componentes mais usados nas aplicações mobile é a lista. Seja para criar um menu 
para exibir configurações ou o resultado de alguma informação, a lista é uma das melhores 
alternativas para a exibição em telas com o tamanho reduzido. A lista substitui os 
conhecidos “DataGrids” da versão desktop. 
Como você já sabe, o jQuery Mobile baseia-se no modelo html, utilizando o atributo data-
role para diferenciar a visualização de informações na tela. No caso da lista, usamos 
data-role=”listview”, em uma lista <ul> <li>. 
\lista.html 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
 </head> 
 <body> 
 
 
 <div data-role="page"> 
 
 <div data-role="header"> 
 <h1>Lista Simples</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
 <li>Item 4</li> 
 <li>Item 5</li> 
 </ul> 
 </div> 
 
 
 
 </div> 
 
 </body> 
</html> 
O resultado desta lista é exibido a seguir: 
 
Se adicionarmos um link na lista, através do <a href....>, temos o seguinte resultado: 
 
 
Perceba que, quando há um link, surge o botão ao lado direito da tela. 
3.12 Listas encadeadas 
O jQuery Mobile consegue de uma forma muito fácil exibir listas encadeadas. Basta usar 
um <ul> dentro de outro <ul>. No exemplo a seguir, suponha que você deseja mostrar os 
estados do Brasil de acordo com as regiões: 
 \listaEncadeada.html 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 
 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
 </head> 
 <body> 
 
 
 <div data-role="page" id="primeira" data-theme="a"> 
 
 <div data-role="header" data-theme="b"> 
 <h1>Estados do Brasil</h1> 
 </div> 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <li>Sudeste<ul> 
 <li>Minas Gerais</li> 
 <li>São Paulo</li> 
 <li>Rio de Janeiro</li> 
 <li>Espírito Santo</li> 
 </ul> 
 </li> 
 <li>Sul 
 <ul> 
 <li>Paraná</li> 
 <li>Santa Catarina</li> 
 <li>Rio Grande do Sul</li> 
 </ul> 
 </li> 
 <li>Centro-Oeste 
 <ul> 
 <li>Mato Grosso</li> 
 <li>Goiás</li> 
 <li>Mato Grosso do Sul</li> 
 </ul> 
 </li> 
 <li>Nordeste 
 <ul> 
 <li>Bahia</li> 
 <li>Sergipe</li> 
 <li>....</li> 
 <li>Maranhão</li> 
 </ul> 
 </li> 
 <li>Norte 
 <ul> 
 <li>Amazonas</li> 
 <li>Acre</li> 
 
 <li>Pará</li> 
 <li>Amapá</li> 
 <li>Roraima</li> 
 <li>Tocantins</li> 
 </ul> 
 </li> 
 </ul> 
 </div> 
 </div> 
 
 </body> 
</html> 
O resultado é a lista a seguir. Quando clicamos em um item, surge uma nova lista: 
 
3.13 Listas e tópicos 
Outro exemplo bastante usado é a divisão de uma lista em tópicos. Para criar o tópico, usamos o atributo 
data-role=”list-divider”. O exemplo dos estados pode ser refatorado para: 
\listaEncadeadaTopicos.html 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title></title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 
 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
 </head> 
 <body> 
 
 
 <div data-role="page" id="primeira" data-theme="a"> 
 
 <div data-role="header" data-theme="b"> 
 <h1>Estados do Brasil</h1> 
 </div> 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <li data-role="list-divider">Sudeste</li> 
 <li>Minas Gerais</li> 
 <li>São Paulo</li> 
 <li>Rio de Janeiro</li> 
 <li>Espírito Santo</li> 
 <li data-role="list-divider">Sul</li> 
 <li>Paraná</li> 
 <li>Santa Catarina</li> 
 <li>Rio Grande do Sul</li> 
 <li data-role="list-divider">Centro-Oeste</li> 
 <li>Mato Grosso</li> 
 <li>Goiás</li> 
 <li>Mato Grosso do Sul</li> 
 <li data-role="list-divider">Nordeste</li> 
 <li>Bahia</li> 
 <li>Sergipe</li> 
 <li>....</li> 
 <li>Maranhão</li> 
 <li data-role="list-divider">Norte</li> 
 <li>Amazonas</li> 
 <li>Acre</li> 
 <li>Pará</li> 
 <li>Amapá</li> 
 <li>Roraima</li> 
 <li>Tocantins</li> 
 </ul> 
 </div> 
 </div> 
 </body> 
</html> 
Resultado: 
 
 
 
3.14 Listas com filtro 
É muito simples adicionar um filtro na sua lista, bastando apenas adicionar o atributo data-
filter=”true” na definição do data-role=”listview”. 
Exemplo: 
<ul data-role="listview" data-filter="true"> 
 <li data-role="list-divider">Sudeste 
 <li>Minas Gerais</li> 
 <li>São Paulo</li> 
3.15 Listas com margem 
Para adicionar uma margem em uma lista, basta usar o atributo data-inset=”true”. O 
resultado é exibido na figura a seguir: 
 
 
 
 
3.16 Listas com texto 
Uma lista de itens não está limitado a conter somente itens. Pode-se adicionar diversos 
itens a mais nela, sendo que cada item é corretamente renderizado no dispositivo. 
3.16.1 Incluindo texto no lado direito 
Ao usar a seguinte tag: <span class="ui-li-count">...</span> pode-se adicionar um texto na 
parte direita do item da lista. Por exemplo: 
 
 <ul data-role="listview" data-inset="true"> 
 <li data-role="list-divider">Sudeste 
 <span class="ui-li-count">4</span> 
 </li> 
 <li>Minas Gerais</li> 
 <li>São Paulo</li> 
 <li>Rio de Janeiro</li> 
 <li>Espírito Santo</li> 
 
 <li data-role="list-divider">Sul 
 <span class="ui-li-count">3</span></li> 
 ... (continua)... 
Resultado: 
 
 
3.16.2 Incluindo texto no item 
Se você usar <h3> e <p> dentro do <li>, terá um resultado bastante agradável, veja: 
<li data-role="list-divider">Sul 
 <span class="ui-li-count">3</span></li> 
<li> 
 <h3>Paraná</h3> 
 <p>População: 345.000</p> 
</li> 
<li>Santa Catarina</li> 
<li>Rio Grande do Sul</li> 
Resultado: 
 
 
 
3.16.3 Adicionando texto ao lado direito de cada item 
Pode-se também adicionar texto ao lado direito do item, através do atributo <p 
class="ui-li-aside">Texto</p>. O Exemplo a seguir: 
<li> 
<h3>Paraná</h3> 
 <p>População: 345.000</p> 
 <p class="ui-li-aside">Capital: Curitiba</p> 
</li> 
Tem o seguinte resultado: 
 
 
 
Como podemos ver, o jQuery Mobile formatou a lista de tags ul, li, h3 e p. Basta sabermos como 
adicionar cada tag para que a lista seja criada. Como dentro do li criamos um H3, então o jQuery Mobile 
coloca o texto em evidência. Se o H3 for um link, será adicionado um botão > para que o link seja 
executado ao clicar. Também que criamos um p com uma classe chamada ui-li-aside que determina um 
texto no canto direito da tela. Os dividers (data-role=list-divider) também tem um <p> com a classe ui-li-
count que formatam corretamente um item no canto direito do divisor. 
3.17 Temas 
O jQuery Mobile possui alguns tema prontos que podem ser usados através do atributo 
data-theme, que possui alguns padrões escolhidos através de uma letra. Os temas 
disponíveis são: 
 
 
 
Para alterar o tema, basta usar o seguinte atributo: 
<div data-role="page" > 
 
 <div data-role="header" data-theme="b"> 
 <h1>Minha app em JQM</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <p>Olá Mundo</p> 
 </div> 
 
</div> 
O que produz o seguinte resultado: 
 
 
 
Veja que, ao inserir um data-theme=”b”, que possui a cor azul. O esquema de cores é a seguinte: 
 
Pode-se combinar cores da forma que achar melhor. Caso queira criar um tema totalmente 
personalizado, acesse o seguinte site: 
http://jquerymobile.com/themeroller/ 
 
3.18 Integração com jQuery 
Já sabemos que o jQuery Mobile é construído com base no jQuery, então é perfeitamente 
válido usar o que você sabe de JQuery no jQuery Mobile. No exemplo a seguir, usamos o 
evento padrão mobileinit para podermos alterar algumas configurações do jQuery 
Mobile. 
 
 
\jquery\initialize.html 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title>Jquery Initialize</title> 
 <!--JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 
 <!-- Importante, colocar antes da incluão do jquerymobile --> 
 <script type="text/javascript"> 
 
 $(document).bind("mobileinit", function(){ 
 
 $.mobile.page.prototype.options.backBtnText = 
"Voltar"; 
 
 }); 
 
 </script> 
 
 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
 
 
 
 
 </head> 
 <body> 
 
 
<div data-role="page" id="p1" > 
 
 <div data-role="header" data-theme="b"> 
 <h1>Minha app em JQM</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <p id="hello">Olá Mundo</p> 
 <a href="#p2">Pagina 2</a> 
 </div> 
 
 
</div> 
 
<div data-role="page" id="p2" data-add-back-btn="true"> 
 
 <div data-role="header" data-theme="b" > 
 <h1>Página 2</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <p id="hello">Com botão voltar personalizado</p> 
 </div> 
 
</div> 
 
 </body> 
</html> 
Para que você possa utilizar o evento mobileinit, é fundamental que você referencie o evento 
antes de adicionar a biblioteca javascript do jQuery Mobile. Neste exemplo, usamos o evento para 
reconfigurar o texto do botão “back” que é adicionado automaticamente na página, veja: 
 
 
 
Através do mobileinit pode-se interagir diretamente com o jQuery, e criar personalizações mais 
avançadas. Por exemplo, você pode navegar para uma nova página usando o método 
$.mobile.changePage. Estes métodos personalizados podem ser encontrados neste link: 
http://jquerymobile.com/demos/1.0.1/docs/api/methods.html 
 
 
4 Vamos à prática ! 
Agora que já conhecemos o básico do jQuery Mobile, podemos criar nossos exemplos 
focados na prática. 
Atenção: Nós não mostramos tudo sobre jQuery Mobile, claro! Ainda existe mais 
conteúdo que poderia ser abordado, mas não é este o propósito da obra. Nós não somos 
robôs que decoram tudo que é lido e com certeza algumas funcionalidades excêntricas nem 
vale a pena ser aprendidas. Pode confiar, o que vimos até agora irá cobrir 90% do que você 
precisa. 
4.1 Detectando o mobile 
Uma das novas atribuições de um site ou sistema é diferenciar o tipo de acesso do usuário, 
se ele está navegando através de um browser normal ou de um dispositivo mobile. Existem 
diversas bibliotecas para este fim, dependendo claro da linguagem que você está usando. 
Basicamente, você deve descobrir o navegador que a requisição está processando, e isso é 
feito através do userAgent do mesmo. 
Em PHP, podemos usar o seguinte código para verificar o userAgent: 
\userAgent.php 
<?php 
var_dump($_SERVER['HTTP_USER_AGENT']); 
?> 
Que resulta em: 
string 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, 
like Gecko) Chrome/16.0.912.75 Safari/535.7' (length=105) 
Caso você abra no Google Chrome. Então basta verificar se o navegador pertence a um 
dispositivo mobile e redirecionar a página. Mas talvez essa seja uma tarefa chata de fazer, e 
com uma rápida pesquisa no Google, pode-se encontrar ferramentas para isso. 
No PHP, pode-se utilizar a biblioteca “php-mobile-detect”, disponível em: 
http://code.google.com/p/php-mobile-detect/ 
Existem outras bibliotecas, caso encontre problemas, ou se estiver utilizando outra 
tecnologia no servidor. 
 
Após detectar o mobile, deve-se redirecionar a página para algum lugar dentro do site que 
renderize o site utilizando jQuery Mobile. Geralmente este site é um subdomínio do site 
principal, iniciado pela letra “m”. Por exemplo, o site www.pontofrio.com.br possui a sua 
versão mobile em m.pontofrio.com.br. O mesmo para m.google.com, e assim em diante. 
4.2 Redirecionando em PHP 
Após detectar o dispositivo, pode-se realizar o redirecionamento do site. Em php, podemos 
fazer o seguinte: 
\turismoMobile\index.php 
<?php 
include "Mobile_Detect.php"; 
$mobileDetect = new Mobile_Detect(); 
if ($mobileDetect->isMobile()) 
{ 
 header("location:m/index.html"); 
} 
 
?> 
 
Este é um site de turismo fictício 
Usamos a biblioteca MobileDetect para saber se o dispositivo de acesso é mobile, e então 
realizar o redirecionamento para a página index.html da pasta “m”. Você pode redirecionar 
também para “m.seusite.com.br” caso tenha criado o subdomínio. 
4.3 Criando um simples site Mobile 
Agora que já sabemos que o usuário está utilizando um dispositivo mobile, podemos pelo 
menos exibir a ele uma página devidamente formatada com informações que ele necessita. 
Somente com esse passo você já pode começar a utilizar o jQuery Mobile para converter 
alguns sites estáticos que você possui (e mostrar para o chefe , claro). 
Neste teste vamos criar em um único arquivo index.html algumas páginas jQuery Mobile 
que mostram todos os detalhes da empresa. Vamos supor um site que vende pacotes de 
turismo, chamando-o de TurismoMobile: 
\turismoMobile\m\index.html 
<!DOCTYPE html> 
<html> 
 
 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title>Turismo Mobile</title> 
 <!-- JQM --> 
 <link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
 <script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
 <!-- /JQM --> 
</head> 
<body> 
 
 
<div data-role="page"> 
 
 <div data-role="header" data-theme="b"> 
 <h1>Turismo Mobile</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <p>A tela é pequena mas a quantidade de opções de 
pacotes de turismo 
 do nosso site é do tamanho do seu mundo. Aproveite! 
 </p> 
 
 <div data-role="collapsible"> 
 <h3>Quem Somos</h3> 
 <p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum</p> 
 </div> 
 
 <div data-role="collapsible"> 
 <h3>Nossa Missão</h3> 
 <p>Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
 
non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum</p> 
 </div> 
 
 <ul data-role="listview" data-inset="true"> 
 <li data-role="list-divider">Viagens</li> 
 <li>Brasil 
 <ul> 
 <li>Nordeste</li> 
 <li>Sudeste</li> 
 <li>Sul</li> 
 </ul> 
 </li> 
 <li>Europa 
 <ul> 
 <li>Roma</li> 
 <li>Madri</li> 
 <li>Londres</li> 
 </ul> 
 </li> 
 </ul> 
 
 
 <a href="tel:11112222" data-role="button"> 
 Ligue para nós 
 </a> 
 </div> 
 
</div> 
 
</body> 
</html> 
Resultado:Neste exemplo conseguimos em um único arquivo criar um site institucional para a sua 
empresa. Mesmo não tendo muita informação, já é um começo. 
4.4 Definindo uma estrutura PHP para sites mobile 
Podemos usar um pouco de código PHP para melhorar a estrutura de um site mobile, de 
forma a criar páginas com mais facilidade. O principal objetivo do código é fornecer uma 
forma mais fácil para atualizar o jQuery Mobile, caso haja atualizações. Repare que se você 
criar diversos arquivos HTML, incluindo o caminho das bibliotecas do jQuery Mobile, você 
terá que editar cada arquivo quando houver uma atualização da mesmo. 
 
Isso é corrigido de forma muito fácil através de includes. Toda linguagem (php, Java, .net 
etc) possui este artifício. Inicialmente, crie um arquivo chamado jqm.php e coloque o 
seguinte texto: 
 \estrutura\jqm.php 
<!-- JQM --> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script> 
<!-- /JQM --> 
Então para criar uma página usando jQuery Mobile, basta fazer: 
\estrutura\index.php 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title>TITULO</title> 
 <?php include("jqm.php")?> 
</head> 
<body> 
 
<div data-role="page"> 
 
 <div data-role="header" data-theme="b"> 
 <h1>Título</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <p>Conteúdo</p> 
 </div> 
 
</div> 
 
</body> 
</html> 
 
 
 
 
4.5 Carregando conteúdo dinamicamente 
Uma das características mais interessantes do jQuery Mobile é o carregamento dinâmico de 
conteúdo. Esta característica é possível através do Ajax, já que o jQuery Mobile carrega o 
conteúdo primeiro e somente depois o adiciona na página (ou no DOM do HTML, sendo 
mais técnico). 
Através deste recurso, você não precisa criar um arquivo php com a definição 
<HTML><head>...</head><body></body></HTML> para cada funcionalidade do 
sistema. 
Para que possamos entender melhor este recurso, vamos ao exemplo a seguir: 
\conteudoDinamico\index.php 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title>TITULO</title> 
 <?php include("jqm.php")?> 
</head> 
<body> 
 
 
<div data-role="page"> 
 
 <div data-role="header" data-theme="b"> 
 <h1>Conteúdo dinâmico</h1> 
 </div><!-- /header --> 
 
 <div data-role="content"> 
 <a href="lista.php" data-role="button">Lista</a> 
 </div> 
 
</div> 
 
</body> 
</html> 
Até aqui temos uma página HTML simples. Criamos um link, que irá redirecionar para a 
página lista.php. Na verdade, o jQuery Mobile vai inicialmente ler o conteúdo do arquivo 
lista.php, via Ajax, e então adicioná-lo a página. Não será realizado o carregamento de uma 
nova página, como é o que acontece normalmente quando executamos um link. Vamos ver 
o arquivo lista.php: 
 
\ conteudoDinamico\lista.php 
<?php 
$dadosDoBanco = array("Item 1","Item 2","Item 3","Item 4"); 
?> 
<div data-role="page"> 
 
 <div data-role="header"> 
 <h3>Lista Qualquer</h3> 
 </div> 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <?php 
 
 foreach ($dadosDoBanco as $item) 
 { 
 echo "<li>$item</li>"; 
 } 
 
 ?> 
 </ul> 
 </div> 
 
</div> 
Uma particularidade deste código é que não incluímos <HTML> ou <BODY>, ele apenas 
retorna o código HTML de uma página em jQuery Mobile. O resultado do código acima é o 
seguinte: 
 
<div data-role="page"> 
 
 <div data-role="header"> 
 <h3>Lista Qualquer</h3> 
 </div> 
 
 <div data-role="content"> 
 <ul data-role="listview"> 
 <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 
4</li> 
 </ul> 
 </div> 
 
</div> 
Se acessarmos diretamente a página lista.php, teremos o seguinte resultado: 
 
 
 
Mas acessando através da página do jQuery Mobile, clicando no link, temos: 
 
 
Quando o arquivo lista.php é chamado pelo link do jQuery Mobile, o conteúdo é 
devidamente carregado. 
Nos exemplos que iremos criar, a maioria dos arquivos retorna somente um pedaço do 
código HTML para a página, que está com o jQuery Mobile devidamente carregado. Agora 
que conhecemos um pouco da prática vamos trabalhar em um sistema real, no próximo 
capítulo. 
 
4.6 Análise de erros do servidor 
O método de requisição Ajax do jQuery Mobile traz um pequeno problema quando a página 
a ser carregada não é renderizada corretamente. Suponha que você esteja utilizando php, e 
que por descuido tenha esquecido de adicionar um ponto e vírugula no final de uma linha 
qualquer. 
Acessando a págnia php com o erro, poderemos vê-lo da seguinte forma: 
Parse error: syntax error, unexpected T_VARIABLE in users.php on line 
4 
Mas, quando estamos utilizando o jQuery Mobile , este erro não surge tão facilmente 
assim. Na atual versão, o jQuery Mobile apenas renderiza uma página em branco. Quando 
isso acontecer, acesse o painel de console da página. No Google Chrome, aperte 
CTRL+SHIFT+J, e navegue até a aba Network (Rede). Analise a última requisição Ajax e a sua 
resposta. O erro estará lá, conforme a figura a seguir: 
 
Você também pode acessar o log de erros do servidor. 
 
 
5 Exemplo Prático: Sistema de Bugs 
Agora que temos pelo menos 90% da teoria sobre jQuery Mobile abordada, podemos partir 
para a criação de um sistema e com isso finalizar o nosso aprendizado. Vamos criar um 
pequeno sistema de monitoramento de bugs, contendo as seguintes tabelas: 
 
5.1 Tela de administração 
Tanto este modelo quando a SQL para a criação dele no seu banco de dados estão na pasta 
bugsSystem. Após a criação do modelo, foi usado a ferramenta SQLMaestro
1
 para gerar as 
telas de administração (entrada de dados), conforme o exemplo a seguir: 
 
 
1
 http://www.sqlmaestro.com/products/mysql/phpgenerator/ 
 
 
 
 
 
Este sistema foi totalmente gerado pela ferramenta, e encontra-se na pasta 
bugsSystemAdmin. Para que você possa executar este sistema no seu computador, acesse o 
arquivo bugsSystemAdmin/phpgen_settings.php e altere as informações de 
acesso ao banco de dados. 
Este sistema foi criado apenas para facilitar uma entrada inicial de dados, e pode 
representar também um sistema legado que você já tenha. Na maioria das vezes, o sistema 
mobile é um complemento ao sistema principal e estaremos simulando esta situação neste 
exemplo. 
5.2 Sistema mobile 
O sistema mobile estará na pasta “bugsSystem/m/” enquanto que a verificação do 
dispositivo estará em “bugsSystem/index.php”, veja: 
bugsSystem\index.php 
<?php 
include "Mobile_Detect.php"; 
$mobileDetect = new Mobile_Detect(); 
if ($mobileDetect->isMobile()) 
{ 
 header("location:m/index.php"); 
} 
?> 
 
Aqui entraria o sistema normal do bugsSystem, quando acessado por um 
navegador sem ser mobile. 
 
 
Para darmos início ao nosso sistema mobile, precisamos criar o arquivo jqm.php com a 
chamada ao jQuery Mobile (igual nos exemplos anteriores) e o arquivo conn.php que 
contém a conexão com o banco de dados. Quanto à conexão, vamos usar PDO para acesso 
ao MySql, que é a forma mais simples de acesso. 
A conexão com o banco começa assim: 
\bugsSystem\m\conn.php 
<?php 
$conn = new PDO('mysql:host=localhost;dbname=bugsSystem', 
'root','123456'); 
?> 
A variável$conn armazena a conexão com o banco, então sempre a usaremos para 
executar as SQLs necessárias. 
5.3 Tela inicial 
A tela de entrada do sistema mobile contém um menu simples, conforme o código a seguir: 
\bugsSystem\m\index.php 
<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8"> 
 <title>Bugs System Mobile</title> 
 <?php include("jqm.php"); ?> 
</head> 
<body> 
 
 
<div data-role="page"> 
 
 <div data-role="header" data-theme="b"> 
 <h1>Bugs System Mobile</h1> 
 </div> 
 
 <div data-role="content"> 
 <ul data-role="listview" data-inset="true"> 
 <li data-role="list-divider">Menu</li> 
 <li><a 
href="users.php?action=list">Usuários</a></li> 
 <li><a 
href="projetos.php?action=list">Projetos</a></li> 
 
 
 <li><a href="bugs.php?action=list">Bugs</a></li> 
 </ul> 
 </div> 
 
</div> 
 
</body> 
</html> 
O menu chama outros arquivos, repassando um atributo chamado “action” para que o 
conteúdo possa ser montado corretamente. 
5.4 CRUD de usuários 
Por exemplo, ao selecionar “Usuários” iremos carregar o arquivo users.php repassando o 
action “list”. O código para esta funcionalidade é descrito a seguir: 
\bugsSystem\m\users.php 
<?php 
include("conn.php"); 
 
$saida = "<div data-role='page'>"; 
 
switch ($_GET['action']) 
{ 
 case "list": 
 
 $usuarios = $conn->query("SELECT * from accounts")-
>fetchAll(); 
 
 
 $saida .= "<div data-role='header' data-theme='b'><a 
href='index.php' data-direction='reverse'>Home</a><h1>Usuários</h1>"; 
 $saida .= "<a href='users.php?action=new' class='ui-btn-
right'>Novo</a>"; 
 $saida .= "</div>"; // header 
 
 $saida .= "<div data-role='content'>"; 
 $saida .= "<ul data-role='listview'>"; 
 
 foreach ($usuarios as $usuario) 
 { 
 $id = $usuario['id']; 
 $nome = $usuario['name']; 
 $link = "users.php?action=edit&id=$id"; 
 
 
 $saida .= "<li><a href='$link'>$nome</a></li>"; 
 } 
 
 $saida .= "</ul>"; 
 $saida .= "</div>"; //content 
 
 break; 
} 
$saida .= "</div>"; //page 
echo $saida; 
?> 
Entender esta parte do código é fundamental para compreender toda a aplicação. Como 
repassamos a variável GET “action”, fazemos um switch para selecionar a ação desejada. No 
caso do List, o que fazemos é executar a SQL para obter todos os usuários da tabela 
accounts. 
Após obter estes dados, começamos a “montar” o HTML da página, criando um listview e 
definindo os itens de cada usuário. Veja também que adicionamos um botão novo, e um 
botão para editar o usuário (link no item da lista). 
O resultado do código até agora é o seguinte: 
 
 
 
O botão novo irá criar um formulário para a entrada de dados (action new). 
\bugsSystem\m\users.php 
… // codigo anterior 
case "new": 
 $saida .= "<div data-role='header'><a href='#' data-
rel='back'>Voltar</a><h1>Adicionar Usuário</h1>"; $saida .= 
"</div>"; // header 
 
 $saida .= "<div data-role='content'>"; 
 $saida .= "<form action='users.php?action=save' 
method='post'>"; 
 
 $saida .= "<input type='hidden' id='id' name='id' value=''/>"; 
 $saida .= "<input type='text' id='name' name='name' value='' 
placeholder='Nome'/>"; 
 $saida .= "<input type='password' id='password' 
name='password' value='' placeholder='Senha'/>"; 
 $saida .= "<input type='submit' value='Adicionar'/>"; 
 
 $saida .= "</form>"; 
 
 
 $saida .= "</div>"; // content 
 
 
 break; 
... 
Este formulário apresentará o seguinte resultado: 
 
Ao clicarmos em adicionar, a action save será chamada, com o seguinte código: 
\bugsSystem\m\users.php 
... 
case "save": 
 
 $id = $_POST["id"]; 
 $name = $_POST["name"]; 
 $password = $_POST["password"]; 
 
 if ($id!='') //update 
 { 
 $array_usuario = 
array('name'=>$name,'password'=>$password); 
 $conn->prepare("UPDATE accounts SET name=:name, 
password=:password WHERE id=$id")->execute($array_usuario); 
 
 
 $saida .= "<div data-role='header' data-
theme='b'><h1>Editar Usuário</h1>"; 
 $saida .= "</div>"; // header 
 
 
 
 $saida .= "<div data-role='content'>Salvo com sucesso."; 
 $saida .= "<a href='users.php?action=list' data-
role='button' data-direction='reverse' >Lista de Usuários</a>"; 
 $saida .= "<a href='index.php' data-role='button' data-
direction='reverse' >Home</a>"; 
 $saida .= "</div>"; //content 
 
 } 
 else 
 { 
 
 $array_usuario = 
array('name'=>$name,'password'=>$password); 
 $conn->prepare("INSERT INTO accounts (name,password) 
VALUES (:name,:password)")->execute($array_usuario); 
 
 $saida .= "<div data-role='header' data-
theme='b'><h1>Adicionar Usuário</h1>"; 
 $saida .= "</div>"; // header 
 
 $saida .= "<div data-role='content'>Salvo com sucesso."; 
 $saida .= "<a href='users.php?action=list' data-
role='button' data-direction='reverse' >Lista de Usuários</a>"; 
 $saida .= "<a href='index.php' data-role='button' data-
direction='reverse' >Home</a>"; 
 $saida .= "</div>"; //content 
 
 } 
 
 break; 
... 
A action save realiza duas operações: insert e update. A operação depende se o atributo ID 
está preenchido ou não. Após realizar a operação, montamos uma página indicando que o 
registro foi salvo e com dois botões, para a lista de usuários ou para a home do sistema. 
Repare que estes dois botões possuem o atributo data-direction=’reverse’, para dar a 
impressão que estamos voltando na página requisitada. Este efeito é diferente do data-
rel=’back’, que realmente realiza um voltar no histórico de páginas. 
Ao selecionar um usuário da lista, é carregado a action Edit, com o seguinte código: 
\bugsSystem\m\users.php 
... 
case "edit": 
 
 $id = $_GET["id"]; 
 
 $stmt = $conn->prepare("SELECT * FROM accounts WHERE id = ?"); 
 $ok = $stmt->execute(array($id)); 
 
 if ($ok) 
 { 
 
 $usuario = $stmt->fetch(); 
 
 $id = $usuario["id"]; 
 $name = $usuario["name"]; 
 $password = $usuario["password"]; 
 
 $saida .= "<div data-role='header' data-theme='b'><a 
href='#' data-rel='back'>Voltar</a><h1>Editar Usuário</h1>"; 
 $saida .= "<a 
href='users.php?action=confirmDel&id=$id&name=$name' class='ui-btn-
right' data-rel='dialog'>Apagar</a>"; 
 $saida .= "</div>"; // header 
 
 $saida .= "<div data-role='content'>"; 
 $saida .= "<form id='editarUsuario' name='editarUsuario' 
action='users.php?action=save' method='post'>"; 
 
 $saida .= "<input type='hidden' id='id' name='id' 
value='$id'/>"; 
 $saida .= "<input type='text' id='name' name='name' 
value='$name' placeholder='Nome'/>"; 
 $saida .= "<input type='password' id='password' 
name='password' value='$password' placeholder='Senha'/>"; 
 $saida .= "<input type='submit' value='Editar'/>"; 
 
 
 $saida .= "</form>"; 
 
 $saida .= "</div>"; // content 
 
 } 
 else 
 { 
 $saida = "<div data-role='header' data-
theme='b'><h1>Usuário não econtrado</h1></div>"; 
 } 
 
 break; 
A action edit cria um formulário para edição dos dados do usuário selecionado na lista. 
Além disso, também adicionamos um botão para apagar o usuário. Esse botão inclusive 
 
 
possui o atributo data-rel=’dialog’ para que seja aberta uma caixa de diálogo 
confirmando a operação. 
 
Ao clicar em editar, chamamos novamente a action save para salvar o registro, que neste 
caso será realizado um update. 
Ao clicar no botão Apagar, será carregada a action confirmDelete, com o seguinte código: 
\bugsSystem\m\users.php 
case "confirmDel":$name = $_GET['name']; 
 $id = $_GET['id']; 
 
 $saida .= "<div data-role='header' data-
theme='b'><h1>Apagar?</h1></div>"; 
 $saida .= "<div data-role='content'><p>Dseja realmente apagar 
'$name'</p>"; 
 $saida .= "<a href='users.php?action=del&id=$id' data-
role='button'>Sim</a>"; 
 $saida .= "<a href='#' data-role='button' data-
rel='back'>Não</a>"; 
 $saida .= "</form>"; 
 $saida .= "</div>"; 
 
 
 break; 
A tela de confirmação para apagar o registro possui dois botões. O botão “sim” redireciona 
para a action “del”, enquanto que o botão não apenas fecha a caixa de diálogo. 
 
A action del executa o sql para apagar o registro e exibe uma mensagem de confirmação. 
\bugsSystem\m\users.php 
case "del": 
 
$id = $_GET["id"]; 
 
$stmt = $conn->prepare("DELETE FROM accounts WHERE id = ?"); 
$ok = $stmt->execute(array($id)); 
 
 
$saida .= "<div data-role='header' data-theme='b'><h1>Apagar 
Usuário</h1>"; 
$saida .= "</div>"; // header 
 
$saida .= "<div data-role='content'>Usuário apagado."; 
$saida .= "<a href='users.php?action=list' data-role='button' data-
direction='reverse' >Lista de Usuários</a>"; 
 
 
$saida .= "<a href='index.php' data-role='button' data-
direction='reverse' >Home</a>"; 
$saida .= "</div>"; //content 
 
 
break; 
 
Com isso finalizamos as operações básicas de um usuário (CRUD). O código completo da 
aplicação é exibido a seguir: 
\bugsSystem\m\users.php 
<?php 
include("conn.php"); 
 
$saida = "<div data-role='page'>"; 
 
switch ($_GET['action']) 
{ 
case "list": 
 
$usuarios = $conn->query("SELECT * from accounts")->fetchAll(); 
 
 
$saida .= "<div data-role='header' data-theme='b'><a href='index.php' 
data-direction='reverse'>Home</a><h1>Usuários</h1>"; 
$saida .= "<a href='users.php?action=new' class='ui-btn-
right'>Novo</a>"; 
$saida .= "</div>"; // header 
 
$saida .= "<div data-role='content'>"; 
$saida .= "<ul data-role='listview'>"; 
 
foreach ($usuarios as $usuario) 
{ 
 $id = $usuario['id']; 
 $nome = $usuario['name']; 
 $link = "users.php?action=edit&id=$id"; 
 
 $saida .= "<li><a href='$link'>$nome</a></li>"; 
} 
 
$saida .= "</ul>"; 
$saida .= "</div>"; //content 
 
 
 
 
break; 
 
case "new": 
 
$saida .= "<div data-role='header' data-theme='b'><a href='#' data-
rel='back'>Voltar</a><h1>Adicionar Usuário</h1>"; 
$saida .= "</div>"; // header 
 
$saida .= "<div data-role='content'>"; 
$saida .= "<form action='users.php?action=save' method='post'>"; 
 
$saida .= "<input type='hidden' id='id' name='id' value=''/>"; 
$saida .= "<input type='text' id='name' name='name' value='' 
placeholder='Nome'/>"; 
$saida .= "<input type='password' id='password' name='password' 
value='' placeholder='Senha'/>"; 
$saida .= "<input type='submit' value='Adicionar'/>"; 
 
$saida .= "</form>"; 
 
$saida .= "</div>"; // content 
 
 
break; 
 
case "save": 
 
$id = $_POST["id"]; 
$name = $_POST["name"]; 
$password = $_POST["password"]; 
 
if ($id!='') //update 
{ 
 $array_usuario = array('name'=>$name,'password'=>$password); 
 $conn->prepare("UPDATE accounts SET name=:name, 
password=:password WHERE id=$id")->execute($array_usuario); 
 
 
 $saida .= "<div data-role='header' data-theme='b'><h1>Editar 
Usuário</h1>"; 
 $saida .= "</div>"; // header 
 
 $saida .= "<div data-role='content'>Salvo com sucesso."; 
 $saida .= "<a href='users.php?action=list' data-role='button' 
data-direction='reverse' >Lista de Usuários</a>"; 
 $saida .= "<a href='index.php' data-role='button' data-
direction='reverse' >Home</a>"; 
 $saida .= "</div>"; //content 
 
 
 
} 
else 
{ 
 
 $array_usuario = array('name'=>$name,'password'=>$password); 
 $conn->prepare("INSERT INTO accounts (name,password) VALUES 
(:name,:password)")->execute($array_usuario); 
 
 $saida .= "<div data-role='header' data-
theme='b'><h1>Adicionar Usuário</h1>"; 
 $saida .= "</div>"; // header 
 
 $saida .= "<div data-role='content'>Salvo com sucesso."; 
 $saida .= "<a href='users.php?action=list' data-role='button' 
data-direction='reverse' >Lista de Usuários</a>"; 
 $saida .= "<a href='index.php' data-role='button' data-
direction='reverse' >Home</a>"; 
 $saida .= "</div>"; //content 
 
} 
 
break; 
 
case "edit": 
 
$id = $_GET["id"]; 
$stmt = $conn->prepare("SELECT * FROM accounts WHERE id = ?"); 
$ok = $stmt->execute(array($id)); 
 
if ($ok) 
{ 
 
 $usuario = $stmt->fetch(); 
 
 $id = $usuario["id"]; 
 $name = $usuario["name"]; 
 $password = $usuario["password"]; 
 
 $saida .= "<div data-role='header' data-theme='b'><a href='#' 
data-rel='back'>Voltar</a><h1>Editar Usuário</h1>"; 
 $saida .= "<a 
href='users.php?action=confirmDel&id=$id&name=$name' class='ui-btn-
right' data-rel='dialog'>Apagar</a>"; 
 $saida .= "</div>"; // header 
 
 $saida .= "<div data-role='content'>"; 
 $saida .= "<form id='editarUsuario' name='editarUsuario' 
action='users.php?action=save' method='post'>"; 
 
 
 $saida .= "<input type='hidden' id='id' name='id' 
value='$id'/>"; 
 $saida .= "<input type='text' id='name' name='name' 
value='$name' placeholder='Nome'/>"; 
 $saida .= "<input type='password' id='password' 
name='password' value='$password' placeholder='Senha'/>"; 
 $saida .= "<input type='submit' value='Editar'/>"; 
 
 
 $saida .= "</form>"; 
 
 $saida .= "</div>"; // content 
 
} 
else 
{ 
 $saida = "<div data-role='header' data-theme='b'><h1>Usuário 
não econtrado</h1></div>"; 
} 
 
break; 
 
case "confirmDel": 
 
$name = $_GET['name']; 
$id = $_GET['id']; 
 
$saida .= "<div data-role='header' data-
theme='b'><h1>Apagar?</h1></div>"; 
$saida .= "<div data-role='content'><p>Dseja realmente apagar 
'$name'</p>"; 
$saida .= "<a href='users.php?action=del&id=$id' data-
role='button'>Sim</a>"; 
$saida .= "<a href='#' data-role='button' data-rel='back'>Não</a>"; 
$saida .= "</form>"; 
$saida .= "</div>"; 
 
break; 
 
case "del": 
 
$id = $_GET["id"]; 
 
$stmt = $conn->prepare("DELETE FROM accounts WHERE id = ?"); 
$ok = $stmt->execute(array($id)); 
 
 
$saida .= "<div data-role='header' data-theme='b'><h1>Apagar 
Usuário</h1>"; 
 
 
$saida .= "</div>"; // header 
 
$saida .= "<div data-role='content'>Usuário apagado."; 
$saida .= "<a href='users.php?action=list' data-role='button' data-
direction='reverse' >Lista de Usuários</a>"; 
$saida .= "<a href='index.php' data-role='button' data-
direction='reverse' >Home</a>"; 
$saida .= "</div>"; //content 
 
break; 
 
} 
 
$saida .= "</div>"; //page 
echo $saida; 
 
?> 
5.5 Crud de Projetos 
O segundo link do menu fica responsável em criar projetos. Esta funcionalidade é idêntica 
ao CRUD de usuários, então o código é muito semelhante ao arquivo users.php, veja: 
\bugsSystem\m\projects.php 
<?php 
include("conn.php"); 
 
$saida = "<div data-role='page'>"; 
 
switch ($_GET['action']) 
{ 
case "list": 
 
$projetos = $conn->query("SELECT * from products")->fetchAll(); 
 
 
$saida .= "<div data-role='header' data-theme='b'><a href='index.php' 
data-direction='reverse'>Home</a><h1>Projetos</h1>"; 
$saida .= "<a href='projects.php?action=new' class='ui-btn-
right'>Novo</a>"; 
$saida .= "</div>"; // header 
 
$saida .= "<div data-role='content'>"; 
$saida .= "<ul data-role='listview'>"; 
 
foreach ($projetos as $projeto) 
{ 
 
 $id = $projeto['id']; 
 $nome =