Desarrollo de aplicasiones web

lunes, 5 de agosto de 2013

validar datos de formularios

Validar datos de una forma sencilla.Es importante que no falten comas o ni comillas ya que de esto depende que reconosca cada regla, ademas del id.

estas primeras lineas son nesesarias, pero antes de esto debemos de crear un vinculo entre el formulario y esta hoja con la etiqueta <link href="nombre de hoja">.

$().ready(function(){
$('#informacion').validate({
debug:true,
ahora escribiremos las reglas o condiciones de los datos que se inrduciran
rules:{
'nombre':{ //esto es el id de campo donde se aplicaran dichas condiciones
required:true, // indica que este campo es requerido y no debe dejrse en blanco, de ser asi no //permitira avanzar mas
minlength:3 //indica l lonitud miima de caracteres que puede introducir
},
'pass':{
required:true,
rangelength:[5,10] //indica que debe escribir un numero que este entre 5 y 10
},
'pass2':{
required:true,
equalTo:'#pass' //la confirmacion de la contraseña sebe ser identica la contrseña
},
'edad':{
range:[18,40]
},
'sexo':{
required:true
}
},

ahora escribiremos los mensajes que debe de mostrar en caso de que no se cumplan las condiciones
para esto usaremos de nuevo el id entre comillas simples luego entre llaves la condicion y despes de dos puntos y entre comillas pondremos el mensaje, cada parrafo de mensage lo separaremos con una coma, estas son muy importantes ya que de no ser asi nos marcara errores y no se ejecutara

messages:{
'usuario':{
required:"Campo requerido",
minlegth:"Escriba un nombre válido"
},
'pass':{
required:"Debes escribir un password",
rangelength:"El password debe tener entre 5 y 10 caracteres"
},
'pass2':{
required:"Campo obligatorio",
equalTo:"No coincide con tu password"
},
'edad':{
range:"No tienes la edad adecuada"
},
'sexo':{
required:"Debes elegir una opción"
}
}
});
});

con estas dos lineas cerramos la vlidacion.

como insertar datos en base de datos con una pagina web

Veremos como insertar datos en una base de datos mediante una pagina web. para esto utilizaremos la conexion realizada antes, cabe mencionar que los nombres de variables y de la base de datos deben de ser identicos en la base de datos como en el codigo de la pagina web.

primero crearemos la hoja html usndo NetBeans como ya e explicado antes, luego comensremos a escribir el codigo.
primero aremos que esta hoja pueda llamar el metodo de conexion a base de datos que como ya dije es el que realizamos en el post anterior.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="clases.Productos" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
escribbiremos codigo java para lo que usaremos la siguiente conbinacion de carcteres, esto cda ves que quieramos escribir codigo java
<%

con una variable de instancia llamaremos los atributos de la clase y la base de datos ala que conecta
Productos p=new Productos();
accedemos a lo que contenga la variable usaremos el set pata insertar valores.
p.setProducto(request.getParameter("producto"));
p.setPrecio(Integer.parseInt(request.getParameter("precio")));
p.setCantidad(Double.parseDouble(request.getParameter("cantidad")));
p.setFecha(request.getParameter("fecha"));
y llamamos el metodo para que haga las operaciones
p.calcularTotal();
e imprimimos el resultado de esa operacion
out.print(p);
%>
ahora imprimiremos que gurdamos en una tabla para esto crearemos la tabla que como ya sbemos td son las columnas y tr son las filas.

<table border="1" cellspacing="5">
<thead>
<td>
Dato
</td>
<td>
Informacion
</td>
</thead>
<tbody>
<tr>
<td>
Nombre de producto
</td>
<td>
usaremos codigo java para imprimir los datos usando el get de la variable.
get es para extraer valores de las variables.
<%
out.print(p.getProducto());
%>
</td>
</tr>
<tr>
<td>
Precio
</td>
<td>
<%
out.print(p.getPrecio());
%>
</td>
</tr>
<tr>
<td>
Cantidad
</td>
<td>
<%
out.print(p.getCantidad());
%>
</td>
</tr>
<tr>
<td>
Fecha
</td>
<td>
<%
out.print(p.getFecha());
%>
</td>
</tr>
</tbody>
</tbody>
</tbody>
</table>
</body>
</html>

Conexion a base de datos

Hola que tal, hoy veremos como conectar una pagina web a una base de datos, esto es relativamente sencillo solo crearemos un metodo para el cual usremos el nombre de la base de datos un usuario de bd y la contraseña si es que su base de datos la contiene.

entonces comensaremos el codigo es el siguiente.

