Tecnologías del Presente

Bootstrap - Paginacion, Ajax, Jquery, MySql y PHP

2015-08-05T08:32:00.002-07:00

En este video vemos como utilizar el componente pagination cargando datos dinámicos en una tabla con peticiones ajax utilizando jquery, lenguaje php y conexión a una base de datos MySql.

Proyecto: https://drive.google.com/open?id=0B5ca2sDGOmCzbmxES09oY1NNZ2s

Post de introduccion a Bootstrap: http://bit.ly/1MnBC44
Post de paneles y tablas: http://bit.ly/1MSDdgt

Espero compartan el vídeo y me dejen sus comentarios. Gracias y saludos.

Bootstrap - Paneles y Tablas

2015-07-27T15:04:00.004-07:00

En bootstrap también existen paneles para ordenar nuestros elementos y tablas para colocar registros de datos, en este ejemplo vamos aprender a utilizarlos. Un panel básico en bootstrap se define en código html de la siguiente manera.

Paneles

La clase panel se le aplica a los div que la contienen un borde y un padding a lo que contendrá que es como un margen al interior de este panel, el div padre del panel contiene la clase panel y la clase de panel-default es la que agrega un borde de color gris redondiado, el div que aloja el contenido de nuestro panel utiliza la clase panel-body nos agrega un padding de 15 px Ahora usémoslo en un ejemplo, en el servidor que tenemos instalado creamos un nuevo proyecto y abrimos el editor de código que utilizamos para hacer nuestros sitios, agregamos el siguiente código html dentro de nuestras etiquetas después del comentario las etiquetas head y body tienen un espacio despues del simbolo < quitárselos para que todo funcione bien <!DOCTYPE html><html>  </html> agregamos:

< head>
  Paneles y Tablas
  
  
  
  
 < /head>
 < body>
 
 


Este es el contenido del panel


< /body>

Guardamos este archivo como index.html en nuestro sitio y por supuesto no se les olvide agregar los archivos necesarios de bootstrap tanto como jquery, si no sabes cómo tienes que ver el tutorial de introducción Bootstrap - Botones y Dropdowns (Introducción)

Una vez hecho guardamos y vamos a nuestro sitio a ver el resultado, el contenido de nuestro panel crecerá al tamaño de nuestro explorador y va creciendo con forme le vamos agregando contenido, por ahora solo tiene un texto contenido en una etiqueta h1 el resultado sería algo similar a esto:

Este es el contenido del panel

También podemos agregar encabezado a nuestros paneles, seria agregando otro elemento antes del div que contiene la clase panel-body, modificando nuestro panel anterior nuestro código del panel quedaría de la siguiente manera:



este es el encabezado del panel


Este es el contenido del panel

El resultado debería ser algo como esto:

este es el encabezado del panel

Este es el contenido del panel

En nuestro código agregamos un encabezado con un div con la clase panel-heading y en su interior de este elemento un texto que será el que se muestre en el encabezado, le agrega un estilo con un color gris. También podemos cambiar los colores de nuestros paneles ya sea que modifiquemos las clases o utilicemos algunos ya definidos por bootstrap según nuestras necesidades estos son los que bootstrap tiene en sus componentes:


...

...

...

...

...

Utilizamos uno por ejemplo el panel-danger nuestro código quedaría de la siguiente manera:



este es el encabezado del panel


Este es el contenido del panel

Y este sería el resultado:

este es el encabezado del panel

Este es el contenido del panel

Ahora podemos agregar un pie a nuestro panel que puede servir como una barra de estado o para colocar mensajes de lo que está pasando en nuestras aplicaciones, al final de panel-body se agrega un div con la clase panel-footer nuestro código quedaría de la siguiente manera:

 

este es el encabezado del panel


Este es el contenido del panel


pie del panel

Y este sería el resultado:

este es el encabezado del panel

Este es el contenido del panel

pie del panel

Tablas

Cuando necesitamos mostrar datos ordenamos recurrimos a tablas, o grid, para aplicaciones web crear una tabla tenemos que mejorar el diseño de estas, pero con bootstrap esto es más fácil modificando nuestro panel que acabamos de utilizamos hacemos lo siguiente:



este es el encabezado del panel


    

     #
     Nombre
     Apellido
     Usuario
      

    

     1
     Mark
     Otto
     @mdo
      

     2
     Jacob
     Thornton
     @fat
      

     3
     Larry
     the Bird
     @twitter
      

   


pie del panel

Y este es el resultado

este es el encabezado del panel

#	Nombre	Apellido	Usuario
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

pie del panel

Agregamos una tabla con la clase table esta clase está definida por bootstrat para darle un diseño a nuestras tablas. En su interior agregamos un encabezado con las etiquetas thead y el cuerpo de nuestra tabla está definido por las etiquetas tbody estas son propias de html pero bootstrap las utiliza para poner un diseño diferente en cada una, por ejemplo en este caso el encabezado de nuestra tabla nos pone el texto en negritas.

Con nuestras tablas también hay una infinidad de posibilidades y clases que le podemos agregar por ejemplo una tabla rayada o cebreada que es cuando una fila es de un color distinto a la siguiente, simplemente con agregarle la clase table-striped a nuestro elemento tabla, también si queremos una tabla más llamativa podemos agregar otra clase llamada table-hover esta clase básicamente agrega a nuestra tabla un efecto de mouseover cuando posicionamos el puntero del mouse encima de cualquiera de las filas de la tabla esta se cambia de un color distinto y regresa a su color normal cuando quitamos el puntero, modificando nuestro código y agregando estas clases, quedan de la siguiente manera.



este es el encabezado del panel


    

     elemento
     Nombre
     Apellido
     Usuario
      

    

     1
     Mark
     Otto
     @mdo
      

     2
     Jacob
     Thornton
     @fat
      

     3
     Larry
     the Bird
     @twitter
      

   


pie del panel

Este es el resultado:

este es el encabezado del panel

elemento	Nombre	Apellido	Usuario
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

pie del panel

También podemos agregar un tipo de contenido para cada fila o celda al igual como lo hicimos con los encabezados del panel los tipos simplemente se le agrega una clase a toda fila que es contenida por los tr o a cada celda que es un td, las clases cambian el color de fondo del elemento. Estas son las clases que se pueden utilizar:

  ...
  ...
  ...
  ...

Modificamos el código para agregarle clases a dos celdas:



este es el encabezado del panel


    

     elemento
     Nombre
     Apellido
     Usuario
      

    

     1
     Mark
     Otto
     @mdo
      

     2
     Jacob
     Thornton
     @fat
      

     3
     Larry
     the Bird
     @twitter
      

   


pie del panel

Y este es el resultado:

este es el encabezado del panel

elemento	Nombre	Apellido	Usuario
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

pie del panel

Cuando una tabla contiene muchos datos recorrerlas no es muy óptimo para buscar en su contenido, ese problema lo podemos solucionar con un buscador dentro de la tabla o con una paginación y mostrar solo cierto número de elementos por página y hacer nuestra tabla más dinámica, en nuestro siguiente post haremos el manejo de datos dinámico en las tablas con estos elementos, les agrego el proyecto en esta ruta para que lo descarguen. https://drive.google.com/open?id=0B5ca2sDGOmCza0o3Szc1MzEwckELes agradezco sus comentarios y no olviden compartir este post.

Bootstrap - Botones y Dropdowns (Introducción)

2015-07-22T17:23:00.001-07:00

Existen páginas con diseños novedosos y limpios y novedosos con controles y tablas que son responsivos a los dispositivos y que cuando los vemos o interactuamos con ellas decimos wow cuanto trabajo le han dedicado estas personas para crear esta web, y si se le dedica mucho tiempo, pero hay frameworks que nos ayudan a utilizar controles que otras personas han creado algunos libres y otros son con un pago por la licencia de uso.

Bootstrap es un framework que fue creado originalmente por twitter y nos permite utilizar los controles en nuestra web ya que tiene una Open Source que la hace un código libre, incluso puedes modificar las librerías a tu necesidad siempre y cuando no las distribuyas a terceros sin su permiso, pero fuera de eso podemos usarlas libremente en nuestras aplicaciones, Barras de Navegación, Formularios, Tablas, Botones, Glyphicons son algunos de sus controles que podremos utilizar.

Para utilizar Bootstrap vamos a su página oficial:

http://getbootstrap.com/

Buscamos donde dice Download Bootstrap entramos a descargar la versión más reciente ahora es la versión 3.3, nos descargara una carpeta comprimida con todas las fuentes los archivos .css que son las hojas de estilo las y los .js que son los archivos con javascript necesarios para utilizarlo.

También está la opción de utilizarlo en línea solo agregamos los links que nos proporcionan en su web de descarga.

En mi caso utilizare las librerías que descargue, también es necesario utilizar la librería de jquery que es una librería de javascript que básicamente lo que hace es utilizar el código de javascript pero más simplificado, y de esta manera interactuar fácilmente con el documento HTML y manipular el árbol dom, manipular eventos y casi todo, espero adelante mostrarles más usos de jquery, yo las descargue de su página oficial que es lo más recomendable, ella que es de uso libre no hay ningún problema.

https://jquery.com/download/

Empecemos, ahora vamos a la ruta donde tengamos instalado wamp en mi caso es en C:\wamp\www creamos una carpeta con llamada pruebaBootstrap una vez creada entramos en la carpeta y creamos otra carpeta llamada Bootstrap dentro de esta carpeta copiamos la carpeta que descargamos de bootstrap en mi caso mi carpeta que contiene todo lo necesario se llama bootstrap-3.3.5-dist, luego creamos una carpeta llamada jquery donde estará nuestra librería de jquery, una vez creada, copiamos nuestro archivo que descargamos y lo pegamos dentro de la carpeta que acabamos de crear, el mío se llama jquery-1.11.3.js. nos quedaría algo así:

Después de eso creamos un archivo index.html con el siguiente código:



Este es el titulo
 
 
 

 

   
     
  
               
   
Esta es la cabecera del documento

   

   

   Este es el cuerpo del documento
   

   

        
   
   
Este es el pie del documento

Este será la página principal de nuestro sitio pruebaBootstrap no olviden agregar al inicio <!DOCTYPE html> analizamos las líneas:

Las etiquetas <link></link> definen un enlace entre el documento y un recurso externo, este elemento va ubicado dentro de las etiquetas head, en este caso hacemos un enlace con los documentos bootstrap.min.css bootstrap-theme.min.css que definen los estilos, también hacemos otro enlace con la etiqueta <script></script> al documento jquery-1.11.3.js, asi es como se llama el archivo de jquery que descargue, ustedes pueden tener otro nombre depende la versión que descargaron, solo sustitúyanlo por ese nombre, también hay otro enlace al documento jsbootstrap.min.js que contiene las definiciones del código javascript que hace uso bootstrap.

Ahora guardamos los cambios y abrimos nuestro navegador, una vez puesto en línea wamp server vamos a nuestro sitio http://localhost/pruebaBootstrap/ si definieron algún otro puerto solo colocarlo después de la palabra localhost agregan dos puntos asi localhost:puerto y vemos los resultado es algo asi:


   
     
  
               
   
Esta es la cabecera del documento

   
   Este es el cuerpo del documento
   
   
   
Este es el pie del documento

