¿hasta donde podre llegar?

pues pues pues, se me dio por hacer este tutorial gracias a este post:

¿que contiene la aplicación?

• agregación de nueva fila por medio de un formulario a la tabla
• eliminación de una fila obteniendo su id para modificar la base de datos por ajax
• validación de campos de texto enteros, texto y formato e-mail con jquery.validate
• actualización de bases de datos con ajax
• formato de aplicacion usando css

¿que olvide añadir?

• la opción de editar fila, por ejemplo un enlace en la fila y al hacerle click obtener sus datos y modificarlos. no tengan problema en un futuro tutorial hare un ejemplo similar a este.

imagen de la aplicación

descarga

puedes descargar la aplicacion desde el siguiente enlace.

cualquier duda bienvenida sea.

tabs o pestañas en nuestro buen español, antiguamente solia usar un muy excelente plugin pata tabs llamado idTab, pero al momento de actualizar jQuery a la versión 1.3.2 dejo de funcionar en ie6, paro completamente el desarrollo de mis labores.

asi que ya habiendo leido algo sobre la creación de plugins en jQuery decidi intentar crear uno, pues a ver como me va:

Descargar: DEMO

estructura html

pues, la estructura html es muy sencilla, y usual, debe tener la siguiente forma:

<div id="tab" class="tab">
<ul>
	<li><a href="#tab1">Internet</a></li>
	<li><a href="#tab2">Wap</a></li>
	<li><a href="#tab3">jQuery</a></li>
</ul>
<div id="tab1">

Contenido para internet</div>
<div id="tab2">

Contenido para tecnologías WAP</div>
<div id="tab3">

Contenido para plugins jQuery</div>
<div class="pie">Este div es opcional</div>
</div>

pueden observar que existe una lista, y un conjunto de divs, creo que la idea ya esta definida, por cada click que haga en un enlace de la lista, hara ocultar todos los divs y mostrara al div que tenga como referencia.

el estilo

bueno, no se si sea necesario agregar el código del estilo, pero para los curiosos ahi les va

@charset "utf-8";
/* CSS Document */

body{
	font-family: "Lucida Sans Unicode";
	font-size: 11px;
}

.tab{
	margin: auto;
}
.tab ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.tab ul li{
	float: left;
	padding: 7px 0px;
	border-right: 1px solid #fff;
}
.tab ul li a{
	padding: 7px 14px;
	background-color: #CCC;
	text-decoration: none;
	color: #369;
}
.tab ul li a:hover{
	background-color: #ddd;
}

.tab .selected{
	background-color: #eee;
}

.tab div{
	clear: both;
	padding: 20px;
	*padding-top:10px;
	border: 1px solid #CCC;
}
p{
	margin: 0px 0px 20px 0px;
}
.ultimo{
	margin: 0px 0px 0px 0px;
}
.tab div.pie{
	text-align: right;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

el plugin jQuery: tab

a continuación explico el code del plugin

jQuery.fn.tab = function() {
	var div = jQuery(this);
	$(div).find("div:not(.pie)").hide().eq(0).show();
	$(div).find("ul li a").eq(0).addClass('selected');
	$(div).find("ul li a").click(function(){
		$(div).find("ul li a").removeClass('selected');
		$(this).addClass('selected');
		$(div).find("div:not(.pie)").hide();
		$( $(this).attr('href') ).show();
	});
}

la descripción

linea 01: creo la función con el nombre tab
linea 02: almaceno en una variable llamada div todo el contenedor div
linea 03: ocultamos todos los divs de contenido situados dentro del contenedor, a eXepción del div que tiene la clase .pie, seleccionamos el primer div con eq(0) y luego lo mostramos
linea 04: ubicamos el primer item de la lista y le agregamos la clase de estilo .selected, dara un efecto de enfoque

linea 05: aqui viene un evento de tipo click al momento de hacer click en uno de los items de la lista.
linea 06: una vez hecho click removemos a todos los enlaces de la lista la clase .selected
linea 07: ahora al enlace de la lista que hicimos click añadimos la clase de estilo .selected, para dar el efecto de enfocado
linea 08: ocultamos nuevamente a toodos los div a eXepción del div de clase .pie (este div es opcional agregarlo, en mi caso lo agrego para agregar botones como agregar, modificar, cancelar, etc)…
linea 09: ubicamos el nombre del div a mostrar tomando el atributo del enlace ‘href’ con ‘attr’: $(this).attr(‘href’), y mostramos al div enlaZado.

añadiendo las dependencias

añadimos jQuery, nuestro plugin, y una hoja de estilos.

ejecutando el plugin

pues, sencillamente…

	$(document).ready(function(){
		$("#tab").tab();
	});

luego de destruir un poco el blog buscando e indagando, por fin pude agregar código a mi blog en wordrpress.com, crei que siempre seria con algun plugin, pero bueno, era muy sencillo…

segun nuestro amigo wikipedia jQuery es:

jQuery es una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

jQuery, se puede descargar desde el siguiente enlace, actualmente se encuentra en la versión 1.3.2, tube algunos problemas, ya que solia usar su versión 1.2.6 y algunos plugins no andaban bien en la 1.3.2 como idTabs (muy bueno), jClock, etc.

primeramente se enlaza la libreria

<script language="javascript" type="text/javascript" src="su_carpeta/jquery-1.3.2.min.js"></script>

<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    alert('hola mundo');
  )};