public class Bd { //Se declaran las variales

Connection conn; //Variable conn de tipo Connection. Nos sirve para establecer la conexion.

Statement smt; //Variable smt de tipo Statement. Nos sirve para ejecutar sentencias sql

ResultSet rs=null; //Variable rs de tipo ResultSet. Nos sirve para almacenar el resultado de una consulta SQL

String mensaje=""; // Variable para desplegar mensajes.

/*Ahora realizamos un metodo para conectarse a la base de Datos

para conestarse a una base de datos se necesitan tres cosas

1.-El nombre de la base de datos 2.- usuario 3.- pasdword

El throws nos sirve para que el error no lo maneje el metodo el SQLException es solo para que se encarge de los errores de sintaxis SQL*/

public Bd(String bd, String user, String password) {

// Bd recibe el nombre de la base de datos

// user recibe el nombre del usuario

// password recibe la contraseña del usuario

String url="jdbc:mysql://localhost/"+bd;

try{

Class.forName("com.mysql.jdbc.Driver");

conn=DriverManager.getConnection(url,user,password); // abre la conexion y se guarda en conn

smt=conn.createStatement(); //smt queda preparada para realizar ejecutar sentencias sql

mensaje= "Coneccion realizada correctamente a la base de datos :"+url;

//System.out.println(mensaje);

}

catch(SQLException e){

mensaje="Error al conectar a la base de datos \nError:"+e;

//System.out.println(mensaje);

} catch (ClassNotFoundException ex) {

Logger.getLogger(Bd.class.getName()).log(Level.SEVERE, null, ex);

}

}

public String desconectarBd(){

String texto;

try{

conn.close();

texto="BD desconectada exitosamente";

}

catch(Exception e){

texto="Error al desconectar la BD";

}

return texto;

}

public ResultSet consultaBd(String sql){

try {

rs=smt.executeQuery(sql);

mensaje="consulta ejecutada correctamente";

}

catch(Exception e){

mensaje="Error en la consulta a la tabla de la BD "+e+" sql "+sql;

}

return rs;

}

public String actualizaBd(String sql){

String texto;

try{

smt.executeUpdate(sql);

texto="Actualización correcta";

}

catch(Exception e){

texto="Error al ejecutar la actualización "+e+" sql "+sql;

}

return texto;

}

}

aclaro que el autor del codigo no soy yo, pero me parece muy claro de entender, el credito de ese codigo es mi profesor de desarrollo de aplicasiones web.

suerte espero que les sirva.

sábado, 13 de julio de 2013

Carateres especiales en HTML

Cuando nesesitamos insertar aluna letra acentuada u otro caracter que no esta en el alfabeto nesitamos un codigo, los cuales son los siuientes:

para usar estos caracteres solo ponemos el codigo del caracterdeseado en el luga donde se pone ese caracter.

ejemplo:

guio'n se escribe de la siguiente manera guioacuten

letras acentuadas

a = &aacute

é = &eacute

í = &iacute

ó = &oacute

ú = &uacute

ñ = &ntilde

Caracteres especiales generales

el primer caracter es el simbolo que se mostrara y el resto es el codigo,

¡ ¡

¢ ¢

£ £

¤ ¤

¥ ¥

¦ ¦

§ §

¨ ¨

© ©

ª ª

« «

¬ ¬

® ®

¯ ¯
° °
± ±
² ²
³ ³
´ ´
µ µ
¶ ¶
· ·
¸ ¸
¹ ¹
º º
» »
¼ ¼
½ ½
¾ ¾
¿ ¿
À À
Á Á
Â Â
Ã Ã
Ä Ä
Å Å
Æ Æ
Ç Ç
È È
É É
Ê Ê
Ë Ë
Ì Ì
Í Í
Î Î
Ï Ï
Ð Ð
Ñ Ñ
Ò Ò
Ó Ó
Ô Ô
Õ Õ
Ö Ö
× ×
Ø Ø
Ù Ù
Ú Ú
Û Û
Ü Ü
Ý Ý
Þ Þ
ß ß
à à
á á
â â
ã ã
ä ä
å å
æ æ
ç ç
è è
é é
ê ê
ë ë
ì ì
í í
î î
ï ï
ð ð
ñ ñ
ò ò
ó ó
ô ô
õ õ
ö ö
÷ ÷
ø ø
ù ù
ú ú
û û
ü ü
ý ý
þ þ
ÿ ÿ