Si nosotros borramos los enlaces de nuestro archivo index y volvemos a ingresar a la ruta de nuestro sitio veremos que el resultado es distinto y sin estilo, bootstrap ha definido estilo a diferentes etiquetas incluso aun si nosotros no las estemos utilizando, ya están definidas los documentos a los que enlazamos.

Visitando la página de bootstrap http://getbootstrap.com/components/ podremos ver todos los componentes que podemos utilizar en nuestras aplicaciones web.

Vamos a utilizar botones crearemos un grupo de botones para un toolbar, sustituimos el siguiente código dentro de las etiquetas body

Quedará de la siguiente manera:

Este grupo de botones lo podríamos utilizar para un reproductor de multimedia por sus iconos, ahora analicemos un poco el código, tenemos un div con la clase class="btn-group" cuando le asignamos esta clase al div básicamente le estamos diciendo que será un contenedor de un grupo de botones, después dentro de ese div tenemos 5 botones definidos con las etiquetas button con los atributos type="button" class="btn btn-default" aria-label="Right Align", estas etiquetas indican el tipo de control, la clase de bootstrap que le asignamos y el tipo de alineación que interpretara bootstrap.

Dentro de cada botón esta la etiqueta span con los atributos class="glyphicon" aria-hidden="true", la clase glyphicon todas las etiquetas la tienen en común es una clase para indicar que será de tipo icono y pero cada uno tiene un icono diferente esto se define dentro del mismo atributo class agregándole un espacio y la otra clase que representa al icono, para ver todos los iconos disponibles de bootstrap pueden ir a la página oficial y en componentes y en Glyphicons están los que podemos usar, basta con que copien el nombre dentro de ellos que está compuesto por glyphicon nombre-icon y lo remplacen en el atributo class.

Ahora usaremos el control dropdown que nos sirve como una lista de opciones ya sea que seleccionemos una o varias como los select list o combobox en otros lenguajes.

Agregamos el siguiente código dentro de body:

   

     


Action
Another action
Something else here
Separated link

El resultado sería:

En nuestro código tenemos un div con la clase dropdown para el tipo de nuestro control, dentro de este div tenemos dos elementos un botón y una lista con las etiquetas button y ul respectivamente el botón actuara como evento para mostrar nuestra lista, esto lo maneja bootstrap así que por ese evento aun no debemos preocuparnos.

El botón contiene en su elemento class tres clases, dos de ellas ya las conocemos son las de un botón normal, la tercera es dropdown-toggle esta es la clase que define a un botón como activador de la lista que deseamos mostrar class="btn btn-default dropdown-toggle" también contiene un id necesario para la comunicación entre el botón y la lista, data-toggle indica el tipo de elemento al que esta enlazado, aria-haspopup indica que el elemento tienen un menú contextual o de nivel inferior, aria-expanded establece el estado inicial si estará expandido el control.

Después del botón tenemos el texto que se muestra en el botón, más abajo tenemos la lista con la etiqueta ul tiene los atributos class="dropdown-menu" indica que es el meno de nuestra lista, aria-labelledby="dropdownMenu1" indica el nombre o el id del que ejecuta el evento de mostrar nuestra lista, el contenido de esta lista se encuentra cada una de las opciones a mostrar con las etiquetas li y en su interior una etiqueta a que nos servirá de link o como ejecutor de un evento y en su contenido el texto que queremos mostrar.

Si has entrado a la página de bootstrap te habrás dado cuenta de todas las posibilidades que puedes utilizar con este Framework, más adelante mostrare como utilizar otros controles.

Les agradezco sus comentarios y no olviden compartir este post.

Creación de conexión con SQL Server y Visual C# mediante Web Service

2013-03-09T13:26:00.002-08:00

En este Post comenzaremos a ver la magia de las 3 capaz, como la aplicación del usuario se conectara a través de un servicio web y este a su vez es el que hace las consultas de los datos alojados en la base de datos, todo esto siendo transparente para el usuario.

En esta sección solo veremos como realizar una prueba de conexión y configuración de nuestra base de datos, recuerden configurar correctamente los puertos de TCP/IP como lo recomendamos en el tutotial pasado : Instalación de SQL Server 2008.

primero que nada es necesario tener instalado Visual Studio Ultimate o Profesional, si no los tienen pueden trabajar con las versiones Express de C# 2010 y Web Developer 2010 pero tendrán que trabajar con los proyectos separados y hacer las conexiones entre ellos, lo mas recomendable es que tengas toda la paquetería de Visual Studio 2010 y no sus versiones Express. si deseas usar las versiones mas recientes de Visual Studio asegúrate de hacer los ajustes necesarios.

1. Abrimos Visual Studio y creamos un nuevo proyecto -> visual C# -> Aplicación de Windows Forms, llamado SistemaTerminal.

2. Ahora se cargara el diseñador y veremos nuestro formulario, después vamos a crear nuestro proyecto de WebService, sin cerrar nada, vamos de nuevo a Archivo -> Agregar -> Proyecto.

Después nos aparece la ventana para seleccionar el tipo de proyecto que deseamos agregar, primero seleccionamos plantillas tipo web el Framework 3.5 y seleccionamos Aplicación de servicio web de ASP.NET y el nombre lo definimos como WebServiceTerminal.

3. Una vez creado el WebService podemos hacer pruebas con este, vemos que nos trae un código de "HelloWord" que retorna una cadena, este es el formato de los métodos del web service de ASP.NET como ven la estructura es similar a un método cualquiera de C# con la única diferencia de su encabezado que esta definido por [WebMethod]

4. Ahora tenemos dos proyectos en nuestro explorador de soluciones, para que todo funcione correctamente y no allá ningún conflicto al momento de ejecutar el Debug vamos a establecer como proyecto de inicio nuestro proyecto de SistemaTerminal de Windows Forms. seleccionamos el proyecto SistemaTerminal damos click con el botón derecho y en el menú seleccionamos Establecer como proyecto de inicio.

5. Vamos a definir la conexión del web service, borramos el web método que tenemos del "HelloWord" y agregamos lo siguiente a nuestra clase de Service

//declaramos aquí la cadena de conexión una instancia tipo String 
//Data Source = .;  -- indica que es local nuestra base de datos
//Catalog= TerminalAutobuses; Nombre de la base de datos
//Integrated Security= True; cuando usamos autentificacion de windows
       string is_cadenaconexion = "Data Source=.; Initial Catalog=TerminalAutobuses; Integrated Security=True";

//aqui declaramos la variable de tipo SqlConnection para la conexion a la base de datos
        SqlConnection lsql_conexion = null;

Si el tipo la variable SqlConnection no es reconocida por C# y nos marca un error es por que aun no agregamos la librería Data.SqlClient lo hacemos de la siguiente manera, sobre el nombre del tipo de variable SqlConnection damos click con el botón derecho luego en Resolver [si no ven la opción resolver lean mas abajo] y luego en Using.System.Data.SqlCliente, cuando damos click se agrega en la cabecera automáticamente la librería y el tipo de variable ya es reconocida.

Si no logran ver en el menú "Resolver" vamos al explorador de soluciones y en el proyecto WebServiceTerminal en la carpeta Reference, damos click derecho y agregar referencia, se nos abrirá una ventana y en la pestaña de .NET buscamos en la lista el nombre del componente System.Data seleccionamos y damos aceptar.

Después hacemos los pasos posteriores para resolver el nombre del tipo de variable.

6. ahora definimos el siguiente Web método para hacer nuestra prueba de conexión, este método recibe por referencia una cadena donde en caso de existir un error el método escribirá un mensaje en esta cadena como se lo hemos codificado, para poder mostrarlo del lado del cliente, debe ser por referencia debido a que se modificara y es necesario que el cliente muestre estos cambios, en otro caso podemos regresar la cadena con un return, pero en este método ya retorna un valor tipo True|False, para saber si el método logro hacer o no la conexión.

 [WebMethod]
        public bool ProbarConexion(ref string as_error)
        {
            lsql_conexion = new SqlConnection(is_cadenaconexion);

            try
            {
                //abrimos conexion
                lsql_conexion.Open();
                return true;
            }
            catch (SqlException e)
            {
                as_error = "No se pudo establecer la conexión a la base de datos. Error: " + e.Message.ToString();

                lsql_conexion.Close();
                return false;
            }
            finally
            {
                if (lsql_conexion != null)
                {
                    lsql_conexion.Close();
                }
            }
        }

7. Seleccionamos el proyecto WebServiceTerminal y damos click con el botón derecho y luego en Generar, esperamos a que termine de generar y estamos listos para hacer la prueba

8. ahora nos vamos al proyecto de SistemaTerminal y en la carpeta Reference damos click derecho y en agregar referencia de servicio para agregar nuestro servicio web que acabamos de crear nos abrirá una ventana como esta y damos click en Detectar ya que el servicio esta en el mismo proyecto, en otro caso debemos poner la dirección del servicio web en linea.

9. Automáticamente detectara el servicio disponible lo seleccionamos y damos el nombre de WSterminal damos aceptar y se iniciara a cargar.

podemos verlo en la carpeta de Service Reference

10. Ahora vamos a nuestro formulario del proyecto SistemaTerminal y agregaremos un botón para llamar al método de probar la conexión con la base de datos, damos doble click sobre el botón para generar automáticamente su evento click.

11. Ya en el código dentro de su evento click ponemos el siguiente código para hacer la llamada al método que hará la prueba de conexión a la base de datos.

   
            //definimos una variable para el webservice    
            WSterminal.Service1SoapClient LWS_conexion = new WSterminal.Service1SoapClient();

            //un String que enviaremos por referencia para guardar el error
            string ls_error="";
            
            //una variable local tipo boleana que recibirá el valor de retorno del metodo ProbarConexion
                               //en esta parte se ejecuta el método
            bool lb_conectado= LWS_conexion.ProbarConexion(ref ls_error);

            //evaluamos la variable si recibió un true, el método logro hacer la conexion 
            //y enviamos un mensaje de conexión exitosa
            if (lb_conectado == true)
            {
                MessageBox.Show("Se realizo la conexión correctamente");
            }
            else
            {
                // si no logro hacer la conexion se enviá el mensaje con el string que modifico el WebService
                MessageBox.Show(ls_error);
            }

El método nos quedara de la siguiente manera.

12. Ahora podemos realizar la prueba de conexión, ejecutamos iniciamos el Debug haciendo click en el boton verde.

El servidor de desarrollo se debe iniciar en la PC esto es para el WebService

13. ahora la ventana del proyecto se abre y podemos dar click en el botón para ejecutar el metodo.

hacemos la prueba y en mi caso me arrojo este error.

Lo solucionamos de la siguiente forma, abrimos las herramientas de configuración Administración de la configuración de SQL Server,

Ahora seleccionamos Servicios de SQL Server, seleccionamos SQL Server click boton derecho y luego Iniciar, y esperamos a que el servicio se inicie.

Listo, ahora volvemos a ejecutar nuestro proyecto ya damos click en el botón probar conexión.

Bien, en nuestro siguiente tutorial podremos continuar con la creación de nuestros web métodos y para la consulta de datos y tablas con SQL Server ademas de iniciar un poco en el diseño de nuestra aplicación de usuario, les agradezco sus comentarios y no olviden compartir este post con sus amigos :) Saludos.

Sitio Web básico con HTML5 y CSS3 - Editando estilos con CSS

2013-03-06T20:48:00.000-08:00

