Lechediaz

Hola, este es mi primer post y quiero enfocarlo a aquellas personas que como yo, estamos aprendiendo ASP.NET MVC. Como siempre Microsoft brinda muy buena documentación de sus tecnologías y pienso que deberías comenzar por visitar este link . Que en resumen te dice que MVC es una arquitectura que separa una aplicación en tres componentes: el Modelo, la Vista y el Controlador. En el Modelo se desarrollan todas las reglas del negocio. En la Vista se realiza lo que se presenta al usuario y el Controlador se encarga de responder a las peticiones del usuario. nota: MVC no es una arquitectura creada por MIcrosoft, es una plantada muchísimo antes y que es aplicada en muchos ambientes, te dejo la tarea de curosear un poco del tema y su historia. También puedes encontrar un curso en Microsoft Virtual Academy acerca de MVC en español, aquí está el link Vamos a jugar un poco con esto... 1. Abres tu Visual Studio (yo uso el 2012). 2. Seleccionas nuevo proyecto y posteriormente eliges ASP.NET MVC 4 Web Application. 3. A continuación nos ofrecen varias plantillas donde: Empty: es una aplicación como su nombre lo indica vacía, donde tendras que hacer la mayor parte del trabajo; una buena opción para los que saben lo que hacen.Basic: nos ofrece un poco de ayuda con nuestra aplicación, con algunas carpetas y demás configuraciones necesarias, elegiremos esta . Internet Application: nos hace gran parte del trabajo, con un formulario de inicio de sesión, una base de datos local, algunas vistas, estilos css, muy buena opción para arrancar.Intranet Application: Muy parecida a la anterior opción, con la diferencia que permite inicio de sesión con tu usuario Windows. Mobile Application: es una aplicación más orientada a dispositivos móviles. Las demás plantillas no las he estudiado, así que les queda de tarea. Una vez seleccionada la plantilla procedemos a la carpeta AppStart y abrimos la clase RouteConfig.cs con el fin de explicar cómo funciona el enrutamiento en las aplicaciones MVC. Quienes hayan hecho aplicaciones WebForms notaran que las direcciones url eran algo parecido a esto: http://dominio/nombreAplicacion/Inicio.aspx Verás en MVC no es necesario colocar la extensión y es un poco distinta, como vemos en el archivo RouteConfig.cs la ruta por defecto es de la forma: {controller}/{action}/{id}, y se toman unos valores predeterminados los cuales indican que la primera vez que inicies la aplicación se ubicará en la siguiente URL: http://dominio/nombreAplicacion/Home/Index , ¿por qué no se pone el Id?, porque es opcional, aquí dejo una tabla que explica el comportamiento de estas rutas. Bien, si seguimos explorando las carpetas, nos encontramos con App_data donde se supone irá el acceso a datos o algo así, Content se guardan los estilos CSS de la aplicación, Scripts se ponen los archivos JavaScript que vayamos creando, pero existen unas carpetas especiales que son precisamente Controllers, Models y Views (ya supondrán que deberían ir en cada una de ellas). Si en este momento ejecutas la aplicación te encontrarás en apuros, jejeje mentiras, solo una pequeña indicación que nos dice que no existe un archivo, y es que como hablamos hace un momento, esta intentando acceder al index del controlador Home… pero si miramos en Controllers no hay Home… Vamos a crearlo! 1. Haz clic derecho sobre la carpeta Controllers, selecciona Add(añadir) y luego selecciona Controller. 2. Luego le damos un nombre al controlador, es importante seguir el patrón que nos muestra el Visual Studio NombreControlador+Controller esto facilita la búsqueda de archivos… En nuestro Caso será HomeController. 3. Nos ofrece varias plantillas, pero por el momento seleccionamos Empty y ok. Ya tenemos nuestro controlador Home, que tiene un método denominado Index y retorna una Vista… ejecutamos la aplicación para ver qué ocurre. Ahora nos indica que no encuentra una vista, hagámosla!, Acá hay dos opciones haciendo clic sobre el método o sobre la carpeta. Nos presenta varias opciones que más adelante entraremos en detalle por el momento damos el nombre de Index y posteriormente ok. Si nos fijamos en la carpeta Views, se creó una subcarpeta llamada Home y contiene un archivo llamado Index.cshtml. Si escribimos un poco de HTML y ejecutamos la aplicación se darán cuenta que están dando los primeros pasos en ASP.NET MVC. Nota: Discúlpenme si no hice el típico “Hola mundo”, me gusta variar. Ah y te recomiendo el libro Programming ASP.NET MVC 4 por Jess Chadwick, Todd Snyder, and Hrusikesh Panda de la editorial OReilly. Bueno, no hiciste un software para la NASA, pero estas empezando y espero seguirte acompañando, eso es todo por hoy, espero te haya gustado y esperes por el siguiente post.

Saludos a todos aquellos que estamos dominando al MVC, quiero disculparme por no compartir con anterioridad, verán soy una persona ocupada entre el trabajo y la universidad (gracias a Dios). En el post anterior dimos un vistazo muy rápido a lo que nos vamos a medir, pues bien, hoy trateremos el modelo. Primero trabajaremos con un modelo que construiremos para trabajar en memoria y posteriormente nos adentraremos a la maravilla del Entity Framework. Como he mencionado nos enfocaremos en el modelo, aunque pasaremos algo de código en las vistas y controladores, el tema central es el modelo. En el modelo va toda la lógica que necesitamos para que el negocio funcione y se subdivide en varias capas, podemos manejar la capa de acceso a datos, de entidades, lógica, etc. Vamos a preparar el terreno creando una nueva aplicación de asp.net MVC 4 y usaremos la plantilla básica. A modo de ejemplo vamos a suponer que trabajamos en Taringa! y estamos en sus inicios, entonces simplemente vamos a tener dos entidades Usuario y Post, Vamos a añadirlas a nuestro proyecto con unas propiedades muy elementales que satisfagan nuestras necesidades iniciales en nuestra carpeta Models. Ahora crearemos un controlador donde trabajaremos para trabajar con los datos que queremos. En esencia se deberían crear 2 controladores uno para manejar lo realcionado con los usuarios y otro para sus post, pero para no complicar las cosas vamos a hacerlo en uno solo. Al cual llameremos PostController y seleccionamos una plantilla de controlador en blanco. Bien, para tener unos datos disponibles vamos a añadir unas propiedades de tipo lista y en el constructor del controlador vamos a cargarlos, así. Muy bien, ahora vamos a hacer que al iniciar la aplicación veamos el listados de usuarios y al hacer clic en uno de ellos podremos ver sus posts. Para ello simplemente pasamos la lista como parámetro al método View() que está retornando en la acción Index, lo que hemos hecho se conoce como "pasar el modelo a la vista". Listo, ahora vamos a la vista y desarrollemos lo que queremos mostrar. Al momento de añadir la vista te aparecerá una ventana de dialogo, vamos a decirle que crearemos una vista fuertemente tipada y que usaremos la plantilla para una lista. Te generará un código parecido a este. No te preocupes si no doy mucho detalle en esta parte, porque me lo reservo para próximos posts, pero si quieres investigar y jugar un poco con esto, no dudes en hacerlo. Hasta ahora vamos bien, queremos que al dar clic sobre el nombre del usuario podamos ver sus post, simplemente modificamos los elementos]@Html.ActionLink() y especificamos la ruta que queremos. (Este renderizará una etiqueta .Le vamos a decir que el texto será "Ver posts", la acción será "VerPosts" (la añadiremos al controlador) y como valores de la ruta, pasaremos el id del usuario. Ahora en el controlador añadimos la siguiente acción, pero esta vez consultamos con Linq los post del usuario seleccionado y lo pasamos a la vista, procedemos igual que el paso anterior. Ahora, para efectos de ver los resultados al inicial la aplicación, vamos a editar la ruta por defecto, recuerda que por defecto busca el controlador Home y la acción Index, en nuestro caso pondremos el controlador Post. Ejecución: Bien, este fue un ejercicio muy sencillo, básico, no se ve muy bonito, lo sé, pero más adelante vamos a pulir todas estas piezas de tal forma se conviertan en obra de arte Espero hayan disfrutado el post y muchas gracias por pasar. Acepto cualquier sugerencia o crítica constructiva que queiran aportar.

¡Hola de nuevo!, lo prometido es deuda, aquí estoy con una nueva entrega acerca de formularios y el uso de AJAX para mejorar la experiencia del usuario. No se si alguna vez han visto que en algunos canales de televisión aparece en la parte de abajo una franja con mensajes que la gente envía desde su celular, pues bien hoy haremos algo parecido, sólo que algo más taringuero :v. Nota: La idea me la dío en uno de los comentarios de mi anterior post , gracias lince. Este proyecto está organizado de la siguiente forma: controladores: Contiene los archivos .PHP que van a dar respuesta a las peticiones que hace el cliente.css: Contiene los estilos CSS de nuestra aplicación.js: Contiene nuestros códigos en JavaScript, incluyendo librerías de terceros.modelos: Contiene las clases que hacen parte de nuestra lógica de negocio.sql: Contiene nuestros scripts de SQL que queramos ejecutar, ahí está el código para nuestra base de datos.Raiz del proyecto: Contiene las diferentes vistas (páginas) de nuestra aplicación. Importantísimo el archivo config.php, pues este define algunos parámetros que nos serán útiles. Gráficamente es así: Te pido que por favor ejecutes primero el script de la base de datos, para crear la base de datos y tener unos datos iniciales. Exploremos los archivos modelos/Class.Conexion.php: Contiene una clase que permite que hagamos uso de la conexión a la base de datos, ejecutar sentencias y demás. Está muy bien documentada por si quieres analizar o ampliar su funcionamiento. Nota: Debes cambiar el valor de la variable SERVIDOR si no estás trabajando en un servidor local, también puedes usar el valor de localhost config.php: Contiene algunas variables que nos permiten acceder a ciertas ubicaciones, urls importantes que vamos a usar en la aplicación, también hay algunas variables constantes. Este archivo se debe incluir en cualquier otro archivo PHP donde queramos hacer uso de estas variables (que nos ahorran trabajo, por supuesto). Nota: Debes cambiar el valor de la variable $path al nombre del directorio raíz en medio de los slash, en mi caso es ejemplo_2 index.php: Básicamente es la página principal donde se muestran los mensajes de texto enviados por la gente y podemos ver un video mientras tanto (simulando el TV XD). Al comienzo del archivo se encuentra la lógica para obtener los mensajes de texto y ya en la parte inferior la lógica para mostrarlos, veremos como se ve visualmente más adelante en la ejecuciòn de la aplicaciòn. Cabe destacar que estamos usando una librería en JavaScript para simular la etiqueta <marquee>, puesto que esta ya no será soportada en el futuro, dejo un link para más info acerca de la librería . Ah y tambièn usamos jquery formulario_mensaje.php: Contiene el formulario que usaremos para enviar nuestros mensajes de texto, veremos como se ve visualmente más adelante en la ejecuciòn de la aplicaciòn. controladores/enviar_mensaje.php: Contiene la lógica necesaria para controlar la peticiòn POST, validar el contenido del mensaje, intentar insertar el mensaje en la base de datos y devolver un objeto JSON con la información de la operación. js/mi_js.js: Contiene nuestra lógica para controlar el evento submit del formulario para enviar los mensajes, ademas tiene también la ejecución de la libreria marquee, para que los mensajes se vean con este efecto en el index.php Ejecución de la aplicación Bueno chicos, eso fué todo, espero que les haya gustado y Si quieres el link de este proyecto, por favor pìdemelo en un MP especificando el nombre de este post. Espero que comprendas, los espero en el próximo capítulo. Y también quiero arrancar con una gama de ejercicios que se hacen cuando inicias en la programación, llamados #MeSalioEnUnQuiz, espero que los sigas, .

Hola a todos, vuelvo a ustedes después de mucho tiempo sin escribir, la verdad descuidé tanto estos post que no renové el dominio de mi blog y lo perdí. Bueno pero no es excusa para seguir con estos pequeños pero sustanciosos tutos, espero lo disfruten. Hoy vamos a tratar algo que alguna vez en nuestra vida como programador web nos va a tocar, el famosísimo AJAX, pero tranquilo, no es nada del otro mundo, hace parte de una de las características que ofrece la librería de jQuery. Usaremos PHP, jQuery (AJAX), y html 5 barato, para mostrarles lo sencillo que puede ser enviar una petición POST al servidor y trabajar con el resultado sin necesidad de hacer la recarga de la página, sino de una manera que sea más agradable y que no haga que nuestra página halla sido hecha por un retrasado mental. Oh, lo olvidaba, al final daré el link para que puedas descargar el proyecto, sino ¡¿qué clase máquina sería yo?!. Iniciamos con el archivo index.php: Este contiene nuestro formulario con el que queremos capturar el nombre del usuario y su edad (Que ingenioso), para después imprimirlo, el contenido de este es el siguiente: ADVERTENCIA: Mi nivel de paint es muy bajo, no se burlen plox. Esto con un poco de CSS se verá así en nuestro navegador: Como ven no es la gran cosa, sólo un formulario que pide el nombre y la edad.... pero lo interesante es lograr que no suceda el post back. Pero antes veamos el contenido del archivo controlador.php, que es que obtiene los datos enviados desde el fomulario y responde la petición: Como notamos, una vez que obtenemos el nombre y la edad, lo concatenamos a una cadena y devolvemos la misma, veamos esto sin usar AJAX: ASCO, pero calma, ya le daremos solución observa el contenido de el javascript que vamos a incluir a nuestra página; La mágia ocurre aquí, donde configuramos nuestro objeto AJAX y básicamente hacemos lo que está comentado: $.ajax({ url : formulario.attr( "action" ), // Dirección a la que enviamos la info. data : datosEnviar, method : "post", // El tipo de petición (get o post) success : function (datosRecibidos) { // Si la petición se hizo de forma correcta mostramos la info. formulario.find( ".mensaje" ).html(datosRecibidos); }, error : function (err) { // En caso de error mostramos una alerta. alert("Un error: " + err.responseText); } }); Este objeto se puede configurar de muchas formas, de acuerdo a tu necesidad, visita la documentación para más información, en este cortísimo tutorial es algo muy simple, pero te prometo que haremos otros ejercicios complejos, incluso si queires proponer hazlo desde los comentarios. En nuestro archivo index.php añadimos estas dos líneas: <script src="jquery-1.11.2.min.js" type="text/javascript"></script> <script src="mi_js.js" type="text/javascript"></script> La primera contiene la librería jQuery que es necesaria para usar AJAX, de lo contrario nos veremos muy frustrados intentando hacer esto con peticiones XMLHttpRequest, estos amigos, nos ahorraron mucho tiempo. Ahora veamos esto con la mágia de AJAX: UFFF mejoró mucho ¿no?, bueno no es tan impactante, pero en otras ocasiones si sentirás una diferencia enorme, en cuanto a la experiencia del usuario. Aquí el link para que lo descargues lince. ;D Bueno eso es todo por hoy, espero les haya gustado, ¡saludos!.

GIF Hola de nuevo a todos, en esta oportunidad vamos a mostrar un ejemplo simple de los conocidos Cascade Dropdown, estos funcionan de tal manera que al momento de hacer una eleccion de una lista desplegable principal, en la siguiente lista desplegable se actualizan los valores seleccionables que dependen de la principal. Para entender mejor esto consideremos el siguiente ejemplo. Tenemos amigos de distintas ciudades, si quisieramos filtrar amigos por ciudad el resultado esperado si selecciono la ciudad de Neiva sería este: Éste es un claro ejemplo de los Cascade Dropdown, en una página web fácilmente pueden haber tres o más, depende del requerimiento, lo que queremos buscar es que esta experiencia sea fácil y no requiera hacer Postback, sino que sea dinámico, para ello hice un proyecto con la siguiente estructura (un poco conocida ya): No voy a mostrar el contenido de cada uno de estos archivos, pero si voy a comentar acerca de los más importantes aquí (o al menos los que juegan el papel que nos interesa). En index.html encontrarán dos listas desplegables para seleccionar una ciudad y un amigo respectivamente, según como hemos venido comentando al seleccionar una ciudad, en la lista desplegable de amigos se deben actualziar a los que pertenecen a la misma. En mi_js.js se encuentra la lógica que me permite hacer las peticiones asíncronas para poder cambiar las opciones de la lista desplegable de amigos según la ciudad deseada. En funciones.php se encuentran los métodos de consulta de información en la base de datos, que serán consumidos por los controladores. El controlador obtener_amigos_de_ciudad.php es el encargado de utilizar el método de consulta de amigos en la ciudad que se requiere. Esta es la aplicación en tiempo de ejecución: Por último y no menos importante éste proyecto lo pueden consultar en mi repositorio de GitHub. Si tienes dudas o sugerencias escríbelas en los comentarios o mándame un MP, estamos para mejorar.

Buenos días Creo que a muchos (si no es que a todos) nos pasó que luego de la última actualización del Windows 10 se muestra una unidad casi llena, esto es molesto porque a cada nada saca una notificación de "Poco espacio en el disco". Bueno me aburrí y busqué la forma de solucionarlo y ya que lo logré quiero compartirlo con ustedes mis amigos vírgenes que me hacen reír a diario. Primero que todo miré en el administrador de discos y esa Unidad es una tal "Partición de OEM", si quieren saber que es eso pueden leerlo aquí, básicamente en esa partición están los programas de configuración de fábrica, entonces no querrás borrarla, sólo ocultarla. Para ello hacemos esto: Presionas Windows + R y escribes diskpart le das en Aceptar, luego aceptas que se ejecute como administrador. Luego escribes list volume, para observar las unidades que tenemos en el disco duro. Identificas cuál es el volumen que ahora se muestra en Windows y nos jode la vida, en mi caso el Volumen 2, y escribes select volume 2. Finalmente le remueves la letra a la unidad con el comando remove letter F (en mi caso se puso la F, ustedes pondrán la que se le asignó) Y eso es todo, la unidad ya no se muestra en el explorador de archivos y no aparece esa notificación fastidiosa. La ñapa: Si la quieren mostrar de nuevo simplemente luego de seleccionar el volumen le escriben assing letter F (o la letra que le quiera poner y que no esté en uso). Saludos.

Hola amigos de T!, los tengo muy abandonados y pido perdón por eso. Pero he vuelto y en esta ocasión quiero empezar una gama de ejercicios que normalmente uno realiza en los inicios de la programación, ya sea en la Universidad, el colegio o como pasatiempo y usando diferentes lenguajes C#, PHP, JavaScrip, SQL, etc. He decidido llamarle #MeSalioEnUnQuiz, espero te guste esta extraña modalidad y si conoces otra solución o quieras compartir la solución usando tu lenguaje favorito o simplemente compartir algo, no dudes en hacerlo, pero siempre con respeto Comencemos: Herramientas que vamos a utilizar hoy: Editor de código favorito. (SublimeText, Visual Studio Code, Bloc de notas )HTML5 (HTML, CSS3 y JavaScript)No más de 10 minutos de tu tiempo Enunciado del ejercicio : Crear un programa que permita mostrar la tabla de multiplicar que el usuario desee, además permite que el usuario ingrese el número hasta donde se debe multiplicar. La tabla iniciará la multiplicación desde el número uno por lo tanto el número límite debe ser mayor o igual a 1. Solución: La solución de este ejercicio se hará en un sólo documento HTML, algo que no es muy recomendado, pero debido a la simplicidad del ejercicio lo haré de esta forma. Además para las imágenes uso Paint XD Lo primero que haremos es declarar las variables de tipo entero: tabla: para guardar la tabla que vamos a calcular.limite: para guardar el número hasta donde debemos multiplicar.Ambos los vamos a obtener usando el método prompt() de JavaScript, que permite que aparezca una ventana y podamos ingresar un valor, el resultado lo convertimos a entero y lo guardamos en las respectivas variables. Como tenemos que validar que la variable limite sea mayor o igual a 1, utilizaremos un ciclo do-while para esto. Posteriormente mostraremos la tabla haciendo uso de un ciclo while. La ejecución del programa sería algo así: Pedimos la tabla de multiplicar Pedimos el límite Muestra la tabla de multiplicar Sé que no se puede apreciar muy bien, por eso si quieres el link de este proyecto, por favor pìdemelo en un MP especificando el nombre de este post. Espero que comprendas. Espero que te haya gustado, como te diste cuenta es un ejercicio express y no requiere de mucho tiempo o conocimientos para realizar. Si tienes alguna duda o aporte, no dudes comentar