Ir para conteúdo


Foto

Como prometi - Janela de login com Extjs 2 + php e sessions + Mysql


  • Por favor, faça o login para responder
14 respostas neste tópico

#1 fabiomattes2007

fabiomattes2007

    Novato

  • Membros
  • PipPip
  • 14 posts
  • LocationCambira - PR

Postado 25 March 2009 - 13:58

Pessoal como gratidão a comunidade por ter me ajudado quando precisei vou postar meus códigos do meu sistema de login com Extjs, segue abaixo:

*obs: adaptem ao seu banco de dados, conforme necessario.

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <link rel="stylesheet" type="text/css" href="lib/ext-2.2.1/resources/css/ext-all.css" />

        <script type="text/javascript" src="lib/ext-2.2.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext-2.2.1/ext-all.js"></script>
		<link rel="stylesheet" type="text/css" href="lib/ext-2.2.1/resources/css/xtheme-black.css" />

        <script type="text/javascript">
            Ext.onReady(function(){
                var win = new Ext.Window({
                   title:'Tela de Login',
                   width:300,
                   height:130,
                   modal:true,
                   closable:false,
                   items:[
                       new Ext.form.FormPanel({
                           id:'formPanel',
                           bodyStyle:'padding:5px',
						   baseCls: 'x-plain',
                           items:[{
                               xtype:'textfield',
                               fieldLabel:'Login',
                               name:'user_login',
                               allowBlank:false
                           },{
                               xtype:'textfield',
                               fieldLabel:'Password',
                               name:'user_pass',
                               inputType:'password',
                               allowBlank:false
                           }]
                       })
                   ],
                   buttons:[{
                        text:'Login',
                        handler:function(){
                            var form = Ext.getCmp('formPanel').getForm();

                            if(form.isValid()){
                                form.submit({
                                    waitMsg:'Enviando dados...',
                                    url:'login_vai.php',
                                    success:function(form,action){
                                        //Ext.Msg.alert('Aviso', 'Logar.');
										document.location.href = 'principal.php';
                                    },
                                    failure:function(form,action){
                                        Ext.Msg.alert('Aviso', 'Login/Senha errada.');
                                    }
                                })
                            }
                        }
                    }]
                });
                win.show();
            });
        </script>

    </head>
    <body>
        
    </body>
</html>

comum.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("noticias");
?>

principal.php
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GOPHP ? EXT - Criando menu tipo panel.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <link rel="stylesheet" type="text/css" href="lib/ext-2.2.1/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="lib/ext-2.2.1/resources/css/xtheme-black.css" />

        <script type="text/javascript" src="lib/ext-2.2.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext-2.2.1/ext-all.js"></script>
    <!-- Css onde define os icones do painel -->
    <style type="text/css">
        @import url(menupanel.css);
    </style>
    <!-- Script do painel de testes -->
    <script type="text/javascript" src="js/menupanel.js"></script>
    </head>
    <body>
    <!-- div da pagina -->
    <div id="pagina">
        <div id="topo"> Topo pagina</div>
        <!-- Div onde será renderizado o painel -->
        <div id="painel_render"></div>
    </div>
    </body>
</html>

<?php
require "verifica.php";

require "comun.php";
?>

sair.php
<?php
// Inicia sess�es, para assim poder destru�-las
session_start();
session_destroy();

header("Location: index.php");
?>

login_vai.php
<?php
require "comun.php";

session_start();

$login = isset($_POST["user_login"]) ? addslashes(trim($_POST["user_login"])) : "FALSE"; 
$senha = isset($_POST["user_pass"]) ? md5(trim($_POST["user_pass"])) : "FALSE"; 

$SQL="SELECT id, nome, login, senha, postar
        FROM aut_usuarios
        WHERE login = '$login'"; 
$result_id= @mysql_query($SQL) or die ("Erro no banco de dados! " . mysql_error());
$total= @mysql_num_rows($result_id);

