Ejecutamos el visual studio 2013 y esperamos que se abra
Esta es la pantalla de inicio de visual studio 2013 no se preocupen por la apariencia o si es version ultimate profesional o de prueba para el tutorial sirve cualquier versión y si desean cambiar el skin o tema visual que en mi caso es oscuro arriba en el meu buscan herramientas->Opciones->General a la derecha van a ver que dice experiencia visual y tema de color con la opciones oscuro, claro y azul elijen las que mas le guste aceptan y continuamos.
Ahora para crear un proyecto nuevo podemos seleccionar de 3 maneras distintas 1- en la pantalla principal como se puede ver un menú que dice Iniciar y abajo Nuevo proyecto 2- En la barra de menú arriba Archivo->Nuevo->Proyecto 3- Presionando las teclas de atajo que serian CTRL+MAYÚSCULAS+N.
En esta pantalla podemos elegir el tipo de proyectos que queremos realizar a la izquierda en plantillas elegimos el lenguaje y a la derecha de ese lenguaje el tipo de proyecto en este caso usamos el lenguaje c# y el tipo aplicacion de windows form, luego en nombre ponemos el nombre que vamos a darle a nuestro proyecto-aplicacion en este caso sera "Tutorial",en ubicacion es donde queremos guardar nuestro proyecto aquí es recomendable organizar bien las carpetas para luego poder ubicarlas mejor yo en mi caso usare una carpeta "proyectosTutorial" y en el check que dice crear directorio para la solución marcarlo.
Esperamos a que vs (visual studio) cree el proyecto y listo.
Una vez dentro del vs y del proyecto-aplicacion vemos ademas de crear el proyecto agrego un item del tipo formulario windows (winform) que en este caso le puso como nombre Form1.cs como figura arriba a la derecha en el cuadro de herramientas proyectos en este cuadro veremos todos los archivos que usemos en nuestro proyecto carpetas, imágenes referencia etc. Si seleccionamos el Form1 y presionamos F7 nos abrirá una ventana que dice Form1.cs en esta ventana es donde escribiremos el código para que funcione nuestra aplicacion y la otra pestaña que dice Form1.cs(Diseño) es donde incluiremos controles del formulario como botones, caja de texto, etc. También la usaremos para darle tamaño colores en fin para ver como se mostrara el formulario cuando se ejecute la aplicacion.
Veamos un ejemplo
Aquí cambiamos el tamaño del formulario y arriba en la flecha verde que dice iniciar es para ejecutar la aplicación e ir probando como nos va quedando, en el cuadro de herramientas propiedades a la derecha abajo están las propiedades de cada control no voy a detallar cada uno pero si elegimos un control y nos movemos por sus propiedades y seleccionamos alguna mas abajo podrán ver un detalle de lo que hace esa propiedad eso les dejo como tarea si quieren profundizar en las propiedades de cada control.
Como se ve a un costado de las propiedades hay rayito que si pasan el mouse por encima de ese rayo veran que dice eventos este tema lo dejaremos para mas adelante porque la idea es ir practicando para que no sea tedioso el tutorial, dicho esto y aclarado algunos aspecto del entorno de desarrollo vamos a comenzar con el login.
En la barra lateral izquierda vemos el cuadro de herramientas si hacemos click se despliega y donde dice controles comunes seleccionamos 2 controles label 2 controles textbox y dos controles button lo arrastramos hacia el form y lo ubicamos a nuestro antojo cada cual puede elegir colores y ubicación distinta siempre que quede prolijo y aqui le dejo un consejo personal cuando diseñen o escriban el código fuente siempre imaginen que el usuario final de nuestra aplicación serán personas con poca o nada de experiencia en informática y cuanto mas intuitivo y amigable sea la aplicación menos rechazo obtendrán de ellos. Yo soy de la idea de llevar el control de donde quiero que vayan luego de...así me aseguro no tener que pasar hora explicando como funciona la aplicacion.Bueno continuemos
Seleccionamos el label1 y nos vamos a su propiedad text ojo no confundir con el nombre del control que dice (name) ya veremos eso la propiedad Text es la que nos mostrara lo que escribamos en ese label en este caso escribimos Usuario, seleccionamos el label2 vamos a su propiedad Text y escribimos Password o Contraseña como quieran ustedes. También se pueden establecer las propiedades por código pero lo veremos mas adelante por ahora lo hagamos de la forma mas practica.
Voy a achicar la pantalla para poder cubrir todo el entorno de desarrollo y que se vea todo.
Bueno a los controles textbox1 y textbox2 le cambiamos su propiedad (name) por txtUsuario y txtPassword y a los button le cambiamos su propiedad (name) por btnAceptar y btnCancelar y ademas su propiedad Text por Aceptar y Cancelar esto porque ?. Porque a medida que vayamos agregando controles los agregara por ejemplo button1, button2, button3 y no es una buena practica si llenamos el formulario de controles vamos a tener un lío y nos va a obligar a volver al diseño a ver que queríamos hacer con ese control o por ejemplo si debemos asignar algo a un control y ya vamos a ver enseguida cuando escribamos el nombre del control nos aparecerá la lista text1,text2,text3 y vamos a preguntarnos cual es en cambio si escribimos el control y en la lista nos aparece txtUsuario, txtPassword, btnAceptar y btnCancelar vamos a tener una buena referencia de que tipo de control es y cual es su nombre, Como practica común y esto también me lo enseñaron a mi los nombres de controles van una abreviatura del tipo de control ejemplo txt por TextBox o btn por Button seguida esta abreviatura de su identificación txt <-- TextBox Usuario txtUsuario los que no indica que es un control caja de texto o textbox donde se escribirá el nombre de usuario
Bueno acomodamos un poco los controles y también cambiamos una propiedad que se llama StarPosition que la uso para centrar los formularios para que cada vez que ejecutemos la aplicacion no aparezca arriba a la izquierda o en cualquier posición aleatoria.
Una demostración de como podrían hacer su login cada cual a su gusto eso les dejo para que cada uno pruebe propiedades eso a criterio de cada uno.
Paso siguiente seleccionamos nuestro proyecto que se llama "Tutorial" hacemos click con el botón derecho del mouse y seleccionamos agregar-> nuevo elemento se nos abre la opcion para que elijamos que tipo de elemento vamos a agregar buscamos a la izquierda y buscamos del tipo Datos luego a la derecha buscamos y seleccionamos ADO.NET Entity Data Model en el nombre lo dejamos como esta Model1 y presionamos agregar.
Nos muestra opciones del contenido del modelo por ahora seleccionamos la primera opción "EF Designer desde base de datos" y damos siguiente.
Lo siguiente que nos mostrara es la pantalla de conexión a la base de datos, presionamos el botón nueva conexión nos aparecerá primero la opción de que tipo de base de datos vamos a usar elegimos "Microsoft SQL Server" una vez elegido el tipo de motor de datos nos aparece una pantalla donde especificaremos algunas cosas Nombre de servidor aqui ponen el nombre de su pc, también pueden poner la IP de su pc o el nombre LocalHost en caso de que usemos una red se puede poner el nombre o la dirección IP del servidor esto es siempre que el motor de base de datos este en ese servidor, luego nombre de usuario y contraseña de sql si cuando instalaron no pusieron nada solo dejan Autenticación de windows, mas abajo donde dice establecer conexion con base de datos marcamos la primera opción hacemos click en el menú desplegable y esperamos a que cargue en esta lista nos saldrán todas las bases de datos que tengamos en sql server elegimos Tutorial presionamos el botón probar conexión para verificar que no tenemos ningún problema y presionamos el botón aceptar.
Esta pantalla elegiremos que objetos de la base de datos deseamos usar en nuestro modelo y como recordaran del primer capítulo solo creamos una tabla usuarios por lo tanto la marcamos luego desmarcamos las opciones de mas abajo y el espacio de nombres del modelo dejamos "TutorialModel" y click en finalizar.
Esperamos un poco dependiendo de la velocidad de cada computadora y nos salio esta pantalla como vemos en nuestro model tenemos la tabla que habiamos creado en sql server en el primer capitulo asi de sencillo si asi de sencillo a traves de este model ya tenemos capacidad para consultar, modificar o borrar registros de la tabla mas abajo voy a dejar referencia para el que quiera profundizar mas en Entity Framework.Muy bien continuemos.
private void btnCancelar_Click(object sender, EventArgs e)
{
Application.Exit();
}
Presionen iniciar la flecha verde o F5 para probar como quedo presionan el botón cancelar para volver a salir de la aplicacion.
En la pestaña Form1.cs o en la pestaña de código del formulario debajo de public partial class escribimos Tutorial y veremos como el intellisense nos abre una lista desplegable el intellisense sirve para ahorrarnos escritura de código a medida que ingresamos letras nos ira filtrando hasta encontrar lo que queremos escribir como se ve la imagen escribi solo tu y se desplegaron la opciones como yo quería escribir TutorialEntities lo seleccione y lo escribió por mi en resumen es una opción de autocompletar. Dejo el codigo para que vayan comparando si lo tienen igual.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Tutorial
{
public partial class Form1 : Form
{
TutorialEntities mibase = new TutorialEntities();
public Form1()
{
InitializeComponent();
}
private void btnCancelar_Click(object sender, EventArgs e)
{
Application.Exit();
}
}
}
Bueno muy bien vamos a agregar un segundo formulario que se llamara Form2 este formulario por ahora sera el que nos recibira luego de ingresar a través del Login(Form1) seria bueno que agreguemos un control label y escribamos en la propiedad text del label "Bienvenidos al Sistema"
Creamos un método que es donde escribiremos el código para verificar que el usuario exista y la contraseña sean iguales, en este ejemplo podríamos escribir el codigo de verificacion directamente en el evento del botón aceptar cosa que no me gusta yo suelo tener organizado y bien descrito el código puesto que cuando escribamos grandes cantidades de lineas de código se nos va complicar así que los estoy obligando a ser ordenados jeje, pero si prueban el código en el evento del botón veran que tambien funciona.
Escribimos los siguiente dentro del método verificarUsuarios dejo el codigo del metodo completo
private void verificaUsuarios()
{
var existe = mibase.Usuarios.Any(x => x.NombreU == txtUsuario.Text && x.Password == txtPassword.Text);
if (existe)
{
Form2 frm = new Form2();
frm.Show();
this.Hide();
}
else
{
MessageBox.Show("Usuario y/o Contraseña incorrectos");
}
}
y por ultimo llamamos al metodo desde el evento click del mouse
En el botón cancelar hacemos doble click sobre el botón y nos mando directo al código la otra forma de asignar eventos es seleccionar el control presionar el rayito de eventos buscar el evento que necesitamos y cuando hacemos doble click nos manda también directo al evento.
Luego en el evento click del boton llamamos al metodo verificaUsuarios(); que ejecutara todo lo que hay dentro del método y listo solo resta probar la aplicacion con iniciar o F5
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Tutorial
{
public partial class Form1 : Form
{
TutorialEntities mibase = new TutorialEntities();
public Form1()
{
InitializeComponent();
}
private void btnCancelar_Click(object sender, EventArgs e)
{
Application.Exit();
}
private void verificaUsuarios()
{
var existe = mibase.Usuarios.Any(x => x.NombreU == txtUsuario.Text && x.Password == txtPassword.Text);
if (existe)
{
Form2 frm = new Form2();
frm.Show();
this.Hide();
}
else
{
MessageBox.Show("Usuario y/o Contraseña incorrectos");
}
}
private void btnAceptar_Click(object sender, EventArgs e)
{
verificaUsuarios();
}
}
}
Bueno eso es todo había muchas cosas mas para ampliar pero como dije vamos a los bifes directo y no quiero cansarlos con tanta lectura prefiero que hagan practica agreguen usuarios a la base de datos prueben modificar el formulario vean propiedades de controles y eventos y al que quiera ampliar mas el tema lean sobre Linq y Entity Framework. Me despido hasta el próximo capitulo.
No hay comentarios:
Publicar un comentario