El Cascading Style Sheets o por su acronimo CSS es utilizado para dar Estilo a documentos HTML y XML, estos definen la forma en que el explorador mostrara los elementos HTML y XML, el cual también permite dar diferente o el mismo estilo a la vez a las diversas paginas HTML de su sitio web.

Existen hasta la fecha 3 versiones estables de CSS que los navegadores son capaces de entender, pero hasta ahora no se ha logrado resolver los problemas para que todos los existentes pueden interpretar las reglas del CSS de la misma forma escrita, es decir, cada regla puede escribirse diferente para uno o mas navegadores, por ello necesitamos definir tres o mas reglas que signifique lo mismo pero escrito de forma diferente para diferentes navegadores, o por lo menos los mas usados, los cuales son: Chrome, Mozilla y Explorer.

1. Usa remos nuestro proyecto anterior de Sitioprueba para definir un estilo y aprender mas de como definir CSS, para ello lo cargamos en Expression Web y abrimos el archivo index.html

2. Ahora entre las etiquetas del <head></head> debajo del titulo ponemos el siguiente código que es donde definiremos el estilo de la pagina web y nos quedaría de la siguiente manera.


Este es el titulo

3. como vemos esta definido un body{background-color:cadetblue;} con esta linea le decimos al navegador que nuestro documento html tiene un body de color de fondo cadetblue, podemos poner, colores o imágenes primero definiremos este color de fondo. para esto dentro de <style> nos queda de la siguiente manera:



Este es el titulo



 
         
              
 Esta es la cabecera del documento 

          
                
 
                
 
                Este es el cuerpo del documento
                
 
                
 

          
              
 Esta el pie del documento

para el color podemos utilizar cualquier color web RGB incluso RGBA para definir colores con transparencias en lugar del nombre del color se pondria un codigo como #RRGGBB, con un valor hexadecimal, incluso con un RGB(255,255,255) para definir el valor de cada color primario en bite, mas adelante voy a mostrarles como, por el momento les dejo un enlace a Wikipedia para saber mas sobre estos colores.

https://es.wikipedia.org/wiki/Colores_web

Ahora nuevamente ejecutamos Wamp y lo ponemos en linea, abrimos el explorador y escribimos en la barra de direcciones localhost/sitioprueba, y vemos los cambios que realizamos

4. Ahora vamos a poner color de fondo a nuestra cabecera y pie de pagina. de la misma forma como con el body lo hacemos para el header y footer definimos sus reglas.

Guardamos los cambios y actualizamos nuestro explorador para ver los nuevos cambios.

5. Se puede observar el fondo de la cabecera y el pie de la pagina han cambiado de color pero solo es una linea ya que no contiene mas texto ni elementos, sin embargo podemos definir una maquetación fija o proporcional de estos elementos sin necesidad de que contengan otros, para definir una maquetación fija la definiremos de la siguiente manera.

Guardamos los cambios y actualizamos el explorador.

6. Como vemos la maquetación esta ahora a 100 pixeles de alto y 80% de ancho con respecto al explorador, pero esta alineado a la izquierda, esto es porque por defecto tienen un margen de 0px, también podemos definir un margen auto para que se centre en el medio, lo hacemos de la siguiente manera.

Guardamos los cambios y actualizamos el explorador.

8.Vemos como el header y el footer se han centrado con respecto al explorador, pero el cuerpo del documento aun su contenido esta alineado a la izquierda esto lo podemos corregir de diferentes maneras , una de ellas es meterlo en una maquetación, para esto podemos utilizar las etiquetas <div> </div> estas nos sirven para definir bloques de contenidos, y con ayuda de CSS podemos definir propiedades para cada div identificándolos con un id o class para saber mas sobre que es un id o una clase pueden visitar este Blog: http://www.htmlquick.com/es/reference/tags/div.html

Vamos a definir un contenedor principal, el cual contendrá dentro de el todo lo que este en el body lo hacemos de la siguiente manera, definimos un div, con un id único llamado "contenido" como a continuación .

   
  
   
Esta es la cabecera del documento

   
  
  
   < br>
   < br>
   Este es el cuerpo del documento
   < br>
   < br>
        
   
   
Este es el pie del documento

9. si ahora guardamos cambios y actualizamos el explorador solo veremos un corte de linea antes de su inicio un corte de linea al final, pero para logar verlo mejor vamos a definir un estilo dentro de la etiqueta de estilos creamos su estilo, en este contenedor vamos lo identificamos en CSS con una almohadilla antes del nombre de la siguiente manera "#contenido"

10. como vemos el header esta a lo ancho del explorador, podemos maquetarlo para que este al mismo ancho del div contenido, lo hacemos de la siguiente manera

   
     
  
               
   
Esta es la cabecera del documento

   
   Este es el cuerpo del documento
   
   
   
Este es el pie del documento

Guardamos cambios y actualizamos para ver los cambios.

11. Ahora para tener un diseño mas llamativo pongamos una imagen de fondo utilizaremos una imagen la que ustedes gusten, solo ponemos el nombre de la imagen un punto y su extención ya sea jpg, png, gif, incluso pueden colocar la url de alguna imagen en internet yo tengo mi imagen en mi carpeta del proyecto Sitioprueba.

Ahora en estilo configuramos el fondo con esta imagen de la siguiente manera, ustedes el lugar de poner fonfotecno.jpg, colocan el nombre o la ruta de su imagen:

background-image:url('fondotecno.jpg');

Guardamos lo cambios y actualizamos el explorador y a mi me quedo asi.

En nuestro próximo post conoceremos mas de las nuevas etiquetas de marcado y elementos de HTML5 y poner contenido en nuestra pagina de web, ademas de insertar imagenes y efectos de sombreado, les agradezco sus comentarios y no se olviden de compartir este post ;)

Sitio Web básico con HTML5 y CSS3 - Instalando Wamp Server

2013-03-02T09:47:00.000-08:00

Para iniciar un proyecto de desarrollo web necesitamos un sistema de infraestructura de internet, pueden usar el que sea de su agrado, mi recomendación es que utilicen WAMP Server ya que no necesita muchas configuraciones ya todo viene pre-configurado. WAMP es un sistema de infraestructura de internet que utiliza las herramientas necesarias para desarrollar aplicaciones y sitios web, Wamp permite la comunicación de estas de forma local para poder probar tu sitio web sin tener que subirlo a un servidor online, para hacer pruebas basta con tu servidor local, las herramientas que utiliza WAMP por sus siglas son:

Windows, como sistema operativo;

Apache, como servidor web;

MySQL, como gestor de bases de datos;

PHP (generalmente)

CSS es el acrónimo de CascadingStyle Sheets (hojas de estilo en cascada). Es el lenguaje de estilo que define el estilo de la presentación de los documentos HTML en los exploradores, es decir se puede definir el color de fondo, imágenes la posición de gráficos efectos de sombreado, altura y anchura de las secciones y muchas otras cosas.

1. Para iniciar descargaremos Wamp Server del sitio oficial www.wampserver.com/

2. Seleccionamos descargas. y descargamos el que mas se ajuste a nuestro sistema operativo ya sea de 32 o 64 bits.

3. Al seleccionar el que deseamos descargar se abre una ventana donde nos muestra el link de descarga y otros links para descargar el Visual Studio 2012 x86 o x64 ya que es necesario para el funcionamiento de Wamp Server, si aun no lo tienen deberan descargarlo antes e instalarlo y posteriormente se instala Wamp.

4. cuando abrimos el link de wamp server nos redirecciona a la pagina de descarga donde podemos ejecutar el programa o guardarlo para después ejecutarlo.

5. una vez descargado el programa lo ejecutamos y iniciamos la instalación de una manera sencilla presionamos "Next" o "Siguiente"

6. En algún momento de la instalación se abre una ventana para seleccionar la aplicación de Explorer, la podemos buscar si no la encuentra automáticamente, y presionamos "Abrir".

7. por ultimo especificamos los parámetros para el servidor, podemos dejarlos como vienen por defecto como se muestra en la imagen.

8. una ves terminada la instalacion damos "Finish"

9. Una vez instalado al ejecutar nos pedirá permisos el firewall para la comunicación con la redes publicas y privadas y aceptamos (si ya lo han tenido antes puede que no les pida este permiso), continuamos ejecutando el programa podemos hacer una prueba bucando el icono verde en la barra de notificaciones de windows y seleccionando localhost y podremos ver una descripción de la configuración del servidor Wamp server, las características de php y mysql.

10. En la parte posterior de la pagina podremos ver los proyectos que estemos desarrollando en este casi nosotros tenemos un proyecto llamado "Sitioprueba" que es con el que estaremos trabajando (ustedes no veran esta carpeta porque yo ya la tenia, la crearemos en el paso 13).

11. vamos a dirigirnos a la carpeta de instalación de Wamp server para ver donde se encuentran los proyectos de instalación para eso nos dirigimos a la ubicación que seleccionamos para instalarlo, si lo dejamos por defectos se instalara en en disco local C, nos trasportamos a la dirección C:\wamp\www

12. en esta ubicacion es donde tenemos nuestros proyectos, cada carpeta es un proyecto al momento de instalar solo contendrá estos 3 archivos, Index, Testbase, Testmysql, si utilizaran algún diseñador para código html pueden hacerlo si no con el bloc de notas también podrán editar los archivos y guardarlos con la extensión ".htlm", en nuestro caso utilizaremos Notepad ++ o Sublime text 2 que son unos simples editores de texto como pude aber utilizado un block de notas pero me gusta mas la interfaz de estos dos.

Notepad ++ : https://notepad-plus-plus.org/download/v6.8.html

Sublime text 2: http://www.sublimetext.com/2

13. creamos una carpeta para nuestro sitio nos vamos a la ruta C:\wamp\www aqui creamos una carpeta con el nombre "Sitioprueba".

14. Abrimos nuestro Editor de Texto (yo usare Notepad) y en un archivo nuevo escribimos lo siguiente usando HTML5. (<!DOCTYPE html> la cual es la única etiqueta que va fuera de de las etiquetas <html> de la pagina y siempre debe ser el primer elemento que debe incluir una pagina web ya que declara al servidor web que tipo de documento visualizado.)

<!--las etiquetas "< !--" y  "-- >" se utilizan para hacer comentarios dentro de html -->

<!DOCTYPE html> <!--Encabezado del documento-->
<html> <!--Etiqueta html-->

 <head> <!--Cabecera -->
            <!--El tipo de codificación-->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

     <!--Titulo de la página-->
    <title>Untitled2</title> 
 
 </head>
 
 <body>
         <!--Este es el cuerpo del documento-->
  <!--Entre estas etiquetas estará todo el contenido-->
 </body>

 

</html> <!--Etiqueta final y cierre del documento-->

la siguiente etiqueta es la <html>y al final cierra la </html> que es la principal donde todo el contenido de la pagina web estará entre estas dos etiquetas, casi todas las etiquetas tienen una que abre y otra que cierra al final, estas con la misma estructura solo con la diferencia de una diagonal en la etiqueta de cierre.

la segunda etiqueta del documento es de la cabecera o head en esta etiqueta siempre se pone la información que no se muestra directamente al usuario si no que se utiliza para la configuración del documento u otros archivos como estilo o codificación del texto.

entre estas etiquetas de head esta la de meta que indica que este archivo es de tipo texto html y la codificación de caracteres para el explorador.