</script>

el alert ‘hola mundo’ se enviara una vez cargada totalmente la estructura de la web, eso nos da la facilidad de ejecutar código javascript ’solo’ cuando se a cargado totalmente la estructura web, asi nos evitaremos muchos problemas…

en los proximos días estare actualizando este espacio, agregando los plugins que han pasado por mis manuus.

segun mi estimado amigo wikipedia, ajax es:

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

pues, no puedo criticar el concepto, es el correcto, ajax, viene a ser en simples palabras “un conjunto de tecnologías que hacen posible el requerimiento de algun ‘dato’ desde el cliente al servidor sin necesidad de recargar la página”…

el enlace completo de wikipedia y ajax esta en el siguiente enlace.

en todo caso el concepto que “si”, puedo criticar, es el de un compañero que encontre caminando por el centro, solia decir: “las aplicaciones actuales son modernas al usar ‘tecnologías’ como ajax”, de lo que puedo decir lo siguiente: ajax, no es una nueva tecnología, ajax es un conjunto de tecnologías ya existentes.

segun wikipedia: AJAX es una combinación de cuatro tecnologías ya existentes:

XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.

Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.

El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.

XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente.

ajax, simplemente son peticiones sin refresco completo de la página, a lo que mi compañero contesto, con ajax, puedo dar animaciones a las cajas de texto, saltar una por una, crear marcos con animaciones, textarea con formato, etc etc… pues, eso es javascript, o cualquier otro lenguaje de lado del cliente que de efectos de movimientos u otras cosillas, y no es ajax.

el tema inicial fue el toolkit de desarrollo que se puede integrar en visual studio .net 2005 & 2008, tiene el mal nombre de “Ajax toolkit”, digo mal nombre, por que se suele confundir el termino ajax con efectos en aplicaciones web.

puedo decir que existen frameworks de javascript que tienen clases para trabajar con ajax, un buen ejemplo es el framework mootools, contiene infinidad de efectos javascript, css, xhtml, etc etc, ademas de la facilidad de dar peticiones al servidor por el cliente sin necesidad de refrescar la página por completo, en si, ajax.

al terminar de conversar con dicho compañero, decidi escribir algo al respecto, bueno, espero lea un poco mas al respecto.

fx.slide esta desarrollado para mootools, esta clase nos permite dar efectos para poder ocultar divs con movimientos, horizontales, verticales.

mas información la encuentras en fx.slide desde mootools en el siguiente enlace.

pues, el ejemplo que les tengo agregado, les sirve para tener que evitar generar bloques de código javascript para cada div que deseen dar este efecto.

el efecto que estoy aplicando es toggle, es un efecto de ocultación y muestreo con movimiento.

requisitos: framework mootools, lo puedes descargar desde la misma pagina de mootools en el siguiente enlace.

primeramente incluimos el .js de mootools:

<script type="text/javascript" charset="utf-8" src="extras/js/mootools/mootools.svn.js"></script>

seguidamente agregamos la función para instanciar la clase fx.slide y dar el valor toggle

<script>
var Collapsables = {
init:function(){
var list = $$("a.encendedor");
list.each(function(e){
target = e.href.split("#")[1];
e.fx = new Fx.Slide(target);
e.addEvent('click', function(el){
ev = new Event(el);
this.fx.toggle();
ev.stop();
});
e.fx.hide();
});
}
}
window.addEvent('domready', Collapsables.init);
</script>


