martes, 12 de diciembre de 2017

 

como hacer un login en asp net c# y Bootstrap 4.0

hola gente como están por ahí ,espero que bien . Bueno en es post publicare a como hacer un login en .Asp net y bootstrap 4.00

1.- primeramente creamos nuestro database con sus respectivos tablas

CREATE database ejemplo
use ejemplo
CREATE TABLE [dbo].[Usuario](
 [Codigo] [smallint] IDENTITY(1,1) NOT NULL,
 [CodigoPersona] [smallint] NOT NULL,
 [Nombre] [varchar](20) NOT NULL,
 [Clave] [varchar](20) NOT NULL,
 [Vigencia] [bit] NOT NULL,
 [Tipo] [char](1) NOT NULL
 )


2.- una vez creado nuestro bd ahora diseñamos nuestro formulario en asp como la imagen siguiente



https://cpiprodesign.blogspot.pe/






















codigo de Nuestro formulario en html.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Bootstrap 4 Login Form</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></head>
<body>
    <form id="form1" runat="server">
          <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-6">
                    <h3>Ingreso al sistema</h3>
                     <img class="img-fluid rounded-circle  centrado" src="https://www.cpiprodesign.com/imagenes/logo1.png" alt="cpiprodesign">
                 
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="inputCity">Usuario</label>
                        <asp:TextBox ID="TextBox1" placeholder="usuario" CssClass="form-control" runat="server"></asp:TextBox>
                    <br />
                     <label for="inputCity">Password</label>

                    <asp:TextBox ID="TextBox2" type="password" placeholder="Password" CssClass="form-control" runat="server"></asp:TextBox><br />
                    <asp:Label ID="Label1" runat="server" ForeColor="#CC0000"></asp:Label>
                    <br />
                    <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Text="Login" OnClick="Button1_Click" />
              
                        </div>
                      
                       
                    </div>
                </div>
            </div>
        </div>
        </form>
</body>

</html>

3.-codigo de Nuestro formulario en c#

codigo para button y cadena de connecion..

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;




public partial class _Default : System.Web.UI.Page
{
    //cadena de connecion
    public SqlConnection cn= new SqlConnection("Data Source=DESKTOP-80G8HDH;Initial Catalog=Farmacia;Integrated Security=True");

    protected void Page_Load(object sender, EventArgs e)
    {
       
    }

 

   
    protected void Button1_Click(object sender, EventArgs e)
    {
        cn.Open();
        string query = "select count(*) from usuario where nombre= @usuario and Clave = @password";
        SqlCommand cm = new SqlCommand(query, cn);
        cm.Parameters.AddWithValue("@usuario", TextBox1.Text);
        cm.Parameters.AddWithValue("@password", TextBox2.Text);

        //Si existe un usuario con los datos retorna true, caso contrario false
        bool correcto = Convert.ToInt32(cm.ExecuteScalar()) > 0;

        if (correcto)
        {
            //Si existe, Bienvenido...
            Response.Redirect("home.aspx");

        }
        else
        {
            Label1.Text = "Su usuario o contraseña incorrecta ";
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox1.Focus();

        }
        cn.Close();

    }
}


Eso seria todo cualquier duda y sugerencia dejanos tu mensaje en los mensajes.





Share:

2 comentarios:

  1. Excelente tu publicación, tome tu idea solo que cambie un poco colocando la cadena de conexcion dentro del evento del button.
    un millon de gracias por mostrarme la luz.
    Exitos.

    ResponderEliminar

Dudas y sugerencias aqui