15. Para poderla ver en el archivo en el explorador. podemos guardarladamos click derecho y guardar, elegimos la ubicación donde nos encontramos en la carpeta de Sitioprueba y le ponemos el nombre index.html

El index es la pagina principal de cualquier sitio web, cuando accedemos a un dominio sea cual sea el servidor web siempre busca el archivo llamado index el cual es identificado como la pagina web principal.

16. Una vez que nuestro archivo index ya esta guardado en la carpeta de Sitioprueba podemos visualizarla en el explorador, abrimos en la barra de direcciones localhost/sitioprueba, claro que antes asegurarse de que este ejecutando Wamp y este en estado "Onlinne" o "en linea"

17. ahora podemos ver en el explorador el index, debido a que nuestro archivo aun no le hemos puesto contenido solo cargara una pagina vacía y con el titulo Untitled2 porque estaba especificado ese titulo en el archivo que guardamos, pero si utilizan Chrome, pueden dar click derecho sobre la pagina y en el meno seleccionar la opción inspeccionar elemento.

y se nos abrirá una ventana adjunta al navegador como la siguiente donde podremos ver la estructura de nuestro documento, así poder visualizar como esta compuesto, en lo personal esta ventana me ayuda mucho cuando quiero buscar elementos que no puedo ver normalmente o editarlos en tipo de diseño así como poder ver sus cambios al momento y posteriormente copiar esos cambios a mi código y guardarlos.

18. ahora vamos a ponerle algo de contenido a nuestra pagina, en esta ocasión solo le pondremos texto. así que en nuestro editor remplazamos el contenido por este.

<!DOCTYPE html> 
<html> <!--Etiqueta html-->

 <head> 
          
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

     <!--Cabíamos el titulo de la página-->
    <title>Este es el titulo</title>

         Esta es la cabecera de la pagina
         <br> <!--esta etiqueta es para hacer saltos de linea en html-->
         <br> <!--esta etiqueta es para hacer saltos de linea en html-->

 </head>
 
 <body>
  <!--Agregamos un contenido en el body -->
                Este es el cuerpo del la pagina
 </body>

</html>

22. Ahora abrimos nuestro explorador y entramos a localhost/sitioprueba

23 Conoscamos en HTML5 las nuevas etiquetas para la cabecera y pie de pagina.

<!DOCTYPE html> 
<html>

 <head> 
          
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">    
    <title>Este es el titulo</title>

 </head>
 
 <body>
         <header> <!--esta es la nueva etiqueta para cabeceras en ella puedes 
                            poner el titulo de la pagina, logos etc-->
              <h1> Esta es la cabecera del documento </h1> 
                  <!--la etiqueta h1 siempre se utiliza para el titulo del contenido de la pagina, no del sitio
                            h2 para subsecciones, h3 apartados, h4 puede ser texto normal, h5 y h6 son textos mas pequeños-->
         </header> 
                <br> 
                <br> 
                Este es el cuerpo del documento
                <br> 
                <br> 

         <footer> <!--esta es la nueva etiqueta para el pie en ella puedes poner información de la pagina, 
                          creadores, correo, telefono etc.-->
              <h5> Esta el pie del documento </h5> 
         </footer> 

 </body>

</html>

24. por ultimo vamos a la barra de direcciones y entramos a localhost/sitioprueba para ver como quedo nuestra pagina web y este es el resultado.

esto es solo una pequeña prueba básica de lo que podemos realizar con HTML5, en los próximos tutoriales veremos como podemos ponerle estilo a nuestras paginas, fondos, maquetado, y efectos como sombreado etc. con CSS, espero este tutorial les allá ayudado mucho, les agradezco sus comentarios y preguntas.

Diplomado de Desarrollo de Aplicacaciones para Windows Phone

2012-03-29T06:25:00.002-07:00

Aprende, Desarrolla 3 aplicaciones para Windows Phone y gana un Nokia Lumia, hay 50 disponibles..!!

Aun no sabes desarrollar aplicaciones para Windows Phone, esta es tu doble oportunidad de aprender y ganar, tenemos 50 telefonos Nokia Lumia disponibles para todos los que desarrollen 3 aplicaciones para Windows Phone 7, y por si fuera poco el 9 de abril se iniciara un diplomado de Windows Phone en Linea y te enseñamos a desarrollarlas en 4 semanas, esta es tu oportunidad ya no hay mas pretextos solo decídete, busca las bases para ganar uno de los nuevos Nokia Lumia aqui. http://bit.ly/GYOTiA (el concurso de los móviles es independiente del diplomado)

Detalles del diplomado:

El diplomado está diseñado para perfil de desarrolladores con un mínimo de 6 meses de experiencia en el lenguaje C# que quieran conocer todo el proceso de desarrollo de aplicaciones para Windows Phone.

· Conocer las características de hardware principales de Windows Phone.

· Diseñar aplicaciones con el lenguaje de diseño metro.

· Desarrollar aplicaciones bajo los componentes de Silverlight.

· Aprovechar la experiencia de navegación de Windows Phone dentro de aplicaciones.

· Almacenar datos para acceder a ellos desde tu aplicación.

· Diferenciar entre el distinto uso de comunicaciones y redes.

· Usar las diferentes APIs del teléfono.

· Hacer uso del multitasking.

· Publicar tus aplicaciones en el marketplace de Windows Phone

Iniciaremos el curso el día Lunes 9 de Abril. Te invitamos a conocer la página del diplomado donde podrás ver el video informativo que explica la metodología del curso para que inicies el diplomado de manera puntual.

Para entrar a la página del curso haz clic aquí.
Para tu inscripción formal, entra a nuestra página de registro aquí.
Únete al grupo de Facebook y de Twitter para mantenerte siempre informado y colabora con la comunidad.

Una vez enviado el registro, tendrás que validar tu inscripción a través de un correo electrónico que recibirás, de otra manera no quedarás inscrito.

Nota: Ten en consideración que los correos que recibirás de este diplomado vendrán del dominio: ti-capacitacion.com por lo que te pedimos revises con tu departamento de TI o en tu correo electrónico que no se bloqueé ningún correo proveniente de este dominio.

Esta es tu oportunidad no pierdas mas tiempo e inscribete y empiesa a ganar tu propio dinero ademas de crecer como desarrollador, aumentar tu curriculum profesional y ganar uno de los mejores moviles de Nokia con Windows Phone a la fecha.

Creación de Procedimientos Almacenados.

2012-02-15T05:07:00.000-08:00

Esta es la tercera entrega de la primera parte, que son los procedimientos almacenados, aquí es donde viene la programación pura y la lógica de negocio, tratare de ser lo más claro posible en la explicación de la creación de los procedimientos almacenados. Si existe alguna duda en alguno de ellos pueden contactarme o dejarla en sus comentarios.

Comenzaremos explicando, que es un procedimiento almacenado, aquí una definición:

Procedimiento almacenado:

(stored OF procedure en inglés) es un programa (o procedimiento) el cual es almacenado físicamente en una base de datos. Su implementación varía de un gestor de bases de datos a otro. La ventaja de un procedimiento almacenado es que al ser ejecutado, en respuesta a una petición de usuario, es ejecutado directamente en el motor de bases de datos, el cual usualmente corre en un servidor separado. Como tal posee acceso directo a los datos que necesita manipular y sólo necesita enviar sus resultados de regreso al usuario, deshaciéndose de la sobrecarga resultante de comunicar grandes cantidades de datos salientes y entrantes. [es.wikipedia.org/]

La definición de los procedimientos almacenados en SQL Server 2008 son mediante Transact-SQL

La Sintaxis es la siguiente:

CREATE PROCEDURE <nombre_del_procedimiento>
      -- cometarios se hacen con dos guiones seguidos "--"
     @<nombre_parametro1><tipo>(<tamaño>)
      ,@<nombre_parametro2><tipo>(<tamaño>)

AS
BEGIN --indica el inicio del codigo
      -- SET NOCOUNT ON Evita que se devuelva el recuento del número de filas afectadas
      -- en la sentencias SELECT
      SET NOCOUNT ON;

  --Aqui va el codigo del procedimiento
  ...
  ...
END
GO

Cuando hacemos varias modificaciones en un procedimiento como inserciones, eliminaciones, actualizaciones, etc. condicionadas entre ellas, es decir, si se realiza una venta de algún artículo se debe hacer la inserción de la venta y la eliminación del artículo en el almacén, para evitar una inconsistencia en los datos por causa de un error al momento de realizar alguna de las dos modificaciones como la falla de la conexión o error en una de estas, debemos cerciorarnos que se realicen ambas transacciones o ninguna. Existe un método para hacer esto y crear una sola transacción que englobe todas las modificaciones y verifica si existe algún error entonces se cancelan o se revierten todas las modificaciones de datos, podemos combinarlas en los procedimientos almacenados y esas son las transacciones las cuales tiene, se confirman con la sentencia COMMIT(para confirmar) o ROLLBACK (para revertir).

De esta manera se pueden combinar:

CREATE PROCEDURE <nombre_del_procedimiento>
      -- cometarios se hacen con dos guiones seguidos "--"
      @<nombre_parametro1><tipo>(<tamaño>)
      ,@<nombre_parametro2><tipo>(<tamaño>)
AS
      -- SET NOCOUNT ON Evita que se devuelva el recuento del número de filas afectadas
      -- en la sentencias SELECT
      SET NOCOUNT ON;
BEGIN TRAN --indica el inicio de las transacciones

  --Aqui va el codigo del procedimiento
  ...
  ...
IF @@ERROR = 0 --llamamos a la funcion del sistema @@ERROR
                        --evaluamos si nos devuelve un cero
                       
      BEGIN       --apertura del bloque de sentecias
     
            COMMIT TRAN -- si devuelve un cero comprometemos o realizamos la transaccion
           
      END               --cierre del bloque de sentencias
     
ELSE -- en caso contrario (si no)

      BEGIN --apertura del bloque de sentecias
     
            RAISERROR('HA OCURRIDO UN ERROR (intente de nuevo)',16,1) --generamos un error.
            ROLLBACK --  revertimos todos los cambios
           
      END --cierre del bloque de sentencias

--no lleva cierre del procedimiento Almacenado

Aquí tenemos la posibilidad con la función RAISERROR de crear y capturar un error para poder manejar una cadena de texto en Visual Studio y darle información al usuario sobre el error. La función RAISERROR recibe 3 parámetros,el mensaje del error, la severidad y el estado.

La severidad indica el grado de criticidad del error. Admite valores de 0 al 25, pero solo podemos asignar valores del 0 al 18. Los errores el 20 al 25 son considerados fatales por el sistema, y cerraran la conexión que ejecuta el comando RAISERROR. Para asignar valores del 19 al 25 necesitares ser miembros de la función de SQL Server sysadmin.

El estado es un valor para permitir que el programador identifique el mismo error desde diferentes partes del código, admite valores entre 1 al 127 y permite tratar. Si desean más información les dejo aquí un link de uno excelentes tutoriales que me ayudaron mucho. [devjoker.com]

Creación de una función.

Nuestro sistema tendrá la necesidad de crear llaves primarias para la venta de cada boleto y para el número de venta por eso crearemos una función que nos cree llaves únicas. Esta función recibirá dos parámetros uno tipo int,y otro tipo nvarchar, nos devolverá un nvarchar de tamaño 50, esta función convertirá el int en nvarchar y lo concatenara con el segundo parámetro para hacer una llave única.