if($total)
{
	$dados= @mysql_fetch_array($result_id);

	if(!strcmp($senha, $dados["senha"]))
	{
		$_SESSION["id_usuario"] = $dados["id"];
		$_SESSION["nome_usuario"] = stripslashes($dados["nome"]);
		$_SESSION["permissao"] = $dados["postar"];
		echo '{success:true}';
		header("Location: principal.php");
		exit;
	}
	else
	{
		echo '{success:false}';
		exit;
	}
}
else
{
	echo '{success:false}';
	exit;
}
?>

menupanel.css
.icone1 {
    background-image: url(icone1.png) !important;
}
.icone2 {
    background-image: url(icone2.png) !important;
}
#pagina {
    width: 1024px;
    margin: 0 auto;
    border: solid 1px #DDD;
    height: 570px;
}
#topo {
    height: 100px;
    background: #DAFEAD;
    font: bold 120% Arial, Sans-Serif;
    text-align: center;
}

verifica.php
<?php
session_start();

if(!isset($_SESSION["id_usuario"]) || !isset($_SESSION["nome_usuario"]))
{
	header("Location: index.php");
	exit;
}
?>

menupanel.js
Ext.onReady(function(){
    Ext.QuickTips.init();

    // Criando o painel
    var painel = new Ext.Toolbar();

    // Local onde será rederizado o painel
    painel.render('painel_render');

    var submenu = new Ext.menu.Menu({
        id: 'Sub1',
        items: [{
            text: 'Opção',
            iconCls: 'icone2',
            handler: function(){
                window.location = "pagina.html";
            }
        },
        '-',
        {
                text: 'Opção 2',
                iconCls: 'icone2',
                handler: function(){
                    window.location = "pagina.html";
                }
        }]
    });

    // adicionando botões no painel
    painel.add({
        text: 'Teste 1',
        iconCls: 'icone1',
        handler: function(){
            window.location = "pagina2.html";
        }
    },'-', // Isso cria um separador entre os dois botões
    {
        text: 'Teste 2',
        iconCls: 'icone2',
        menu: submenu
    });
});

capslock.js
var CapsLock = {
	init: function() {
		var id = Ext.id();
		this.alertBox = Ext.DomHelper.append(document.body,{
			tag: 'div',
			style: 'width: 8em',
			children: [{
				tag: 'div',
				style: 'text-align: center; color: red;',
				html: 'Caps Lock está ligado!',
				id: id
			}]
		}, true);
		Ext.fly(id).boxWrap();
		this.alertBox.hide();
		var pwds = Ext.query("INPUT[type='password']");
		for(var i = 0; i < pwds.length; i++) {
			Ext.get(pwds[i].id).on(
				'keypress',
				this.keypress.createDelegate(this,pwds[i],true),
				this
			);
		}
	},
	keypress: function(e, el) {
		var charCode = e.getCharCode();
		if(
			(e.shiftKey && charCode >= 97 && charCode <= 122) ||
			(!e.shiftKey && charCode >= 65 && charCode <= 90)
		){
			this.showWarning(el);
		} else {
			this.hideWarning();
		}
	},
	showWarning: function(el) {
		var x = Ext.fly(el).getX();
		var width = Ext.fly(el).getWidth();
		var y = Ext.fly(el).getY();
		this.alertBox.setXY([x + width + 40,y]);
		this.alertBox.show();
	},
	hideWarning: function() {
		this.alertBox.hide();
	}
}
Ext.onReady(CapsLock.init, CapsLock, true);

Novamente muitissimo obrigado ao comunidade Extjs Brasil.
Abraços.
Capacidade de falar não é sinal de inteligência - Qui-Gon Jinn

#2 higorvaz

higorvaz

    Iniciante

  • Membros
  • Pip
  • 2 posts

Postado 13 July 2009 - 15:08