Caracteres matemáticos, griegos y símbolos para HTML
SímboloCódigoƒ &fnof;
Α Α
Β Β
Γ Γ
Δ Δ
Ε Ε
Ζ Ζ
Η Η
Θ Θ
Ι Ι
Κ Κ
Λ Λ
Μ Μ
Ν Ν
Ξ Ξ
Ο Ο
Π Π
Ρ Ρ
Σ Σ
Τ Τ
Υ Υ
Φ Φ
Χ Χ
Ψ Ψ
Ω Ω
α α
β β
γ γ
δ δ
ε ε
ζ ζ
η η
θ θ
ι ι
κ κ
λ λ
μ μ
ν ν
ξ ξ
ο ο
π π
ρ ρ
ς &sigmaf;
σ σ
τ τ
υ υ
φ φ
χ χ
ψ ψ
ω ω
ϑ &thetasym;
ϒ &upsih;
ϖ ϖ
• •
… …
′ ′
″ ″
‾ &oline;
⁄ &frasl;
℘ &weierp;
ℑ &image;
ℜ &real;
™ ™
ℵ &alefsym;
[ [
] ]
← ←
↑ ↑
→ →
↓ ↓
↔ ↔
↵ &crarr;
⇐ ⇐
⇑ &uArr;
⇒ ⇒
⇓ &dArr;
⇔ ⇔
∀ ∀
∂ ∂
∃ ∃
∅ ∅
∇ ∇
∈ ∈
∉ ∉
∋ &ni;
∏ ∏
∑ ∑
− −
∗ &lowast;
√ √
∝ &prop;
∞ ∞
∠ &ang;
∧ &and;
∨ &or;
∩ ∩
∪ ∪
∫ ∫
∴ &there4;
∼ &sim;
≅ &cong;
≈ ≈
≠ ≠
≡ &equiv;
≤ ≤
≥ ≥
⊂ ⊂
⊃ ⊃
⊄ &nsub;
⊆ &sube;
⊇ &supe;
⊕ &oplus;
⊗ &otimes;
⊥ &perp;
⋅ ⋅
⌈ &lceil;
⌉ &rceil;
⌊ &lfloor;
⌋ &rfloor;
⟨ &lang;
⟩ &rang;
◊ &loz;
♠ &spades;
♣ &clubs;
♥ &hearts;
♦ &diams;

Para reemplazar caracteres significativos del marcado HTML
& &
< <
> >
Œ &OElig;
œ &oelig;
Š &Scaron;
š &scaron;
Ÿ &Yuml;
ˆ &circ;
˜ &tilde;
&ensp;
&emsp;
 
– –
— —
‘ ‘
’ ’
‚ &sbquo;
“ “
” ”
„ &bdquo;
† &dagger;
‡ &Dagger;
‰ &permil;
‹ &lsaquo;
› &rsaquo;
€ €

viernes, 5 de julio de 2013

conectar base de datos con PHP

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

<?php

function Conectarse()

{

if (!($link=mysql_connect("localhost","usuario","Password")))

{

echo "Error conectando a la base de datos.";

exit();

}

if (!mysql_select_db("base_datos",$link))

{

echo "Error seleccionando la base de datos.";

exit();

}

return $link;

}

$link=Conectarse();

echo "Conexión con la base de datos conseguida.<br>";

mysql_close($link); //cierra la conexion

?>

</body>

</html>

donde

#coneccion con el MDB en MySql
$link = mysql_connect("NombreHost","Usuario","contraseña")
or die ("no se ha podido conectar");

#Seleccion de la base de datos a utilizar
mysql_select_db("dbprueba")
or die("Error al tratar de selecccionar esta base");

#cierra la base de datos
mysql_close($link);
?>

Este video te puede ayudar a hacer mejor la conexion a la base de datos, suerte !

http://www.youtube.com/watch?v=qjUQD7NDYBs

sábado, 29 de junio de 2013

Poner video en HTML

jueves, 20 de junio de 2013

Hola, hy les mostrare el codigo para hacer una taba en html, es muy sencillo, el codigo es el siguiente.

<table width="60%" cellspacing="5" cellpadding="0">

<tr>

<td>Fila 1, celda 1</td>

<td>Fila 1, celda 2</td>

</tr>

<tr>

<td>Fila 2, celda 1</td>

<td>Fila 2, celda 2</td>

</tr>

</table>

donde la etiqueta <table></table> dentro de esta se pondran las para defnir las dimenciones de las celdas usaremos:
Espero que les sirva como ven esta es una tabla sencilla de dos columnas y dos filas, se puede hacer mas grande y agregar mas caraceristicas. les dejo un link donde pueden obtener informacion mas detallada.

columnas <td></td> y dentro de las columnas van las
filas <td></td>

whidth para el ancho.
cellspacing para la separacionn entre celdas
cellpading
para la separacion entre el borde de la celda y el texto.

http://www.aprenderaprogramar.com/index.php?option=com_content&id=516:crear-tablas-html-atributos-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-caption-o-titulo-cu00719b&Itemid=192

Buscar este blog