CREATE FUNCTION nvoNumeroTer(@pasaSemilla int,@ident nvarchar(50))
--funcion para obtener convertir un numero entero a cadena de caracteres
--agregandole un identificador al inicio de la cadena

RETURNS
nvarchar(50)
--retornamos una cadena de longitud maxima de 50

AS
BEGIN
--declaramos una variable que retornaremos
DECLARE @dato nvarchar(50)

--primero convertimos la variable entera con la funcion CAST a
--nvarchar despues la concatenamos con el identificador inicial
--que llevara la cadena y la asignamos a la variable @dato
SET @dato=(@ident+(CAST(@pasaSemilla AS nvarchar)))

--al final retornamos la variable @dato
RETURN @dato
END
GO

Creación de Procedimientos almacenados.

Comprobación de cuenta

Crearemos un procedimiento para comprobar la contraseña y el nombre de usuario de la base de datos, pasándole al procedimiento almacenado dos parámetros de entrada que son el nombre de usuario y la contraseña, por ultimo tendrá un parámetro de salida o “output” tipo bit o booleano este servirá para evaluar si la contraseña fue correcta o no.

CREATE PROCEDURE compruebaCuenta
@NombUsuarioCC nvarchar(50), -- parametro de entrada para recibir el nombre de usuario
@NumPinCC nvarchar(50), -- parametro de entrada papara recibir la contraseña
@pinCorrecto bit output -- parametro de salida para saber si es correcta la contraseña

--procedimiento para comprobar el pin de una cuenta
--pedimos el nombre de la cuenta y su pin
--tenemos una variable de output para dar uan respuesta
--si el pin es correcto o no
AS
     
SET NOCOUNT ON;
           
BEGIN TRAN

--primero comprobamos si el nombre de usuario existe
-- la funcion NOT EXISTS retorna true si no encuentra filas
IF NOT EXISTS(SELECT nombUsuario FROM Usuarios WHERE nombUsuario = @nombUsuarioCC)
      BEGIN
            RAISERROR('EL NOMBRE DE USUARIO NO EXISTE (intente de nuevo)',16,1)
            ROLLBACK
      END
ELSE
      BEGIN
     
      --despues verificamos si la cuenta esta habilitada
      --cuentaHabilitada es tipo bit si es true sera 1 lo compraramos y si nos retorna
      --un true es por que esta habilitada
      IF((SELECT cuentaHabilitada FROM Usuarios WHERE nombUsuario =@nombUsuarioCC)=1)        
            BEGIN      
           
            --ahora comprobamos si el pin es correcto y asignamos true
            --a la variable output      
            IF((SELECT contraseña FROM Usuarios WHERE nombUsuario=@nombUsuarioCC)=@NumPinCC)
                  BEGIN
                 
                        SET @pinCorrecto=1
                       
                  END
                 
            ELSE
            --si no asignamos false
                  BEGIN
                 
                        SET @pinCorrecto=0
                       
                  END
                 
                  --si no hay errores comprometemos la transaccion
                  IF @@ERROR=0
                        BEGIN
                             COMMIT TRAN
                        END
                  ELSE
                        BEGIN
                             RAISERROR('HA OCURRIDO UN ERROR (intente de nuevo)',16,1)
                             ROLLBACK
                        END

                 
            END
      ELSE
      --si la cuenta esta deshabilitada arrojamos el error
            BEGIN
                  RAISERROR('EL USUARIO ESTA DESHABILIDADO',16,1)
                  ROLLBACK
            END
      END
GO

Inicio de caja.

Al iniciar caja el campo “abierta” tipo bit cambiara a true, y se le asignara el “idCaja“ al usuario que abrió la caja en el campo “cajaAsignada”

CREATE PROCEDURE IniciaCaja
@efectivoIC money,
@idSucursalIC nvarchar(50),
@idCajaIC nvarchar(50),
@nomUsuarioIC nvarchar(50)

--el procedimiento almacenado
--inica caja y se la asigna a un usuario
AS
SET NOCOUNT ON
BEGIN TRAN

--Verificamos si la caja que queremos iniciar ya esta abierta o no
IF((SELECT abierta FROM Cajas WHERE idCaja=@idCajaIC)=0)
      BEGIN

--si el valor es 0 indica que esta cerrada
--ingresamos la apertura
            INSERT INTO inicioCaja
                           (idCaja
                           ,idSucursal
                           ,nombUsuario
                           ,fechaApertura
                           ,efectivoApertura)
                   VALUES
                           (@idCajaIC
                           ,@idSucursalIC
                           ,@nomUsuarioIC
                           ,GETDATE()     ---Esta funcion retorna la fecha del sistema de BD
                           ,@efectivoIC)


--actualizamos el valor de caja abierta a verdadero
            UPDATE Cajas
               SET abierta =1
             WHERE idCaja = @idCajaIC
             
--le asignamos la caja al usuario
                  UPDATE Usuarios
                  SET cajaAsignada=@idCajaIC
                  WHERE nombUsuario=@nomUsuarioIC
--comprobamos errores
            IF @@ERROR=0
                  COMMIT TRAN
            ELSE
            BEGIN
            RAISERROR('HA OCURRIDO UN ERROR (intente de nuevo)',16,1)
            ROLLBACK
            END

      END
ELSE
      BEGIN
      --si no indicamos que la caja esta abierta o iniciada
            RAISERROR('ESTA CAJA YA SE HA INICIADO (SELECCIONE OTRA)',16,1)
            ROLLBACK
      END
GO

Venta de Boletos

Crearemos una nueva tabla con las mismas columnas de la tabla Boletos además de un campo auto-incrementable de uno en uno tipo identity llamado semilla el cual será para crear las llaves primarias, esta tabla nos servirá para guardar los boletos que se deseen en una sola venta, sin importar si son a diferentes destinos y para evitar que se guarden datos en las tablas relacionadas del sistema hasta que se finalice y confirme la venta los copiaremos a las tablas reales

CREATE TABLE ref_Boletos(
      idBoleto nvarchar(50) NOT NULL,
      idCorrida nvarchar(50) NOT NULL,
      lugarDestino nvarchar(50) NOT NULL,
      lugarSalida nvarchar(50) NOT NULL,
      nombCliente nvarchar(50) NOT NULL,
      edad int NULL,
      idVenta nvarchar(50) NOT NULL,
      fechaSalida datetime NOT NULL,
      precio money NOT NULL,
      clase nvarchar(50) NOT NULL,
      numAsiento int NOT NULL,
      idAutobus nvarchar(50) NOT NULL,
      idSucursal nvarchar(50) NOT NULL,
      semilla int IDENTITY(1,1) NOT NULL
)

También modificaremos la tabla ventas agregándole una columna más llamada “semilla” también tipo IDENTITY para las llaves primarias de ventas , con la siguiente instrucción lo hacemos.

ALTER TABLE Ventas ADD semilla INT IDENTITY(1,1) NOT NULL

Pueden aprender un poco más sobre los campos IDENTITY, en este link que está bastante claro su explicación y funciones [grimpidev.wordpress.com]

El siguiente procedimiento almacenado es para agregar un boleto a la venta, por medio de uno de los parámetros de entrada, llamado @nuevaVenta tipo bit, lo utilizaremos para saber si se ejecuta este procedimiento para agregar otro boleto a la misma venta, o si es una nueva venta, de ser una nueva venta eliminaremos todas las filas que existan de la tabla ref_Boletos para agregar nuevos datos y no copiar los datos de los boletos de ventas anteriores.

CREATE PROCEDURE NuevoBoleto      
           @CorridaNB nvarchar(50)
           ,@lugarDestinoNB nvarchar(50)
           ,@lugarSalidaNB nvarchar(50)
           ,@NomClienteNB nvarchar(50)
           ,@edadNB int
           ,@precioNB money
           ,@claseNB nvarchar(50)
           ,@numAsientoNB int          
           ,@idSucursalNB nvarchar(50)
           ,@nuevaVenta bit
AS
     
SET NOCOUNT ON;
           
      BEGIN TRAN
--Verificamos si es una nueva venta eliminamos todos los datos de la tabla anteriores
IF(@nuevaVenta=1)
BEGIN
--Eliminamos todo loq eu tenga la tabla de ref para evitar errores    
DELETE FROM ref_Boletos
END

--hacemos la insercion de los datos ee la tabla ref_Boletos

INSERT INTO ref_Boletos
           (idBoleto
           ,idCorrida
           ,lugarDestino
           ,lugarSalida
           ,nombCliente
           ,edad
           ,idVenta
           ,fechaSalida
           ,precio
           ,clase
           ,numAsiento
           ,idAutobus
           ,idSucursal)
     VALUES
           ((SELECT dbo.nvoNumeroTer( (SELECT IDENT_CURRENT('ref_Boletos'))+1,'BT'))
           ,@CorridaNB
           ,@lugarDestinoNB
           ,@lugarSalidaNB
           ,@NomClienteNB
           ,@edadNB
           ,(SELECT dbo.nvoNumeroTer( (SELECT IDENT_CURRENT('VENTAS'))+1,'VT'))
           ,(SELECT fechaSalida FROM Corridas WHERE idCorrida = @CorridaNB)
           ,@precioNB
           ,@claseNB
           ,@numAsientoNB
           ,(SELECT idAutobus FROM Corridas WHERE idCorrida = @CorridaNB)
           ,@idSucursalNB)

--Comprobamos errores y conformamos la transaccion                         
      IF @@ERROR = 0
      BEGIN
                        COMMIT TRAN
      END
                  ELSE
                        BEGIN
                        RAISERROR('HA OCURRIDO UN ERROR (intente de nuevo)',16,1)
                        ROLLBACK
                        END
GO

La función IDENT_CURRENT('Nombre_Tabla'), nos retorna el ultimo valor autogenerado del campo IDENTITY de la tabla que se le pasa como una cadena de caracteres.

Al finalizar y confirmar la venta se ejecutara el siguiente procedimiento para ingresar y dar de alta la venta en la base de datos, en este paso aun podemos copiar los boletos de esta venta a la tabla Boletos aun, debido a que el idVenta de la misma no existe hasta que se termina de ejecutar este procedimiento almacenado, asi que la mejor opcion para copiar los boletos sera un trigger que se ejecute despues de insertar una columna en la tabla ventas.

CREATE PROCEDURE NuevaVentaBoleto
           @nomUsuarioNV nvarchar(50)
           ,@idCaja nvarchar(50)
          
AS   
SET NOCOUNT ON;                                  
           
      BEGIN TRAN
--hacemos la insercion de la venta
INSERT INTO Ventas
           (idVenta
           ,nombUsuario
           ,idCaja
           ,importeVenta
           ,fechaVenta
           ,numBoletos)
     VALUES
           ((SELECT DISTINCT idVenta FROM ref_Boletos) --tomamos el id venta de los boletos
           ,@nomUsuarioNV
           ,@idCaja
           ,(SELECT SUM(precio) FROM ref_Boletos) --sumamos todos los precios de los boletos
           ,GETDATE()
           ,(SELECT COUNT(idBoleto) FROM ref_Boletos)) --contamos todos los boletos

--Comprobamos errores y conformamos la transaccion                         
IF @@ERROR = 0
      BEGIN
                        COMMIT TRAN
      END
ELSE
      BEGIN
            RAISERROR('HA OCURRIDO UN ERROR (intente de nuevo)',16,1)
            ROLLBACK
      END
GO

Trigger de la Venta

Una vez que se aya insertado una fila en la tabla Ventas, se copiaran los boletos de esta venta a la tabla relacionada de la base de datos, si por alguna cuestión llega a fallar por algun error de conexion o cualquier otro el sistema revierte todos los cambios que se hacen desde este trigger hasta el procedimiento donde se creo la insercion de la tabla venta.

CREATE TRIGGER CopiaBoletosVendidos

ON Ventas

AFTER INSERT

AS

BEGIN
BEGIN TRAN

    -- SET NOCOUNT ON impide que se generen mensajes de texto

    -- con cada instrucción
    SET NOCOUNT ON;
   
   
 --copiamos los boletos que vendimos a la tabla de boletos  
INSERT INTO Boletos
           (idBoleto
           ,idCorrida
           ,lugarDestino
           ,lugarSalida
           ,nombCliente
           ,edad
           ,idVenta
           ,fechaSalida
           ,precio
           ,clase
           ,numAsiento
           ,idAutobus
           ,idSucursal)
    SELECT ref_Boletos.idBoleto
           ,ref_Boletos.idCorrida
           ,ref_Boletos.lugarDestino
           ,ref_Boletos.lugarSalida
           ,ref_Boletos.nombCliente
           ,ref_Boletos.edad
           ,ref_Boletos.idVenta
           ,ref_Boletos.fechaSalida
           ,ref_Boletos.precio
           ,ref_Boletos.clase
           ,ref_Boletos.numAsiento
           ,ref_Boletos.idAutobus
           ,ref_Boletos.idSucursal
           FROM ref_Boletos
   

---------------------------------------------------------------
---------si no ocurre un error finalizamos la tranzaccion
IF @@ERROR=0
      BEGIN                          
           COMMIT TRAN
    END
   ---si no la cancelamos---------------------------------------
ELSE
      BEGIN
      RAISERROR ('HA OCURRIDO UN ERROR INTENTELO DE NUEVO', 16,  1 )
      ROLLBACK
      END
END

GO

Procedimiento para la cancelación.

En este caso al ser un boleto el cual creamos a partir de ningún inventario podemos simplemente eliminarlo, en este caso también agregaremos un campo a la tabla de cancelaciones para guardar algunos datos de la cancelación, en la tabla de cancelaciones podemos agregar más datos del boleto si es que se necesitan.

CREATE PROCEDURE CancelaBoleto          
          @idBoletoCB nvarchar(50),
          @idCajaCB nvarchar(50),
          @nomUsuarioCB nvarchar(50),
          @devolucionBoleto money output
AS
     
SET NOCOUNT ON;
           
      BEGIN TRAN
     
IF NOT EXISTS(SELECT idBoleto FROM Boletos WHERE idBoleto=@idBoletoCB)
BEGIN
            RAISERROR('EL BOLETO NO EXISTE (verifique el numero)',16,1)
            ROLLBACK
END
ELSE
      BEGIN
            --declaramos las variables que utilizaremos en para guardar
            --el numero de boletos vendidos, y el numero de la venta
            DECLARE @numBoletosCB int,@numVentaCB nvarchar(50),@precioboleto money

            ---guardamos la devolucion del boleto para saber cuanto es lo que devolveremos
            SET @precioboleto= (SELECT precio FROM Boletos WHERE idBoleto = @idBoletoCB)

            --Obtenemos el numero de venta para saber cual es el que actualizaremos
            SET @numVentaCB=(SELECT idVenta FROM Boletos WHERE idBoleto=@idBoletoCB)
            DELETE FROM Boletos WHERE idBoleto=@idBoletoCB


            SET @numBoletosCB=(SELECT numBoletos FROM Ventas WHERE idVenta=@numVentaCB)

            IF(@numBoletosCB=1)
                  BEGIN
                        DELETE FROM Ventas WHERE idVenta = @numVentaCB
                  END
            ELSE
                  BEGIN
                  UPDATE Ventas SET numBoletos=(numBoletos-1)
                  ,importeVenta=(importeVenta-@precioboleto)
                  WHERE idVenta = @numVentaCB
                  END
                 
            INSERT INTO Cancelaciones
           (idBoleto
           ,importe
           ,fechaCancelacion
           ,idCaja
           ,nombUsuario)
     VALUES
           (@idBoletoCB
           ,@precioboleto
           ,GETDATE()
           ,@idCajaCB
           ,@nomUsuarioCB)



            --si no hay errores comprometemos la transaccion
                  IF @@ERROR=0
                        BEGIN
                        SET @devolucionBoleto=@precioboleto
                             COMMIT TRAN
                        END
                  ELSE
                        BEGIN
                             RAISERROR('HA OCURRIDO UN ERROR (intente de nuevo)',16,1)
                             ROLLBACK
                        END


      END
GO

Corte de caja.

Para realizar el corte de caja basta con simples consultas del total de ventas y cancelaciones, crearemos un procedimiento almacenado para enviar los datos con parámetros de “output” a la aplicación en Visual Studio antes de cerrar la caja, solo como información para el usuario y pueda verificar el efectivo de caja con lo que marca el sistema.

CREATE PROCEDURE VerificaCorteCaja
@idCajaVC nvarchar(50),
@EfectivoIni money output,
@totalVentas money output,
@totalEfectivo money output,
@numVentasVC int output,
@boletosVendido int output,
@boletosCancelado int output,
@totalCancelaciones money output

AS
SET NOCOUNT ON
BEGIN TRAN

IF((SELECT abierta FROM Cajas WHERE idCaja=@idCajaVC)=1)
      BEGIN
            DECLARE @fechaAperturaMax datetime

            SET @fechaAperturaMax=(SELECT MAX(fechaApertura)
                                   FROM inicioCaja WHERE idCaja=@idCajaVC)

            IF NOT EXISTS(SELECT efectivoApertura FROM inicioCaja
                         WHERE idCaja=@idCajaVC and fechaApertura=@fechaAperturaMax)
                  BEGIN
                        SET @EfectivoIni=0
                  END
            ELSE
                  BEGIN
                        SET @EfectivoIni=(SELECT efectivoApertura FROM inicioCaja
                         WHERE idCaja=@idCajaVC and fechaApertura=@fechaAperturaMax)
                  END
            IF NOT EXISTS(SELECT importeVenta FROM Ventas
                                   WHERE idCaja=@idCajaVC and fechaVenta>=@fechaAperturaMax)
                  BEGIN
                  SET @totalVentas=0
                  END
            ELSE
                  BEGIN
                        SET @totalVentas=(SELECT SUM(importeVenta) FROM Ventas
                                   WHERE idCaja=@idCajaVC and fechaVenta>=@fechaAperturaMax)     
                  END
                 

            SET @totalEfectivo=@EfectivoIni+@totalVentas

            SET @numVentasVC=(SELECT COUNT(idVenta)FROM Ventas
                        WHERE idCaja=@idCajaVC and fechaVenta>=@fechaAperturaMax)
                       
            IF NOT EXISTS(SELECT numBoletos FROM Ventas
                        WHERE idCaja=@idCajaVC and fechaVenta>=@fechaAperturaMax)
                  BEGIN
                        SET @boletosVendido=0
                  END
            ELSE
                  BEGIN
                            
                        SET @boletosVendido=(SELECT SUM(numBoletos)FROM Ventas
                                   WHERE idCaja=@idCajaVC and fechaVenta>=@fechaAperturaMax)
                  END

            SET @boletosCancelado=(SELECT COUNT(idBoleto)FROM Cancelaciones
                                               WHERE fechaCancelacion>=@fechaAperturaMax )
                                              
            IF NOT EXISTS(SELECT idBoleto FROM Cancelaciones
                                               WHERE fechaCancelacion>=@fechaAperturaMax )
                  BEGIN
                        SET  @totalCancelaciones=0
                  END
            ELSE
                  BEGIN
                        SET @totalCancelaciones=(SELECT SUM(importe) FROM Cancelaciones
                                               WHERE fechaCancelacion>=@fechaAperturaMax )
                  END

            IF @@ERROR =0
            COMMIT TRAN
            ELSE
            BEGIN
                  RAISERROR('HA OCURRIDO UN ERROR EN CARGAR LOS DATOS INTENTE DE NUEVO',16,1)
                  ROLLBACK
            END

      END
ELSE
      BEGIN
                  RAISERROR('LA CAJA ESTA CERRADA',16,1)
                  ROLLBACK
      END
GO

Por ultimo creamos el procedimiento para realizar el corte de caja, cerrar la caja y actualizaremos al usuario que realizo la apertura de caja.

CREATE PROCEDURE RealizaCorte
@idCajaRC nvarchar(50),
@nomUsuarioRC nvarchar(50)

AS
SET NOCOUNT ON
BEGIN TRAN

IF((SELECT abierta FROM Cajas WHERE idCaja=@idCajaRC)=1)
      BEGIN
     
DECLARE
@fechaApeMax datetime,
@EfectivoIniRC money ,
@totalVentasRC money ,
@totalEfectivoRC money ,
@numVentasRC int ,
@boletosVendidoRC int ,
@boletosCanceladoRC int ,
@totalCancelacionesRC money


            SET @fechaApeMax=(SELECT MAX(fechaApertura)
                                   FROM inicioCaja WHERE idCaja=@idCajaRC)

            IF NOT EXISTS(SELECT efectivoApertura FROM inicioCaja
                         WHERE idCaja=@idCajaRC and fechaApertura=@fechaApeMax)
                  BEGIN
                        SET @EfectivoIniRC=0
                  END
            ELSE
                  BEGIN
                        SET @EfectivoIniRC=(SELECT efectivoApertura FROM inicioCaja
                         WHERE idCaja=@idCajaRC and fechaApertura=@fechaApeMax)
                  END
            IF NOT EXISTS(SELECT importeVenta FROM Ventas
                                   WHERE idCaja=@idCajaRC and fechaVenta>=@fechaApeMax)
                  BEGIN
                  SET @totalVentasRC=0
                  END
            ELSE
                  BEGIN
                        SET @totalVentasRC=(SELECT SUM(importeVenta) FROM Ventas
                                   WHERE idCaja=@idCajaRC and fechaVenta>=@fechaApeMax)
                  END
                 

            SET @totalEfectivoRC=@EfectivoIniRC+@totalVentasRC

            SET @numVentasRC=(SELECT COUNT(idVenta)FROM Ventas
                        WHERE idCaja=@idCajaRC and fechaVenta>=@fechaApeMax)
                       
            IF NOT EXISTS(SELECT numBoletos FROM Ventas
                        WHERE idCaja=@idCajaRC and fechaVenta>=@fechaApeMax)
                  BEGIN
                        SET @boletosVendidoRC=0
                  END
            ELSE
                  BEGIN
                            
                        SET @boletosVendidoRC=(SELECT SUM(numBoletos)FROM Ventas
                                   WHERE idCaja=@idCajaRC and fechaVenta>=@fechaApeMax)
                  END

            SET @boletosCanceladoRC=(SELECT COUNT(idBoleto)FROM Cancelaciones
                                               WHERE fechaCancelacion>=@fechaApeMax )
                                              
            IF NOT EXISTS(SELECT idBoleto FROM Cancelaciones
                                               WHERE fechaCancelacion>=@fechaApeMax )
                  BEGIN
                        SET  @totalCancelacionesRC=0
                  END
            ELSE
                  BEGIN
                        SET @totalCancelacionesRC=(SELECT SUM(importe) FROM Cancelaciones
                                               WHERE fechaCancelacion>=@fechaApeMax )
                  END


     
      INSERT INTO Cortes
           (idCaja
           ,nombUsuario
           ,numVentas
           ,numCancelaciones
           ,importeVentas
           ,importeCancelaciones
           ,efectivoTotal
           ,fechaCorte)
     VALUES
           (@idCajaRC
           ,@nomUsuarioRC
           ,@numVentasRC
           ,@boletosCanceladoRC
           ,@totalVentasRC
           ,@totalCancelacionesRC
           ,@totalEfectivoRC
           ,GETDATE())
          
       --se actualiza el usuario
             UPDATE Usuarios
             SET cajaAsignada=''
             WHERE nombUsuario=@nomUsuarioRC
          
       --se actualiza el estado de la caja
         UPDATE Cajas
         SET abierta=0
         WHERE idCaja=@idCajaRC
        
        
            IF @@ERROR =0
            COMMIT TRAN
            ELSE
            BEGIN
                  RAISERROR('HA OCURRIDO UN ERROR EN CARGAR LOS DATOS INTENTE DE NUEVO',16,1)
                  ROLLBACK
            END

     
     
     
      END
ELSE
      BEGIN
      RAISERROR('LA CAJA ESTA CERRADA',16,1)
      END
GO

Estos son los procedimientos almacenados que utilizaremos para crear nuestro sistema de 3 capas, la primera capa está terminada con los procedimientos almacenado los podemos probarlos ejecutándolos con el manejador de base de datos. Para todos aquellos que deseen aprender más sobre el lenguaje Transact-SQL les sugiero visitar esta excelente página con muy buenos tutoriales de varios lenguajes.[devjoker.com]

Gracias por seguirnos y les agradezco cualquier aporte y comentario ;) los espero en la próxima entrega.

Creación de relaciones y llenado de tablas.

2012-02-09T18:34:00.000-08:00

Que tal espero que estos tutoriales les ayuden con el desarrollo de su base de datos. Bien, pues en esta entrega nos basaremos en la creación de relaciones y llenado de tablas de nuestra base de datos de manera sencilla, primero lo haremos gráficamente y posteriormente mediante código Transact-SQL.

Creación de relaciones.

¿Que son las relaciones en una base de datos?

Para entender mejor que son las relaciones en las bases de datos me encontré esta explicación bastante clara en Internet.

Las relaciones permiten ver como se determinan los vínculos, la cardinalidad y las dependencias entre las tablas. Conceptualmente una relación es un vínculo que se forma entre dos tablas. Este vínculo se da gracias a las llaves primarias. que no son más que un campo que posee ciertas características especiales. Un campo que actúa de llave primaria (Primary key o simplemente PK) indica que cada registro se pueda identificar de otro, lo hace único e irrepetible. De este modo no pueden existir dos registros con el mismo valor de PK. Un campo que actúa como llave foránea (Foraing Key, o FK) a diferencia del PK se vincula (allí es cuando se hace la relación) con un campo PK de otra tabla y hace que su valor dependa de este PK. Es decir, si por ejemplo tenemos un PK = 1, el valor que asumirá la FK de la segunda tabla será FK = PK = 1. Decimos que se ha formado una relación, porque el valor de una se traslada o se asocia con la de otra. [answers.yahoo.com]

Forma Grafica:

Creamos un nuevo diagrama de base de datos, desplegamos los elementos de la base de datos en el “+”, Seleccionamos la carpeta Diagramas de base de datos, hacemos click con el botón derecho y click sobre Nuevo diagrama de base de datos.

Presionamos Agregar en la pantalla que nos aparece hasta terminar de agregar todas las tablas.

Ahora nos aparecerán gráficamente en la ventana de diagrama las tablas y sus columnas, para relacionarlas basta con seleccionar la llave primaria de la tabla que queremos relacionar y arrastrarla sin soltar el botón hasta la columna de la otra tabla de la cual será la llave foránea, soltamos el botón cuando nos posicionemos en la columna correcta, si nos equivocamos basta con cambiar la columna en la próxima ventana que nos aparecerá [como se muestra en las imágenes].

Podemos dejar el nombre de la relación por defecto, que es lo más recomendable, o pueden cambiar el nombre según sea el caso, presionamos el botón Aceptar.

En esta ventana la dejamos como se ve en la imagen, estas son las reglas para la comprobación de datos existentes, cuando se hace una inserción de una llave foránea [una llave foránea no es más que una llave primaria referenciada en otra tabla] primero comprueba que exista la llave primaria en la tabla a la que se hace referencia, para que así pueda existir un vinculo, igualmente cuando existe un borrado y actualización. Presionamos el botón Aceptar.

Como podemos ver las relaciones ya se han creado haremos esto con todas las tablas que tengan llaves foráneas, o solo a las que vamos a necesitar, a veces no es conveniente hacer una relación, pero hacemos un campo que hace referencia a una llave primaria de otra tabla.

Una vez que terminamos de haces todas nuestra relaciones guardamos nuestro diagrama de base de datos dando click en la pestaña de la ventana del diagrama y hacemos click en Guardar Diagrama1.

Ingresamos el nombre con el que guardaremos nuestro diagrama y listo.

Mediante Código Transact-SQL:

Las relaciones su pueden hacer alterando la tabla con la siguiente consulta:

Abrimos una Nueva Consulta. Y escribimos el formato de la consulta de la siguiente forma:

Primero hacemos referencia a la base de datos que usaremos:

USE TerminalAutobuses
GO

El formato para crea relaciones es el siguiente:

ALTER TABLE <<tabla_con_la_llave_foranea>>
ADD CONSTRAINT <<nombre_de_la_relacion>>
FOREIGN KEY(<<nombre_de_la_llave_foranea>>)REFERENCES <<tabla_de_la_llave_primaria>>

GO

Ejemplo:

Y presionamos Ejecutar. En este ejemplo creamos una relación con dos tablas, la tabla Boletos y la tabla Autobuses, la relación la llamamos fk_Boletos_Autobuses, la llave foránea es idAutobus de la tabla Boletos, y hacemos referencia que idAutubus es llave primaria de Autobuses. Así podemos ir creando todas las relaciones con nuestras tablas.

Las relaciones serán las siguientes;

*Llaves Primarias*	*Llaves Foráneas*
Choferes	Corridas
idChofer	idChofer
Corridas	Boletos
idCorrida	IdCorrida
Autobuses	Boletos
idAutobus	idAutobus
Sucursales	Boletos
idSucursal	idSucursal
	Cajas
	idSucursal
Cajas	InicioCaja
idCaja	IdCaja
	Cortes
	idCaja
	Cancelaciones
	idCaja
	Ventas
	idCaja
Usuarios	InicioCaja
nombUsuario	nombUsuario
	Cortes
	nombUsuario
	Cancelaciones
	nombUsuario
	Ventas
	nombUsuario

Llenado de tablas.

Podemos llenar las tablas fácilmente mediante la edición de filas, antes de hacer un llenado de tablas tenemos que tener en cuenta primero que nada las llaves primarias y la lógica de las relaciones, tenemos que crear llaves primarias para poder hacer referencia a las llaves foráneas, que son las mismas llaves primarias pero en otra tabla, es decir; tenemos que crear una Sucursal para poder crear una Caja, una Choferes para poder crear Corridas, Autobuses y Usuarios para poder crear un Inicio de Caja y venta de boletos, etc.

Nos posicionamos en la tabla a la que deseamos editar los datos, damos click con el botón derecho y seleccionamos Editar las primeras 200 filas.

Se abrirá la ventana de edición de tablas y vamos ingresando los datos de las tablas. Para confirmarlos solo falta con hacer clic en la zona donde está el “ * ” como indica la imagen donde se encuentra el puntero.Si ingresamos fechas debemos hacerla con el formato Año-Mes-Dia “0000-00-00”, los tipo bit se ingresaran como “True” o “False”.

Mediante código Transact-SQL:

Abrimos una nueva ventana de consulta y escribimos el código con el siguiente formato:

USE TerminalAutobuses
GO
INSERT INTO <<Nombre_Tabla>>
(<<Columna1>>
,<<Columna2>>
,<<Columna3>>
,....
)
VALUES
(<<Valor1>>
,<<Valor2>>
,<<valor3>>
,....
)
GO

Ejemplo:

Y presionamos Ejecutar. Así vamos llenando las tablas en las que necesitamos tener datos por el momento. Aquí los datos de nvarchar debemos encerrarlos entre comillas simples ‘ ‘ , los tipos Int y Money sin comillas, los Datetime pueden ir con comillas o sin ellas, los tipos bit se ingresan para verdadero como 1 y falso como 0.

Por el momento las tablas que no interesa llenar son las de:

Sucursal, por lo menos una sucursal.

Cajas, por lo menos una caja.

Usuarios, por lo menos un usuario.

Autobuses, dependiendo cuantas corridas se hagan.

Corridas, las que se deseen.

Choferes, dependiendo las corridas que pueda realizar el chófer.

Estas son las únicas tablas que necesitamos llenar para después manipular estos datos por medio de Visual y los Web Services.Y esto es todo por el momento, dudas o sugerencias pueden contactarme en los comentarios o en mi Twitter o Facebook Gracias.

Creación de base de datos y tablas con SQL Server 2008

2012-02-02T17:00:00.000-08:00

En esta entrega realizaremos la creación de la base de datos para la Terminal de Autobuses. Existen dos formas de crear la base de datos y las tablas en SQL Server, una es gráficamente y la otra mediante código, cabe resaltar que en este manual nos centraremos en cómo crear cada una de las actividades que necesitamos, pero no pretendemos explicar los diferentes tipos de utilización del código de SQL Server llamado Transact-SQL.

Forma Grafica:

La creación de una base de datos de forma grafica es de la siguiente manera:

Iniciamos el SQL Server Management Studio para abrir el manejador de base de datos.

En la conexión simplemente nos conectamos con Autentificación de Windows y el nombre del servidor que tiene predeterminado, y presionamos el botón de conectar.

Nos posicionamos en la parte izquierda en la zona del Explorador de Objetos, seleccionamos la carpeta de Bases de datos, pulsamos con el botón derecho del Mouse > Nueva base de datos.

En la pantalla que nos aparecerá para configurar la base de datos, en el Nombre de Base de datos escribimos TerminalAutobuses, para este proyecto la configuración de la base de datos la dejamos de manera predeterminada, para no meternos en mas descripción que no es el objetivo de este tutorial.

Bueno como vemos la base de datos ya esta creada en la carpeta de Bases de datos.

Lo siguiente que haremos será crear tablas. Existen demasiadas formas de diseñar una base de datos dependiendo las necesidades, lógica del sistema y el diseñador. Para nuestro proyecto nos basaremos en un diseño, el cual se recomienda que se siga para llevar la continuidad de todo el tutorial o si ya tienen experiencia en la programación pueden hacer su propio diseño.

Para nuestra base de datos las tablas serán las siguientes:

Autobuses

Nombre de columna

Tipo de dato/Tamaño

Valores nulos/llave

idAutobus

nvarchar 50

No Null (llave Primaria)

numAsientos

int

No Null

marca

nvarchar 50

No Null

modelo

nvarchar 50

No Null

fechaAdquisicion

datetime

No Null

Boletos

idBoleto

nvarhar 50

No Null (llave Primaria)

idCorrida

nvarhar 50

No Null

lugarDestino

nvarhar 50

No Null

lugarSalida

nvarhar 50

No Null

nombCliente

nvarhar 50

Null

edad

Int

No Null

idVenta

nvarhar 50

No Null

fechaSalida

Datetime

No Null

precio

Money

No Null

clase

nvarhar 50

No Null

numAsiento

int

No Null

idAutobus

nvarhar 50

No Null

idSucursal

nvarhar 50

No Null

Cajas

idCaja

nvarchar 50

No Null (llave Primaria)

idSucursal

nvarchar 50

No Null

abierta

Bit

No Null

Cancelaciones

idBoleto

nvarchar 50

No Null (llave Primaria)

importe

Money

No Null

fechaCancelacion

Datetime

No Null

idCaja

nvarchar 50

No Null

nombUsuario

nvarchar 50

No Null

Choferes

idChofer

nvarchar 50

No Null (llave Primaria)

nombre

nvarchar 50

No Null

apellidoPaterno

nvarchar 50

No Null

apellidoMaterno

nvarchar 50

No Null

domicilio

nvarchar 50

No Null

cuidad

nvarchar 50

No Null

estado

nvarchar 50

No Null

Corridas

idCorrida

nvarchar 50

No Null (llave Primaria)

lugarDestino

nvarchar 50

No Null

LugarOrigen

nvarchar 50

No Null

FechaSalida

Date

No Null

HoraSalida

time(0)

No Null

idChofer

nvarchar 50

No Null

idAutobus

nvarchar 50

No Null

precioAdulto

Money

No Null

precioNiño

Money

No Null

precioMayor

Money

No Null

tipoServicio

nvarchar 50

No Null

idSucursal

nvarchar 50

No Null

Cortes

idCaja

nvarchar 50

No Null(llave Primaria)

nombUsuario

nvarchar 50

No Null

NumVentas

nvarchar 50

No Null

numCancelaciones

int

No Null

importeVentas

money

No Null

importeCancelaciones

money

No Null

efectivoTotal

money

No Null

fechaCorte

datetime

No Null

inicioCaja

idCaja

nvarchar 50

(llave Primaria)

idsucursal

nvarchar 50

nombUsuario

nvarchar 50

fechaApertura

Datetime

efectivoApertura

Money

Sucursales

idSucursal

nvarchar 50

No Null (llave Primaria)

nombSucursal

nvarchar 50

No Null

calleSuc

nvarchar 50

No Null

coloniaSuc

nvarchar 50

No Null

ciudadSuc

nvarchar 50

No Null

estadosuc

nvarchar 50

No Null

Usuarios

nombUsuario

nvarchar 50

No Null (llave Primaria)

contraseña

nvarchar 50

No Null

cuentaHabilitada

Bit

No Null

realizaVenta

Bit

No Null

realizaCancelacion

Bit

No Null

realizaCorte

Bit

No Null

administrador

Bit

No Null

fechaInicio

Datetime

No Null

cajaAsignada

nvarchar 50

No Null

Ventas

idVenta

nvarchar 50

No Null (llave Primaria)

nombUsuario

nvarchar 50

No Null

idCaja

nvarchar 50

No Null

importeVenta

Money

No Null

fechaVenta

Datetime

No Null

numBoletos

Int

No Null

De forma grafica las tablas se crean de la siguiente manera:

Desplegamos la base de datos TerminalAutobuses en el ” + ” que tiene del lado izquierdo, seleccionamos la carpeta Tablas y con el botón derecho del Mouse > Nueva Tabla…

Después vamos llenando las tablas con los nombres de las columnas, el tipo de datos y si se permitirán valores nulos.

Para establecer la llave primaria en una columna se selecciona la columna y se da click con el botón derecho de mouse y seleccionar Establecer clave principal.

Una vez que terminamos crear las columnas y establecer la llave primaria, se guarda la tabla y se le asigna un nombre, damos click nuevamente con el botón derecho sobre la pestaña dbo.table y seleccionamos Guardar Table.

Aquí elegimos el nombre que queremos darle a la tabla, así una por una vamos creando las tablas.

Mediante Código Transact-SQL

Primero crearemos la base de datos:

Abrimos una ventana de consulta, para esto presionamos el botón Nueva consulta.

En la ventana de consultas ingresamos los siguientes comandos;

CREATE DATABASE <<Nombre_de_la_base>> en nuestro caso el nombre sera TerminalAutobuses y después presionamos el botón Ejecutar.

La base de datos ya esta creada ahora vamos a crear las tablas.

En la ventana de consulta borramos el código escrito y ahora escribimos los siguiente comandos para crear la tabla usuarios, Primero para hacer referencia a la base de datos que vamos a utilizar se escribe USE << Nombre_de_la_base >> Se pueden escribir varias consultas en la misma ventana de consultas, para separar cada consulta se utiliza la palabra clave GO para que no generar un error,

Podemos escribir después de USE TerminalAutobuses GO el código para crear la tabla o podemos ejecutar una por una cada instrucción, lo más recomendable es que se haga una por una ya que a veces se generan errores de código y es algo difícil identificar cuales comando se ejecutaron correctamente y cuáles no.

De la siguiente forma creamos una tabla mediante código Transact-SQL

CREATE TABLE <<Nombre_Tabla>>
( <Nombre_Columna1> <tipo_Dato(<tamaño>)> <valor_Nulo>
<Nombre_Columna2> <tipo_Dato(<tamaño>)> <valor_Nulo>
...)
GO

Un ejemplo para crear la tabla Autobuses seria de la siguiente manera, especificamos la llave primaria después del tipo y tamaño de dato, con la instrucción PRIMARY KEY :

CREATE TABLE Autobuses(
idAutobus nvarchar(50)PRIMARY KEY NOT NULL,
numAsientos int NOT NULL,
marca nvarchar(50) NULL,
modelo nvarchar(50) NULL,
fechaAdquisicion nvarchar(50) NULL
)
GO

Después solo presionamos el botón Ejecutar. Así crearemos cada una de las tablas hasta terminar con todas las tablas, esta es la forma de crear la base de datos mediante código Transact-SQL.

Y bien espero que esta primer tutorial de la primera entrega les ayude mucho para aprender a crear bases de datos y tablas fácilmente en SQL Server 2008, cualquier duda o sugerencia las pueden dejar en los comentarios y se las resuelvo con gusto, Gracias.

Correcta Instalación de SQL Server 2008

2012-01-22T19:57:00.000-08:00

En este tutorial aprenderemos la correcta instalación y configuración de SQL Server 2008, para realizar bases de datos y poder conectarlos con proyectos de Visual Studio.

Más información »

Microsoft en la Consumer Electronics Show 2012

2012-01-14T21:43:00.000-08:00

El International Consumer Electronics Show o (CES) (Feria Internacional de Electrónica de Consumo ) es un evento que se da cada año en el mes de enero en la ciudad de las Vegas Nevada de Estados Unidos. Aquí se muestran los productos de electrónica que apareceran para los consumidores.

Microsoft fue el que inauguró el evento y además también informo que ya no volvería a participar en otro CES, esto para controlar su propia agenda de anuncios y no sentirse presionados de tener nuevos modelos para fechas determinadas, durante una hora se hiso un recorrido a traves de imágenes y video de la trayectoria de la empresa como despedida.

El presidente ejecutivo de Microsoft, Steve Ballmer mostro el desarrollo de televisiones con internet, lazo el nuevo sistema operativo de Windows 8 al cual Microsoft le esta apostando todo, también se revelo como será la organización de las aplicaciones para el sistema y el mercado para la compra y descarga, menciono entre muchos otros que los fabricantes Ace, Tshiba, Dell, Samsung, HP y Lenovo ya preparan las computadoras especialmente construidas para Windows 8 sin dejar de recordar que la versión anterior, Windows 7, se podrá actualizar a Windows 8

También anuncio que la Kinect llegara a las computadoras este año a 250 dólares se trata de un dispositivo con nuevas cámaras, capaces de detectar movimientos a 50 cm, el Windows Phone con muchas más aplicaciones y el salto del Windows Phone a la conexión 4G y LTE (‘Long Term Evolution’)

Ballmer : ''No hay nada más importante para Microsoft que Windows, con Windows 8 reimaginamos el sistema operativo de principio a fin''

El evento Inicio el martes 10 y culmino este viernes 13 de enero, con 153.000 asistentes, 3.100 expositores, "El CES 2012 fue el show más espectacular de nuestra historia, generando más energía y entusiasmo a través de todas las tecnologías importantes de la industria", dijo el presidente y CEO de CEA Gary Shapiro.

Fuentes:

http://www.cesweb.org/
http://diario.latercera.com

http://www.lacapital.com.ar

Foto Oficial CES 2012

http://www.informador.com.mx/tecnologia

http://www.generaccion.com/noticia

¿Quien Soy?

2012-01-13T11:12:00.000-08:00

Josué Castillo Arias, Ingeniero en Sistemas Computacionales. Originario del puerto de Acapulco, actualmente vivo en Mexico, DF. soy desarrollador de software independiete, me especializo en desarrollo en C#, ASP.NET, Windows Phone, Java, bases de datos con MSSQL, PL-SQL, MySql, también desarrollo Aplicaciones web con PHP, Java, Bootstrap, Jquery, Javascript, DHTMLX, participé en el programa Microsoft Student Partner en el 2012 y estudie en el Instituto Tecnológico de Acapulco.

Desde mi niñez he tenido la curiosidad por saber como funciona la tecnología, empecé desarmando mis carros de control remoto para saber cual era el mecanismo los movía, ganando unas reprendas por destruirlos, mas tarde en mis primeros acercamientos con las computadoras llegaba al punto de no responder el sistema operativo por mi curiosidad de saber para que funcionaban todas sus características :) jaja.

“Cuanto más sabes, más te das cuenta de que no sabes nada” -Sócrates

Mis primeros pasos con la programación fueron diagramas de flujo sencillos, posteriormente con el lenguaje C++ llevarlos a la computadora, asi fui adentrándome en los lenguajes de programación como C#, SQL Server, Html, Php, Windows Phone, desarrollo un gusto por el diseño o manipulación de imágenes con Photoshop, las redes, los juegos, la inteligencia artificial, circuitos electrónicos.

“Dime y lo olvido, enséñame y lo recuerdo, involúcrame y lo aprendo”
— Benjamín Franklin

Siento la habilidad de aprender muy rápido en programación, lo disfruto muchísimo que me pasaría todo un día y la noche desarrollando código sin dormir, claro que eso seria algo pesado, me gusta compartir mis pequeños conocimientos con las nuevas generaciones desarrollar nueva tecnología y aprender mas sobre ella.

“Encuentra un trabajo que te guste y no volverás a trabajar ni un sólo día de tu vida”. -Confucio.

Este blog lo hago con el deseo de compartir y aprender juntos el conocimiento de la tecnología que esta corriendo en nuestra vida actualmente, de una manera fácil y sencilla atreves de pequeñas notas interesantes y noticias, ejemplos y todo lo que nos ayude a nuestro aprendizaje, y hagamos de las herramientas de hoy nos ayuden para crear mas conocimiento y resolverlos problemas de la vida cotidiana.