To usando seu exemplo com o Ext 3.0 e não funciona com IE7 e Chrome apenas Firefox teria uma ideia?
Tambem gostaria de saber com habilita o ENTER, pois o login so vai se clicar.
Grato,
Higor
+TI Desenvolvimento
http://www.plusti.net

#3 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 16 July 2009 - 20:12

ve se tu n acha uma virgula sobrando nessa linha 10 ou perto dela...
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#4 web2solutions

web2solutions

    Iniciante

  • Membros
  • Pip
  • 9 posts

Postado 19 October 2009 - 18:22

muito bom irmao ... ja estou até utilizando em meus aplicativos .. refiz a parte PHP toda em ASP ...

LOGIN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../desktop/resources/css/ext-all.css" /> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />              
        <script type="text/javascript" src="../desktop/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../desktop/ext-all.js"></script>
        <script type="text/javascript" src="Scripts/Ext.ux.form.IconCombo.js"></script>
        <script type="text/javascript" src="Scripts/Ext.ux.LoginWindow.js"></script>       
       
    </head>
    <body>
    <script type="text/javascript">
		Ext.BLANK_IMAGE_URL = 'images/s.gif';
		Ext.onReady(function() {
		  Ext.QuickTips.init();
		  var LoginWindow = new Ext.ux.LoginWindow({
			modal: true,
			//formBgcolor:'#f0edce',
			defaultLanguage: 'ptbr',
			basePath: 'img',
			winBanner: 'logo.png',
			url: '../Scripts/processaloginextranet.asp?acao=login',
			emailUrl: '../Scripts/processaloginextranet.asp?acao=recupera',
			locationUrl: 'aplicativo.asp'
		  });
		  LoginWindow.show();
		});
 	</script>
    </body>
</html>

processaloginextranet.asp
<%
	response.charset="utf-8"
	call conectar
	dim usuario
	usuario=tratainjection(request.form("username"))
	senha=tratainjection(request.form("password"))
	set rs=conexao.execute("SELECT * FROM tbl_usuarios WHERE login='"&tratainjection(usuario)&"' AND senha='"&tratainjection(senha)&"' AND ativo=1;")
	if rs.eof or rs.bof then
		response.write "{success: false}"
	else
		response.write "{success: true}"
	end if
	set rs=nothing
	call desconectar
%>

Eduardo Perotta - Eng. de Software

web2 Solutions - Inovação em Softwares
Aqui se faz WEB, quem faz sites são outros!

WEB ERPs, CRM, Sistemas web, Modelagem de Dados, Recuperação de Dados, Servidores e Segurança.

27 3021-1530
27 9600-0395

#5 web2solutions

web2solutions

    Iniciante

  • Membros
  • Pip
  • 9 posts

Postado 19 October 2009 - 18:27

Meu login é ASP + PostgreSQL + EXT .. quem quiser .... pede ai
Eduardo Perotta - Eng. de Software

web2 Solutions - Inovação em Softwares
Aqui se faz WEB, quem faz sites são outros!

WEB ERPs, CRM, Sistemas web, Modelagem de Dados, Recuperação de Dados, Servidores e Segurança.

27 3021-1530
27 9600-0395

#6 bruno180388

bruno180388

    Member Avançado

  • Membros
  • PipPipPip
  • 34 posts

Postado 24 November 2009 - 15:00

Olá Amigos,

segui certinho as intruções fiz uma copia exata de todo esse conteudo e testei mais não consegui executar o login com sucesso a unica coisa que mudei foi a versão do ext para 3.0.3, e o arquivo comum.php que corrigi os includes que estavam com comun.php escrito.

ele me retorna um erro disendo que ')' era esperado na linha 7389 do arquivo ext-all-debug.js quando tento logar, achei um possivel erro nessa linha que seria assim :     

return eval("(" + json + ')');

mudei para      return eval("(" + json + ")");

mas não fez diferença nenhuma, o que pode estar errado ja refiz varias vezes a checagem do código.


