Vous êtes sur la page 1sur 17

20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

CODIGO-FUENTE (HTTPS://WWW.BLOGUERO-EC.COM/PUBLICACION/CATEGORY/CODIGO-FUENTE) ENE 22, 2015

REPRESENTACIONES GRÁFICAS Y ADAPTABLES A TU WEB CON CHARTIST..


Chartist es una librería sencilla y simple que he encontrado por ahí , si de (https://www.bloguero-ec.com/publicacion/representaciones-gra cas-y-adaptables-en-tu-
web-con-chartist)
.

LEER
(https://www.bloguero-ec.com/publicacion/representaciones-gra cas-y-adaptables-en-tu-web-con-chartist)

Inicio (https://www.bloguero-ec.com) /  codigo-fuente (https://www.bloguero-ec.com/publicacion/category/codigo-fuente) /  Login Mvc Php Mysql Ajax.

LOGIN MVC PHP MYSQL AJAX.

MAYO 28


codigo-fuente login mvc
mysql php

 codigo-fuente  0

Saludos amigos, esta vez les traigo un Login Mvc php mysql. Un simple inicio de sesión basado en la arquitectura mvc(Modelo vista
controlador), utilizando un estilo simple y sencillo, Se utiliizará ajax para el envío del formulario, No consta de un formulario de registro, por el
momento es un demo que demostrará como iniciar sesión mostrando los errores por defectos sin recargar toda la página.

Creando nuestro Login Mvc php mysql.


Para la creación de este pequeño sistema, primero crearemos directorios para identi car nuestros archivos. (vease imagen)

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 1/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

(https://i2.wp.com/www.bloguero-ec.com/wp-content/uploads/2017/05/mvc-folder.jpg?ssl=1)

Se han adicionado dos directorios llamados core y public . van a realizar acciones a las llamadas.

Empezamos con los archivos a utilizar:

Index.php.- Desde la raiz del directorio, el index cargará los controladores necesarios.

1 <?php
2 $Extencion = substr(strrchr(__FILE__, '.'), 1);
3 //lamamos a core
4 require('core/core.'. $Extencion);
5 //obtenemos por url el controlador
6 if(isset($_GET['view'])) {
7 //buscamos en la carpeta controlador el controlador respectivo
8 if(file_exists('controller/' . strtolower($_GET['view']) . 'Controller.'. $Extencion))
9 include('controller/' . strtolower($_GET['view']) . 'Controller.'. $Extencion);
10 } else {
11 //si no existe mostramos un error
12 include('controller/errorController.php');
13 }
14 } else {
15 //si no llamamos a ningun controlador mostramos el index por defecto
16 include('controller/indexController.php');
17 }
18 ?>

ajax.php.- Desde la raiz del directorio, el ajax cargará el login desde el formulario sin necesidad de recargar toda la página mostrando solo
errores donde los querramos mostrar.

1 <?php
2 //verificamos que se halla enviado por post
3 if($_POST) {
4 //incluimos el core
5 require('core/core.php');
6 //creamos un switch y verificamos por url el modo a utilizar
7 //se pueden crear mas case dependiendo el caso podria ser un registro también
8 //si el caso es login ubicamos el archivo a utilizar via ajax caso contrario nos envia
9 switch (isset($_GET['mode']) ? $_GET['mode'] : null) {
10 case 'login':
11 require('public/user/ajax/login.php');
12 break;
13 default:
14 header('location: ./');
15 break;
16 }
17 } else {
18 //si no se envia por post redireccionamos al index
19 header('location: ./');
20 }
21 ?>

En el directorio Controller e creado los siguientes archivos llamados errorController.php , indexController.php , logoutController.php

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 2/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

errorController.php .- Hay que tener en cuenta que e dividido el estilo y los archivos, cargando los headers , footers, y barras de navegación por
separado para tener un mejor control, a la hora de mostrar por pantalla lo que deseamos sin dañar el estilo principal. El error mostrará una
página de error cuando no se encuentre una vista deseada.

1 <?php
2 //llamamos desde una carpeta publica el header
3 require_once 'public/overall/header.php';
4 if (!isset($_SESSION['sesion_id'])){
5 //si no existe la sesion enviamos al formulario de inicio de sesion
6 include('public/overall/nosesion.php');
7 }
8 else { ?>
9 <?php
10 //tomamos el control de lo que queremos mostrar en pantalla si se inicia la sesion mostar
11 include 'public/overall/menu-header.php'; ?>
12 <?php include 'public/overall/menu-aside.php'; ?>
13
14 <!-- Content Wrapper. Contains page content -->
15 <div class="content-wrapper">
16 <!-- Content Header (Page header) -->
17 <section class="content-header">
18 <h1>
19 Página de error..
20 </h1>
21 <ol class="breadcrumb">
22 <li><a href="<?php /*se ha creado una constante url_web desde el core para ser ut
23 <li class="active">error&/li>
24 </ol>
25 </section>
26
27 <!-- Main content -->
28 <section class="content">
29 <div class="row">
30 <div class="col-md-12">
31 <div class="box box-default">
32 <div class="box-header with-border">
33 <i class="glyphicon glyphicon-thumbs-down">&/i>
34
35 <h3 class="box-title">Error 404 Pagina no encontrada ..!&/h3>
36 </div>
37 <!-- /.box-header -->
38 <div class="box-body">
39 <div class="callout callout-danger">
40 <h4>Not Found!&/h4>
41
42 <p>Al parecer esta página no existe o ha sido eliminada por el administra
43 </div>
44 </div>
45 <!-- /.box-body -->
46 </div>
47 <!-- /.box -->
48 </div>
49 <!-- /.col -->
50
51 </div>
52 <!-- Contenido de index -->
53 </section>
54
55 </div><!--//content wrapper-->
56
57 <?php
58 }
59 ?>
60 <?php require_once 'public/overall/footer.php'; ?>

indexController.php .- Llamamos desde una carpeta publica el index a cargar en el sitio.

1 <?php
2 //cargamos el index.php desde una carpeta publica
3 include('public/index/index.php');
4 ?>

LogoutController.php.- Desconectará y cerrará la sesión iniciada por el usuario.

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 3/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 <?php
2 //obtenenmos el modo desconectar.
3 if(isset($_GET['logout']) == 'desconectar')
4 {
5 //limpiamos todas las variables de sesion iniciadas
6 $_SESSION['sesion_id'] == NULL ;
7 unset($_SESSION['sesion_id']);
8 session_destroy();
9 //redireccionamos al index
10 header('Location: ./');
11 }
12 ?>

Nos vamos al directorio Core y creamos lo siguiente:

core.php classConexion/conexion.php funciones/usuario.php

core.php.- Con guramos ciertos parámetros que van a ser utilizados en todo el sitio.

1 <?php
2 //configuramos timezone vease <a class="vglnk" href="http://php.net/manual/en/timezones.
3 date_default_timezone_set('America/Bogota');
4
5 //definimos ruta y titulo del sitio
6 define('URL_VIEW','<a class="vglnk" href="http://dominio.com/url-sitio/view (http://domi
7 define('TITLE_WEB','Login Ajax Mvc ..Blogueroec..');
8 define('URL_WEB','<a class="vglnk" href="http://dominio.com/ (http://dominio.com/)" rel=
9 define('NOMBRE_WEB','Bloguero ec');
10
11 //definimos url de inicios
12 $Extencion = substr(strrchr(__FILE__, '.'), 1);
13 //Conexion a la bases de datos
14 require_once('classConexion/conexion.' . $Extencion);
15 require_once('funciones/usuario.' . $Extencion);
16 //instaciamos User() para utilizarlo en el sitio
17 $_usuario = User();
18 ?>

Conexion.php.- Se encargará de crear la conexion con la base de datos .

1 <?php
2 // validamos el request para el login del sitio.
3 if (!isset($_SESSION)) {
4 session_start();
5 }
6 #Constantes de conexión
7 define('DB_HOST','localhost');
8 define('DB_USER','root');
9 define('DB_PASS','');
10 define('DB_NAME','DB');
11
12 //creamos la conexion
13 class Conexion extends mysqli {
14 public function __construct() {
15 parent::__construct(DB_HOST,DB_USER,DB_PASS,DB_NAME);
16 $this->connect_errno ? die('Error en la conexión a la base de datos') : null;
17 $this->set_charset("utf8");
18 }
19
20 }
21 ?>

Usuario.php.- Creamos esta función para seleccionar al usuario y toda la información que necesitemos de él, podemos usar un usuario por sesión
Prueba ingresando múltiples usuarios y haz un login con cualquiera.

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 4/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 <?php
2 //creamos una funcion user para ser usada en todo el sitio
3 function User() {
4 //instaciamos la conexion
5 $db = new Conexion();
6 $sql = $db->query("SELECT * FROM tabla;");
7 if($sql->num_rows > 0) {
8 while($d = $sql->fetch_array()) {
9 $user[$d['id_user']] = $d;
10 }
11 } else {
12 $user = false;
13 }
14 $sql->free();
15 $db->close();
16
17 return $user;
18 }
19
20 ?>

Dentro del directorio public creamos los siguientes directorios con los siguientes archivos.

index/index.php overall/footer.php overall/footer-index.php overall/header.php overall/menu-aside.php


overall/menu-header.php overall/nosesion.php user/ajax/login.php

index.php.- Es lo que se va a cargar como página principal, recuerdan que en el index del directorio principal cargaba a indexController.php y
este a su vez carga a public/index/index.php , Pues bien existen in nidades de forma de cargar un controlador yo lo e realizado de esta
forma con el tiempo veremos mas formas. Por el momento lo dejaremos así, cada programador carga sus archivos de diferente forma.

1 <?php
2 require_once 'public/overall/header.php';
3 if (!isset($_SESSION['sesion_id'])){
4 include('public/overall/nosesion.php');
5 }
6 else { ?>
7 <?php include 'public/overall/menu-header.php'; ?>
8 <?php include 'public/overall/menu-aside.php'; ?>
9
10 <!-- Content Wrapper. Contains page content -->
11 <div class="content-wrapper">
12 <!-- Content Header (Page header) -->
13 <section class="content-header">
14 <h1>
15 Perfil de Usuario
16 </h1>
17 <ol class="breadcrumb">
18 <li>&a href="#">&i class="fa fa-dashboard"></i> Home</a></li>
19 <li class="active">perfil de usuario</li>
20 </ol>
21 </section>
22
23 <!-- Main content -->
24 <section class="content">
25
26 <div class="row">
27 <div class="col-md-12">
28 <!-- Widget: user widget style 1 -->
29 <div class="box box-widget widget-user">
30 <!-- Add the bg color to the header using any of the bg-* classes -->
31 <div class="widget-user-header bg-black" style="background: url('&?php /*url
32 <h3 class="widget-user-username">&?php echo $_usuario[$_SESSION['sesion_id
33 <h5 class="widget-user-desc">Programador Web&/h5>
34 </div>
35 <div class="widget-user-image">
36 <img class="img-circle" src="<;?php echo URL_VIEW; ?>bootstrap-default/img
37 </div>
38 <div class="box-footer">
39 <div class="row">
40 <div class="col-sm-4 border-right">
41 <div class="description-block">
42 <h5 class="description-header">30</h5>
43 <span class="description-text">SEGUIDORES</span>
44 </div>
45 </div>
46
47 <div class="col-sm-4 border-right">
48 <div class="description-block">
SHA RES 49 <h5 class="description-header">115&/h5>
50 <span class="description-text">Me Gusta</span>

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 5/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
51 </div>
52 </div>
53
54 <div class="col-sm-4 border-right">
55 <div class="description-block">
56 <h5 class="description-header">12</h5>
57 <span class="description-text">Publicaciones</span>
58 </div>
59 </div>
60
61 </div>
62 <!-- /.row -->
63 </div><!--footer-->
64 </div>
65 <!-- /.widget-user -->
66 </div>
67 <!-- /.col -->
68 </div>
69 <!-- /.row -->
70
71
72
73 <div class="row">
74 <div class="col-md-4">
75 <!-- About Me Box -->
76 <div class="box box-primary">
77 <div class="box-header with-border">
78 <h3 class="box-title">Información&/h3>
79 </div>
80 <!-- /.box-header -->
81 <div class="box-body">
82 <strong><i class="fa fa-book margin-r-5"></i> Educación</strong>
83
84 <p class="text-muted">
85 Universidad Estatal de Guayaquil.
86 </p>
87
88 <hr>
89
90 <strong>&i class="fa fa-map-marker margin-r-5"></i> Location</strong>
91
92 <p class="text-muted">Guayaquil,Ecuador</p>
93
94 <hr>
95
96 <strong><i class="fa fa-pencil margin-r-5"></i> Habilidades</strong>
97
98 <p>
99 <span class="label label-success">Php</span>
100 <span class="label label-danger">Mysql</span>
101 <span class="label label-warning">Ajax</span>
102 <span class="label label-info">Bootstrap</span>
103 </p>
104
105 <hr>
106
107 <strong><i class="fa fa-pencil margin-r-5"></i> Experto en</strong>
108
109 <p>
110 <span class="label label-info">Programación</span>
111 </p>
112
113 <hr>
114
115 <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>
116
117 <p>Amante a la programación web ,dedicado al backend</p>
118 </div>
119 <!-- /.box-body -->
120 </div>
121 <!-- /.box -->
122
123 </div>
124
125 <div class="col-md-4">
126 <div class="box box-primary">
127 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
128 <!-- bloguero-responsive -->
129 <ins class="adsbygoogle"
130 style="display:block"
131 data-ad-client="ca-pub-6927159933673851"
132 data-ad-slot="4921271120"
133 data-ad-format="auto">&/ins>
134 <script>
SHA RES 135 (adsbygoogle = window.adsbygoogle || []).push({});
136 </script>

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 6/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
137 </div>
138 </div>
139
140 <div class="col-md-4">
141 <!-- About Me Box -->
142 <div class="box box-primary">
143 <div class="box-header with-border">
144 <h3 class="box-title">Redes Sociales:</h3>
145 </div>
146 <!-- /.box-header -->
147 <div class="box-body">
148 <div class="input-group">
149 <span class="input-group-addon"><i class="fa fa-twitter"></i></span>
150 <input type="text" class="form-control" value="@blogueroec" disabled>
151 </div>
152 <br>
153
154 <div class="input-group">
155 <span class="input-group-addon">&i class="fa fa-facebook">&/i>&/span>
156 <input type="text" class="form-control" value="blogueroec" disabled>
157 </div>
158 <br>
159
160 <div class="input-group">
161 <span class="input-group-addon"><i class="fa fa-google-plus"></i></span>
162 <input type="text" class="form-control" value="+BlogueroEcuador" disable
163 </div>
164 <br>
165 </div>
166 <!-- /.box-body -->
167 </div>
168 <!-- /.box -->
169 </div><!--col-->
170 </div><!--row-->
171 </section>
172 </div><!--content wrapper-->
173
174 &?php
175 }
176 ?>
177 &?php require_once 'public/overall/footer-index.php'; ?>
178 &?php require_once 'public/overall/footer.php'; ?>

De aquí en adelante trata de poner los siguientes archivos en su respectivo directorio para mostrar el estilo correcto y no haya problemas
footer.php.

1 &!-- jQuery 2.2.3 -->


2 <cript src="<?php echo URL_VIEW; ?>bootstrap-default/js/jquery-2.2.3.min.js"></script>
3 <!-- Bootstrap 3.3.6 -->
4 <script src="<?php echo URL_VIEW; ?>bootstrap-default/bootstrap/js/bootstrap.min.js"></sc
5 <script src="<?php echo URL_VIEW; ?>bootstrap-default/js/app.min.js"></script>
6 <!-- iCheck -->
7 <script src="<?php echo URL_VIEW; ?>bootstrap-default/css/icheck/icheck.min.js"></script>
8 <script>
9 $(function () {
10 $('input').iCheck({
11 checkboxClass: 'icheckbox_square-green',
12 radioClass: 'iradio_square-green',
13 increaseArea: '20%' // optional
14 });
15 });
16 </script>
17 </body>
18 </html>

footer-index.php

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 7/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 &?php if(isset($_SESSION['sesion_id']))
2 {
3 ?>
4 <!-- Main Footer -->
5 <footer class="main-footer">
6 <!-- To the right -->
7 <div class="pull-right hidden-xs">
8 Visitanos en nuestras redes sociales.
9 </div>
10 <!-- Default to the left -->
11 <strong>Copyright © <?php echo date("Y");?> <a target="_blank" href="<a class="vglnk"
12 </footer>
13 </div>
14 <?php }
15 else{
16 echo'
17 <div class="container">
18 <nav class="navbar navbar-default">
19 <div class="navbar-header">
20 <a class="navbar-brand"><strong>Usuario:</strong> usuario@bloguero-ec.com | <
21 </div>
22 </nav>
23 </div>';
24 }
25 ?>

header.php

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title><?php echo TITLE_WEB; ?></title>
7 <!-- Tell the browser to be responsive to screen width -->
8 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
9 <!-- Bootstrap 3.3.6 -->
10 <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/bootstrap/css/boo
11 <!-- Font Awesome -->
12 <link rel="stylesheet" href="<a class="vglnk" href="https://cdnjs.cloudflare.com/ajax/l
13 <!-- Ionicons -->
14 <link rel="stylesheet" href="<a class="vglnk" href="https://cdnjs.cloudflare.com/ajax/l
15 <!-- Theme style -->
16 <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/css/estilo.min.cs
17 <!-- iCheck -->
18 <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/css/icheck/square
19 <!--Estilo -->
20 <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/css/skin-red-ligh
21 <!--custom-->
22 <script src="<?php echo URL_VIEW; ?>bootstrap-default/js/custom.js"></script>
23 <!--[if lt IE 9]>
24 <script src="<a class="vglnk" href="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.mi
25 <script src="<a class="vglnk" href="https://oss.maxcdn.com/respond/1.4.2/respond.min.js
26 <![endif]-->
27 </head>

menu-aside.php

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 8/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 <!-- Left side column. contains the logo and sidebar -->
2 <aside class="main-sidebar">
3
4 <!-- sidebar: style can be found in sidebar.less -->
5 <section class="sidebar">
6
7 <!-- Sidebar user panel (optional) -->
8 <div class="user-panel">
9 <div class="pull-left image">
10 <img src="<?php echo URL_VIEW.'bootstrap-default/img/'.$_usuario[$_SESSION['sesio
11 </div>
12 <div class="pull-left info">
13 <p>&?php echo $_usuario[$_SESSION['sesion_id']]['nombre_user']; ?>&/p>
14 <!-- Status -->
15 </div>
16 </div>
17
18 <!-- Sidebar Menu -->
19 <ul class="sidebar-menu">
20 <li class="header">MENU OPCIONES&/li>
21 <!-- Optionally, you can add icons to the links -->
22 <li class="active"><a href="<a class="vglnk" href="http://www.bloguero-ec.com (http
23 </ul>
24 <!-- /.sidebar-menu -->
25 </section>
26 <!-- /.sidebar -->
27 </aside>

menu-header.php

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 9/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 <body class="hold-transition skin-red-light sidebar-mini">
2 <div class="wrapper">
3
4 <!-- Menu Header -->
5 <header class="main-header">
6
7 <!-- Logo -->
8 <a href="<?php echo URL_WEB; ?>" class="logo">
9 <!-- mini logo for sidebar mini 50x50 pixels -->
10 <span class="logo-mini"><b>B</b>ec</span>
11 <!-- logo for regular state and mobile devices -->
12 <span class="logo-lg"><b><?php echo NOMBRE_WEB; ?></b></span>
13 </a>
14
15 <!-- Header Navbar -->
16 <nav class="navbar navbar-static-top" role="navigation">
17 <!-- Sidebar toggle button-->
18 <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
19 <span class="sr-only">Toggle navigation</span> </a>
20 <!-- Navbar Right Menu -->
21 <div class="navbar-custom-menu">
22 <ul class="nav navbar-nav">
23
24 <!-- User Account Menu -->
25 <li class="dropdown user user-menu">
26 <!-- Menu Toggle Button -->
27 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
28 <!-- The user image in the navbar-->
29 <img src="<?php echo URL_VIEW.'bootstrap-default/img/'.$_usuario[$_SESSION[
30 <!-- hidden-xs hides the username on small devices so only the image appear
31 <span class="hidden-xs"><?php echo $_usuario[$_SESSION['sesion_id']]['nombr
32 </a>
33 <ul class="dropdown-menu">
34 <!-- The user image in the menu -->
35 <li class="user-header">
36 <img src="<?php echo URL_VIEW.'bootstrap-default/img/'.$_usuario[$_SESSIO
37
38 <p>
39 <?php echo $_usuario[$_SESSION['sesion_id']]['nombre_user']; ?> - Admin
40 <small>Miembro desde 24 de Abril del 2015</small>
41 </p>
42 </li>
43
44 <!-- Menu Body -->
45 <li class="user-body">
46 <div class="row">
47 <div class="col-xs-4 text-center">
48 <a target="_blank" href="<a class="vglnk" href="https://twitter.com/b
49 </div>
50 <div class="col-xs-4 text-center">
51 <a target="_blank" href="<a class="vglnk" href="https://plus.google.c
52 </div>
53 <div class="col-xs-4 text-center">
54 <a target="_blank" href="<a class="vglnk" href="https://www.facebook.
55 </div>
56 </div>
57 <!-- /.row -->
58 </li>
59 <!-- Menu Footer-->
60 <li class="user-footer">
61 <div class="pull-left">
62 <a href="#" class="btn btn-default btn-flat">Perfil</a>
63 </div>
64 <div class="pull-right">
65 <a href="<?php echo URL_WEB; ?>?view=logout<logout=desconectar" class="
66 </li>
67 </ul>
68 </li>
69 <!-- Control Sidebar Toggle Button -->
70 </ul>
71 </div>
72 </nav>
73 </header>

nosesion.php.- Es el formulario de inicio de sesión solo se mostrará si el usuario no a iniciado sesión en el sitio.

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 10/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 <body class="hold-transition login-page">
2 <div class="login-box">
3 <div class="login-logo">
4 <a><b>bloguero</b>EC</a>
5 </div>
6 <!-- /.login-logo -->
7 <div class="login-box-body">
8 <p class="login-box-msg">Inicie sesión</p>
9
10 <div onKeyPress="return runScriptLogin(event)">
11 <div class="form-group has-feedback">
12 <input type="email" id="correo" class="form-control" placeholder="Correo">
13 <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
14 </div>
15 <div class="form-group has-feedback">
16 <input type="password" id="password" class="form-control" placeholder="Contraseña
17 <span class="glyphicon glyphicon-lock form-control-feedback"></span>
18 </div>
19 <div class="row">
20 <div class="col-xs-8">
21 <div class="checkbox icheck">
22 <label>
23 <input type="checkbox" id="sesion" value="1"> Recuerdeme
24 </label>
25 </div>
26 </div>
27 <!-- /.col -->
28 <div class="col-xs-4">
29 <button type="submit" class="pull-right btn btn-success" onClick="goLogin()">Lo
30 </div>
31 <!-- /.col -->
32 </div>
33 </div><!--run script-->
34
35 </div>
36 <!-- /.login-box-body -->
37 <div id="_AJAX_LOGIN_"></div>
38 </div>
39 <!-- /.login-box -->
40 <script src="<?php echo URL_VIEW; ?>bootstrap-default/js/login.js"></script>

login.php.- se encargará de veri car vía ajax si el usuario existe en la db.

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 11/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.
1 <?php
2 //vrificamos que se haya enviado via post
3 if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
4 estado_servidor('Error! Metodo de ingreso invalido!');
5 }
6 //instaciamos la conexion
7 $db = new Conexion();
8 //creamos variables con los datos enviados desde el formulario y las limpiamos
9 $email = $db->real_escape_string($_POST['user']);
10 $pass = strip_tags($_POST['pass']);
11
12 //reamos una consulta para saber si el usuario exxiste en la db
13 $b_user = "SELECT * FROM tabla WHERE email_user='$email'";
14 $result = $db->query($b_user);
15 $ses = $result->fetch_array();
16 //comparamos password
17 $salt = substr ($email, 0, 2);
18 //encriptamos password
19 $clave_crypt = crypt($pass, $salt);
20
21 if(($email != '') && ($pass != ''))
22 {//vaildar datos
23 if(filter_var($email, FILTER_VALIDATE_EMAIL))
24 {//validar mail
25 //if($row = $result->num_rows)
26 if($result->num_rows > 0)
27 {//buscamos email
28 if($ses['pass_user'] == $clave_crypt)
29 {//buscamos pass
30 //declaramos variables todo OK
31 $_SESSION['sesion_id'] = $ses['id_user'];
32 if($_POST['sesion']) { ini_set('session.cookie_lifetime', time() + (60*60
33 $message = 1;
34 }//fin de buscar pass
35 else
36 {
37 $message ='<div class="alert alert-form alert-warning text-xs-center">V
38 }
39 }//fin de buscar email
40 else
41 {
42 $message ='<div class="alert alert-form alert-danger text-xs-center">Email
43 }
44 }//fin validar mail
45 else
46 {
47 $message = '<div class="alert alert-form alert-danger text-xs-center">Email inv
48 }
49 }//fin validar datos
50 else
51 {
52 $message = '<div class="alert alert-form alert-danger text-xs-center">Deberas lle
53 }
54
55 echo $message;
56
57 function estado_servidor($str){
58 echo json_encode(array('estado'=>$str));
59 exit;
60 }
61 ?>

Para el estilo del sitio se ha utilizado bootstrap y unas modi caciones dentro de los estilos realizados por bloguero-ec estos archivos estarán en
la descarga.
Además constará de un archivo llamado login.js y custom.js que realizan la petición ajax.
Tabla.sql.- Consta de la tabla a ser utilizad mas los campos para realizar las respectivas consultas vía sql.

1 CREATE TABLE `tabla` (


2 `id_user` bigint(10) NOT NULL,
3 `nombre_user` varchar(30) COLLATE utf8_spanish2_ci NOT NULL,
4 `email_user` varchar(70) COLLATE utf8_spanish2_ci NOT NULL,
5 `pass_user` varchar(70) COLLATE utf8_spanish2_ci NOT NULL,
6 `imagen_user` varchar(100) COLLATE utf8_spanish2_ci NOT NULL
7 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci;
8
9 INSERT INTO `tabla` (`id_user`, `nombre_user`, `email_user`, `pass_user`, `imagen_user`)
10 (1, 'Bloguero ec', 'domain@bloguero-ec.com', 'coQXAzpAUyNBw', 'logotipo_responsive.png');
11 )

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 12/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

Con esto tendremos nuestro login funcionando. Recuerda descargar el estilo y colocarlo en la carpeta view para que funcione correctamente
además al archivo login.js deberás cambiar la ruta absoluta por la de tu dominio.
Nos vemos en una futura publicación.

DEMOSTRACION (http://demo.bloguero-ec.com/login-mvc-php-mysql-ajax/)

DESCARGAR ESTILO (http://www.media re.com/ le/qjhq3w9pl80qbub/bootstrap-default.rar)

Relacionado

(https://www.bloguero- (https://www.bloguero- (https://www.bloguero-


ec.com/publicacion/login-php-mysqli-foto-de- ec.com/publicacion/login-php-mysql-para-web) ec.com/publicacion/subir-imagenes-php-jquery-
per l) Login php mysql para web (https://www.bloguero- ajax)
login php mysqli con foto de per l para web... ec.com/publicacion/login-php-mysql-para-web) Subir imágenes Php jQuery Ajax...
(https://www.bloguero-ec.com/publicacion/login- (https://www.bloguero-ec.com/publicacion/subir-
php-mysqli-foto-de-per l) imagenes-php-jquery-ajax)

Google AdWords
Llega a Nuevos Clientes con AdWords. Entra Aquí y Recibe
Soporte de un Especialista.

Anuncio Google AdWords Más información

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 13/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.


Política de Comentarios de Bloguero-ec
http://www.bloguero-ec.com/politica-de-privacidad
Por favor lea nuestra Política de Comentarios antes de comentar.

0 Comentarios Bloguero-ec 
1 Acceder

Ordenar por los mejores


 Recomendar ⤤ Compartir

Sé el primero en comentar...

INICIAR SESIÓN CON


O REGISTRARSE CON DISQUS ?

Nombre

Sé el primero en comentar.

TAMBIÉN EN BLOGUERO-EC

Timeline de twitter hecho en php, mysql, jquery y javascript Sistema de votación por estrellas php mysql
6 comentarios • hace 3 años 13 comentarios • hace 4 años
Bloguero-ec — No te olvides cambiar las consultas a mysqli o pdo Bloguero-ec — En la tabla votacion deberas añadir los id correspondientes
ej.id 1 titulo post1id 2 titulo post2id 3 titulo post3suponiendo que …

Lenguajes Frameworks y herramientas que usted debe aprender Cortar texto jQuery (efecto leer más ….)
en 2017 7 comentarios • hace 2 años
2 comentarios • hace un año Bloguero-ec — Saludos gracias por la respuesta...
Bloguero-ec — De nada gracias por la visita.

✉ Suscríbete d Añade Disqus a tu sitio webAñade Disqus Añadir 🔒 Privacidad

SIGUENOS

Facebook
(http://www.facebook.com/blogueroec)

Twitter
(http://twitter.com/intent/follow?
source=followbutton&variant=1.0&screen_name=blogueroec)

Google Follow
SHA RES
(https://plus.google.com/+Blogueroecuador)

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 14/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

Disqus
(https://disqus.com/by/BlogueroEc/)

MAS PUBLICACIONES

REPRESENTACIÓN GRÁFICA DE LOS SIMPSONS CON PURO ESTILO CSS…. (HTTPS://WWW.BLOGUERO-


EC.COM/PUBLICACION/REPRESENTACION-GRAFICA-DE-LOS-SIPMSONS-CON-CSS)

 Dic 28, 2014

(https://www.bloguero-ec.com/publicacion/representacion-
gra ca-de-los-sipmsons-con-css)

FRAMEWORKS PARA LA CONSTRUCCIÓN DE APLICACIONES HÍBRIDAS MOVILES (HTTPS://WWW.BLOGUERO-


EC.COM/PUBLICACION/FRAMEWORKS-PARA-APLICACIONES-HIBRIDAS-MOVILES)

 Nov 3, 2015

(https://www.bloguero-ec.com/publicacion/frameworks-para-
aplicaciones-hibridas-moviles)

EFECTOS NAVIDEÑOS PARA WEB …. (HTTPS://WWW.BLOGUERO-EC.COM/PUBLICACION/EFECTOS-NAVIDENOS-PARA-WEB)

 Nov 18, 2015

(https://www.bloguero-ec.com/publicacion/efectos-navidenos-
para-web)

CORTAR TEXTO JQUERY (EFECTO LEER MÁS ….) (HTTPS://WWW.BLOGUERO-EC.COM/PUBLICACION/CORTAR-TEXTO-JQUERY-EXPANDER-


PLUGIN)

 Oct 1, 2015

(https://www.bloguero-ec.com/publicacion/cortar-texto-jquery-
expander-plugin)

EFECTO NEVADA JAVASCRIPT CON BOTÓN ASTERISCO (HTTPS://WWW.BLOGUERO-EC.COM/PUBLICACION/EFECTO-NEVADA-


JAVASCRIPT-CON-BOTON-ASTERISCO)

 Abr 3, 2014

(https://www.bloguero-ec.com/publicacion/efecto-nevada-
javascript-con-boton-asterisco)

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 15/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

VISITA NUESTRA WEB AMIGA DONDE ENCONTRARÁS MAS TUTORIALES. HTTPS//TUTORIALES.BLOGUERO-EC.COM (HTTPS://TUTORIALES.BLOGUERO-EC.COM)

TWITTER FEED

¿SATURADO DE PROGRAMAS QUE NO USAS EN WINDOWS 10? ASÍ PUEDES ELIMINARLO DE UNA FORMA FÁCIL Y SENCILLA
HTTPS
://
WWW
.
XATAKAWINDOWS
.
COM
/
P
/
122029
(HTTPS://WWW.XATAKAWINDOWS.COM/P/122029) 
5 FEB. 2018
REPLY (HTTPS://TWITTER.COM/INTENT/TWEET?IN_REPLY_TO=960875045026492416) RETWEET (HTTPS://TWITTER.COM/INTENT/RETWEET?TWEET_ID=960875045026492416) FAVORITE (HTTPS://TWITTER.COM/INTENT/FAVORITE?TWEET_ID=960875045026492416)

PHP 7.2.2 AND 7.1.14 RELEASED. THOSE ARE BUGFIX RELEASES.ALL RESPECTIVE USERS ARE ENCOURAGED TO UPGRADE.
5 FEB. 2018
REPLY (HTTPS://TWITTER.COM/INTENT/TWEET?IN_REPLY_TO=960874625877139456) RETWEET (HTTPS://TWITTER.COM/INTENT/RETWEET?TWEET_ID=960874625877139456) FAVORITE (HTTPS://TWITTER.COM/INTENT/FAVORITE?TWEET_ID=960874625877139456)

DEMOSTRACIÓN TIMELINE DE TWITTER HECHO EN PHP MVC MYSQL...


HTTPS
://
DEMO
.
BLOGUERO
-
EC
.
COM
/
TIMELINE
-
TWITTER
-
PHP
-
MVC
-
AJAX
/
(HTTPS://DEMO.BLOGUERO-EC.COM/TIMELINE-TWITTER-PHP-MVC-AJAX/) …
2 FEB. 2018
REPLY (HTTPS://TWITTER.COM/INTENT/TWEET?IN_REPLY_TO=959625687694041089) RETWEET (HTTPS://TWITTER.COM/INTENT/RETWEET?TWEET_ID=959625687694041089) FAVORITE (HTTPS://TWITTER.COM/INTENT/FAVORITE?TWEET_ID=959625687694041089)

ADSENSE

Estudia en el extranjero
Tenemos 80 años de experiencia. ¡Estudia inglés con
Kaplan!

Anuncio Kaplan International Contacto

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 16/17
20/3/2018 Login Mvc Php Mysql Ajax con demostracion Bloguero-ec.

CATEGORIAS

codigo-fuente (https://www.bloguero-ec.com/publicacion/category/codigo-fuente) (69)


noticias (https://www.bloguero-ec.com/publicacion/category/noticias) (45)
javascript (https://www.bloguero-ec.com/publicacion/category/javascript) (44)
jquery (https://www.bloguero-ec.com/publicacion/category/jquery) (41)
css (https://www.bloguero-ec.com/publicacion/category/css) (28)
css3 (https://www.bloguero-ec.com/publicacion/category/css3) (24)
responsive (https://www.bloguero-ec.com/publicacion/category/responsive) (21)
php (https://www.bloguero-ec.com/publicacion/category/php) (17)
html5 (https://www.bloguero-ec.com/publicacion/category/html5) (11)
computadoras (https://www.bloguero-ec.com/publicacion/category/computadoras) (11)
efectos (https://www.bloguero-ec.com/publicacion/category/efectos) (10)
mysql (https://www.bloguero-ec.com/publicacion/category/mysql) (9)
formulario (https://www.bloguero-ec.com/publicacion/category/formulario) (8)
sistema (https://www.bloguero-ec.com/publicacion/category/sistema) (8)
twitter (https://www.bloguero-ec.com/publicacion/category/twitter) (8)

© 2018 DERECHOS RESERVADOS | DISEÑADO POR: BLOGUEROEC. (HTTPS://BLOGUERO-EC.COM/)


(https://tw
(https

SHA RES

https://www.bloguero-ec.com/publicacion/login-mvc-php-mysql-ajax 17/17

Vous aimerez peut-être aussi