finalmente agregamos html, para dar a ejecutar nuestro ejemplo:

<a href="#noticia" class="encendedor">noticia</a>
<div id="noticia">
<p>las ultimas noticias disponibles</p>
<p>contenido</p>
<p>contenido</p>
</div>
<a href="#importante" class="encendedor">importante</a>
<div id="importante">
<p>es importante, recordar lo dificil al caminar.</p>
<p>contenido</p>
<p>contenido</p>
</div>

como ven, en las etiquetas que seran los encendedores del toggle se les da como atributo class=’encendedor’, y se les enlace el nombre del div a mostrar y ocultar con href=’#nombre_del_div’

simplemente eso. como ven no es nada dificil, ahi ustedes con su imaginación, aplicaria css, para dar mas atractivo visual, pero el código es limpio, para su mejor compresión, css sera otro tema.

en el siguiente post, indicare como instalar apache, php y mysql limpiamente, en windows, en mi caso windows xp, puede que existan diferencias en otros sistemas windows.

primeramente, necesitamos descargar los ficheros de instalación y compresos, para ello podemos encontrarlos en los siguientes enlaces.

• apache, descargar el instalador para win con soporte OpenSSL.
• php, descargar el fichero compreso en zip
• mysql, es recomentable descargar el instalador, pesa menos y la función es la misma.

instalando apache

ejecutamos el instalador de apache (en mi caso descargue la versión apache_2.2.9-win32-x86-openssl-0.9.8h-r2), rellenar los campos de dominio con 127.0.0.1, el nombre del servidor con 127.0.0.1 y el email del adminsitrador, por debajo existen 2 opciones, instalar apache como servicio ó inicio manual, en mi caso uso el segundo para evitar cargar apache innecesariamente cada vez que enciendo la pc. asi que por mi lado tendre que activarlo manualmente cada vez que desee trabajar con el.

los siguientes pasos de instalación en apache son sencillos, ubicacion, directorios, etc.

instalando php 5

descomprimimos la carpeta php y la ubicamos en alguna zona facil de ubicar (en mi caso esta ubicada en d:archivos de programaphp).

en la carpeta php encontraremos ficheros con extención .dll, en mi caso 19 .dlls y las copiamos en el directorio c:windowssystem32.

ahora necesitamos editar el fichero php.ini situado en la misma carpeta php.

nombrare las lineas mas interesantes, cada uno podra ver con mas detalle depediendo de sus necesidades, en mi caso la linea register_globals, se encuentra en Off, vienen a ser las variables globales, es decir, todas las variables trabajadas vienen a ser super globales, eso no es muy bueno, segun he leido en futuras versiones esta vendra por defecto en Off, algunos suelen trabajar en On, y no entiendo como le hacen, pero bueeeno, son habitos de programación…

otra sección importante son las extensiones, con ellas podremos agregar infinidad de funciones a nuestro php, generación de thumbnails, conexion a mysql, mssql, bdase, pgsql, zip, etc ,etc, para poder activarlas, simplemente se elimina el comentario “;”

primeramente tendremos que ubicar el directorio de las dlls, por defecto se encuentra en php/ext, asi que ubicamos la linea extension_dir e indicamos la ruta, en mi caso vendria a ser asi:

extension_dir = "D:/archivos de programa/php/ext"

ahora para activar las dlls, nos ubicamos en la seccion Windows Extensions.

para activar mysql tenemos que activar la siguiente linea quitando el “;”

;extension=php_mysql.dll

tendremos que quitar el comentario quedando asi

extension=php_mysql.dll

ahora imaginen que deseen subir archivos mediante su web, necesitamos editar las secciones de subidas via HTTP, para ello ubicamos la linea upload_tmp_dir donde se debe mostrar la carpeta temporal donde se almacenaran nuestros ficheros a subir. en mi caso creare una carpeta llamada upload en la misma php “D:/archivos de programa/php/upload”, es importante usa “/” y no “”.

ahora para determinar el tamaño máximo de un fichero a subir se tiene que modificar la linea upload_max_filesize, por defecto esta en 2M, por mi parte modificare a 40M, asi podre subir ficheros de hasta 40 megabytes. ademas me exigen subir pdf o libros escaneados, ese es el motivo de tener un alto tamaño.

ahora si pensamos trabajar con sessiones (lo mas probable es que si), necesitamos ubicar una carpeta donde se almacenaran las sessiones temporalmente, para eso en la linea session.save_path indicamos la carpeta temporal, por mi parte creare una carpeta llamada session ubicada en “D:/archivos de programa/php/session”.

una vez editado el php.ini a nuestras necesidades cojemos dicho fichero y la pegamos en C:/windows.

enlazando apache con php

ahora es momento de decir al servidor apache que tenemos php!, asi que necesitamos modificar el fichero httpd.conf, ubicado en la misma carpeta de apache/conf. puedes abrirlo en cualquier editor de texto.

aqui a diferencia de php.ini los comentarios se activar con “#” y no con “;”.

ubicamos la sección Dynamic Shared Object (DSO) Support y en el listado de LoadModule agregamos el modulo php5module y seleccionamos su directorios, en mi caso seria agregar la siguiente linea

LoadModule php5_module "D:/archivos de programa/php/php5apache2_2.dll"

directorio de trabajo

ahora bien, mi directorio por trabajo seria en apache/htdocs, en caso deseen cambiar se tendria que modifica la linea DocumentRoot, por mis habitos de trabajo mi direccion seria la siguiente:

DocumentRoot "D:/www/php"

indice de directorio, compilación y codigo de ejemplo

imaginen si ingresamos a una carpeta localhost/mi_carpeta, por defecto buscaria el fichero index.html, en nuestro caso deseamos que tambien busque index.php, para eso necesitamos modificar la linea DirectoryIndex. en mi caso quedaria algo similar a esto:

<IfModule dir_module>
DirectoryIndex index.html index.php
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
</IfModule>

asi, en caso no encuentre un index.html, seguira buscando el index.php, en caso no se encuentre, marcara error. AddType application/x-httpd-php .php indica que las páginas con extensión .php seran compiladas, en caso que desees compilar pagina con extensión .html y algo de php inscrito, tendrias que agregar .html a la lista. AddType application/x-httpd-php-source .phps indica los archivos que no seran compilados, pero que se mostraran en formato códiho, muy util en caso se desee presentar código php sin compilar.

instalar mysql

asdf

POST ACTUALIZADO: asasdf asd fasd fasd fadsf asdfasdasdfdf s

la idea que tenia sobre los dbf, era que estan trabajadas en fox, pues, luego de chocar con un pequeño trabajo que implica la “conexión” (conexion, no es la palabara adecuada, luego explicare el por que) hacia ellos.

los dbf a diferencia de otro modo de almacenamiento de datos, son ficheros de texto limpios (abre un dbf en un procesador de texto, y notaras el contenido.), son tablas, un solo dbf representara una tabla.

para trabajar con dbf, es necesario activar la libreria php_dbase, situada en el listada de extensiones de php.

activar extensiones para soportar ficheros dbf

para activar ingresamos al php.ini, y ubicamos la seccion dynamic extensions, buscamos php_dbase.dll

extension=php_dbase.dll

activar, quitando el signo de comentario “;”

extension=php_dbase.dll

conexion

su conexion en si no la es, pues trata de solo ubicar y leer un fichero de texto, para ellos hay que seleccionar el .dbf con los siguientes pasos:

$db = dbase_open('extras/bd/adcidia.dbf', 0);
if ($db) {
$numero_registros = dbase_numrecords($db);
for ($i = 1; $i <= $numero_registros; $i++) {
// procesar cada uno de los registros
$temp = dbase_get_record($db, $i);
echo $temp[0];
echo $temp[1];
echo $temp[2];
}
}

la primera linea selecciona el fichero dbf con la función dbase_open(‘directorio’, valor), donde valor tiene tres funciones 0: solo lectura, 1:solo escritura, 2: lectura y escritura, en mi caso tengo activada la opcion: solo lectura.

en la segunda linea, tengo la condición en caso no se ejecute la “conexión” adecuadamente.

en caso lo sean, con la funcion dbase_numrecords, puedo obtener el numero de registros contenidos en la bdf, esto es muy importante en caso se deseen recorrer los registros completos de la tabla dbf, ya que no existe otro metodo de recorrido completo.

for escoje el punto inicial de partida, en caso sean 470 registros, for dara 470 registros como si fuera un puntero.

dbase_get_record(‘conexion’, ‘registro’), obtiene los valores contenidos en los campos en un arreglo vectorial, para su impresión se necesitan leer el arreglo, $temp[0] viene a ser el primer campo, $temp[1] el segundo campo y asi seguidamente.

mas información