Desde já obrigado!!

#7 Bruno Tavares

Bruno Tavares

    Member Avançado

  • Membros
  • PipPipPip
  • 1166 posts
  • LocationRedwood City, CA, USA

Postado 24 November 2009 - 15:31

Tens erro no json retornado pelo servidor. Alterar o código do Ext não vai fazer diferença. Com o auxilio do firebug podes verificar o retorno e analisar melhor para ver se não existe algum erro de sintaxe (vírgulas, e etc)

abs!
Bruno Tavares, Sr. UI Engineer
Netflix

#8 Eris

Eris

    Novato

  • Membros
  • PipPip
  • 10 posts

Postado 13 December 2009 - 01:34

Peguei o exemplo, mas, fica carregando e nunca passa... o que poderá ser??
abcs

#9 kessyus

kessyus

    Iniciante

  • Membros
  • Pip
  • 9 posts

Postado 20 May 2010 - 21:08

Amigos, desculpem a minha ignorância... mas para que serve o capslock.js? Eu não encontrei uma função chamando ele em lugar nenhum no código principal.

By the way...
Parabéns pelo código, Fábio! Ficou muito bom!

#10 kessyus

kessyus

    Iniciante

  • Membros
  • Pip
  • 9 posts

Postado 21 May 2010 - 00:49

Amigos,

Estou implementando o código do Fábio e até consegui fazer funcionar o login checando no banco e tal, mas o layout da tela inicial não aparece a barra de ferramentas. Gostaria de saber se tem alguma parte do código que fiz errado. Eu repliquei igualzinho está mostrando no post, só mudei o nome dos arquivos. O firebug nem me mostra nenhum erro. Coloquei em anexo a tela do meu brownser para vocês analizarem qual é o erro.

Por favor, se tiverem alguma sugestão de como posso arrumar isso...

#11 kessyus

kessyus

    Iniciante

  • Membros
  • Pip
  • 9 posts

Postado 19 August 2010 - 12:17

Descobri o porque que não estava mostrando o painel no meu programa... é porque você tem que setar o "painel_render" depois que atribuir todos os botões e tal.

Então foi só trocar a linha:

"painel.render('painel_render');"

Para o final do arquivo menupanel.js que deu certo...

Agora a parte do capslock.js eu continuo sem entender. Se alguém souber de algo, posta aí!

Sds.

#12 lelius

lelius

    Novato

  • Membros
  • PipPip
  • 16 posts

Postado 26 September 2011 - 10:29

Criei um banco e uma tabela com os mesmos nomes do seu script, adicionei um usuario
admin senha 123
E só retorna que login ou senha está errado.. o firebug não mostra nenhum erro.
o que será?

#13 welbert.oliveira

welbert.oliveira

    Novato

  • Membros
  • PipPip
  • 17 posts

Postado 07 November 2011 - 10:10

alguem conseguiu usar o capslock.js???
*´¨) Welbert
¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.•` *.(.)Oliveira

#14 welbert.oliveira

welbert.oliveira

    Novato

  • Membros
  • PipPip
  • 17 posts

Postado 07 November 2011 - 11:03

Bom gente eu estou tentanto implantar esse sistema de login so que na versão 4.0 e esta tando o sente erro:

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.1; .NET4.0C; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET4.0E)
Carimbo de data/hora: Mon, 7 Nov 2011 15:00:45 UTC


Mensagem: Exceção descartada e não detectada
Linha: 15
Caractere: 56290
Código: 0
URI: http://localhost/@ap...-4.0/ext-all.js

No codigo esta tudo identico ao do post.
Valeu.
*´¨) Welbert
¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.•` *.(.)Oliveira

#15 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 07 November 2011 - 11:44

A versão 2 é muito diferente da 4, terá que haver muitas adaptações, nao irá funcionar o código idêntico. Você pode procurar um desse na versão 4 também.

Abs!
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas




0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos