Primer Guia

CREAR LOGIN
Material a utilizar
Codeigniter
http://www.codeigniter.com/download
Bootstrap
http://getbootstrap.com/getting-started/#download
jquery
http://code.jquery.com/jquery-1.11.3.min.js
En nuestro gestor de base de datos, creamos una base de datos llamada proyectocrud.
A continuación se crea una tabla USUARIO con las siguientes características:

Una vez creada procedemos a crear nuestro proyecto.
Descargamos el framework Codeigniter, y lo extraemos en la ruta C:\xampp\htdocs,

cambiamos el nombre a la carpeta, en este caso se llamará proyecto_crud.
Entramos a la carpeta y nos aparecerán los siguientes archivos,
Creamos una nueva carpeta llamada Set,
En esta carpeta, se extraerán los archivos que contiene bootstrap

Abrimos nuestro proyecto_crud en el editor de texto Sublime Text, y modificamos los
siguientes archivos:
config.php
$config $config['base_url'] = 'http://localhost/proyecto_crud';
$config['encryption_key'] = 'REALLY_LONG_NUMBER';
Autoload.php
$autoload['libraries'] = array('database', 'form_validation','session');
$autoload['helper'] = array('url','form', 'file');
Database.php
$active_group = 'default';
$active_record = TRUE;
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'proyectocrud';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
Abrimos nuestro navegador e ingresamos a la siguiente dirección:
Creación de la vista
C:\xampp\htdocs\proyecto_crud\application\views, creamos las siguientes carpetas para
dividir nuestro proyecto.
Creamos el archivo footer_login.php y lo guardamos en views/footer.
Su código:
<script>
/**
* Muestra una ventana emergente
* con un mensaje especificado
*/
function dialogo(title ,message){
$('.notify').html( message );
$( "#dialogo" ).dialog({
autoOpen : true,
width : 400,
title : title,
"position": ['middle',30],
modal : true,
resizable : false,
buttons : {
"Cerrar": function() {
$( "#dialogo" ).dialog( "close" );
},
open: function(){},
close: function(){}
});
};
/**
* Muestra una alerta
* Si recibe solo msj la alerta es amarilla
* Si recibe msj y estado = true, la alerta es

verde
* Si recibe msj y estado = false, la alerta es roja
* Si no recibe parametro limpia la alerta
*/
function alerta(msj, estado){
if( msj == null && estado == null ){

$('#msj').empty(); return; }
if( estado == null ){
$('#msj').empty().html('<div
class="alert alert-warning">'+ msj +'</div>');
}else if( estado == true ){
$('#msj').empty().html('<div class="alert alert-

success">'+ msj +'</div>');
}else if ( estado == false ){
$('#msj').empty().html('<div class="alert alert-

danger">'+ msj +'</div>');
</script>
<script src="set/js/jquery-1.11.3.min.js"></script>
<script src="set/js/bootstrap.min.js"></script>
<script src="set/js/jquery-ui-1.10.4.custom.js"></script>
<script src="set/js/jquery-ui-1.10.4.custom.min.js"></script>
</body>
</html>
En la carpeta views/header, creamos el archivo header_login.php
Su código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Crud</title>
<meta content="width=device-width, initial-scale=1.0"

name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />

<link rel="stylesheet" type="text/css" href="set/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="set/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="set/css/style.css">
<link href="set/css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<link href="set/css/smoothness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

</head>
<body>
En la carpeta views/form, creamos el archivo login_view.php
Su código:

<div id="dialogo" style="display:none;"><div class="notify"></div></div>

<div class="col-md-4 col-md-offset-4" style="position:fixed;" id="msj"></div>

<div class="container">
<div class="card card-container">
<img id="profile-img" class="profile-img-card"

src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" />
<p id="profile-name" class="profile-name-card"></p>
<div class="tab-content">
<div id="login" class="tab-pane active">
<?php echo form_open('', array( 'id'=>'my_form' ,'class'=>'form-signin' )); ?>
<input type="text" name="usuario" id="usuario" class="form-control"

placeholder="Nombre Usuario " required autofocus>
<input type="password" name="clave" id="clave" class="form-control"

placeholder="Clave Usuario" required>
<button type="button" class="btn btn-lg btn-primary btn-block btn-signin"

onclick="loguear()" >Entrar</button>
<?php form_close(); ?>
</div>
</div>
</div>


<script>
var img='<i class="glyphicon glyphicon-dashboard"></i>';
function loguear(){
$.ajax({
url : 'control_usuario/loguear',
type : 'post',
dataType : 'json',
data : $('#my_form').serialize(),
beforeSend : function(){
alerta( img + ' Espere...' );
},
success : function(data){
alerta();
if( data.type==false){
alerta( data.message, false );
}else{
alerta(img + ' Redireccionando...', true );
setTimeout( function(){ window.location.replace( 'usuarios' ); }, 2000 );
},
error : function(){
alerta(); dialogo( 'Error', 'Error en la función control_usuario/loguear.' );
}
});
};
</script>
En la carpeta views/form, creamos el archivo principal.php, que es el que

nos mostrara después de loguearnos.

<div id="top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Guia</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Usuario <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><?php echo(isset($usuario))?$usuario['usuario']:'' ?> </a></li>
<li><a href="<?php echo base_url().'control_usuario/salir'; ?>">Salir</a></li>

</ul>
</li>
</ul>
</div>
</nav>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid">
<button type="button" onclick="prepara_form(

'Nuevo', 0 )" class="btn btn-primary dropdown-toggle"><i class="glyphicon glyphicon-
plus"></i> Agregar usuario</button>

<table class="completa table">
<thead>
<tr>
<th>Usuario</th>
<th></th>
</tr>
</thead>
<tbody id="lista"></tbody>
</table>
</div>

<div class="hide_" id="div_form">
<div class="red" id="msj_form"></div>
<?php echo form_open('', array('id'=>'my_form')) ?>

<input type="hidden" name="id_usuario"

id="id_usuario">
<table class="completa">
<tr>
<td width="30%"><label
for="usuario">Usuario: *</label></td>
<td width="70%">
<input type="text"
class="form-control" id="usuario" name="usuario">
</td>
</tr>
<tr>
<td><label for="clave">Clave:
*</label></td>
<td>
<input type="password"
class="form-control" id="clave" name="clave">
</td>
</tr>
<tr>
<td><label for="clave_">Confirmar
clave: *</label></td>
<td>
<input type="password"
class="form-control" id="clave_" name="clave_">
</td>
</tr>
</table>
<?php echo form_close() ?>
</div>
<script>
var img='<i class="glyphicon glyphicon-

dashboard"></i>';
setTimeout(function(){ traer_lista(); }, 500);
function traer_lista(){
$.ajax({
url : 'usuarios/traer_lista',
type : 'post',
dataType : 'json',

},
alerta(); $('#lista').empty();
if( data.type==false){
alerta( data.message, false );
}else{
var fila='';
$.each(data.lista, function( k,
v ){
fila ='<tr
tabindex="2014'+v.id_usuario+'" >';
fila
+='<td>'+v.usuario+'</td>';
fila +='<td>';
fila += '<i
class="glyphicon glyphicon-pencil" onclick="prepara_form(\'Editar\', '+v.id_usuario+')"
title="EDITAR"></i>';
fila +='<i
class="glyphicon glyphicon-remove" onclick="confirm_delete( '+v.id_usuario+' )"
title="ELIMINAR"></i>';
fila +='</td>';
fila +='</tr>';
$('#lista').append(fila);
});
},
error : function(){
alerta(); dialogo( 'Error', 'Error en la
función usuarios/traer_lista.' );
});
};
function prepara_form( accion, id_usuario ){
$('#my_form')[0].reset();
$('#id_usuario').val( id_usuario );
if( accion=='Editar' ){
$.ajax({
url : 'usuarios/traer_usuario
',
type : 'post',
dataType : 'json',
data : { id_usuario : id_usuario },
},
alerta();
if( data.type==false ){
dialogo('Notificación',
data.message);
}else{
var
v=data.usuario[0];
$('#usuario').val(
v.usuario );
load_form( accion );
},
error : function(){
alerta(); dialogo( 'Error',

'Error en la función usuarios/traer_usuario.' );
});
}else{
load_form( accion );
};// -----------------------
function load_form( accion ){
$( "#div_form" ).dialog({
autoOpen : true,
width : 600,
title : accion + ' usuario',
modal : true,
resizable : false,
buttons : {
"Cancelar": function() {
$( "#div_form" ).dialog( "close" );
},
"Guardar": function(){
save_form();
},
open: function(){},
close: function(){}
});
};// ---------------
function save_form(){
$.ajax({
url : 'usuarios/save_form',
type : 'post',
dataType : 'json',
data : $('#my_form').serialize(),
$('#msj_form').html( img + '

Espere...' );
},
$('#msj_form').empty();
dialogo( 'Notificación',
data.message );
}else{
$('#div_form').dialog('close');
traer_lista();
setTimeout(function(){
alerta(data.message,
true);
$('tr[tabindex="2014'+data.id_usuario+'"]').focus();
}, 1000);
},
error : function(){
$('#msj_form').empty(); dialogo(
'Error', 'Error en la función usuarios/save_form.' );
});
};
function confirm_delete( id_usuario ){
$('.notify').html( '¿Confirma que desea eliminar

este usuario?' );
$( "#dialogo" ).dialog({
autoOpen : true,
width : 400,
title : 'Confirmación',
modal : true,
resizable : false,
buttons : {
"Cancelar": function() {
},
"Eliminar": function(){
delete_( idusuarios );
},
open: function(){},
close: function(){}
});
};// --------------------------
function delete_( id_usuario ){
$.ajax({
url : 'usuarios/delete_',
type : 'post',
dataType : 'json',
data : { id_usuario : id_usuario },
},
success : function( data ){
alerta();
dialogo( 'Notificación',
data.message );
}else{
$( "#dialogo" ).dialog(
"close" );
setTimeout(function(){
alerta( data.message, true ); }, 1000);
traer_lista();
},
error : function(){
alerta(); dialogo( 'Error', 'Error en la

función usuarios/delete_.' );
});
</script>
<style>
.red { color: red; min-height: 30px }
.completa { width: 100% }
.hide_ { display: none }
table td { padding: 5px }
table td i { margin: 5px }
</style>
Código para el modelo. Models/model_usuarios.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Model_usuarios extends CI_Model {

function traer_usuarios( $id_usuario=0 ){
if( $id_usuario!=0 )$this->db->where('id_usuario',

$id_usuario);
$query=$this->db->get('usuario');
return($query->num_rows()>0)?$query-
>result_array():false;
function save_usuario( $post ){
$this->db->insert('usuario', $post);
return($this->db->affected_rows()>0)?$this->db-
>insert_id():false;
function edit_usuario( $id_usuario, $post ){
$this->db->where('id_usuario', $id_usuario);
return $this->db->update('usuarios', $post);
function delete_( $id_usuario ){
$this->db->where('id_usuario', $id_usuario);
$this->db->delete('usuario');
return($this->db->affected_rows()>0)?true:false;
}
Código para el controlador controllers/control_usuario.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Control_usuario extends CI_Controller
function __construct()
parent::__construct();
session_start();
$this->load->helper('url');
$this->load->model('model_acceso');
$data['home'] = strtolower(__CLASS__).'/';
$this->load->vars($data);
Public function index()
$this->load->view('header/header_login');
$this->load->view('frm/login_view');
$this->load->view('footer/footer_login');
}
function loguear(){
$data=array();
$this->form_validation->set_rules('usuario', 'usuario',
'trim|required|xss_clean');
$this->form_validation->set_rules('clave', 'clave',
'trim|required|xss_clean|md5');
if( $this->form_validation->run() === FALSE ){
$data['type'] =false;
$data['message']=validation_errors();
}else{
$usuario=$this->model_acceso->comprobar(
$_POST );
if( $usuario==false ){
$data['type'] =false;
$data['message']='Acceso denegado.';
}else{
$data['type'] =true;
$data['message']='Acceso concedido.';
$_SESSION['my_usuario']=$usuario;
$this->output->set_content_type('application/json')-
>set_output( json_encode( $data ) );
function salir(){
unset($_SESSION['my_usuario']);
redirect( '../control_usuario', 'refresh' );
?>
Ahora buscamos el archivo config/routes.php
Y modificamos las siguientes líneas, para que lo primero que nos cargue nuestro proyecto
sea el controlador control_usuario, que carga la vista del login.
config/routes.php
$route['default_controller'] = "control_usuario";
$route['404_override'] = '';
Ahora, si accedemos a nuestro proyecto nos mostrara la pantalla de login.

Y si nos logueamos podemos ver la pantalla principal.

Primer Guia

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Primer Guia

Caricato da

Copyright:

Formati disponibili

CREAR LOGIN

A continuación se crea una tabla USUARIO con las siguientes características:

Descargamos el framework Codeigniter, y lo extraemos en la ruta C:\xampp\htdocs,

Entramos a la carpeta y nos aparecerán los siguientes archivos,

Creamos una nueva carpeta llamada Set,

En esta carpeta, se extraerán los archivos que contiene bootstrap

$config $config['base_url'] = 'http://localhost/proyecto_crud';

$autoload['libraries'] = array('database', 'form_validation','session');

$autoload['helper'] = array('url','form', 'file');

* Muestra una ventana emergente

* con un mensaje especificado

function dialogo(title ,message){

$( "#dialogo" ).dialog( "close" );

* Si recibe solo msj la alerta es amarilla

* Si recibe msj y estado = true, la alerta es

* Si recibe msj y estado = false, la alerta es roja

* Si no recibe parametro limpia la alerta

function alerta(msj, estado){

if( msj == null && estado == null ){

if( estado == null ){

}else if( estado == true ){

$('#msj').empty().html('<div class="alert alert-

}else if ( estado == false ){

$('#msj').empty().html('<div class="alert alert-

<meta charset="UTF-8" />

<meta content="width=device-width, initial-scale=1.0"

<meta content="" name="description" />

<meta content="" name="author" />

<link rel="stylesheet" type="text/css" href="set/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="set/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="set/css/style.css">

<link href="set/css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">

<link href="set/css/smoothness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

<div id="dialogo" style="display:none;"><div class="notify"></div></div>

<div class="col-md-4 col-md-offset-4" style="position:fixed;" id="msj"></div>

<div class="card card-container">

<img id="profile-img" class="profile-img-card"

<p id="profile-name" class="profile-name-card"></p>

<div id="login" class="tab-pane active">

<?php echo form_open('', array( 'id'=>'my_form' ,'class'=>'form-signin' )); ?>

<input type="text" name="usuario" id="usuario" class="form-control"

<input type="password" name="clave" id="clave" class="form-control"

<button type="button" class="btn btn-lg btn-primary btn-block btn-signin"

<?php form_close(); ?>

var img='<i class="glyphicon glyphicon-dashboard"></i>';

alerta( img + ' Espere...' );

alerta( data.message, false );

alerta(img + ' Redireccionando...', true );

setTimeout( function(){ window.location.replace( 'usuarios' ); }, 2000 );

alerta(); dialogo( 'Error', 'Error en la función control_usuario/loguear.' );

En la carpeta views/form, creamos el archivo principal.php, que es el que

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<a class="navbar-brand" href="#">Guia</a>

<ul class="nav navbar-nav">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

Usuario <b class="caret"></b>

<li><a href="#"><?php echo(isset($usuario))?$usuario['usuario']:'' ?> </a></li>