mas información sobre dbase, puedes ver en wikipedia en el siguiente enlace.
mas información sobre las funciones dbase en php puedes visitar este enlace.

antes suponia que las conexions distintas a mysql con php, serian algo complicadas, hasta que leyendo en algunos foros me “entere”, de lo sencillo que puede ser.

microsoft sql o en el entorno php conocido como mssql, tiene gran cantidad de funciones “agradables”.

en mi caso tube la necesidad de trabajar con el, ya que la migracion de vb6 a php, me impedia usar otro gestor de bd, pero como conecto la bd?.

activar php con soporte mssql

primeramente, se debe entener que php tiene extenciones (.dll) agregadas (que desde un inicio suelen estar desactivadas por defecto) para poder trabajar con mssql.

para activarlas se ingresa al php.ini, se puede encontrar en la carpeta donde este alojada su php.

;extension=php_mssql.dll

y activarlas quitando los “;” del inicio.

extension=php_mssql.dll

luego tendremos que reiniciar el apache, para que pueda tomar los cambios realizados en php.

conexion

para la conexión “básica”, son necesarios los datos del servidor, usuario y clave de acceso, asi como el nombre de la base de datos a trabajar.

$con = mssql_connect(".", "sa", "") or die("Error en la conexión a MySql");
mssql_select_db("biblioteca", $con);

en la primera linea, creamos la conexión, servidor, usuario, clave. en la siguiente linea se selecciona la base de datos.

consultas

el trabajo es muy similar a mysql, asi que a cualquiera con cierta experiencia se le sera facil adaptarse:

$sql = "select nombre from alumno";
$alu = mssql_query($sql);
while ($rs_alu = mssql_fetch_assoc($alu)){
echo $rs_alu['nombre'];
}

como ven, no es muy dificil el trabajo de consultas, ya es cosa de uno poder expandir sus funciones.

mantenimiento

$sql = "insert into alumno values ('hector2c')";
mssql_query($sql);
$sql = "update alumno set nombre='conejo' where nombre='hector2c'";
mssql_query($sql);
$sql = "delete from alumno where nombre='conejo'";
mssql_query($sql);

espero la explicación, sea clara, cualquier comentario, no duden en escribir.

mmm, usualmente existe la necesidad de almacenar gran cantidad de texto, ya sean descriptivos, comentarios, noticias, etc, etc. en donde hay necesidad de darle un formato especial como: texto en negrita, cursiva, alineaciòn, items.

que con formato plano, no se pueden llegar a realizar (al menos que se almacenen en formato html, de lo cual es muy fatigoZo.).

para necesidades como esa existe TinyMCE, un editor WYSIWYG desarrollado en javascript, su función es agregar funcionalidades ya mencionadas (y otras muuchas mas) a todos los textarea agregados en la página.

para agregar en la página seleccionada a trabajar, solo se necesita llamar al fichero .js desde el directorio donde fue descargando, ejemplo:

<script type="text/javascript" src="../extras/js/tiny_mce/tiny_mce.js"></script>

una vez enlazada el .js, se necesitan dar los atributos a los textarea, existen distintos modos de presentación, desde los mas básicos, hasta los mas complejos, con opciones que nuunca usare jeje, para mas info puedes ver este enlace.

en mi caso agrego los atributos simples con el siguiente código:

<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>

todos los textarea de la página tomaran los atributos simples del TinyMCE. librerias como esta, hacen que buenas aplicaciones sean rápidas en desarrollar, atractivas, efectivas y que dan mucho valor agregado a trabajos hogareños o de trabajo.

pueden ver un acabado sencillo, pero muy util.

para mas información pueden visitar su web oficial en el siguiente enlace.

en mi pequeña vida como analisista y desarrollador de aplicaciones web, es necesario no solo aplicar funciones basicas a la aplicación, mas alla de aquella costumbre se puede agregar el valor en dinamismo.

mootools es un framework en base a javascript que ayudar al desarrollador implementar aplicaciones web dinámicas de muy alto nivel, simplemente agregando cortas lineas de código.

entre los principales ejemplos aplicados podemos encontrar ajax, manejo de divs, acordeones, movimiento de bloques, efectos de estilos, etc, etc.

es tan amplio su desarrollo que he desidido crear una categoría especialmente para mootools

conforme pase el tiempo añadire ejemplos y modos de empleo.

la página oficial de mootools la pueden encontrar aqui
los ejemplos y demos los pueden encontrar aqui